/* title — the names spring in with perspective, the & draws itself, a foil glint sweeps the names, the rule draws, one outlined CTA (module: title).
   shell.css owns the generic .lockup; everything below is scoped to .title-scene and re-cuts it for the title card:
   real kerning (inline margins from TITLE.kern), the ampersand sitting in Ali’s indent on Ali’s baseline, SVG strokes + fill. */
.title-scene .bg { inset: -16px; }                                   /* room for the tilt parallax (±14px) without showing an edge */
.title-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(60% 40% at 80% 0%, rgba(201, 164, 92, 0.18), rgba(201, 164, 92, 0) 100%); }

/* kicker: per-char masks (y 100% → 0) */
.title-scene .kicker { color: var(--gold); text-shadow: 0 1px 2px rgba(5, 8, 15, 0.45); }
.title-scene .kicker .m { display: inline-block; overflow: hidden; vertical-align: top; }
.title-scene .kicker .m > span { display: inline-block; will-change: transform; }

/* lockup */
.title-scene .lockup { position: relative; letter-spacing: -0.02em; margin: 0; }
.title-scene .lockup .n { perspective: 600px; }
.title-scene .lockup .n2 { margin-left: 1%; }                        /* the & owns the indent (17%); Ali starts right after it */
.title-scene .lockup .c { margin-left: 0; will-change: transform; }  /* kern = inline margin-left (em) from TITLE.kern */
.title-scene .lockup .amp { position: relative; display: inline-block; width: 17%; margin: 0; vertical-align: baseline; line-height: 1;
  font-size: clamp(38px, 12.4vw, 50px); font-style: italic; color: var(--clay); font-variation-settings: "opsz" 144, "WONK" 1, "SOFT" 30; transform-origin: 40% 85%; }
.title-scene .lockup .amp .glyph { position: relative; display: inline-block; line-height: 1; vertical-align: baseline; margin-left: 0.04em; }
.title-scene .lockup .amp .draw { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.title-scene .lockup .amp .draw path { fill: none; stroke: var(--clay); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.title-scene .lockup .amp .fill { position: relative; }
.title-scene .lockup.settled .amp .draw { display: none; }

/* the foil glint: a gold copy of the name lines (the & warm white) under a thin diagonal clip band, parked off-left;
   title.js sweeps the band across (clip-path only) once the names land, then every 6.5s */
.title-scene .lockup-shine { position: absolute; inset: 0; z-index: 2; display: block; color: #e9c784; pointer-events: none;
  clip-path: polygon(-42% 0%, -24% 0%, -46% 100%, -64% 100%); will-change: clip-path; }
.title-scene .lockup-shine .amp { color: #fff5e1; }
.title-scene .lockup-shine .c { will-change: auto; }

/* meta line: hairline rule that draws + tracked caps */
.title-meta { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; font: var(--caps); letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--cream-60); text-shadow: 0 1px 2px rgba(5, 8, 15, 0.45); }
.title-meta .rule-l { flex: 0 0 28px; width: 28px; height: var(--hairline); background: var(--cream-60); transform-origin: 0 50%; }
.title-meta span { display: inline-block; }

/* CTA group */
.title-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 32px; }
.title-cta .btn.outline { position: relative; overflow: hidden; }
.title-cta .btn .sheen { position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%; pointer-events: none;
  background: linear-gradient(100deg, rgba(244, 238, 227, 0) 0%, rgba(244, 238, 227, 0.22) 50%, rgba(244, 238, 227, 0) 100%); }
.title-cta .link { margin-left: 8px; }

@media (prefers-reduced-motion: reduce) {
  .title-scene .lockup .amp .draw { display: none; }
  .title-scene .lockup-shine { display: none; }
  .title-cta .btn .sheen { display: none; }
}