/* ============================================
   PAGE LOAD
   ============================================ */

body {
    opacity: 0;
    animation: pageLoad 400ms ease forwards;
    animation-delay: 50ms;
}

@keyframes pageLoad {
    to { opacity: 1; }
}

/* ============================================
   NAV PILL ENTRANCE
   ============================================ */

.nav-pill {
    opacity: 0;
    transform: translateX(-50%) scale(0.85);
    animation: navPillEntrance 600ms var(--reveal-easing) forwards;
    animation-delay: 100ms;
}

@keyframes navPillEntrance {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

/* ============================================
   HERO ENTRANCE (page-load, not scroll)
   ============================================ */

/* Hero name uses per-character animation (charReveal) — no translateY here */
.hero__tagline,
.hero__subtitle,
.hero__actions,
.hero__footer,
.hero__scroll-hint,
.hero__reel-progress {
    opacity: 0;
    transform: translateY(30px);
}

.hero--loaded .hero__tagline {
    animation: heroEntrance var(--hero-duration) var(--reveal-easing) forwards;
    animation-delay: 600ms;
}

.hero--loaded .hero__subtitle {
    animation: heroEntrance var(--hero-duration) var(--reveal-easing) forwards;
    animation-delay: 750ms;
}

.hero--loaded .hero__actions {
    animation: heroEntrance var(--hero-duration) var(--reveal-easing) forwards;
    animation-delay: 900ms;
}

.hero--loaded .hero__footer {
    animation: heroFadeIn var(--hero-duration) var(--reveal-easing) forwards;
    animation-delay: 1200ms;
}

.hero--loaded .hero__scroll-hint {
    animation: heroFadeIn var(--hero-duration) var(--reveal-easing) forwards;
    animation-delay: 1400ms;
}

.hero--loaded .hero__reel-progress {
    animation: heroFadeIn var(--hero-duration) var(--reveal-easing) forwards;
    animation-delay: 1400ms;
}

@keyframes heroEntrance {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================
   SCROLL REVEAL SYSTEM
   ============================================ */

[data-reveal] {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity var(--reveal-duration) var(--reveal-easing),
        transform var(--reveal-duration) var(--reveal-easing);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Directional variants */
[data-reveal="up"]    { transform: translateY(var(--reveal-distance)); }
[data-reveal="down"]  { transform: translateY(calc(var(--reveal-distance) * -1)); }
[data-reveal="left"]  { transform: translateX(calc(var(--reveal-distance) * -1)); }
[data-reveal="right"] { transform: translateX(var(--reveal-distance)); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="scale"] { transform: scale(0.95); }

/* Stagger delays */
[data-reveal-delay="1"] { transition-delay: var(--reveal-stagger); }
[data-reveal-delay="2"] { transition-delay: calc(var(--reveal-stagger) * 2); }
[data-reveal-delay="3"] { transition-delay: calc(var(--reveal-stagger) * 3); }
[data-reveal-delay="4"] { transition-delay: calc(var(--reveal-stagger) * 4); }
[data-reveal-delay="5"] { transition-delay: calc(var(--reveal-stagger) * 5); }
[data-reveal-delay="6"] { transition-delay: calc(var(--reveal-stagger) * 6); }
[data-reveal-delay="7"] { transition-delay: calc(var(--reveal-stagger) * 7); }
[data-reveal-delay="8"] { transition-delay: calc(var(--reveal-stagger) * 8); }

/* ============================================
   HERO CHARACTER REVEAL
   ============================================ */

@keyframes charReveal {
    from {
        opacity: 0;
        transform: translateY(100%) rotateX(-80deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

.hero__char {
    opacity: 0;
    transform: translateY(100%) rotateX(-80deg);
}

.hero--loaded .hero__char {
    animation: charReveal 600ms var(--reveal-easing) forwards;
    animation-delay: calc(200ms + var(--char-index) * 40ms);
}

/* ============================================
   HERO REEL & SCROLL ANIMATIONS
   ============================================ */

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@keyframes scrollPulse {
    0%   { top: -50%; }
    100% { top: 100%; }
}

@keyframes reelProgress {
    from { width: 0%; }
    to   { width: 100%; }
}

@keyframes reelFadeIn {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1); }
}

/* ============================================
   CARD HOVER MEDIA ZOOM
   ============================================ */

.card {
    overflow: hidden;
}

.card__media {
    transition: transform 600ms var(--reveal-easing);
}

.card:hover .card__media {
    transform: scale(1.03);
}

/* ============================================
   ACCESSIBILITY: REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero__name,
    .hero__tagline,
    .hero__subtitle,
    .hero__actions,
    .hero__footer,
    .hero__scroll-hint,
    .hero__reel-progress,
    .hero__char {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero__reel-video {
        transition-duration: 0ms !important;
    }

    .hero__scroll-line::after {
        animation: none !important;
    }

    .hero__reel-dot--active::after {
        animation: none !important;
        width: 100% !important;
    }

    .nav-pill {
        opacity: 1 !important;
        transform: translateX(-50%) !important;
    }

    body {
        opacity: 1 !important;
    }
}