/* ============================================================
   Hugo Marinho, portfolio, "clean editorial" direction (2026-07-21)
   Light, restrained, whitespace-led. Serif display + clean sans.
   ============================================================ */
:root{
  --paper:#0B0B0D;
  --paper2:#161619;
  --ink:#F2F0E9;
  --muted:#96938A;
  --faint:#615F58;
  --line:#26262B;
  --line2:#39393F;
  --accent:#C7D64B;
  --accent-ink:#D8E46B;
  --accent-soft:#1B2110;
  --warm:#E0561F;
  --pos:#C7D64B;
  --neg:#E0561F;
  --display:'Anton', 'Arial Narrow', sans-serif;
  --sans:'Inter', system-ui, -apple-system, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-ink); }
::selection{ background:var(--accent-soft); color:var(--ink); }
img{ max-width:100%; }

/* cinematic vignette + drifting glows behind everything */
body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(130% 95% at 50% -8%, transparent 52%, rgba(0,0,0,.55)); }
/* animated film grain over the whole page */
.grain{ position:fixed; inset:-50%; z-index:300; pointer-events:none; opacity:.045; mix-blend-mode:overlay; will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift .42s steps(3) infinite; }
@keyframes grainshift{ 0%{ transform:translate(0,0) } 33%{ transform:translate(-6%,4%) } 66%{ transform:translate(4%,-5%) } 100%{ transform:translate(-3%,2%) } }
/* momentum scroll: container stays in flow (natural height); JS translates it by the
   gap between native scroll and a lerped value, which is where the buttery lag comes from */
body.smooth #scroller{ will-change:transform; }
html{ scroll-padding-top:58px; }
main > section[id]{ scroll-margin-top:58px; }
@media (prefers-reduced-motion:reduce){ .grain{ animation:none; } }

.wrap{ max-width:1120px; margin:0 auto; padding:0 clamp(22px,5vw,72px); position:relative; z-index:1; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- typography ---------- */
.display{ font-family:var(--display); font-optical-sizing:auto; font-weight:600;
  line-height:1.0; letter-spacing:-0.015em; color:var(--ink); }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.lead{ font-size:clamp(17px,1.7vw,21px); line-height:1.65; color:#C6C2B7; }
.cap{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

/* section shell */
.sec{ padding:clamp(74px,13vh,150px) 0; position:relative; }
.sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(26px,4vh,44px); }
.sec-num{ font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:.05em; }
.sec-title{ font-family:var(--display); font-weight:400; font-size:clamp(40px,6.4vw,84px); line-height:.92; letter-spacing:.01em; text-transform:uppercase; margin:0; }
.sec-num{ transform:translateY(-4px); }

/* ---------- top bar ---------- */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:120; background:rgba(11,11,13,.55); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; height:58px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
.brand-logo{ height:26px; width:auto; display:block; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.brand:hover .brand-logo{ transform:rotate(-4deg) scale(1.06); }
.topnav{ display:flex; gap:clamp(14px,2.4vw,30px); }
.topnav a{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); position:relative; }
.topnav a::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.topnav a:hover{ color:var(--ink); } .topnav a:hover::after,.topnav a.active::after{ transform:scaleX(1); }
.topnav a.active{ color:var(--ink); }
.nav-toggle{ display:none; }
@media (max-width:760px){
  .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; margin-right:-10px;
    background:transparent; border:0; cursor:pointer; padding:9px; z-index:130; }
  .nav-toggle span{ display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s; }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .topnav{ position:fixed; top:0; left:0; width:100vw; height:100vh; height:100dvh; z-index:125; flex-direction:column; align-items:center; justify-content:center; gap:clamp(20px,4.5vh,38px);
    background:#0B0B0D; transform:translateY(-100%); transition:transform .4s cubic-bezier(.7,0,.2,1);
    visibility:hidden; }
  body.nav-open .topnav{ transform:none; visibility:visible; }
  .topnav a{ font-family:var(--mono); font-size:21px; letter-spacing:.18em; color:var(--ink); opacity:.55; transition:opacity .2s; }
  .topnav a:hover, .topnav a.active{ opacity:1; }
  .topnav a::after{ bottom:-9px; }
}

/* ---------- hero ---------- */
.hero{ padding:clamp(56px,12vh,130px) 0 clamp(48px,9vh,96px); }
.hero-title{ font-family:var(--display); font-weight:700; letter-spacing:-0.035em; line-height:.98;
  font-size:clamp(46px,9.4vw,132px); margin:.24em 0 0; color:var(--ink); max-width:15ch; }
.hero-title .accent{ color:var(--accent); }
.hero-lead{ margin:clamp(26px,4vh,40px) 0 0; max-width:52ch; font-size:clamp(17px,1.7vw,21px); line-height:1.62; color:#C6C2B7; }
.hero-index{ margin-top:clamp(38px,6vh,64px); border-top:1px solid var(--line); }
.hero-index a{ display:flex; align-items:baseline; gap:16px; padding:15px 4px; border-bottom:1px solid var(--line); color:var(--ink); transition:padding-left .3s cubic-bezier(.2,.8,.2,1), color .2s; }
.hero-index a:hover{ padding-left:16px; color:var(--accent); }
.hero-index .hi-num{ font-family:var(--mono); font-size:12px; color:var(--faint); min-width:26px; transition:color .2s; }
.hero-index a:hover .hi-num{ color:var(--accent); }
/* live "available" dot with a soft outward ping */
.live-dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--pos); flex:none; }
.live-dot::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--pos); animation:ping 2.4s cubic-bezier(0,.2,.8,1) infinite; }
@keyframes ping{ 0%{ transform:scale(1); opacity:.55 } 80%,100%{ transform:scale(3.4); opacity:0 } }
.hero-index .hi-name{ font-family:var(--display); font-weight:500; font-size:clamp(19px,2.4vw,26px); }
.hero-index .hi-what{ margin-left:auto; font-size:14px; color:var(--muted); text-align:right; }
@media (max-width:560px){ .hero-index .hi-what{ display:none; } }

