/* =============================================================================
   BIO — body.world-bio  (the LINK-IN-BIO router: leematulis.com/start)
   The one URL in every social profile. A cold tap from a reel lands here and in
   five seconds learns who Lee is and where to go. NOT the apex (immersive oracle
   portal) and NOT the world map (full venture grid) — this is the ROUTER: one
   scannable mobile column, the Pulse as the living centrepiece, a short ranked
   stack of doors, an email capture, a social row.

   Per vault CLAUDE.md §31: this file LINKS the kit (brand.css) for all tokens /
   fonts / nav / sigil and adds ONLY the bio composition. It inlines no :root
   tokens — same contract apex-deck.css honours for the apex.
   ============================================================================= */

/* ---- stage: a single centred mobile column -------------------------------- */
.world-bio .nav{justify-content:flex-end;gap:16px;padding:20px 22px;border-bottom:0}
.world-bio .nav .brandmark{margin-right:auto}

.world-bio .bio{max-width:460px;margin:0 auto;padding:8px 22px 0;width:100%}

/* ---- identity header ------------------------------------------------------ */
.world-bio .bio-head{text-align:center;padding:30px 4px 30px}
.world-bio .bio-name{font-family:"DM Serif Display",serif;font-style:italic;font-weight:400;
  font-size:clamp(40px,12vw,58px);line-height:.98;margin:0;letter-spacing:.004em}

/* the oracle line — echoes the apex deck without the deck. "The Creative" sits on
   its own line so the rotating self below can change LENGTH without nudging it
   (no blip). The self auto-advances and is tap/Enter to draw the next. */
.world-bio .bio-oracle{margin:16px 0 0;font-family:"DM Serif Display",serif;font-style:italic;
  font-size:clamp(18px,5.4vw,23px);line-height:1.18;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;-webkit-tap-highlight-color:transparent}
.world-bio .bio-oracle .lead{color:var(--shell)}
.world-bio .bio-oracle .self{transition:opacity .18s ease,transform .18s ease}
.world-bio .bio-oracle .self.swap{opacity:0;transform:translateY(-4px)}

/* ---- UNIFORM SHIMMER — every iridescent element on the page samples ONE shared,
   page-wide gradient field, so the colour at any screen-x is identical across the
   wordmark, the rotating self and both sigils — fully in sync, same band, same
   speed. The trick: each element offsets its gradient by its own page x (--ox, set
   by JS on load/resize/word-swap), so background-clip:text stops mapping the
   gradient to each element's own box and instead reads from one continuous canvas.
   (background-attachment:fixed would do this in one line but iOS Safari ignores it,
   and this page is mobile-first — so we anchor with --ox instead.) */
.world-bio .bio-name,
.world-bio .bio-oracle .self,
.world-bio .sigil{
  --ox:0px;
  background-image:var(--spectrum);background-size:560px 100%;background-repeat:repeat;
  background-position:calc(0px - var(--ox)) center;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:bio-shimmer 20s linear infinite}
@keyframes bio-shimmer{
  from{background-position:calc(0px - var(--ox)) center}
  to{background-position:calc(560px - var(--ox)) center}}
@media (prefers-reduced-motion:reduce){
  .world-bio .bio-name,.world-bio .bio-oracle .self,.world-bio .sigil{animation:none}}

.world-bio .bio-promise{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:19px;
  line-height:1.55;color:var(--shell);max-width:34ch;margin:22px auto 0;text-wrap:balance}

/* ---- the door stack ------------------------------------------------------- */
.world-bio .bio-links{display:flex;flex-direction:column;gap:12px;margin:6px 0 0}
.world-bio .bio-card{display:flex;align-items:center;gap:16px;text-decoration:none;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:18px 20px;
  transition:border-color .2s ease,transform .2s ease}
.world-bio .bio-card:hover{border-color:var(--bronze);transform:translateY(-2px)}

/* LIGHT THEME — the kit's tokens make --panel ≈ the cream bg, so the cards lose
   their edge and the stack reads flat. Separate them with elevation (shadow) +
   a firmer border instead of colour. Scoped to the bio page; elevation is already
   in the kit's vocabulary (track-cover / note-shot use box-shadow). */
[data-theme="light"] .world-bio .bio-card,
[data-theme="light"] .world-bio .bio-mail{
  border-color:rgba(20,18,13,.13);
  box-shadow:0 1px 1px rgba(20,18,13,.04), 0 12px 26px -18px rgba(20,18,13,.24)}
[data-theme="light"] .world-bio .bio-card:hover{
  box-shadow:0 2px 3px rgba(20,18,13,.05), 0 16px 32px -16px rgba(20,18,13,.28)}
.world-bio .bio-card .ci{flex:1;min-width:0}
.world-bio .bio-card .ci-label{font-family:"Inter",sans-serif;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bronze);margin:0}
.world-bio .bio-card .ci-title{font-family:"DM Serif Display",serif;font-style:italic;font-weight:400;
  font-size:24px;line-height:1.05;color:var(--linen);margin:5px 0 0}
.world-bio .bio-card .ci-desc{font-family:"Inter",sans-serif;font-size:11.5px;line-height:1.5;
  color:var(--shell);margin:6px 0 0}
