/* ==========================================================================
   Zeting — shared base: fonts, palette, atmosphere, glass, buttons, motion.
   ========================================================================== */
@font-face{font-family:"VT323";src:url("/assets/fonts/vt323.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Share Tech Mono";src:url("/assets/fonts/share-tech-mono.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Silkscreen";src:url("/assets/fonts/silkscreen-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Silkscreen";src:url("/assets/fonts/silkscreen-bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#16161d;              /* eigengrau: the colour seen in absolute darkness */
  --bg-2:#1b1b24;            /* near-eigengrau panel shades */
  --bg-3:#21222d;
  --ink:#0e0f15;             /* deep ink for text on light accents (original --ink-deep) */
  --blue:#94b1ff;            /* infinite temperature: black-body locus limit */
  --blue-bright:#c8d7ff;
  --blue-pale:#edf2ff;
  --flare:#7ea0ff;           /* hotter, more saturated shade of the accent */
  --blue-deep:#53638f;
  --blue-night:#20263c;
  --cyan:#9ce9ff;            /* original --cyan / --ok */
  --danger:#ff8f80;
  --ok:#9ce9ff;
  --gold:#e6d394;            /* original warning accent */
  --text:#dbe3f7;
  --muted:rgba(200,215,255,.62);
  --dim:rgba(148,177,255,.38);
  --line:rgba(148,177,255,.18);
  --line-strong:rgba(148,177,255,.46);
  --glass:rgba(24,25,36,.56);
  --glass-strong:rgba(17,18,26,.84);
  --glow:0 0 24px rgba(148,177,255,.3),0 0 64px rgba(126,160,255,.12);
  --glow-strong:0 0 18px rgba(200,215,255,.5),0 0 54px rgba(148,177,255,.4),0 0 120px rgba(83,99,143,.45);
  --radius:0;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --page:1240px;
  --display:"VT323",ui-monospace,monospace;
  --pixel:"Silkscreen",ui-monospace,monospace;
  --mono:"Share Tech Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--mono);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,canvas,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--flare);outline-offset:3px;border-radius:0}
::selection{background:var(--flare);color:#0e0f15}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--blue-deep),var(--blue));border:3px solid var(--bg);border-radius:0}
html{scrollbar-color:var(--blue-deep) var(--bg)}
[hidden]{display:none!important}
.skip-link{position:fixed;left:16px;top:-60px;z-index:999;padding:10px 16px;background:var(--blue);color:#0e0f15;border-radius:0;font-family:var(--pixel);font-size:12px;transition:top .2s}
.skip-link:focus{top:16px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Atmosphere layers ---------- */
.fx-field{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.atmosphere{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(1200px 600px at 50% -10%,rgba(148,177,255,.16),transparent 60%),
    radial-gradient(900px 700px at 100% 100%,rgba(83,99,143,.18),transparent 60%),
    linear-gradient(180deg,#111118 0%,var(--bg) 55%,#101016 100%)}
.aurora{position:absolute;border-radius:0;filter:blur(90px);opacity:.32;mix-blend-mode:screen;will-change:transform;animation:aurora 18s var(--ease) infinite alternate}
.aurora--one{width:46vw;height:40vw;min-width:420px;min-height:360px;left:-14vw;top:4vh;background:radial-gradient(circle,var(--blue-deep),transparent 70%)}
.aurora--two{width:40vw;height:36vw;min-width:380px;min-height:320px;right:-12vw;top:38vh;background:radial-gradient(circle,var(--flare),transparent 70%);opacity:.18;animation-duration:24s;animation-direction:alternate-reverse}
.aurora--three{width:34vw;height:30vw;min-width:320px;min-height:280px;left:30vw;bottom:-18vw;background:radial-gradient(circle,var(--blue),transparent 70%);opacity:.16;animation-duration:30s}
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,-4vh,0) scale(1.15)}100%{transform:translate3d(-3vw,6vh,0) scale(.92)}}
.grid-plane{position:absolute;left:-50%;right:-50%;bottom:-8vh;height:58vh;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(148,177,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(148,177,255,.22) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 85%);mask-image:linear-gradient(to top,#000 0%,transparent 85%);opacity:.38;animation:grid-run 6s linear infinite}
@keyframes grid-run{to{background-position:0 64px,0 0}}
.noise{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.noise::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(200,215,255,.05) 3px 4px)}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6) 100%)}

/* ---------- Glass ---------- */
.glass{position:relative;background:linear-gradient(145deg,rgba(36,40,58,.55),rgba(17,18,26,.42));border:1px solid var(--line);border-radius:0;
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 60px -30px rgba(0,0,0,.8)}
.glass::before{content:"";position:absolute;inset:0;border-radius:0;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(200,215,255,.45),transparent 35%,transparent 65%,rgba(126,160,255,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7}

/* pointer spotlight (set by fx.js via --mx/--my) */
.card{overflow:hidden;isolation:isolate}
.card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(126,160,255,.16),transparent 60%)}
.card:hover::after{opacity:1}
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.tilt:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--glow),0 30px 80px -30px rgba(0,0,0,.9);border-color:var(--line-strong)}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 22px;border-radius:0;font-family:var(--pixel);font-size:12px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s,color .35s,border-color .35s}
.btn--primary{color:#0e0f15;background:linear-gradient(110deg,var(--blue-bright) 0%,var(--blue) 25%,var(--flare) 50%,var(--blue) 75%,var(--blue-bright) 100%);background-size:200% 100%;box-shadow:var(--glow);animation:sheen 6s linear infinite}
.btn--primary:hover{box-shadow:var(--glow-strong)}
.btn--primary b{display:grid;place-items:center;width:28px;height:28px;border-radius:0;background:rgba(14,15,21,.85);color:var(--blue-bright);font-family:var(--mono);transition:transform .4s var(--ease)}
.btn--primary:hover b{transform:rotate(-45deg)}
.btn--ghost{color:var(--blue-pale);border:1px solid var(--line-strong);background:rgba(148,177,255,.06)}
.btn--ghost:hover{background:rgba(148,177,255,.16);border-color:var(--blue-bright);box-shadow:var(--glow)}
@keyframes sheen{from{background-position:0 0}to{background-position:200% 0}}

.live-dot{position:relative;display:inline-block;width:8px;height:8px;border-radius:0;background:var(--flare);box-shadow:0 0 10px var(--flare);flex:none}
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:0;border:1px solid var(--flare);animation:ping 2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.2);opacity:0}}