/* hero lower row: intro + status on the left, a real portrait on the right */
.hero-lower{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(30px,5vw,72px); align-items:start; margin-top:clamp(30px,4.5vh,48px); }
.hero-status{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.hero-portrait{ justify-self:end; text-align:left; }
.hero-portrait figure{ margin:0; position:relative; }
.hero-portrait img{ display:block; width:clamp(150px,20vw,232px); height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:5px; filter:grayscale(.12) contrast(1.02); }
.hero-portrait figure::before{ content:''; position:absolute; inset:0; transform:translate(10px,10px); border:1.5px solid var(--accent); border-radius:5px; z-index:-1; }
.hero-portrait figcaption{ margin-top:16px; font-family:var(--mono); font-size:11.5px; line-height:1.55; letter-spacing:.02em; color:var(--muted); max-width:28ch; }
.hero-portrait figcaption b{ color:var(--ink); font-weight:700; }
@media (max-width:720px){ .hero-lower{ grid-template-columns:1fr; align-items:start; } .hero-portrait{ justify-self:start; } .hero-portrait figure::before{ transform:translate(8px,8px); } }

/* rise-in for the hero headline, one line clears its own clip */
@keyframes riseIn{ from{ transform:translateY(112%); } to{ transform:translateY(0); } }
.hl{ display:block; overflow:hidden; }
.hl > span{ display:block; transform:translateY(112%); }
.hl-go .hl > span{ animation:riseIn 1s cubic-bezier(.16,.9,.24,1) forwards; }
.hl-go .hl:nth-child(1) > span{ animation-delay:.04s; }
.hl-go .hl:nth-child(2) > span{ animation-delay:.16s; }

/* topbar is fixed now, so push the scroll content clear of it */
#scroller{ padding-top:58px; }
/* reveal on scroll, more cinematic rise + settle */
[data-reveal]{ opacity:0; transform:translateY(46px); transition:opacity 1.1s cubic-bezier(.16,.8,.24,1), transform 1.1s cubic-bezier(.16,.8,.24,1); }
[data-reveal].in{ opacity:1; transform:none; }
.sec-head[data-reveal]{ transition-duration:1.15s; }

/* ==================== CINEMATIC HERO (Valentin-inspired, lime on black) ==================== */
.cine-hero{ position:relative; min-height:calc(100svh - 57px); display:flex; align-items:center; overflow:hidden; }
.cine-glow{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 52% at 80% 42%, rgba(199,214,75,.11), transparent 72%),
    radial-gradient(48% 55% at 92% 88%, rgba(224,86,31,.12), transparent 70%),
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.035), transparent 60%); }
.cine-wrap{ position:relative; z-index:2; width:100%; padding-top:clamp(26px,6vh,60px); padding-bottom:clamp(28px,5vh,54px); }
.cine-top{ display:flex; justify-content:space-between; gap:16px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:clamp(28px,9vh,110px); }
.cine-portrait{ position:absolute; right:clamp(-14px,0.5vw,34px); top:50%; transform:translateY(calc(-48% + var(--py,0px)));
  width:clamp(230px,31vw,438px); aspect-ratio:1/1; object-fit:cover; z-index:1; border-radius:3px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 36%); mask-image:linear-gradient(90deg, transparent 0, #000 36%); }
.cine-hi{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.cine-name{ font-family:var(--mono); font-size:clamp(13px,1.5vw,17px); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-top:7px; }
.cine-mega{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.006em; line-height:.85;
  font-size:clamp(40px,7.6vw,108px); margin:clamp(12px,2.2vh,24px) 0 0; color:var(--ink); position:relative; z-index:2; }
.cine-mega .lime{ display:block; color:var(--accent); }
.cine-bio{ margin-top:clamp(24px,3.6vh,38px); max-width:46ch; font-size:clamp(15px,1.45vw,18px); line-height:1.6; color:#C6C2B7; position:relative; z-index:2; }
.cine-bio b{ color:var(--ink); font-weight:600; }
.cine-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-top:clamp(30px,5vh,52px); position:relative; z-index:2; }
.cine-serv{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); line-height:2; }
.cine-scroll{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:9px; }
.cine-scroll .ar{ animation:cbob 1.8s ease-in-out infinite; display:inline-block; }
@keyframes cbob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(5px) } }
.cine-hero [data-reveal]{ transition-duration:1.1s; }
@media (max-width:820px){
  .cine-hero{ min-height:0; flex-direction:column; align-items:stretch; }
  .cine-portrait{ position:relative; right:auto; top:auto; transform:none; width:min(66%,290px); display:block; margin:6px 0 clamp(18px,3vh,28px) auto;
    -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent); mask-image:linear-gradient(180deg,#000 80%,transparent); }
  .cine-mega{ font-size:clamp(34px,10.2vw,72px); }
  .cine-foot{ flex-direction:column; align-items:flex-start; }
}

/* wastrel cast strip: real different characters */
.cast-strip{ display:flex; gap:clamp(8px,1.4vw,14px); flex-wrap:wrap; margin-top:18px; justify-content:center; }
.castcard{ width:clamp(80px,10vw,110px); height:clamp(80px,10vw,110px); background-repeat:no-repeat; background-size:contain; background-position:center bottom;
  background-color:var(--paper2); border:1px solid var(--line2); border-radius:3px; image-rendering:pixelated; opacity:.86;
  transition:opacity .22s, transform .26s cubic-bezier(.2,.8,.2,1), border-color .22s; }
.castcard:hover{ opacity:1; transform:translateY(-6px); border-color:var(--accent); }
/* 360 turntable cards: 8-frame horizontal sheet stepped by JS */
.castcard.spin{ background-size:800% 100%; background-position:0% center; }

/* cycling hero keyword, locked to two lines so nothing jumps */
.cyc{ transition:opacity .3s ease, transform .34s cubic-bezier(.2,.8,.2,1); }
.cine-mega .cyc{ display:block; min-height:0.9em; }
.cyc.swap{ opacity:0; transform:translateY(0.16em); }

/* footer marquee: a big scrolling wordmark, with room around it */
.marquee{ overflow:hidden; white-space:nowrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(16px,2.4vh,26px) 0; margin:clamp(30px,5vh,60px) 0 clamp(48px,7vh,84px); }
.marquee-track{ display:inline-block; white-space:nowrap; will-change:transform; animation:marq 24s linear infinite; }
.marquee em{ font-style:normal; font-family:var(--display); text-transform:uppercase; font-size:clamp(32px,5vw,62px); color:var(--ink); letter-spacing:.01em; padding:0 .3em; }
.marquee em .d{ color:var(--accent); }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marq{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* experience timeline (real career, honest) */

/* ---------- editorial two-column project row ---------- */
.row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(32px,5vw,72px); align-items:center; }
.panel{ background:var(--paper2); border:1px solid var(--line2); border-radius:3px; padding:clamp(20px,2.4vw,30px); position:relative; }
.stat-num{ font-family:var(--display); font-weight:600; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600; font-size:15px;
  padding:13px 24px; border-radius:2px; cursor:pointer; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:background .2s, color .2s, border-color .2s, transform .15s; }
.btn:hover{ background:var(--accent-ink); border-color:var(--accent-ink); color:#0B0B0D; transform:translateY(-2px); }
.btn-o{ background:transparent; color:var(--ink); border-color:var(--line2); }
.btn-o:hover{ background:transparent; color:var(--accent); border-color:var(--accent); }

/* framed product screenshot: a real live product inside minimal browser chrome */
a.shot{ display:block; text-decoration:none; border:1px solid var(--line2); border-radius:9px; overflow:hidden;
  background:var(--paper2); box-shadow:0 34px 70px -34px rgba(0,0,0,.8);
  transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s, border-color .25s; }
a.shot:hover{ transform:translateY(-5px); border-color:var(--accent); box-shadow:0 46px 96px -34px rgba(0,0,0,.9); }
.shot-bar{ display:flex; align-items:center; gap:8px; padding:9px 13px; background:#101013; border-bottom:1px solid var(--line); }
.shot-bar i{ width:10px; height:10px; border-radius:50%; background:var(--line2); flex:0 0 auto; }
.shot-url{ flex:1; text-align:center; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.03em; transition:color .25s; }
a.shot:hover .shot-url{ color:var(--accent); }
.shot-img{ display:block; width:100%; height:auto; filter:brightness(.9) saturate(.96); transition:filter .32s; }
a.shot:hover .shot-img{ filter:brightness(1) saturate(1); }
.shot-cap{ margin-top:11px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint); }

/* Fit or Pass: the agent's tools, chips the model can reach for */
.agent-tools{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.agent-tools span{ font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--ink);
  background:var(--paper); border:1px solid var(--line2); border-radius:3px; padding:7px 11px; }
.agent-tools span.key{ border-color:var(--accent); color:var(--accent); }

/* phone mockup, for the portrait mobile-game shot (Layover) */
a.phone{ display:block; width:min(290px,78%); margin:0 auto; padding:9px; border-radius:36px; text-decoration:none;
  background:linear-gradient(160deg,#1c1c20,#111114); border:1px solid var(--line2);
  box-shadow:0 44px 84px -32px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .3s; }
a.phone:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:0 58px 108px -32px rgba(0,0,0,.92); }
.phone-screen{ position:relative; display:block; border-radius:28px; overflow:hidden; background:#000; }
.phone-screen img, .phone-screen video{ display:block; width:100%; height:auto; filter:brightness(.93); transition:filter .32s; }
a.phone:hover .phone-screen img, a.phone:hover .phone-screen video{ filter:brightness(1.04); }
.phone-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:38%; height:16px; background:#0a0a0c; border-radius:0 0 12px 12px; z-index:2; }
/* class names the JS still targets */
.btn-acc{ background:transparent; color:var(--ink); border:1px solid var(--line2); border-radius:2px; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .15s; }
.btn-acc:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.btn-fill{ background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:2px; cursor:pointer;
  transition:background .2s, color .2s, transform .15s; }
.btn-fill:hover{ background:var(--accent-ink); border-color:var(--accent-ink); color:#0B0B0D; transform:translateY(-2px); }
.btn-warm{ background:transparent; color:var(--warm); border:1px solid var(--warm); border-radius:2px; cursor:pointer; transition:background .2s,color .2s,transform .15s; }
.btn-warm:hover{ background:var(--warm); color:var(--paper); transform:translateY(-2px); }
/* micro: lime glow lift on the filled buttons */
.btn:hover, .btn-fill:hover{ box-shadow:0 12px 36px rgba(199,214,75,.22); }
.sec-title{ will-change:transform; }
.panel, .turn-card{ transition:border-color .35s ease; }
.panel:hover{ border-color:#4a4a52; }
/* the lab chart reads as a titled instrument, echoing the framed product shots */
.lab-head{ display:flex; align-items:center; gap:11px; margin:calc(-1 * clamp(20px,2.4vw,30px)) calc(-1 * clamp(20px,2.4vw,30px)) 18px; padding:11px 15px; background:#101013; border-bottom:1px solid var(--line); border-radius:2px 2px 0 0; }
.lab-dots{ display:flex; gap:5px; } .lab-dots i{ width:9px; height:9px; border-radius:50%; background:var(--line2); }

/* ---------- Wastrel turntable + pose strip ---------- */
.turn-card{ background:var(--paper2); border:1px solid var(--line2); border-radius:3px; padding:clamp(18px,3vw,30px); }
#turnStage{ display:flex; align-items:flex-end; justify-content:center; cursor:grab; }
#turnSprite{ image-rendering:pixelated; }
.pose{ width:clamp(76px,10vw,104px); height:clamp(76px,10vw,104px); background-repeat:no-repeat;
  background-size:800% 100%; background-position:0 0; background-color:var(--paper2);
  border:1px solid var(--line); border-radius:3px; image-rendering:pixelated; opacity:.9;
  transition:opacity .22s, transform .22s cubic-bezier(.2,.8,.2,1); }
.pose.anim{ background-size:contain; background-position:center bottom; }
.pose:hover{ opacity:1; transform:translateY(-4px); }

/* ---------- Polymarket chart ---------- */
input[type=range]{ -webkit-appearance:none; appearance:none; height:3px; background:var(--line2); border-radius:3px; outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); cursor:pointer; border:2px solid var(--paper); box-shadow:0 1px 4px rgba(0,0,0,.2); }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--accent); cursor:pointer; border:2px solid var(--paper); }

/* ---------- scam checker ---------- */
.spec{ text-align:left; font-family:var(--sans); font-size:14px; line-height:1.45; padding:16px; border-radius:3px;
  background:var(--paper2); color:var(--ink); border:1px solid var(--line2); cursor:pointer; transition:border-color .2s, background .2s, transform .2s; }
.spec:hover{ transform:translateY(-3px); border-color:var(--line2); }

/* ---------- arcade ---------- */
#arcadeCanvas{ display:block; width:100%; height:auto; border-radius:3px; background:#0b0f0c; image-rendering:auto;
  touch-action:manipulation; -webkit-user-select:none; user-select:none; }
.bootbtn{ width:100%; padding:clamp(30px,6vh,64px) 20px; background:#12160f; border:0; border-radius:3px; color:#c7d64b;
  font-family:var(--mono); font-size:15px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  transition:filter .2s, transform .15s; }
.bootbtn:hover{ filter:brightness(1.18); transform:translateY(-2px); }
/* neon run: title-card preview (clickable, boots the real game) + slim CTA under it */
.arcade-preview{ display:block; width:100%; height:auto; border-radius:5px; border:1px solid var(--line2); cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .3s; }
.arcade-preview:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 24px 50px -26px rgba(0,0,0,.85); }
.bootbtn.arcade-cta{ width:auto; display:inline-flex; align-items:center; gap:8px; padding:12px 22px; margin-top:16px;
  font-size:13px; letter-spacing:.12em; background:var(--accent); color:#0B0B0D; font-weight:700; }
.bootbtn.arcade-cta:hover{ filter:none; background:var(--accent-ink); }

/* neon run: game-over name entry + global leaderboard overlay (over the canvas) */
.nr-over{ position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  background:rgba(6,8,10,.93); border-radius:4px; padding:16px; text-align:center; font-family:var(--mono); overflow:auto; }
.nr-title{ color:#ff5c5c; font-weight:700; font-size:clamp(17px,3.2vw,22px); letter-spacing:.06em; }
.nr-score{ color:#cdd6cf; font-size:13px; } .nr-score b{ color:var(--accent); font-size:16px; }
.nr-entry{ display:flex; gap:8px; margin-top:2px; }
.nr-input{ background:#12160f; border:1px solid var(--line2); color:var(--ink); font-family:var(--mono); font-size:14px; padding:9px 12px; border-radius:3px; width:min(150px,42vw); outline:none; }
.nr-input:focus{ border-color:var(--accent); }
.nr-submit,.nr-again,.nr-leave{ font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:9px 16px; border-radius:3px; cursor:pointer; border:0; }
.nr-submit,.nr-again{ background:var(--accent); color:#0B0B0D; }
.nr-submit:hover,.nr-again:hover{ background:var(--accent-ink); }
.nr-leave{ background:transparent; color:var(--muted); border:1px solid var(--line2); }
.nr-leave:hover{ color:var(--ink); border-color:var(--line2); }
.nr-actions{ display:flex; gap:8px; align-items:center; margin-top:4px; }
.nr-board{ width:min(250px,92%); }
.nr-bh{ color:var(--muted); font-size:9px; letter-spacing:.14em; margin-bottom:5px; }
.nr-row{ display:flex; align-items:center; gap:8px; padding:2px 8px; font-size:12px; color:rgba(255,255,255,.68); line-height:1.7; }
.nr-row.me{ background:rgba(199,214,75,.15); border-radius:3px; color:var(--accent); font-weight:700; }
.nr-rk{ width:20px; text-align:right; color:var(--faint); } .nr-row.me .nr-rk{ color:var(--accent); }
.nr-nm{ flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nr-sc{ font-weight:700; }
.nr-empty{ color:var(--faint); font-size:11px; }

/* ---------- contact link ---------- */
.mailto{ display:inline-flex; align-items:baseline; gap:12px; font-family:var(--display); font-weight:500; letter-spacing:0.02em;
  color:var(--ink); line-height:1.15; transition:color .2s, transform .2s cubic-bezier(.2,.8,.2,1); }
.mailto .addr{ position:relative; padding-bottom:6px; }
.mailto .addr::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); transform:scaleX(1); transform-origin:left; transition:transform .3s; }
.mailto .arr{ font-family:var(--sans); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.mailto:hover{ color:var(--accent); transform:translateY(-2px); }
.mailto:hover .arr{ transform:translateX(6px); }
/* idle life: the email underline breathes + glows, the arrow ticks, the outline button bobs */
@media (prefers-reduced-motion: no-preference){
  .mailto .addr::after{ animation:mailUnderline 2.4s ease-in-out infinite; }
  .mailto .arr{ animation:mailArrow 2.4s ease-in-out infinite; }
  .mailto:hover .addr::after, .mailto:hover .arr{ animation:none; }
  .foot .btn-o{ animation:btnBob 3.6s ease-in-out infinite; }
  .foot .btn-o:hover{ animation:none; }
}
@keyframes mailUnderline{ 0%,100%{ opacity:.4; box-shadow:0 0 0 rgba(199,214,75,0); } 50%{ opacity:1; box-shadow:0 5px 18px rgba(199,214,75,.4); } }
@keyframes mailArrow{ 0%,100%{ transform:translateX(0); opacity:.6; } 55%{ transform:translateX(5px); opacity:1; } }
@keyframes btnBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line2); padding:clamp(56px,10vh,110px) 0 clamp(40px,7vh,72px); }
.foot-title{ font-family:var(--display); font-weight:700; font-size:clamp(40px,7vw,88px); line-height:.98; letter-spacing:0.01em; color:var(--ink); }
.foot-title .accent{ color:var(--accent); }
.foot-links a{ display:block; padding:6px 0; color:var(--ink); font-weight:500; }
.foot-links a:hover{ color:var(--accent); }
.foot-bottom{ margin-top:clamp(40px,6vh,64px); padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hl > span{ transform:none !important; }
}

/* ---------- accessibility: keyboard focus + skip link ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible, .castcard:focus-visible, video:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
:focus:not(:focus-visible){ outline:none; }
.skip-link{ position:fixed; top:10px; left:10px; z-index:1000; background:var(--accent); color:#0B0B0D;
  font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.04em; padding:11px 18px; border-radius:3px;
  transform:translateY(-160%); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.skip-link:focus{ transform:translateY(0); }