/* intro.css — the compass "sweep" that carries the coach from intake into the
   Overview. One full-screen overlay: compass slides in from the left (~40% cut
   off the edge), the needle spins, the hero title rises, then the compass sweeps
   off-left while the title FLIP-shrinks into the stage-head h1 and the bars play.
   Self-contained (app-v2 is a standalone folder). */

.intro-layer{
  position:fixed; inset:0; z-index:200; overflow:hidden;
  /* Match the new pages' Ivory Glass backdrop (body.ov-mode) so the sweep reads as part of
     the same world — and the reveal is seamless, since the page underneath is this same gradient. */
  background:linear-gradient(135deg,#E9EEF6 0%,#DDE4EF 50%,#E8E2D2 100%);
  transition:background .6s ease;
}
/* once the page underneath should show through */
.intro-layer.reveal{ background:transparent; pointer-events:none; }

/* ── compass: parked on the left, 40% of it beyond the left edge ─────────── */
.intro-compass{
  position:absolute; left:0; top:50%;
  width:min(80vh,88vw); height:min(80vh,88vw);
  transform:translate(-100%,-50%);              /* start: fully off-screen left */
  will-change:transform;
}
.intro-compass.in{  transform:translate(-40%,-50%); transition:transform 1.05s cubic-bezier(.22,1,.36,1); }
.intro-compass.out{ transform:translate(-150%,-50%); transition:transform .85s cubic-bezier(.6,0,.85,.25); }
.intro-compass img{ position:absolute; inset:0; width:100%; height:100%; user-select:none; -webkit-user-drag:none; }
.intro-compass-needle{ transform-origin:50% 50%; animation:introSpin 2s linear infinite; }
@keyframes introSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* ── hero title ─────────────────────────────────────────────────────────── */
.intro-title{
  position:fixed; left:54%; top:45%; margin:0;
  transform:translate(-50%,-50%) translateY(16px); opacity:0;
  font-family:var(--font-serif,'Newsreader',Georgia,serif);
  font-weight:500; letter-spacing:-.2px; line-height:1.05;   /* match the Ivory Glass .ov-title it lands on */
  font-size:clamp(30px,5vw,56px);
  color:#22303F; text-align:center; white-space:nowrap;      /* Ivory Glass ink (was espresso --ink) */
  will-change:transform,opacity;
}
.intro-title.up{ opacity:1; transform:translate(-50%,-50%);
  transition:opacity .7s ease, transform .85s cubic-bezier(.22,1,.36,1); }
/* exit: fades + lifts away as the compass sweeps off — the two leave together, no morph. */
.intro-title.out{ opacity:0; transform:translate(-50%,-50%) translateY(-18px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.6,0,.85,.25); }

/* the real page, held invisible beneath the overlay until the reveal */
#page{ transition:opacity .6s ease; }
#page.intro-hold{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .intro-compass-needle{ animation:none; }
  .intro-compass.in,.intro-compass.out,.intro-title.up,.intro-title.out{ transition:none; }
}