/* devamped — hand-built dark theme. inspired by minimal dev portfolios, original code. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#050506;
  --bg2:#0d0d10;
  --bg3:#141419;
  --accent:hsl(288, 77%, 51%);
  --accent2:hsl(288, 77%, 68%);
  --text:#f6f0f8;
  --muted:#6f6272;
  --muted2:#ac9ab2;
  --border:rgba(255,255,255,.08);
  --border-accent:rgba(188,34,226,.35);
  --radius:10px;
  --radius-lg:16px;
  --sans:'Plus Jakarta Sans',Inter,system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;overflow-x:hidden;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--accent);color:#000}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a2a2e;border-radius:3px}

/* ---- background: living aurora + stars + meteors + grain + glyphs ---- */
.grain{position:fixed;inset:-40px;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.4s steps(3) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-18px,10px)}66%{transform:translate(14px,-12px)}100%{transform:translate(0,0)}}
.bg-parallax{position:fixed;inset:0;z-index:0;pointer-events:none;will-change:transform}
.aurora{position:fixed;inset:-12vmax;pointer-events:none;filter:saturate(1.15)}
.blob{position:absolute;border-radius:50%;mix-blend-mode:screen;filter:blur(70px);will-change:transform,border-radius}
.b1{width:56vmax;height:56vmax;left:-14vmax;top:-16vmax;background:radial-gradient(circle at 38% 38%,rgba(188,34,226,.32),transparent 65%);animation:drift1 24s ease-in-out infinite alternate}
.b2{width:44vmax;height:44vmax;right:-12vmax;top:6%;background:radial-gradient(circle at 60% 42%,rgba(122,44,255,.20),transparent 65%);animation:drift2 19s ease-in-out infinite alternate}
.b3{width:52vmax;height:52vmax;left:24%;bottom:-24vmax;background:radial-gradient(circle at 50% 50%,rgba(255,77,205,.13),transparent 65%);animation:drift3 27s ease-in-out infinite alternate}
@keyframes drift1{0%{transform:translate(0,0) scale(1);border-radius:50%}50%{transform:translate(5vmax,3vmax) scale(1.12);border-radius:44% 56% 58% 42%/52% 44% 56% 48%}100%{transform:translate(-3vmax,5vmax) scale(.94);border-radius:56% 44% 42% 58%/46% 58% 42% 54%}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-4vmax,4vmax) scale(1.15)}100%{transform:translate(3vmax,-3vmax) scale(.92)}}
@keyframes drift3{0%{transform:translate(0,0) scale(1);border-radius:50%}50%{transform:translate(-5vmax,-4vmax) scale(1.1);border-radius:58% 42% 45% 55%/45% 55% 45% 55%}100%{transform:translate(4vmax,2vmax) scale(.95)}}
.beam{position:fixed;top:-42vmax;left:50%;width:90vmax;height:90vmax;margin-left:-45vmax;pointer-events:none;filter:blur(28px);opacity:.7;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(188,34,226,.05) 40deg,transparent 80deg,transparent 180deg,rgba(122,44,255,.05) 220deg,transparent 260deg);
  animation:beamSpin 46s linear infinite}
@keyframes beamSpin{to{transform:rotate(360deg)}}
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--tw,3s) ease-in-out infinite}
.star.pink{background:#f3c8ff;box-shadow:0 0 6px rgba(188,34,226,.8)}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.8)}50%{opacity:.85;transform:scale(1.15)}}
.meteor{position:fixed;top:0;left:0;width:130px;height:2px;z-index:0;pointer-events:none;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),transparent);filter:drop-shadow(0 0 6px var(--accent));
  animation:meteorFly 1.1s ease-in forwards}