.world-bio .bio-card .ci-arr{flex:none;font-family:"Inter",sans-serif;font-size:18px;color:var(--muted);
  transition:transform .2s ease,color .2s ease}
.world-bio .bio-card:hover .ci-arr{color:var(--bronze);transform:translateX(3px)}

/* the FEATURED card — the Pulse, the living centrepiece. Faint spectrum bloom +
   a mini ECG that beats. Sits at the top of the stack, the magnet. */
.world-bio .bio-card.featured{flex-direction:column;align-items:stretch;gap:0;padding:22px 22px 18px;
  background:radial-gradient(120% 80% at 50% 0%, rgba(176,128,48,.07), rgba(20,19,16,0) 62%), var(--panel)}
.world-bio .bio-card.featured .feat-top{display:flex;align-items:center;gap:14px}
.world-bio .bio-card.featured .ci-title{font-size:27px}
.world-bio .bio-ecg{display:block;width:100%;height:34px;margin:15px 0 13px}
.world-bio .bio-ecg .e-trace{fill:none;stroke:url(#bgrad);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.world-bio .bio-ecg .e-live{fill:var(--linen);stroke:var(--bronze);stroke-width:1.4;
  transform-box:fill-box;transform-origin:center;animation:bio-beat 2.4s ease-in-out infinite}
@keyframes bio-beat{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
.world-bio .bio-card.featured .feat-stat{display:flex;align-items:center;gap:9px;
  font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.04em;color:var(--muted)}
.world-bio .bio-card.featured .feat-stat b{color:var(--linen);font-weight:600}
.world-bio .bio-card.featured .feat-stat .sep{color:var(--bronze)}
.world-bio .bio-card.featured .feat-stat .arr{margin-left:auto;font-size:16px;color:var(--muted);
  transition:transform .2s ease,color .2s ease}
.world-bio .bio-card.featured:hover .feat-stat .arr{color:var(--bronze);transform:translateX(3px)}

/* ---- email capture — the owned-audience strip ----------------------------- */
.world-bio .bio-mail{margin:26px 0 0;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  padding:20px 20px 18px}
.world-bio .bio-mail .m-label{font-family:"Inter",sans-serif;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bronze);margin:0}
.world-bio .bio-mail .m-line{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:18px;
  color:var(--shell);margin:6px 0 14px;line-height:1.4}
.world-bio .bio-mail form{display:flex;gap:10px;align-items:stretch}
.world-bio .bio-mail input[type=email]{flex:1;min-width:0;background:transparent;border:0;
  border-bottom:1px solid var(--line);color:var(--linen);font-family:"Inter",sans-serif;font-size:13px;
  letter-spacing:.02em;padding:9px 2px;transition:border-color .2s}
.world-bio .bio-mail input[type=email]::placeholder{color:var(--stone)}
.world-bio .bio-mail input[type=email]:focus{outline:0;border-bottom-color:var(--bronze)}
.world-bio .bio-mail button{flex:none;font-family:"Inter",sans-serif;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--obsidian);background:var(--bronze);border:0;
  border-radius:10px;padding:0 18px;cursor:pointer;transition:transform .2s ease,filter .2s ease}
.world-bio .bio-mail button:hover{transform:translateY(-1px);filter:brightness(1.06)}
.world-bio .bio-mail .m-note{font-family:"Inter",sans-serif;font-size:10px;letter-spacing:.04em;
  color:var(--stone);margin:11px 0 0}
.world-bio .bio-mail .m-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* success state — the confirm/spam-rescue line must be READ, so lift it out of the
   tiny stone fine-print into legible shell with a bronze edge marking the action. */
.world-bio .bio-mail .m-note.success{color:var(--shell);font-size:11.5px;line-height:1.55;
  margin-top:13px;padding-left:11px;border-left:2px solid var(--bronze)}

/* shimmering heart — the opt-in success ♥ (vault CLAUDE.md §37). The markup forces
   text presentation (VS-15) so the spectrum clip tints it instead of the OS RED
   emoji; shares the sigil's iridescent drift. Uses only kit globals (--spectrum,
   drift-af) so the identical rule drops into every surface's additive layer. */
.hrt{background-image:var(--spectrum);background-size:300% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:drift-af 20s linear infinite}
@media (prefers-reduced-motion:reduce){.hrt{animation:none}}

/* ---- social row ----------------------------------------------------------- */
.world-bio .bio-social{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.world-bio .bio-social a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid var(--line);border-radius:50%;color:var(--muted);
  transition:border-color .2s ease,color .2s ease,transform .2s ease}
.world-bio .bio-social a:hover{border-color:var(--bronze);color:var(--linen);transform:translateY(-2px)}
.world-bio .bio-social svg{width:18px;height:18px;display:block}

/* ---- footer --------------------------------------------------------------- */
.world-bio .foot{text-align:center;padding:46px 30px 38px;margin-top:36px}
.world-bio .foot .tag{margin-top:8px}
.world-bio .foot .sigil{font-size:26px;margin:16px 0 0}
.world-bio .foot .fine{margin-top:14px}

@media(max-width:380px){
  .world-bio .bio{padding-left:18px;padding-right:18px}
  .world-bio .bio-card .ci-title{font-size:22px}
}