/* =====================================================================
   FLARE — the "alive" layer. View Transitions, boot sequence,
   custom cursor, magnetic interactions, shader-reactive accents.
   Loaded after main.css. All CSP-safe, all reduced-motion aware.
   ===================================================================== */

/* ---------- compat aliases (resume_body.html inline styles use old var names) ---------- */
:root{
  --accent:var(--signal); --ink-soft:#2c2f34; --muted:var(--ash-2);
  --paper-2:#E8E3DA; --faint:#8d8f8a;
}

/* mobile: hide the ledger meta column-label that maps to hidden columns */
@media(max-width:900px){ .ledger-meta span:last-child{display:none} }

/* ---------- cross-document View Transitions ---------- */
@view-transition { navigation: auto; }

::view-transition-group(*){ animation-timing-function:cubic-bezier(.16,1,.3,1); }
::view-transition-old(root){ animation:vt-old .42s cubic-bezier(.16,1,.3,1) both; }
::view-transition-new(root){ animation:vt-new .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes vt-old{ to{ opacity:0; transform:translateY(-14px); filter:blur(4px);} }
@keyframes vt-new{ from{ opacity:0; transform:translateY(20px); filter:blur(6px);} }

/* persistent chrome — these elements do NOT crossfade, they carry across */
.masthead{ view-transition-name:masthead; }
.footer{ view-transition-name:sitefooter; }
#surface{ view-transition-name:surface; }
.marquee{ view-transition-name:marquee; }

/* the hero-title morph: ledger row title flies into the article headline.
   names are assigned at click-time in JS (only one per page can hold it). */
::view-transition-group(hero-title){ animation-duration:.62s; }
::view-transition-old(hero-title),::view-transition-new(hero-title){ mix-blend-mode:normal; height:100%; }

/* ---------- BOOT SEQUENCE ---------- */
#boot{position:fixed;inset:0;z-index:9999;background:var(--ink);display:flex;
  flex-direction:column;justify-content:center;padding:0 var(--gutter);
  font-family:var(--mono);color:var(--paper);overflow:hidden}
#boot.done{animation:boot-wipe .9s cubic-bezier(.76,0,.24,1) forwards}
@keyframes boot-wipe{to{clip-path:inset(0 0 100% 0)}}
#boot .boot-grid{position:absolute;inset:0;opacity:.06;
  background-image:linear-gradient(var(--ash) 1px,transparent 1px),linear-gradient(90deg,var(--ash) 1px,transparent 1px);
  background-size:38px 38px;animation:grid-drift 18s linear infinite}
@keyframes grid-drift{to{background-position:38px 38px}}
#boot .boot-inner{position:relative;max-width:var(--wrap);margin:0 auto;width:100%}
#boot .boot-lines{font-size:13px;letter-spacing:.04em;color:var(--ash);min-height:108px;line-height:1.9}
#boot .boot-lines .ok{color:var(--signal)}
#boot .boot-name{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,9vw,7rem);
  line-height:.9;letter-spacing:-.04em;text-transform:uppercase;margin:22px 0 0;color:#fff}
#boot .boot-bar{margin-top:26px;height:2px;width:min(420px,70vw);background:rgba(155,160,166,.2);position:relative;overflow:hidden}
#boot .boot-bar i{position:absolute;inset:0 100% 0 0;background:var(--signal);transition:right .1s linear}
#boot .boot-pct{font-size:12px;letter-spacing:.1em;color:var(--ash);margin-top:10px}
html.booting{overflow:hidden}
html.booting .page{opacity:0}

/* ---------- CUSTOM CURSOR (desktop, fine-pointer only) ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;
  border-radius:50%;mix-blend-mode:difference;will-change:transform}
.cursor-dot{width:7px;height:7px;background:#fff;margin:-3.5px 0 0 -3.5px}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.7);margin:-19px 0 0 -19px;
  transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),opacity .25s var(--ease),background .25s var(--ease)}
.cursor-ring.hot{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,255,255,.08);border-color:transparent}
.cursor-ring.hide{opacity:0}
.cursor-label{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;mix-blend-mode:difference;transform:translate(14px,14px);opacity:0;transition:opacity .2s var(--ease);white-space:nowrap}
.cursor-label.on{opacity:1}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring,.cursor-label{display:none!important}}
@media (hover:hover) and (pointer:fine){html.cursor-on,html.cursor-on *{cursor:none!important}}

/* magnetic targets get a tiny lift */
.mag{transition:transform .3s var(--ease)}

/* ledger row: artifact-peek + scanline on hover */
.lrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--signal);
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.lrow:hover::before{transform:scaleY(1)}
.lrow .ltitle{transition:transform .35s var(--ease)}
.lrow:hover .ltitle{transform:translateX(6px)}

/* link char-flicker underline already in main; add a glow pulse on signal links */
.ways a:hover,.aside .linkrow a:hover{text-shadow:0 0 18px rgba(193,18,31,.5)}

/* hero monument: subtle chromatic settle on load (one-shot) */
.monument .r-up{animation:none}

/* reduced motion: kill the show, keep it usable */
@media(prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  #boot{display:none!important}
  html.booting .page{opacity:1}
  .cursor-dot,.cursor-ring,.cursor-label{display:none!important}
  #boot .boot-grid{animation:none}
}