/* =============================================================================
   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 DECK — the real apex device, scaled to the bio column. A word
   pair ("The Creative" + the LOCKED draw) rhymes with a fanned five-card deck
   below; the centre ignites on the drawn self. "The Creative" sits on its own
   line so the draw word's length can change without nudging it. Markup + motion
   ported from the apex (root/apex-deck.css); these are the compact values. ---- */
.world-bio .word-line{margin:14px 0 0;font-family:"DM Serif Display",serif;font-style:italic;
  line-height:1.12;display:flex;flex-direction:column;align-items:center;gap:1px}
.world-bio .word-line .lead{font-size:clamp(16px,4.6vw,20px);color:var(--shell)}
/* neighbours add width on a tiny column — keep the draw word solo + bold */
.world-bio .word-line .wl-side{display:none}
.world-bio .word-line .locked{font-size:clamp(26px,8vw,34px);color:var(--linen);white-space:nowrap}

/* the deck stage — five fixed fan slots, centre card front. Tuned small + tight
   for a 460px column (apex uses --card-w:min(268px,29vh) and a wide spread). */
.world-bio .bio-deck{--card-w:clamp(108px,30vw,134px);
  --fan1:8deg; --fan2:16deg; --sc1:.88; --sc2:.76; --dim1:.4; --dim2:.24;
  --tx1:64px; --tx2:108px;
  position:relative;width:100%;height:calc(var(--card-w)*7/5 + 26px);
  margin:10px 0 2px;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.world-bio .bio-deck.grabbing{cursor:grabbing}
.world-bio .bio-deck .card{position:absolute;left:50%;bottom:14px;width:var(--card-w);height:calc(var(--card-w)*7/5);
  border-radius:14px;overflow:hidden;cursor:pointer;
  transition:transform .55s cubic-bezier(.2,.72,.18,1),opacity .55s ease}
.world-bio .bio-deck .card-face{position:absolute;inset:0;border-radius:14px;overflow:hidden}
.world-bio .bio-deck .card[data-pos="0"]{transform:translateX(-50%);z-index:5;opacity:1}
.world-bio .bio-deck .card[data-pos="-1"]{transform:translateX(calc(-50% - var(--tx1))) rotate(calc(-1 * var(--fan1))) scale(var(--sc1));z-index:4;opacity:var(--dim1)}
.world-bio .bio-deck .card[data-pos="1"]{transform:translateX(calc(-50% + var(--tx1))) rotate(var(--fan1)) scale(var(--sc1));z-index:4;opacity:var(--dim1)}
.world-bio .bio-deck .card[data-pos="-2"]{transform:translateX(calc(-50% - var(--tx2))) rotate(calc(-1 * var(--fan2))) scale(var(--sc2));z-index:3;opacity:var(--dim2)}
.world-bio .bio-deck .card[data-pos="2"]{transform:translateX(calc(-50% + var(--tx2))) rotate(var(--fan2)) scale(var(--sc2));z-index:3;opacity:var(--dim2)}

/* the centre card — warm-black face with a bronze ignite ring + linen glow when lit */
.world-bio .bio-deck .card.center .card-face{background:radial-gradient(118% 78% at 50% 6%, rgba(176,128,48,.13), transparent 58%), var(--obsidian);
  box-shadow:0 1px 0 rgba(245,240,232,.05) inset, 0 18px 38px -22px #000}
.world-bio .bio-deck .card.center::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(176,128,48,.22)}
.world-bio .bio-deck .card.center.lit::after{box-shadow:inset 0 0 0 1px rgba(176,128,48,.5), 0 0 30px -6px rgba(176,128,48,.28)}
.world-bio .bio-deck .fig{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);
  width:88%;height:86%;object-fit:contain;object-position:center bottom}
.world-bio .bio-deck .card.center.lit .fig{filter:drop-shadow(0 0 18px rgba(245,240,232,.2))}
[data-theme="light"] .world-bio .bio-deck .card.center.lit .fig{filter:drop-shadow(0 8px 16px rgba(20,15,8,.26))}

/* the rank corners — only on the lit centre card */
.world-bio .bio-deck .rank{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;
  color:var(--bronze);opacity:.9}
.world-bio .bio-deck .card.center:not(.lit) .rank{display:none}
.world-bio .bio-deck .rank.tl{top:9px;left:10px}
.world-bio .bio-deck .rank.br{bottom:9px;right:10px;transform:rotate(180deg)}
.world-bio .bio-deck .rank .ltr{font-family:"DM Serif Display",serif;font-style:italic;font-size:17px}
.world-bio .bio-deck .rank .sig{font-family:"Noto Sans Symbols 2","Apple Symbols",serif;font-size:10px;margin-top:2px}

/* dormant flank cards — dim panel + a hairline frame */
.world-bio .bio-deck .card.flank .card-face{background:radial-gradient(120% 80% at 50% 10%, var(--panel), var(--bg))}
.world-bio .bio-deck .card.flank .card-face::after{content:"";position:absolute;inset:11px;border-radius:9px;border:1px solid rgba(176,128,48,.12)}

/* ---- 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 .word-line .locked,
.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;
  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}}
/* the drift runs on ALL THREE from page load so their gradient PHASE stays identical
   (the name + sigils reveal it immediately; the drawn word holds plain linen until it
   ignites, then .lit only UNCOVERS the already-in-phase gradient — never restarts it,
   so the name's shimmer and the landed word's shimmer are one matched field). */
.world-bio .bio-name,
.world-bio .sigil{color:transparent;-webkit-text-fill-color:transparent}
.world-bio .word-line .locked{color:var(--linen);-webkit-text-fill-color:var(--linen)}
.world-bio .word-line .locked.lit{color:transparent;-webkit-text-fill-color:transparent}
@media (prefers-reduced-motion:reduce){
  .world-bio .bio-name,.world-bio .word-line .locked,.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}
}