/* One motion vocabulary for the whole site. Tokens live in chapters.css :root; this file loads
   last and only adds movement. Reduced motion collapses every token to 0.01ms, and the load
   sequence and reveals below are gated on no-preference as well. */

/* ---------- buttons ---------- */

a { transition:color var(--dur) var(--ease-out); }
.cta, .header nav .nav-contact, .book-form button, .showcase-play, .menu-toggle {
  transition:background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
@media(hover:hover) {
  .cta:hover, .book-form button:hover:not(:disabled) {
    transform:translateY(-1px);
    box-shadow:0 2px 4px oklch(0.3 0.04 70 / .12), 0 16px 32px -14px oklch(0.3 0.04 70 / .55);
  }
  .header nav .nav-contact:hover { transform:translateY(-1px); }
}
.cta:active, .header nav .nav-contact:active, .book-form button:active:not(:disabled), .showcase-play:active, .menu-toggle:active {
  transform:scale(.97); transition-duration:var(--dur-fast);
}

/* ---------- nav: an underline that draws in from the left ---------- */

@media(min-width:681px) {
  .header nav a:not(.nav-contact) {
    background:linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 6px) / 0% 1px;
    transition:color var(--dur) var(--ease-out), background-size var(--dur) var(--ease-out);
  }
  .header nav a:not(.nav-contact):hover, .header nav a[aria-current]:not(.nav-contact) { background-size:100% 1px; }
  .header nav a[aria-current] { text-decoration:none; }
}

/* ---------- mobile menu drops in rather than popping ---------- */

@media(max-width:680px) {
  .header nav {
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    visibility:hidden; opacity:0; transform:translateY(-6px);
    transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s var(--dur);
  }
  .header nav.is-open { visibility:visible; opacity:1; transform:none; transition-delay:0s; }
}

/* ---------- toggles: a knob with a little give ---------- */

.switch-track { transition:background-color var(--dur) var(--ease-out); }
.switch-track::after { transition:transform var(--dur) var(--ease-spring), width var(--dur-fast) var(--ease-out); }
.layer-switches button:active .switch-track::after { width:15px; }
.layer-switches button[aria-checked="true"]:active .switch-track::after { transform:translateX(9px); }

/* ---------- clip cards ---------- */

.sample-card { transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  /* A lift instead of scale(1.03): scaling resampled the video and softened it. */
  .sample-card:hover { transform:translateY(-3px); box-shadow:0 2px 4px #2928201a, 0 18px 36px -14px #29282045; }
}

/* ---------- stream switches crossfade ---------- */
/* The incoming stream fades in on top; the outgoing one only drops once it is covered, so the
   dark card never shows through mid-fade. */

.sample-card video, .episode-streams video {
  visibility:hidden; opacity:0;
  transition:opacity 0s var(--dur), visibility 0s var(--dur);
}
.sample-card video.is-active, .episode-streams video.is-visible {
  visibility:visible; opacity:1; z-index:1;
  transition:opacity var(--dur) var(--ease-out);
}

/* ---------- form ---------- */
/* The resting line and the focus line are two background layers, so focus can draw across
   from the left. The border keeps its width but goes transparent so the layers show. */

.book-form { --field-line:oklch(0.85 0.02 85); --field-focus:#667c57; }
.partners-page .book-form { --field-line:#6b806d; --field-focus:#dbebba; }
.book-form :is(input, textarea), .partners-page .book-form :is(input, textarea) {
  border-bottom-color:transparent;
  background:
    linear-gradient(var(--field-focus), var(--field-focus)) no-repeat 0 100% / 0% 1.5px border-box,
    linear-gradient(var(--field-line), var(--field-line)) no-repeat 0 100% / 100% 1.5px border-box;
  transition:background-size var(--dur-slow) var(--ease-out);
}
.book-form :is(input, textarea):focus, .partners-page .book-form :is(input, textarea):focus {
  border-bottom-color:transparent;
  background-size:100% 1.5px, 100% 1.5px;
}
.book-success:not([hidden]) { animation:rise var(--dur-slow) var(--ease-out) backwards; }

/* ---------- tiles and footer ---------- */

.collection-tiles article { transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.collection-tiles article > span { transition:color var(--dur) var(--ease-out); }
@media(hover:hover) { .collection-tiles article:hover > span { color:var(--ink); } }
.footer-links a { transition:color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
@media(hover:hover) { .footer-links a:hover { transform:translateY(-2px); } }

/* ---------- scroll reveals (main.js adds .has-reveal) ---------- */

.has-reveal [data-reveal] {
  opacity:0; transform:translateY(12px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay:calc(var(--i, 0) * 60ms);
}
.has-reveal [data-reveal].is-revealed { opacity:1; transform:none; }

/* ---------- hero: the one orchestrated moment ---------- */

.hero h1 .word { display:inline-block; overflow:hidden; vertical-align:top; padding:.06em 0 .14em; margin:-.06em 0 -.14em; }
.hero h1 .word > span { display:inline-block; }

@keyframes finger { from { opacity:0; scale:1 .15; } }
@keyframes word-rise { from { transform:translateY(105%); } }
@keyframes card-in { from { opacity:0; transform:translateY(10px) scale(.96); } }
@keyframes fade-in { from { opacity:0; } }

@media(prefers-reduced-motion:no-preference) {
  /* The five bars grow in like fingers opening. */
  .js a.logo svg line { transform-box:fill-box; transform-origin:50% 100%; animation:finger .55s var(--ease-out) backwards; }
  .js a.logo svg line:nth-child(2) { animation-delay:60ms; }
  .js a.logo svg line:nth-child(3) { animation-delay:120ms; }
  .js a.logo svg line:nth-child(4) { animation-delay:180ms; }
  .js a.logo svg line:nth-child(5) { animation-delay:240ms; }

  /* Hidden until main.js has split it, with a fallback in case it never does. */
  .js .hero h1:not(.is-split) { animation:fade-in .3s 1.2s backwards; }
  .js .hero h1 .word > span { animation:word-rise .8s var(--ease-out) backwards; animation-delay:calc(120ms + var(--i) * 45ms); }
  .js .hero-sub { animation:rise .8s var(--ease-out) .45s backwards; }
  .js .hero-copy .cta { animation:rise .8s var(--ease-out) .58s backwards; }

  /* backwards, not both: a held end state would override the cards' hover transform. */
  .js .sample-card { animation:card-in .9s var(--ease-out) backwards; }
  .js .sample-card:nth-child(1) { animation-delay:.4s; }
  .js .sample-card:nth-child(2) { animation-delay:.49s; }
  .js .sample-card:nth-child(3) { animation-delay:.58s; }
  .js .sample-card:nth-child(4) { animation-delay:.67s; }
  .js .showcase-toolbar { animation:fade-in .6s .8s backwards; }
}