/* ---------- Custom cursor (enabled only for fine pointers by fx.js) ---------- */
.cursor{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;border-radius:0;opacity:0;transition:opacity .3s,width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s}
.has-cursor .cursor{opacity:1}
.cursor--dot{width:6px;height:6px;background:var(--blue-pale);box-shadow:0 0 12px var(--flare)}
.cursor--ring{width:36px;height:36px;border:1px solid rgba(200,215,255,.6);mix-blend-mode:screen}
.cursor--ring.is-hovering{width:60px;height:60px;background:rgba(126,160,255,.1);border-color:var(--flare)}
.has-cursor body,.has-cursor a,.has-cursor button,.has-cursor label{cursor:none}
.has-cursor input,.has-cursor textarea{cursor:text}

/* ---------- Page progress ---------- */
.page-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:200;transform-origin:0 50%;transform:scaleX(var(--progress,0));background:linear-gradient(90deg,var(--blue-deep),var(--blue),var(--flare));box-shadow:0 0 14px var(--flare)}

/* ---------- Reveal / intro motion ---------- */
.js .reveal{opacity:0;transform:translate3d(0,42px,0) scale(.985);filter:blur(6px);transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1s var(--ease);transition-delay:var(--delay,0ms)}
.js .reveal.is-visible{opacity:1;transform:none;filter:none}
.js .intro{opacity:0;transform:translateY(26px);animation:intro 1.1s var(--ease) forwards;animation-delay:calc(var(--i,0) * 110ms + 120ms)}
@keyframes intro{to{opacity:1;transform:none}}
.split .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.split .word>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease);transition-delay:calc(var(--w) * 55ms + 120ms)}
.is-visible .split .word>span,.split.is-visible .word>span{transform:none}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;z-index:300;max-width:min(92vw,520px);padding:14px 20px;border-radius:0;transform:translate(-50%,30px);opacity:0;pointer-events:none;
  background:var(--glass-strong);border:1px solid var(--line-strong);color:var(--blue-pale);font-size:14px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--glow);transition:opacity .35s,transform .45s var(--ease)}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.toast.is-error{border-color:var(--danger);color:#ffdcd6;box-shadow:0 0 30px rgba(255,143,128,.25)}

/* ---------- Motion off / reduced motion ---------- */
.motion-off *,.motion-off *::before,.motion-off *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
.motion-off .grid-plane,.motion-off .aurora{animation:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .js .reveal,.js .intro{opacity:1;transform:none;filter:none}
  .split .word>span{transform:none}
}
@media (hover:none){.tilt{transform:none!important}}