/* Hero */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--border);background:radial-gradient(900px 520px at 12% 0%,var(--glow),transparent 65%),radial-gradient(800px 500px at 95% 20%,var(--glow-2),transparent 65%),var(--bg)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,var(--scrim),transparent 65%);pointer-events:none}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero .wrap{position:relative;z-index:2;padding-block:var(--s-8)}
.hero h1{font-size:clamp(3.2rem,11vw,7.5rem);margin-bottom:var(--s-4);letter-spacing:-.05em}
.hero .lead{font-size:clamp(1.15rem,2.2vw,1.45rem);max-width:30em;color:var(--text);margin-bottom:var(--s-3)}
.hero .sub{font-family:var(--font-mono);font-size:.88rem;color:var(--text-dim);margin-bottom:var(--s-6)}
.hero .btn-row{margin-bottom:var(--s-2)}
.aurora{will-change:transform;transform:translateZ(0);position:absolute;inset:-20%;background:conic-gradient(from 0deg at 30% 40%,transparent,var(--glow),transparent 40%,var(--glow-2),transparent 80%);filter:blur(70px);opacity:.55;animation:drift 28s linear infinite;pointer-events:none}
@keyframes drift{to{transform:rotate(360deg)}}
html[data-motion="off"] .aurora{animation:none}

/* Scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:var(--accent-grad);transform:scaleX(0);transform-origin:left;pointer-events:none}
.to-top{position:fixed;right:18px;bottom:18px;z-index:90;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .3s,transform .3s}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top svg{width:18px;height:18px}

/* Custom scrollbar with percentage (mouse only; JS adds .has-sb) */
html.has-sb{scrollbar-width:none}
html.has-sb::-webkit-scrollbar{display:none}
.sb{position:fixed;top:0;right:0;bottom:0;width:18px;z-index:250;opacity:0;transition:opacity .25s,width .2s}
.sb:hover,.sb.drag{opacity:1}
.sb::before{content:"";position:absolute;top:0;bottom:0;right:3px;width:8px;border-radius:8px;background:color-mix(in srgb,var(--text) 10%,transparent);border:1px solid var(--border);box-sizing:border-box;transition:width .2s}
.sb:hover::before,.sb.drag::before{width:12px}
.sb.off{display:none}
.sb-thumb{position:absolute;top:0;right:3px;width:8px;border-radius:8px;background:var(--accent-grad);box-shadow:0 0 14px var(--glow),0 0 0 1px color-mix(in srgb,var(--bg) 60%,transparent);cursor:grab;will-change:transform;transition:width .2s}
.sb:hover .sb-thumb,.sb.drag .sb-thumb{width:12px}
.sb.drag .sb-thumb{cursor:grabbing}
.sb-pct{position:absolute;right:calc(100% + 10px);top:50%;translate:0 -50%;padding:.2rem .5rem;border-radius:999px;background:var(--surface);border:1px solid var(--border-strong);color:var(--text);font:600 .72rem var(--font-mono);opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
.sb:hover .sb-pct,.sb.drag .sb-pct{opacity:1;transform:none}
@media print{.sb{display:none!important}}

/* Custom cursor (mouse only) */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:400;border-radius:50%;opacity:0;will-change:transform}
.cursor-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--accent);box-shadow:0 0 14px 2px var(--accent)}
.cursor-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--accent);transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),opacity .3s,background .25s}
.cursor-on .cursor-dot,.cursor-on .cursor-ring{opacity:.9}
.cursor-ring.hot{width:44px;height:44px;margin:-22px 0 0 -22px;background:var(--glow)}
.cursor-ring.down{width:20px;height:20px;margin:-10px 0 0 -10px;background:var(--glow)}
.drop{position:fixed;width:0;height:0;pointer-events:none;z-index:399}
.drop-ring{position:absolute;left:-34px;top:-34px;width:68px;height:68px;border-radius:50%;border:2px solid var(--accent);box-shadow:0 0 18px var(--glow),inset 0 0 14px var(--glow);opacity:0;transform:scale(.05);animation:drop-ring .9s cubic-bezier(.15,.7,.3,1) forwards}
.drop-bead{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);opacity:0;animation:drop-bead .65s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes drop-ring{0%{opacity:.9;transform:scale(.05)}60%{opacity:.35}100%{opacity:0;transform:scale(1)}}
@keyframes drop-bead{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 10px)) scale(.3)}}
.cursor-hide .cursor-dot,.cursor-hide .cursor-ring{opacity:0}

/* Reveal on scroll */
html.js:not([data-motion="off"]) .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
html.js:not([data-motion="off"]) .reveal.in{opacity:1;transform:none}
.hero-rise{animation:rise .6s var(--ease) both;animation-delay:var(--d,0s)}
html[data-motion="off"] .hero-rise{animation:none}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.type-caret::after{content:"";display:inline-block;width:.55ch;height:1.05em;margin-left:.15ch;vertical-align:-.15em;background:var(--accent);animation:blink 1s steps(2) infinite}
html[data-motion="off"] .type-caret::after{display:none}
@keyframes blink{50%{opacity:0}}

/* Cross-page view transitions removed: the browser freezes the old page as a still image while it waits
   for the new one, which stalled the click droplet and banner ripple mid-animation. */

/* Print: clean CV and pages */
@media print{
  :root,:root[data-theme="dark"]{--bg:#fff;--surface:#fff;--surface-2:#fff;--text:#000;--text-dim:#222;--text-faint:#444;--border:#bbb;--link:#000;--accent:#000}
  .site-header,.site-footer,.progress,.to-top,.cursor-dot,.cursor-ring,canvas,.btn-row,.aurora,.skip{display:none!important}
  body{font-size:11pt;background:#fff;color:#000}
  .reveal{opacity:1!important;transform:none!important}
  .card,.page-head{box-shadow:none;background:#fff}
  a{color:#000;text-decoration:underline}
  .cv-frame{display:none}
  .cv-print-note{display:block!important}
}