/* ==========================================================================
   Mondios — motion
   Everything here animates transform / opacity / clip-path only.
   ========================================================================== */

/* --- cross-document view transitions -------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 260ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in  420ms var(--ease-out) both; }
@keyframes vt-out { to   { opacity: 0; transform: translateY(-1.25rem); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(1.75rem); } }

::view-transition-group(wordmark),
::view-transition-group(hero-media),
::view-transition-group(bottle-gold),
::view-transition-group(bottle-silver),
::view-transition-group(band-history) { animation-duration: 560ms; animation-timing-function: var(--ease-out); }

/* --- scroll progress ------------------------------------------------------- */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: var(--z-progress);
  pointer-events: none;
}
.progress::after {
  content: '';
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transform-origin: left;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progress::after { animation: progress-grow linear both; animation-timeline: scroll(root block); }
}
@keyframes progress-grow { to { transform: scaleX(1); } }

/* --- reveal on scroll ------------------------------------------------------ */
@supports not (animation-timeline: view()) {
  .js .reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-in linear both;
    animation-timeline: view(block);
    animation-range: entry 5% cover calc(20% + var(--i, 0) * 4%);
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(1.75rem); }
  to   { opacity: 1; transform: none; }
}

/* --- parallax --------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  .parallax img,
  .parallax video {
    animation: drift linear both;
    animation-timeline: view(block);
    animation-range: cover;
    will-change: transform;
  }
}
@keyframes drift {
  from { transform: scale(1.12) translateY(-3.5%); }
  to   { transform: scale(1.12) translateY(3.5%); }
}

/* --- rules that draw themselves in ------------------------------------------ */
@supports (animation-timeline: view()) {
  .rule--draw {
    animation: rule-draw linear both;
    animation-timeline: view(block);
    animation-range: entry 10% entry 90%;
  }
}
@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- page-load settle --------------------------------------------------------- */
.site-header,
.page-intro > * { animation: settle var(--dur-slow) var(--ease-out) both; }
.page-intro > *:nth-child(2) { animation-delay: 90ms; }
.page-intro > *:nth-child(3) { animation-delay: 170ms; }
@keyframes settle { from { opacity: 0; transform: translateY(0.75rem); } }

/* --- hero lines ------------------------------------------------------------------
   Delays by position, not inline style, so the CSP needs no 'unsafe-inline'. */
.hero__line > span { animation-delay: 320ms; }
.hero__line:nth-child(2) > span { animation-delay: 430ms; }
.hero__line:nth-child(3) > span { animation-delay: 540ms; }
/* When the entrance plays, the lines wait for the curtain. The class is set
   before the first hero frame and never removed, so the delay never jumps. */
.entrance-played .hero__line > span { animation-delay: 1500ms; }
.entrance-played .hero__line:nth-child(2) > span { animation-delay: 1610ms; }
.entrance-played .hero__line:nth-child(3) > span { animation-delay: 1720ms; }

/* --- smooth scroll: hand the wheel to Lenis, keep native for anchors ------ */
html.smooth { scroll-behavior: auto; }
html.smooth, html.smooth body { height: auto; }

/* --- entrance -------------------------------------------------------------------
   First visit per session. The traced logo draws itself in gold hairline,
   fills, and the curtain lifts into the film. Driven by js/entrance.js. ------- */
.entrance {
  display: none;                      /* no JS → no curtain, ever */
  position: fixed;
  inset: 0;
  z-index: var(--z-entrance);
  place-items: center;
  background: var(--ground-black);
  clip-path: inset(0 0 0 0);
}
.entrance__logo {
  width: clamp(9rem, 6rem + 10vw, 15rem);
  height: auto;
  color: var(--gold);
}
.entrance__logo path {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 0.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.entering .entrance__logo path {
  animation:
    logo-draw 1100ms var(--ease-in-out) 60ms both,
    logo-fill 500ms var(--ease-out) 1000ms both;
}
.entering .entrance { animation: curtain 620ms var(--ease-in-out) 1420ms both; }
@keyframes logo-draw { to { stroke-dashoffset: 0; } }
@keyframes logo-fill { to { fill: var(--bone); stroke-width: 0; } }
@keyframes curtain   { to { clip-path: inset(0 0 100% 0); } }
/* Visible from the first frame once JS is known to be present (the head
   script sets .js before paint), so the hero never flashes underneath. */
.js .entrance { display: grid; }
.entrance[data-done='true'] { display: none; }

/* --- reduced motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .hero__line > span, .menu__item, .site-header, .page-intro > *,
  .constellation__word, .legend-line {
    opacity: 1 !important;
    transform: none !important;
  }
  .parallax img, .parallax video, .wine__bottle, .wine__tilt, .rule--draw,
  .timeline__seg--fill::after { transform: none !important; }
  .constellation__lines line { stroke-dashoffset: 0 !important; }
  .progress, .scroll-cue, .entrance, .wine__sheen { display: none !important; }
  .hero__video { display: none; }
  @view-transition { navigation: none; }
}