/* Lane B — THROUGH THE WAVEFORM, arrival half.
 * The exit ends with the landing's waveform blooming into a cyan light;
 * this page resolves OUT of that same light. Same radial gradient (centred
 * on the waveform's 78% baseline), and the content rise uses the music
 * page's own --ease curve so the arrival decelerates the way the exit
 * accelerated — one continuous move, not a second animation.
 * The light is the neon sign's own cyan-blue, never white (Luc's notes).
 *
 * Nothing here applies unless enter.js sets html.from-swipe, so direct
 * loads, reloads, and back/forward navigation render the page untouched.
 */

/* Native cross-document View Transition opt-in. Cross-document transitions
   need this in BOTH documents, and the root pseudo-elements are styled by the
   DESTINATION document — so this block, not the landing's copy, is what
   governs the snapshots the user actually sees arriving here.
   object-fit: cover — snapshots default to `fill`; iOS changes viewport height
   between the landing (never scrolls) and this page (scrolls, viewport-fit=
   cover), so `fill` taffy-stretches the neon sign. Duration matches the
   landing's 180ms: #0A0B0D → #0B0C0F is a near-identical black, so the fade
   has no visible seam. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  object-fit: cover;
  animation-duration: 180ms;
  animation-timing-function: linear;
}

.enter-light {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* The neon sign's own colours: tube-cyan core, electric-blue halo. */
  background: radial-gradient(
    ellipse 150% 120% at 50% 78%,
    #5FF7FD 0%,
    #137EF6 48%,
    rgba(19, 126, 246, 0) 100%
  );
}

/* While the arrival plays, the page cannot scroll: the swipe's leftover
   momentum otherwise carries into this document and throws the reader past
   the hero. enter.js lifts the class the moment the momentum goes quiet. */
html.from-swipe {
  overflow: hidden;
}

/* REMOVED 2026-08-21 — the arrival light and the content rise.
 *
 * These painted a full-screen opaque cyan gradient (the same one the landing's
 * #flash ends on) at first paint and faded it over 440ms. That was the right
 * design when nothing else animated the handoff, but both documents now opt
 * into the native cross-document View Transition, so the browser ALSO
 * cross-fades a snapshot of the landing into a snapshot of this page. The two
 * layers stacked: the outgoing snapshot was a blue wash, this light was a
 * second blue wash on top of it, and the root cross-fade stretched the sign
 * between two different viewport heights. That is the blob on Luc's iPhone.
 *
 * The native cross-fade above is the whole arrival now. Where it is
 * unsupported the navigation is simply instant and plain, which is the
 * sanctioned fallback — never two competing washes again.
 *
 * .enter-light keeps its base rule (opacity 0, visibility hidden) so #enterLight
 * in music/index.html stays inert markup rather than becoming a stray element,
 * and the overlay can be revived deliberately if it is ever wanted back.
 */

/* The boot hero is a giant .25-opacity "SIGZ" that sits in #heroIn until
   the catalogue answers — fine as a direct-load state, but the arrival
   animation spotlights it (huge ghost wordmark, then a snap to the real
   title). Keep it invisible on a swipe arrival; if the API is still
   pending when from-swipe clears (900ms), it fades in instead of popping.
   Specificity note: html.from-swipe .hero-boot (0,2,1) beats music.css's
   .hero-boot{opacity:.25} (0,1,0), and this file loads after music.css. */
.hero-boot { transition: opacity 300ms ease; }
html.from-swipe .hero-boot { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* The light and the content rise are gone, so there is nothing left here to
     switch off except the cross-fade itself — cut it to a single frame so the
     navigation lands instantly. (.enter-light's base opacity is 0 regardless.) */
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms; }
}