/* Shared motion layer for the public pages. Loaded after each page's own
   styles, so at equal specificity these rules win. Companion to motion.js. */

/* ── Shrink header ──
   Scroll-linked rather than a threshold toggle, following the Motion
   shrink-header defaults: condenses over 220px of scroll from a ~104px bar
   to ~54px. motion.js writes --shrink (0 at the top, 1 fully condensed) and
   everything below interpolates off it.

   Deliberately no transition on these properties. The value is already
   scroll-linked, so easing it again makes the bar lag behind the scroll. */
.nav { --shrink: 0; }
/* The wordmark grew from 58px to 70px without the bar growing with it: the
   row padding gives up the same 12px the logo gained, so the tall bar stays
   at 18 + 70 + 18 = 106px, exactly what 24 + 58 + 24 was. The condensed end
   is unchanged at 8 + 38 + 8 = 54px, so only the interpolation range moved. */
.nav .nav-inner {
  padding-top: calc(18px - 10px * var(--shrink));
  padding-bottom: calc(18px - 10px * var(--shrink));
}
.nav .nav-logo img { height: calc(70px - 32px * var(--shrink)); }
.nav .nav-cta {
  padding-top: calc(12px - 3px * var(--shrink));
  padding-bottom: calc(12px - 3px * var(--shrink));
}

/* Lifts off the bar under the cursor. A box-shadow would draw a rectangle
   behind a transparent wordmark, so this is a drop-shadow filter, which
   follows the artwork's own alpha. The scale is a transform and therefore
   costs no layout, which is what keeps the bar's height fixed while it
   pops. */
.nav .nav-logo img {
  filter: drop-shadow(0 2px 3px rgba(27,60,40,.16));
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.22,1,.36,1), filter .4s ease;
}
.nav .nav-logo:hover img,
.nav .nav-logo:focus-visible img {
  transform: scale(1.06);
  filter: drop-shadow(0 7px 14px rgba(27,60,40,.3));
}

/* The nav runs a tighter scale below 900px, so it condenses by less and the
   call to action keeps its full height rather than becoming cramped. The
   same trade applies: 10.5 + 66 + 10.5 plus the hairline border lands on the
   same 88px it measured at 14.4 + 58 + 14.4. */
@media (max-width: 900px) {
  .nav .nav-inner {
    padding-top: calc(10.5px - 3px * var(--shrink));
    padding-bottom: calc(10.5px - 3px * var(--shrink));
  }
  .nav .nav-logo img { height: calc(66px - 26px * var(--shrink)); }
  .nav .nav-cta { padding-top: 9px; padding-bottom: 9px; }
}

/* ── Spotlight ──
   A warm highlight that follows the pointer across a card. motion.js writes
   --spot-x / --spot-y / --spot-o; the overlay is a pseudo-element so no card
   markup changes and clicks pass straight through it. */
.m-spot { position: relative; }
.m-spot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    240px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(181, 134, 13, .13),
    transparent 62%
  );
  opacity: var(--spot-o, 0);
  transition: opacity .45s ease;
}

/* ── Tilt ──
   These cards rotate in 3D under a fine pointer. Their stylesheets
   transition colour and shadow only, which is what we want; this makes it
   explicit so a later transition on transform can't double-ease GSAP's
   writes and lag the tilt. */
.testimonial, .player {
  transition-property: border-color, background, box-shadow;
  will-change: transform;
}

/* ── Magnetic call to action ──
   motion.js now owns the button's transform (hover lift, pointer pull,
   press). The page stylesheets keep only the shadow on hover; the transition
   here drops transform for the same reason as above. */
.btn-primary, .seat-btn, .nav-cta {
  transition: box-shadow .35s, background .3s, color .3s;
  will-change: transform;
}

/* On a coarse pointer motion.js never sets an inline transform, so these
   plain presses apply. Under a fine pointer the inline transform wins and the
   spring press in motion.js takes over instead. */
.btn-primary:active, .seat-btn:active, .nav-cta:active { transform: scale(.97); }

/* Press feedback for the small controls motion.js leaves to the stylesheet. */
.cf-nav:active:not(:disabled),
.reading-room .controls button:active:not(:disabled) { transform: scale(.94); }
.play-btn:active { transform: scale(.96); }
.hero-play:active { transform: translate(-50%, -50%) scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .m-spot::after { transition: none; }
  .testimonial, .player, .btn-primary, .seat-btn, .nav-cta { will-change: auto; }
}

/* --- closing footer ---
   The passage is split into one span per authored line so each can arrive on
   its own. Block, so the lines stack exactly where the <br>s used to break
   them; the <p> keeps its own line-height and margins. */
.closing p .closing-line { display: block; }