@font-face { font-family:"CLA Scribble"; src:url(fonts/CLAttractor-Scribble.woff2) format("woff2"); font-display:block }
@font-face { font-family:"CLA Line"; src:url(fonts/CLAttractor-Line.woff2) format("woff2"); font-display:swap }

:root { --bg:#070708; --fg:#efece4; --pearl:#f3efe6; --dim:rgba(239,236,228,.42); --line:rgba(239,236,228,.16); --pad:clamp(20px,3.4vw,56px) }
* { box-sizing:border-box }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--fg); font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
main { position:relative; min-height:100svh; isolation:isolate }

#gl { position:fixed; inset:0; width:100%; height:100%; z-index:-2; opacity:0; transition:opacity 1s ease }
#gl.on { opacity:var(--bg-opacity,1) }
main::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(7,7,8,.85) 100%),
             linear-gradient(to top, rgba(7,7,8,.9), transparent 38%) }

.mono { font-family:"CLA Line",ui-monospace,"SF Mono",Menlo,monospace; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--dim) }
.caps { font-family:"CLA Line","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:clamp(14px,1.15vw,18px); letter-spacing:.5em; text-transform:uppercase; line-height:1; color:var(--pearl) }
.wordmark { font-family:"CLA Scribble","CLA Line",sans-serif; font-weight:400; font-size:clamp(24px,3.6vw,62px); line-height:1; text-transform:uppercase; color:var(--pearl);
  --ls0:.46em; --ls1:.34em; letter-spacing:var(--ls1) }
.wordmark span { display:block }
.wordmark span + span { margin-top:.36em }
@media (max-width:520px) {
  .hud.bottom { gap:12px }
  .hud.bottom .mono { font-size:10px; letter-spacing:.18em }
}

.hud { position:absolute; z-index:5; left:var(--pad); right:var(--pad); display:flex; justify-content:space-between; align-items:flex-end; gap:24px; pointer-events:none }
.hud a { pointer-events:auto }
.top { top:var(--pad); align-items:flex-start }
.bottom { bottom:var(--pad) }

.link { position:relative; padding:6px 0; transition:color .4s }
.link::after { content:""; position:absolute; left:0; right:.5em; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .6s cubic-bezier(.2,.7,.1,1) }
.link:hover, .link:focus-visible { color:var(--pearl) }
.link:hover::after, .link:focus-visible::after { transform:scaleX(1); transform-origin:left }
:focus-visible { outline:1px solid var(--dim); outline-offset:4px }

#logo { display:block; width:clamp(34px,3.2vw,48px); height:auto; overflow:visible; color:var(--fg) }
#logo path { fill:none; stroke:currentColor; stroke-width:.55; stroke-linejoin:round; opacity:.9;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:draw 3.2s .2s cubic-bezier(.6,0,.2,1) forwards }
#logo circle { fill:var(--fg); opacity:0; animation:fade .6s 3.1s forwards }
@keyframes draw { to { stroke-dashoffset:0 } }

.fade { opacity:0; animation:fade 2s 1.6s ease forwards }
@keyframes fade { to { opacity:1 } }
.reveal { opacity:0; filter:blur(6px); letter-spacing:var(--ls0,.62em); animation:reveal 2.8s 1.2s cubic-bezier(.2,.7,.1,1) forwards }
@keyframes reveal { to { opacity:1; filter:none; letter-spacing:var(--ls1,.5em) } }

@media (pointer:fine) {
  .hud { transform:translate3d(calc(var(--mx,0) * -5px), calc(var(--my,0) * -4px), 0) }
  .sheet .panel { transform:translate3d(calc(var(--mx,0) * -3px), calc(var(--my,0) * -2px), 0) }
}

@media (prefers-reduced-motion:reduce) {
  #logo path, #logo circle, .fade, .reveal { filter:none; animation:none; stroke-dashoffset:0; opacity:1; letter-spacing:var(--ls1,.5em) }
  #gl { transition:none }
}