@font-face{font-family:"Urbanist";src:url(assets/fonts/urbanist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JB Mono";src:url(assets/fonts/jbmono.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root{--ink:#151419;--graphite:#26252B;--smoke:#3A393F;--steel:#8A8990;--mist:#C9C8CE;--paper:#F9F9F9;--t:#E85B03;--glow:#FFB88A;--day:#DCE6F2;
  --ease:cubic-bezier(.16,1,.3,1);--pad:clamp(20px,5.5vw,96px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink)}
body{min-height:100svh;background:var(--ink);color:var(--paper);font-family:"Urbanist",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;
  background:radial-gradient(60% 70% at 62% 58%,rgba(232,91,3,.35),rgba(21,20,25,0) 70%),var(--ink)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:clamp(18px,3vw,36px) var(--pad)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:500;font-size:19px;letter-spacing:.005em}
.mark{width:28px;height:28px;fill:var(--paper)}
.mark .blk{fill:var(--t)}
.lang{display:flex;align-items:center;gap:6px;font:500 12px/1 "JB Mono",monospace;letter-spacing:.14em;color:var(--steel)}
.lang button{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;padding:10px 6px;transition:color .15s ease}
.lang button[aria-pressed="true"]{color:var(--paper)}
.lang button:hover{color:var(--glow)}
.lang button:focus-visible,.links a:focus-visible,.brand:focus-visible{outline:1.5px solid var(--glow);outline-offset:4px;border-radius:2px}

/* stage */
.stage{position:relative;z-index:2;min-height:100svh;overflow:hidden}
.word{position:absolute;left:50%;top:21%;transform:translate(-50%,-50%);font-weight:600;font-size:21vw;line-height:.8;letter-spacing:-.065em;white-space:nowrap;
  color:rgba(249,249,249,.06);user-select:none;pointer-events:none;animation:wordIn 1.6s var(--ease) both}
.portrait{position:absolute;bottom:0;right:max(2vw,var(--pad));height:min(90svh,56vw);width:auto;max-width:none;z-index:3;
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);
  filter:drop-shadow(0 0 60px rgba(0,0,0,.35));animation:rise 1.4s var(--ease) .1s both;will-change:transform}

.copy{position:absolute;left:var(--pad);bottom:clamp(64px,10svh,120px);width:min(560px,42vw);z-index:4}
.kicker{display:flex;align-items:center;gap:12px;font:500 12px/1 "JB Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--glow);margin-bottom:26px;animation:up .9s var(--ease) .25s both}
.dot{width:7px;height:7px;border-radius:50%;background:var(--t);box-shadow:0 0 14px var(--t);animation:pulse 2.4s ease-in-out infinite}
h1{font-weight:500;font-size:clamp(44px,6.1vw,98px);line-height:.98;letter-spacing:-.04em;text-wrap:balance;animation:up 1s var(--ease) .35s both}
.lead{margin-top:28px;font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:rgba(249,249,249,.86);max-width:34em;text-wrap:pretty;animation:up 1s var(--ease) .45s both}
.about{margin-top:14px;font-size:clamp(14px,1vw,15.5px);line-height:1.55;color:var(--steel);max-width:36em;text-wrap:pretty;animation:up 1s var(--ease) .52s both}

.render{margin-top:34px;max-width:420px;animation:up 1s var(--ease) .6s both}
.render-row{display:flex;justify-content:space-between;font:500 11.5px/1 "JB Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.pct{color:var(--paper);font-variant-numeric:tabular-nums}
.bar{position:relative;height:2px;margin-top:12px;background:rgba(249,249,249,.12);overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--t);box-shadow:0 0 16px rgba(232,91,3,.9)}
.bar::after{content:"";position:absolute;top:0;bottom:0;width:80px;left:-80px;background:linear-gradient(90deg,transparent,rgba(255,184,138,.9),transparent);animation:scan 2.8s linear infinite}
.soon{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--mist)}

.links{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:28px;animation:up 1s var(--ease) .68s both}
.links a{font:500 12px/1 "JB Mono",monospace;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--paper);padding:8px 0;border-bottom:1px solid rgba(249,249,249,.25);transition:color .15s ease,border-color .15s ease}
.links a:hover{color:var(--glow);border-color:var(--t)}

.foot{position:fixed;right:var(--pad);bottom:clamp(18px,3vw,32px);z-index:10;display:flex;gap:22px;font:500 11px/1 "JB Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}

@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes wordIn{from{opacity:0;letter-spacing:-.02em}to{opacity:1;letter-spacing:-.065em}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes scan{to{left:100%}}

/* tablet and phone */
@media (max-width:900px){
  .stage{display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh}
  .portrait{height:62svh;right:-14vw;bottom:auto;top:max(72px,8svh);opacity:.95;
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 96%);mask-image:linear-gradient(to bottom,#000 55%,transparent 96%)}
  .word{top:30%;font-size:31vw}
  .copy{position:relative;left:auto;bottom:auto;width:auto;padding:46svh var(--pad) 88px}
  .foot{position:relative;left:auto;right:auto;bottom:auto;justify-content:space-between;margin:-56px var(--pad) 28px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}