/* ───────────────────────────────────────────────────────────────────────────
   mature.css — the Mature Direction design system (2026-06-11).
   Source of truth: the "Kurus & The Pact — Mature Direction" design canvas.
   Loaded LAST so its tokens + page backdrop win; component classes (.mk-*)
   are additive and adopted screen-by-screen as the remodel proceeds.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* palette */
  --mk-bg-hi: #0c1018;          /* radial center */
  --mk-bg-lo: #07090e;          /* radial edge / page base */
  --mk-ink:   #eef2f7;          /* headlines */
  --mk-body:  #aeb8c7;          /* body copy */
  --mk-muted: #6f7c8f;          /* labels, captions */
  --mk-line:  rgba(120,140,170,0.16); /* hairlines */
  --mk-gold:  #e6bd5c;          /* lessons / retirement accent */
  --mk-blue:  #7fb4ff;          /* planner accent */
  --mk-green: #62d6a4;          /* life/positive accent */
  --mk-pink:  #e06a84;          /* debt / Kurus's eyes family */
  --mk-kurus: #aebfe8;          /* Kurus pearl glow */

  /* type */
  --mk-serif: 'Fraunces', Georgia, serif;
  --mk-sans:  'Spline Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mk-mono:  'Spline Sans Mono', ui-monospace, Menlo, monospace;

  /* surfaces */
  --mk-glass:       rgba(16,20,28,0.7);
  --mk-glass-hover: rgba(22,28,40,0.8);
  --mk-radius: 14px;
}

/* ── page backdrop: near-black radial + nebula ────────────────────────────
   The blobs ride ::before/::after at z-index:-1 so they sit above the body
   background but under ALL content — zero stacking-context risk. */
body {
  background: radial-gradient(130% 120% at 52% 44%, var(--mk-bg-hi) 0%, var(--mk-bg-lo) 72%) fixed;
}
body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
body::before { /* teal, upper left + violet, lower (two gradients, one node) */
  left: -8%; top: 8%; width: 44%; height: 54%;
  background: radial-gradient(circle, rgba(58,108,108,0.40), transparent 68%);
  filter: blur(52px);
  box-shadow: 18vw 60vh 0 0 rgba(86,72,128,0.0); /* anchor only */
}
body::after { /* blue, right */
  right: -10%; top: 24%; width: 46%; height: 66%;
  background: radial-gradient(circle, rgba(64,86,150,0.38), transparent 68%);
  filter: blur(56px);
}

/* ── components (adopt screen-by-screen) ────────────────────────────────── */

