/*
 * Motion layer: progressive enhancement only.
 * The `motion-ready` class is set on <html> by an inline head script when
 * JavaScript runs and reduced motion is not requested. Hidden starting states
 * depend on that class, so every section stays readable without scripts.
 */

:root {
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-progress {
    position: fixed;
    z-index: 40;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: 0 50%;
    pointer-events: none;
}

@keyframes motion-rise {
    from {
        opacity: 0;
        translate: 0 24px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes motion-frame-in {
    from {
        clip-path: inset(100% 0 0 0 round 52px 8px 52px 8px);
    }
    to {
        clip-path: inset(0 0 0 0 round 52px 8px 52px 8px);
    }
}

@keyframes motion-draw {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.motion-ready .hero-copy > * {
    animation: motion-rise 760ms var(--motion-ease-out) backwards;
}

.motion-ready .hero-copy > :nth-child(2) {
    animation-delay: 120ms;
}

.motion-ready .hero-copy > :nth-child(3) {
    animation-delay: 200ms;
}

.motion-ready .hero-copy > :nth-child(4) {
    animation-delay: 280ms;
}

.motion-ready .hero-copy > :nth-child(5) {
    animation-delay: 360ms;
}

.motion-ready .hero-copy > :nth-child(6) {
    animation-delay: 440ms;
}

.motion-ready .portrait-frame {
    animation: motion-frame-in 1100ms var(--motion-ease-out) 200ms backwards;
}

.motion-ready .hero-visual .gold-rule {
    transform-origin: 0 50%;
    animation: motion-draw 900ms var(--motion-ease-out) 500ms backwards;
}

.motion-ready .expertise-card .expertise-line {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 900ms var(--motion-ease-out) 200ms;
}

.motion-ready .expertise-card.is-visible .expertise-line {
    transform: scaleX(1);
}

.motion-ready .skill-item {
    opacity: 0;
}

.motion-ready .skill-item.is-visible {
    opacity: 1;
    animation: motion-rise 620ms var(--motion-ease-out) backwards;
    animation-delay: calc(var(--motion-index, 0) * 70ms);
}

@media (hover: hover) and (pointer: fine) {
    .motion-ready .portrait-frame > * {
        transform: translate3d(calc(var(--parallax-x, 0) * -14px), calc(var(--parallax-y, 0) * -14px), 0) scale(1.06);
        transition: transform 700ms var(--motion-ease-out);
    }

    .motion-magnetic {
        translate: var(--magnetic-x, 0px) var(--magnetic-y, 0px);
        transition: translate 320ms var(--motion-ease-out), transform 180ms ease, background 180ms ease;
    }

    .cursor-ring {
        position: fixed;
        z-index: 60;
        top: 0;
        left: 0;
        width: 34px;
        height: 34px;
        margin: -17px 0 0 -17px;
        border: 1px solid var(--gold);
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
        transition: opacity 240ms ease, scale 280ms var(--motion-ease-out), background-color 240ms ease;
    }

    .cursor-ring.is-visible {
        opacity: 1;
    }

    .cursor-ring.is-muted {
        opacity: 0;
    }

    .cursor-ring.is-active {
        scale: 1.6;
        background-color: #cfbd8c1f;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-progress,
    .cursor-ring {
        display: none;
    }
}