@keyframes meteorFly{from{opacity:1}to{transform:translate(-24vw,20vh);opacity:0}}
.floaters{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.floater{position:absolute;bottom:-8%;color:var(--accent);opacity:0;font-family:var(--mono);font-weight:600;white-space:nowrap;animation-name:floatUp;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:0}8%{opacity:.1}92%{opacity:.1}100%{transform:translateY(-112vh) rotate(8deg);opacity:0}}

.nav,main,footer{position:relative;z-index:1}
.mono{font-family:var(--mono);font-size:.85em;color:var(--muted2)}

/* ---- nav: fixed, transparent -> blur on scroll ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:22px;padding:18px 40px;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.sc{background:rgba(5,5,6,.82);backdrop-filter:blur(14px);border-color:var(--border)}
.logo{font-weight:800;font-size:1.05rem;letter-spacing:-.3px;text-decoration:none}
.logo span{color:var(--accent)}
.nav nav{display:flex;gap:4px;margin-left:auto}
.nav nav a{font-size:.82rem;font-weight:500;color:var(--muted2);padding:8px 14px;border-radius:7px;text-decoration:none;transition:color .2s,background .2s}
.nav nav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.btn-small{border:1px solid var(--border);padding:8px 16px;border-radius:8px;text-decoration:none;font-size:.82rem;font-weight:600;color:var(--muted2);background:rgba(255,255,255,.03)}
.btn-small:hover{color:var(--text);border-color:var(--border-accent)}

/* ---- layout ---- */
main{max-width:1080px;margin:0 auto;padding:0 32px 70px}
.hero{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 30px}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--accent);display:inline-block;opacity:.7}
.hero h1{font-size:clamp(2.8rem,6.4vw,5rem);line-height:1.04;letter-spacing:-1.5px;font-weight:800;max-width:12ch}
.hero h1 span{color:var(--accent)}
.sub{margin-top:20px;color:var(--muted2);font-size:.96rem;line-height:1.8;max-width:440px}
.sub strong{color:var(--text)}
.bio-line{margin-top:14px;font-size:.86rem;color:var(--muted2);border-left:2px solid var(--border-accent);padding-left:12px;max-width:520px}
.cta-row{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

/* chamfered primary, quiet ghost with diamond tick */
.btn-primary{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#0a0a0a;font-size:.85rem;font-weight:700;padding:13px 24px 13px 20px;border:none;cursor:pointer;text-decoration:none;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transition:transform .22s,box-shadow .22s;isolation:isolate;overflow:hidden}
.btn-primary::before{content:'';position:absolute;inset:0;background:var(--accent2);transform:translateX(-101%);transition:transform .32s;z-index:-1}
.btn-primary:hover::before{transform:translateX(0)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(188,34,226,.35)}
.btn-ghost{position:relative;display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.03);color:var(--muted2);font-size:.85rem;font-weight:600;padding:11px 20px 11px 16px;border:1px solid var(--border);border-radius:2px 8px 8px 2px;text-decoration:none;cursor:pointer;transition:color .18s,border-color .18s,background .18s,transform .18s}
.btn-ghost::before{content:'';width:6px;height:6px;border-radius:1px;background:var(--muted);transform:rotate(45deg);transition:background .18s,transform .18s;flex-shrink:0}
.btn-ghost:hover{color:var(--text);border-color:var(--border-accent);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.btn-ghost:hover::before{background:var(--accent);transform:rotate(135deg)}

.social-row{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.social-row a{font-size:.8rem;color:var(--muted2);text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:7px 14px;background:rgba(255,255,255,.02);transition:.18s}
.social-row a:hover{color:var(--text);border-color:var(--border-accent)}
.stats{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.stats div{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px 20px;min-width:132px}
.stats strong{font-size:1.45rem;display:block;letter-spacing:-.5px;font-weight:800}
.stats span{color:var(--muted);font-size:.76rem}

/* ---- sections / cards: flat, thin borders, small lift ---- */
.section{padding:80px 0 10px}
.section h2{font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-1.2px;font-weight:800;margin-bottom:8px}
.section h2 em{color:var(--accent);font-style:normal}
.section-desc{color:var(--muted2);font-size:.88rem;margin-bottom:24px;max-width:60ch}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 22px;transition:transform .25s,border-color .25s,box-shadow .25s;opacity:0;transform:translateY(16px)}
.card.visible{opacity:1;transform:none}
.card:hover{transform:translateY(-3px);border-color:var(--border-accent);box-shadow:0 16px 40px rgba(0,0,0,.25)}
.card h3{margin:8px 0 6px;font-size:1.02rem;letter-spacing:-.2px}
.card p{color:var(--muted2);font-size:.86rem;line-height:1.65}
.card ul{margin-top:12px;list-style:none;display:flex;flex-direction:column;gap:6px;color:var(--muted2);font-size:.8rem}
.card ul li{display:flex;align-items:center;gap:8px}
.card ul li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);flex-shrink:0}
.num{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.marquee{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);padding:14px 0;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:10px;white-space:nowrap;animation:scroll 26s linear infinite;width:max-content;padding:0 10px}
.track span{font-weight:500;font-size:.84rem;color:var(--muted2);border:1px solid var(--border);padding:8px 16px;border-radius:9px;background:rgba(255,255,255,.02)}
.track span:hover{color:var(--text);border-color:var(--border-accent)}
@keyframes scroll{to{transform:translateX(-50%)}}
.muted{color:var(--muted2);font-size:.88rem;margin-top:12px}
.filters{display:flex;gap:2px;margin-bottom:24px;padding:5px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:999px;width:max-content;max-width:100%;overflow-x:auto}
.filters button{font-family:var(--sans);font-size:.82rem;color:var(--muted2);background:transparent;border:none;border-radius:999px;padding:8px 16px;cursor:pointer;white-space:nowrap;transition:.2s}
.filters button:hover{color:var(--text)}
.filters button.active{background:var(--accent);color:#0a0a0a;font-weight:700}
.tags{display:flex;gap:6px;margin:14px 0;flex-wrap:wrap}
.tags span{font-size:.7rem;font-weight:500;padding:3px 8px;border:1px solid var(--border-accent);border-radius:5px;color:var(--accent);background:rgba(188,34,226,.06)}
.project a{color:var(--accent);text-decoration:none;font-weight:700;font-size:.82rem;position:relative}
.project a::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:1.5px;background:var(--accent);transition:width .25s}
.project a:hover::after{width:100%}
.links{display:flex;gap:16px}
.inline{display:flex;gap:16px;align-items:center}
.inline img{border-radius:50%;border:1px solid var(--border);width:72px;height:72px}
.link-card{text-decoration:none;display:block}
.link-card span{color:var(--accent);font-weight:700;font-size:.82rem}
.form label{display:block;margin:14px 0 .2rem;font-family:var(--mono);font-size:.65rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2)}
.form input,.form select,.form textarea{width:100%;margin-top:8px;background:rgba(255,255,255,.03);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:12px 14px;font-family:var(--sans);font-size:.88rem;outline:none;transition:border-color .18s,background .18s;text-transform:none;letter-spacing:normal}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent);background:rgba(255,255,255,.045)}
.form select option{background:var(--bg2)}
.contact-layout{display:grid;grid-template-columns:300px 1fr;gap:14px;margin-top:22px}
.contact-channels{display:flex;flex-direction:column;gap:14px}
.channel-head{display:flex;align-items:center;gap:10px}
.pill{font-size:.65rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:var(--accent);color:#0a0a0a;padding:3px 10px;border-radius:999px}
.channel .mono{margin:6px 0 12px;word-break:break-all}
.row{display:flex;gap:10px;flex-wrap:wrap}
.btn-sm{padding:10px 16px;font-size:.82rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.linklike{background:none;border:none;color:var(--accent);cursor:pointer;font:inherit;text-decoration:underline;padding:0}
#cMsg{margin-top:12px;display:none;padding:10px 14px;border-radius:8px;font-size:.82rem}
#cMsg.ok{display:block;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);color:#4ade80}
#cMsg.err{display:block;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:#f87171}
footer{border-top:1px solid var(--border);padding:26px 40px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
footer a{color:var(--muted2);text-decoration:none}
footer a:hover{color:var(--accent)}
@media(max-width:860px){.contact-layout{grid-template-columns:1fr}.two{grid-template-columns:1fr}}
@media(max-width:700px){
  .nav{padding:14px 18px}
  .nav nav{display:none}
  main{padding:0 20px 60px}
  .hero{padding-top:110px;min-height:auto}
  footer{padding:22px 20px}
}
/* ---- scroll-driven motion ---- */
#progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 12px rgba(188,34,226,.55)}
.nav nav a.active{color:var(--text);background:rgba(255,255,255,.06)}
.hero{will-change:transform,opacity}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.marquee{perspective:600px}
.track{will-change:transform}
.track.vel{animation:none}
.marquee.skew .track{filter:saturate(1.2)}
.card{transform-style:preserve-3d;will-change:transform}
.card.tilting{transition:transform .12s ease-out,border-color .25s,box-shadow .25s}
.stats div{transition:transform .25s,border-color .25s}
.stats div.pop{transform:translateY(-3px);border-color:var(--border-accent)}
.btn-primary,.btn-ghost,.btn-small{will-change:transform}
@media(prefers-reduced-motion:reduce){.blob,.beam,.star,.meteor,.grain,.track,.floater{animation:none}.floater,.meteor,.beam{display:none}.card{opacity:1;transform:none}.rv{opacity:1;transform:none;transition:none;filter:none}#progress{display:none}#cursorGlow,.ticker,.spin-badge{display:none}}

/* ================= PINK NICHE MOTION PACK (restrained) ================= */
#progress{height:2px}
#cursorGlow{position:fixed;top:0;left:0;width:280px;height:280px;margin:-140px 0 0 -140px;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(closest-side,rgba(188,34,226,.10),transparent 70%);filter:blur(8px)}
#cursorDot{position:fixed;top:0;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);pointer-events:none;z-index:201}
/* hero entrance w/ blur */
.hero .eyebrow,.hero h1,.hero .sub,.hero .bio-line,.hero .cta-row,.hero .social-row,.hero .stats{opacity:0;transform:translateY(28px);filter:blur(6px)}
body.loaded .hero .eyebrow{animation:heroIn .7s cubic-bezier(.2,.9,.25,1.1) .05s forwards}
body.loaded .hero h1{animation:heroIn .8s cubic-bezier(.2,.9,.25,1.1) .15s forwards}
body.loaded .hero .sub{animation:heroIn .7s ease .3s forwards}
body.loaded .hero .bio-line{animation:heroIn .7s ease .4s forwards}
body.loaded .hero .cta-row{animation:heroIn .7s cubic-bezier(.2,.9,.25,1.1) .5s forwards}
body.loaded .hero .social-row{animation:heroIn .7s ease .6s forwards}
body.loaded .hero .stats{animation:heroIn .7s ease .7s forwards}
@keyframes heroIn{from{opacity:0;transform:translateY(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero h1 span{display:inline-block;animation:floatSoft 6s ease-in-out 1.4s infinite}
@keyframes floatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* rotating word */
#rotator{display:inline-block;min-width:11ch;color:var(--accent);font-weight:700;transition:opacity .3s,transform .3s}
#rotator.swap{opacity:0;transform:translateY(6px)}
/* ticker: minimal black w/ pink text */
.ticker{position:relative;z-index:1;overflow:hidden;background:transparent;color:var(--accent);margin:26px 0 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;gap:30px;width:max-content;padding:9px 16px;font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:2.5px;white-space:nowrap;will-change:transform}
.ticker-track span{display:flex;align-items:center;gap:30px}
.ticker-track span::after{content:'·';font-size:1rem;opacity:.6}
/* stack: calm dual drift + badge */
.stack-stage{position:relative;padding:26px 0 8px}
.marquee{margin-bottom:12px}
.row-a .track span{animation:bob 5.5s ease-in-out infinite}
.row-b .track span{animation:bob 6.5s ease-in-out infinite reverse;background:rgba(188,34,226,.05);border-color:var(--border-accent);color:var(--text)}
.row-a .track span:nth-child(odd),.row-b .track span:nth-child(even){animation-delay:-2.5s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.track span{transition:transform .2s,box-shadow .2s,border-color .2s}
.track span:hover{transform:translateY(-2px) scale(1.06)!important;box-shadow:0 6px 18px rgba(188,34,226,.25);color:var(--text)}
.spin-badge{position:absolute;right:-6px;top:-56px;width:104px;height:104px;z-index:3;opacity:.9;filter:drop-shadow(0 6px 18px rgba(188,34,226,.25))}
.spin-badge svg{width:100%;height:100%;animation:spin 26s linear infinite}
.spin-badge text{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:2.5px;fill:var(--muted2)}
.spin-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--accent);animation:bounceY 2.6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bounceY{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
/* cards: spotlight follows cursor + soft lift */
.card{position:relative;overflow:hidden}
.card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(188,34,226,.10),transparent 65%)}
.card:hover::after{opacity:1}
.section h2{position:relative;display:inline-block}
.section h2::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:linear-gradient(90deg,var(--accent),transparent);transition:width .8s cubic-bezier(.2,.8,.2,1)}
h2.rv.in::after{width:100%}
/* buttons: shine sweep instead of pulse */
.btn-primary{animation:none;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;bottom:0;width:40px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-80px) skewX(-15deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,60%{transform:translateX(-80px) skewX(-15deg)}100%{transform:translateX(280px) skewX(-15deg)}}
/* eyebrow line draws in */
.eyebrow::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .8s ease .1s}
.rv.in.eyebrow::before,.eyebrow.rv.in::before{transform:scaleX(1)}
/* logo dot pulse */
.logo span{animation:dotPulse 3s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.45}}
/* reveal w/ blur = premium feel */
.rv{filter:blur(6px)}
.rv.in{filter:blur(0)}
.aurora{opacity:1}
.floaters .floater{font-weight:600}
@media(max-width:700px){.spin-badge{width:76px;height:76px;top:-40px;right:0}.ticker{margin:18px 0 0}#cursorGlow,#cursorDot{display:none}}

/* ================= VOID PACK — interactive underground layer ================= */
/* CRT + grid — all ≤8% opacity */
.scanlines{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.055;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.9) 2px 3px)}
.grid-layer{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(188,34,226,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(188,34,226,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 30%,transparent 75%)}
/* VOID cursor ring + lock-on */
#cursorRing{position:fixed;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;z-index:201;
  border:1px solid rgba(188,34,226,.5);transition:width .25s,height .25s,margin .25s,border-color .25s,background .25s}
#cursorRing.lock{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:var(--accent2);background:rgba(188,34,226,.08)}
#cursorRing.down{transform:scale(.82)}
/* hero gravitational letters */
#heroTitle .g{position:relative;display:inline-block;will-change:transform;transition:transform .18s ease-out}
/* sysbar — randomized system readout */
.sysbar{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.015);font-size:.68rem;letter-spacing:1.5px}
.sysbar b{color:var(--text);font-weight:600;margin-left:6px}
.sysbar .ok{color:#4ade80}
.sysbar .warn{color:#fbbf24}
.sys-caret{animation:blink 1.1s steps(1) infinite;color:var(--accent)}
@keyframes blink{50%{opacity:0}}
/* glitch flash for easter egg + CRT glitch */
body.glitching main{animation:glitchShake .32s steps(2) 2}
body.glitching .scanlines{opacity:.25}
@keyframes glitchShake{0%{transform:translate(0);filter:none}20%{transform:translate(-6px,2px);filter:hue-rotate(40deg) saturate(2)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,1px);filter:invert(.08) hue-rotate(-30deg)}100%{transform:translate(0);filter:none}}
.crt-glitch{animation:crtJitter 4s infinite}
@keyframes crtJitter{0%,93%,100%{transform:translateY(0)}94%{transform:translateY(-2px)}96%{transform:translateY(2px)}}
/* palette + toast + wipe */
#palette{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
#palette.open{display:flex}
.pal-box{background:var(--bg2);border:1px solid var(--border-accent);border-radius:14px;padding:26px 28px;min-width:280px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pal-box h4{font-family:var(--mono);font-size:.72rem;letter-spacing:2px;color:var(--accent);margin-bottom:14px}
.pal-box div{font-size:.86rem;color:var(--muted2);padding:5px 0;display:flex;gap:12px}
.pal-box div span{font-family:var(--mono);background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:5px;padding:1px 8px;color:var(--text);font-size:.75rem}
.pal-box .mono{margin-top:12px;font-size:.72rem}
#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);z-index:301;background:var(--bg3);border:1px solid var(--border-accent);color:var(--text);font-family:var(--mono);font-size:.8rem;padding:12px 20px;border-radius:10px;opacity:0;pointer-events:none;transition:.3s}
#toast.show{opacity:1;transform:translate(-50%,0)}
#wipe{position:fixed;inset:0;z-index:299;pointer-events:none;background:var(--accent);transform:scaleY(0);transform-origin:bottom}
#wipe.go{animation:wipeAnim .55s cubic-bezier(.7,0,.2,1)}
@keyframes wipeAnim{0%{transform:scaleY(0);transform-origin:bottom}45%{transform:scaleY(1);transform-origin:bottom}55%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:top}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
@media(prefers-reduced-motion:reduce){.scanlines,.grid-layer,#cursorRing{display:none}#heroTitle .g{transform:none!important}}
@media(max-width:700px){#cursorRing{display:none}.sysbar{gap:10px}}

/* ================= REALITY TEAR =================
   One reusable lens that reads as a hole punched into a hidden layer.
   Delete this block + #tear markup + REALITY_TEAR script to remove. */
#tear{position:fixed;top:0;left:0;z-index:150;pointer-events:none;opacity:0;
  width:var(--tear-size,128px);height:var(--tear-size,128px);
  margin:calc(var(--tear-size,128px)/-2) 0 0 calc(var(--tear-size,128px)/-2);
  will-change:transform,opacity}
.tear-core{position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:rgba(8,10,14,.42);
  backdrop-filter:invert(.9) hue-rotate(185deg) saturate(.5) brightness(1.06);
  -webkit-backdrop-filter:invert(.9) hue-rotate(185deg) saturate(.5) brightness(1.06);
  border:1px solid rgba(232,244,255,.26);
  box-shadow:-3px 0 0 -1px rgba(255,84,84,.16),3px 0 0 -1px rgba(96,200,255,.22),0 0 26px rgba(150,210,255,.07)}
.tear-core::after{content:'';position:absolute;inset:0;opacity:.16;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(230,242,255,.85) 2px 3px)}
.tear-slice{position:absolute;left:8%;right:8%;height:2px;background:rgba(220,236,255,.35);opacity:0}
.tear-slice.s1{top:34%}
.tear-slice.s2{top:64%}
.tear-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:9px;letter-spacing:1.5px;white-space:nowrap;
  color:rgba(226,240,255,.75);text-shadow:0 0 8px rgba(140,200,255,.4)}
@media(prefers-reduced-motion:reduce){#tear{display:none}}
@media(max-width:700px){#tear{display:none}}