@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--d-med); animation-timing-function: var(--ease-film); }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-18px); } }
@keyframes up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes beat {
  0% { opacity: 0; transform: translateY(16px); filter: blur(8px); }
  7% { opacity: 1; transform: none; filter: none; }
  28% { opacity: 1; transform: none; filter: none; }
  34% { opacity: 0; transform: translateY(-12px); filter: blur(8px); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Line-work draws itself in. Hidden state only applies while JS is running, so no-JS still sees it. */
  .js .line { stroke-dasharray: var(--len, 1600); stroke-dashoffset: var(--len, 1600); animation: draw 5s var(--ease-draw) forwards; }
  .js .line--slow { animation-duration: 6s; --len: 1800; }
  .js .line--slower { animation-duration: 7s; --len: 2000; }
  .js .l2 { animation-delay: .5s; } .js .l3 { animation-delay: 1s; } .js .l4 { animation-delay: 1.5s; } .js .l5 { animation-delay: 2s; }

  .skirt { transform-box: fill-box; transform-origin: center; animation: spin 36s linear infinite; }
  .figure { animation: breathe 9s ease-in-out infinite; }
  .lw__marker { animation: pulse 3.2s ease-in-out infinite; }
  .lw__marker:nth-child(2) { animation-delay: .8s; } .lw__marker:nth-child(3) { animation-delay: 1.6s; } .lw__marker:nth-child(4) { animation-delay: 2.4s; }
  .wave { animation: drift 11s ease-in-out infinite; } .w2 { animation-delay: -3s; } .w3 { animation-delay: -6s; }
  .js .wave.line { animation: draw 7s var(--ease-draw) forwards, drift 11s ease-in-out infinite; }

  .hero__beat { opacity: 0; animation: beat 12s ease-in-out infinite; }
  .hero__beat:nth-child(2) { animation-delay: 4s; }
  .hero__beat:nth-child(3) { animation-delay: 8s; }

  .up { animation: up var(--d-slow) var(--ease-film) both; }
  .d1 { animation-delay: .15s; } .d2 { animation-delay: .3s; } .d3 { animation-delay: .45s; }

  .marquee__track { animation: marquee 70s linear infinite; }
  .pillars__track { animation: marquee 45s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }

  /* Fallback reveals when scroll timelines are unavailable */
  @supports not (animation-timeline: view()) {
    .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--d-slow) var(--ease-film), transform var(--d-slow) var(--ease-film); }
    .js [data-reveal].is-in { opacity: 1; transform: none; }
  }

  @supports (animation-timeline: scroll()) {
    @keyframes open { from { clip-path: inset(22% 17% 16% 17% round var(--radius-reel)); } to { clip-path: inset(0 0 0 0 round 0); } }
    @keyframes nameUp { to { transform: translateY(-36px); letter-spacing: .2em; } }
    @keyframes fadeOut { to { opacity: 0; transform: translateY(24px); } }
    @keyframes focus { from { opacity: .2; transform: translateX(32px); } to { opacity: 1; transform: none; } }
    @keyframes slide { from { transform: translateX(6%); } to { transform: translateX(-42%); } }
    @keyframes unclip { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes settle { from { transform: scale(1.22); } to { transform: scale(1); } }
    @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @keyframes tilt { from { transform: translateY(40px) scale(.96); opacity: .3; } to { transform: none; opacity: 1; } }
    @keyframes widen { from { clip-path: inset(0 10% 0 10%); } to { clip-path: inset(0 0 0 0); } }
    @keyframes parallax { from { transform: translateY(-8%) scale(1.1); } to { transform: translateY(8%) scale(1.1); } }

    @media (min-width: 768px) {
      .hero__reel { animation: open linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
      .hero__title { animation: nameUp linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
      .hero__hint { animation: fadeOut linear both; animation-timeline: scroll(root); animation-range: 0 320px; }
    }
    .q { animation: focus linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    [data-reveal] { animation: up linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    .clip { animation: unclip linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
    .settle { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    .record__spine { transform-origin: top; animation: grow linear both; animation-timeline: view(); animation-range: entry 0% exit 0%; }
    .tilt { animation: tilt linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .widen { animation: widen linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .para { animation: parallax linear both; animation-timeline: view(); }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
  .hero__beat:not(:first-child) { display: none; }
  .hero__figure, .hero__markers { transition: none; }
  .marquee__track { flex-wrap: wrap; width: auto; white-space: normal; padding: 0 var(--gutter); }
  .marquee__track li[aria-hidden="true"] { display: none; }
  .pillars__band { font-size: clamp(40px, 6vw, 96px); white-space: normal; text-align: center; padding: 0 var(--gutter); }
  .pillars__track { width: auto; display: block; }
  .pillars__item + .pillars__item, .pillars__item > span:last-child { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .dwc__mark { animation: spin 60s linear infinite; }
}