/* ─────────────────────────────────────────────────────────────────────────
   SCROLL-DRIVEN ANIMATIONS (2024+ CSS feature)
   Uses animation-timeline: scroll() and view()
   Feature-detected in JS; fallbacks ensure content is always visible
───────────────────────────────────────────────────────────────────────── */

/* ── Scroll progress hue shift (root timeline) ─────────────────────── */
@supports (animation-timeline: scroll()) {
  :root {
    animation: hue-pan linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 100%;
  }
}

@keyframes hue-pan {
  from { --hue-shift: 0; }
  to   { --hue-shift: 120; }
}

/* ── Hero fade-out on scroll ────────────────────────────────────────── */
@supports (animation-timeline: view()) {
  .section-hero {
    animation: hero-fade-out linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 60%;
  }
}

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

/* ── Tagline section slide-up reveal ───────────────────────────────── */
@supports (animation-timeline: view()) {
  .vhs-title-card {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(60px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ── Individual tagline word entrances ─────────────────────────────── */
@supports (animation-timeline: view()) {
  .tl-word {
    animation: word-track-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
    animation-delay: calc(var(--i) * 60ms);
  }
}

@keyframes word-track-in {
  from {
    opacity: 0;
    transform: translateX(-30px) skewX(8deg);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateX(0) skewX(0deg);
    filter: blur(0);
  }
}

/* ── Sticker parallax (different speeds) ────────────────────────────── */
@supports (animation-timeline: view()) {
  .sticker-1 {
    animation: sticker-float-1 linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  .sticker-2 {
    animation: sticker-float-2 linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  .sticker-3 {
    animation: sticker-float-3 linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@keyframes sticker-float-1 {
  from { transform: rotate(12deg) translateY(60px); }
  to   { transform: rotate(12deg) translateY(-80px); }
}
@keyframes sticker-float-2 {
  from { transform: rotate(-8deg) translateY(80px); }
  to   { transform: rotate(-8deg) translateY(-40px); }
}
@keyframes sticker-float-3 {
  from { transform: rotate(5deg) translateY(40px); }
  to   { transform: rotate(5deg) translateY(-100px); }
}

/* ── TV section: scale + rotate into view ──────────────────────────── */
@supports (animation-timeline: view()) {
  .tv-unit {
    animation: tv-enter linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}

@keyframes tv-enter {
  from {
    opacity: 0;
    transform: scale(0.8) rotateX(12deg) translateY(40px);
  }
  to {
    opacity: 1;
    transform: scale(1) rotateX(0deg) translateY(0);
  }
}

/* ── Footer items stagger in ────────────────────────────────────────── */
@supports (animation-timeline: view()) {
  .footer-widget {
    animation: footer-widget-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }

  .footer-widget:nth-child(1) { animation-delay: 0ms; }
  .footer-widget:nth-child(2) { animation-delay: 80ms; }
  .footer-widget:nth-child(3) { animation-delay: 160ms; }
}

@keyframes footer-widget-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hit counter digit roll ─────────────────────────────────────────── */
@supports (animation-timeline: view()) {
  .digit {
    animation: digit-roll linear both;
    animation-timeline: view();
    animation-range: entry 20% entry 80%;
    animation-delay: calc(var(--d) * 40ms);
  }
}

@keyframes digit-roll {
  from { opacity: 0; transform: translateY(-100%); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}

/* ── VHS glitch on tagline section entry (one-shot) ─────────────────── */
@supports (animation-timeline: view()) {
  .section-tagline {
    animation: section-bg-hue linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@keyframes section-bg-hue {
  0%   { --hue-shift: 0;   }
  50%  { --hue-shift: 60;  }
  100% { --hue-shift: 120; }
}

/* ── Chromatic layer glitch tied to scroll ──────────────────────────── */
@supports (animation-timeline: view()) {
  .chromatic-layer {
    animation: chroma-scroll linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@keyframes chroma-scroll {
  0%   { transform: translate(4px, -2px); opacity: 0.15; }
  30%  { transform: translate(-8px, 4px) skewX(4deg); opacity: 0.5; }
  50%  { transform: translate(6px, -4px); opacity: 0.2; }
  70%  { transform: translate(-4px, 2px) skewX(-3deg); opacity: 0.45; }
  100% { transform: translate(4px, -2px); opacity: 0.15; }
}

/* ─────────────────────────────────────────────────────────────────────────
   FALLBACK — ensure visibility when scroll-driven animations not supported
───────────────────────────────────────────────────────────────────────── */
@supports not (animation-timeline: view()) {
  .vhs-title-card,
  .tl-word,
  .sticker,
  .tv-unit,
  .footer-widget,
  .digit {
    opacity: 1;
    transform: none;
    filter: none;
  }
}