/* ==========================================================
   animations.css
   All motion is opt-in. When prefers-reduced-motion is set,
   this entire block is skipped — no keyframes, no hidden
   states. JS respects this flag before adding reveal classes.
   Part of: Mohammed Shehzad Khan Portfolio v3
========================================================== */

@media (prefers-reduced-motion: no-preference) {

    /* ── Keyframes ──────────────────────────────────────── */

    @keyframes hero-fade-up {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes hero-fade-in {
        from {
            opacity: 0;
            transform: scale(0.97);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* ── Hero entrance — staggered, top-to-bottom ───────── */
    /* animation-fill-mode: both holds the from-state before
       the delay fires, preventing a flash. */

    #hero .eyebrow {
        animation: hero-fade-up 0.6s ease both;
    }

    #hero h1 {
        animation: hero-fade-up 0.65s 0.1s ease both;
    }

    #hero .hero-description {
        animation: hero-fade-up 0.65s 0.2s ease both;
    }

    #hero .button-group {
        animation: hero-fade-up 0.65s 0.3s ease both;
    }

    #hero .hero-meta {
        animation: hero-fade-up 0.65s 0.4s ease both;
    }

    #hero .hero-image {
        animation: hero-fade-in 0.9s 0.15s ease both;
    }

    /* ── Scroll-reveal ──────────────────────────────────── */
    /* SAFETY-NET MECHANISM (Phase 1.2 fix).
       Content is visible by DEFAULT. Only the JS-added
       .js-reveal-ready class may hide-then-reveal. This
       guarantees no section can remain hidden on mobile:
       the worst case is a section that fades in slightly
       later, never a section that never appears. */

    .js-reveal-ready {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.55s ease, transform 0.55s ease;
    }

    .js-reveal-ready.js-reveal-visible {
        opacity: 1;
        transform: none;
    }

    /* ── Header scroll shadow ───────────────────────────── */

    .site-header.is-scrolled {
        box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
    }

}

/* ── Reduced-motion override ─────────────────────────────── */
/* When the user has requested reduced motion, no reveal
   classes are ever added by JS, so content stays visible
   with zero layout shift. This block is a defensive
   guarantee in case the media query is not honoured. */

@media (prefers-reduced-motion: reduce) {
    .js-reveal-ready {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}