/* glass card — the Mature card language */
.mk-glass {
  background: var(--mk-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0.5px solid var(--mk-line);
  border-radius: var(--mk-radius);
}
.mk-glass--hover:hover { background: var(--mk-glass-hover); transform: translateY(-3px); }

/* mono eyebrow label: START HERE / PLAN YOUR FUTURE / … */
.mk-eyebrow {
  font-family: var(--mk-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mk-muted);
}
.mk-eyebrow--gold  { color: var(--mk-gold); }
.mk-eyebrow--blue  { color: var(--mk-blue); }
.mk-eyebrow--green { color: var(--mk-green); }
.mk-eyebrow--pink  { color: var(--mk-pink); }

/* Kurus narration: Fraunces italic with a soft shadow, mono attribution */
.mk-quote {
  font-family: var(--mk-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.32;
  color: var(--mk-ink);
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}
.mk-quote-by {
  font-family: var(--mk-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(174,191,232,0.7); /* kurus pearl tone */
}

/* dashed debt tether (use on an SVG <line> via class, or as border imagery) */
.mk-tether { stroke: rgba(224,106,132,0.4); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }

/* hairline divider */
.mk-hr { border: 0; border-top: 1px solid var(--mk-line); }

/* ── menu experience: micro-animations (armed by src/menu-experience.js) ──
   .mk-experience is set on .soy-root when the menu opens. */

/* section cards stagger in with a soft rise + de-blur */
.mk-experience .soy-cta.show .soy-card {
  animation: mkCardIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.mk-experience .soy-cta.show .soy-card:nth-child(1) { animation-delay: 0.05s; }
.mk-experience .soy-cta.show .soy-card:nth-child(2) { animation-delay: 0.16s; }
.mk-experience .soy-cta.show .soy-card:nth-child(3) { animation-delay: 0.27s; }
@keyframes mkCardIn {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* hover: accent glow (--mka set per-card from its eyebrow color) + icon lift */
.mk-experience .soy-card { will-change: transform; }
.mk-experience .soy-card:hover {
  box-shadow: 0 14px 36px -14px var(--mka, rgba(120,140,170,0.35));
  border-color: var(--mka, var(--mk-line));
}
.mk-experience .soy-card .ci { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mk-experience .soy-card:hover .ci { transform: translateY(-2px) scale(1.12); }

/* orbit rings drift — barely, like a slow tide */
.mk-experience .soy-rings i { animation: mkRingDrift 80s linear infinite; }
.mk-experience .soy-rings i:nth-child(2) { animation-duration: 120s; animation-direction: reverse; }
.mk-experience .soy-rings i:nth-child(3) { animation-duration: 170s; }
.mk-experience .soy-rings i:nth-child(4) { animation-duration: 240s; animation-direction: reverse; }
@keyframes mkRingDrift {
  from { transform: rotate(0turn)   scale(1); }
  50%  { transform: rotate(0.5turn) scale(1.012); }
  to   { transform: rotate(1turn)   scale(1); }
}

/* keyboard a11y: focus ring in the card's accent */
.mk-experience .soy-card:focus-visible {
  outline: 2px solid var(--mka, var(--mk-blue));
  outline-offset: 3px;
}

/* respect reduced motion: no stagger, no drift (tilt is JS-gated separately) */
@media (prefers-reduced-motion: reduce) {
  .mk-experience .soy-cta.show .soy-card { animation: none; }
  .mk-experience .soy-rings i { animation: none; }
}

/* ── GSAP mode (.mk-gsap, the v2 overture — src/menu-overture.js) ─────────
   GSAP owns every transform: kill the CSS entrance stagger and free the
   transform channel (a CSS transition on transform would fight quickTo). */
.mk-gsap .soy-cta.show .soy-card { animation: none; }
.mk-gsap .soy-card {
  transition: background 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mk-gsap .soy-card:hover { transform: none; }
.mk-gsap .soy-rings i { animation: none; } /* the overture + breath own ring motion */

/* ── the ARRIVAL: wormhole opening + vortex menu core (src/arrival.js) ──── */

/* vortex mode retires the line intro + the white pearl (both SAVED:
   /?intro=line brings the whole line experience back untouched) */
body.mk-vortex #fluid { display: none !important; }
/* Kurus (z199) waits offstage during the title screen, fades in on arrival */
#kurus-nav { transition: opacity 0.8s ease; }
body.mk-opening #kurus-nav { opacity: 0 !important; pointer-events: none !important; }
body.mk-vortex #em-splash { opacity: 0 !important; pointer-events: none !important; }
body.mk-vortex .soy-orb { opacity: 0 !important; }

#mk-arrival {
  position: fixed; inset: 0; z-index: 60;
  background: radial-gradient(130% 120% at 50% 46%, var(--mk-bg-hi) 0%, var(--mk-bg-lo) 74%);
  cursor: pointer; outline: none;
  touch-action: manipulation;                 /* no 300ms tap delay, no double-tap zoom */
  -webkit-tap-highlight-color: transparent;   /* no grey flash on tap (iOS/Android) */
}
#mk-arrival .mka-stage { position: absolute; inset: 0; }

/* arrived state: the canvas stays as the menu's gravity well, chrome is gone
   (hidden, not removed — "Replay opening" brings it back) */
#mk-arrival.mka-arrived { z-index: 0; background: transparent; cursor: default; }
#mk-arrival.mka-arrived .mka-brand { display: none; }
#mk-arrival.mka-arrived .mka-skip { display: none; }

/* brand block: staggered letter rise, then the dive blows it past the camera.
   Sits UNDER the pearl (the orb anchors at 47% — type starts below it). */
.mka-brand {
  position: absolute; left: 50%; top: 71%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; color: var(--mk-ink);
  transition: transform 1.1s cubic-bezier(0.7, 0, 0.84, 0), opacity 0.9s ease;
  width: min(92vw, 1100px);
}
.mka-eyebrow {
  font-family: var(--mk-mono); font-size: 11px; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--mk-muted);
  animation: mkaFade 1.2s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
/* the title uses the original splash's own .em-word class (app.css) — proven
   shimmer, zero reimplementation. Just neutralize its splash-layout margin. */
.mka-brand .em-word { margin-top: 0; }
.mka-sub {
  font-family: var(--mk-serif); font-style: italic; font-size: clamp(16px, 2.4vw, 22px);
  color: var(--mk-body); animation: mkaFade 1.2s 1.15s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.mka-cue {
  margin-top: 18px; font-family: var(--mk-mono); font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--mk-muted);
  animation: mkaFade 1s 1.2s backwards, mkaPulse 2.6s 1.2s ease-in-out infinite;
}
.mka-skip {
  position: absolute; right: 22px; top: 20px; z-index: 2;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--mk-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mk-muted); opacity: 0.7; transition: opacity 0.2s;
}
.mka-skip:hover { opacity: 1; color: var(--mk-ink); }

/* the dive: type accelerates toward (past) the viewer and burns off */
#mk-arrival.mka-diving .mka-brand {
  transform: translate(-50%, -50%) scale(3.2);
  opacity: 0;
}

@keyframes mkaLetter {
  from { opacity: 0; transform: translateY(26px) rotate(2deg); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
}
@keyframes mkaFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mkaPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } }

@media (prefers-reduced-motion: reduce) {
  .mka-title, .mka-cue { animation: none; }
  .mka-brand { transition: none; }
}

/* small screens: let the title wrap instead of clipping, keep the words clear
   of the thumb zone and any browser chrome (safe-area aware) */
@media (max-width: 480px) {
  .mka-brand .em-word { white-space: normal; line-height: 2; padding: 0 18px; }
  .mka-brand { width: 100vw; }
}
@media (max-height: 640px) {
  .mka-brand { top: auto; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); }
}