/* justboyd — grid / light-trail treatment (exploration). Loads after site.css. */
@font-face{font-family:"Archivo";src:url(../fonts/Archivo-wdth-wght.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url(../fonts/FamiljenGrotesk-wght.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --bg:#040507;--bg2:#080A0E;--bg3:#0E1218;
  --acc:#62E3FF;--acc-rgb:98,227,255;--warm:#FF9A3D;--warm-rgb:255,154,61;
  --edge:#C4F6FF;--fill-a:#EEF4F7;--fill-b:#A3B8C4;--edge-w:1.4px;--halo:.13;
  --grid-a:.30;--glow:1;--trail-w:1.25;
}
.tv-bold{--grid-a:.5;--glow:1.6;--trail-w:2;--edge-w:2px;--halo:.3}
html,body{background:var(--bg)}
.topbar{background:linear-gradient(to bottom,rgba(4,5,7,.9),rgba(4,5,7,0))}
.topbar.scrolled{background:rgba(4,5,7,.92)}

/* ---------- hero floor grid ----------
   hardfix (Oct 30): no 3D. The floor used to be an 8000x6000 plane under perspective:520px + rotateX(90deg) with an
   infinite drift animation and drop-shadow-filtered light cycles; Chrome on Windows (GPU compositing) flickered on it.
   Now grid.js projects the same perspective grid ONCE into a flat 2D SVG (redrawn only on resize), the light cycles
   draw once on load and stop, and their glow is wider faint duplicate strokes (no filter). No JS: flat CSS grid lines. */
.hero{background:var(--bg);--horizon:61%}
.hero::before{background:radial-gradient(60% 30% at 50% 61%,rgba(var(--acc-rgb),calc(.06*var(--glow))),transparent 70%)}
.hero::after{height:120px}
.floor{--persp:520;position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent var(--horizon),rgba(0,0,0,.35) calc(var(--horizon) + 6%),#000 92%);mask-image:linear-gradient(to bottom,transparent var(--horizon),rgba(0,0,0,.35) calc(var(--horizon) + 6%),#000 92%)}
.plane{--cell:120;position:absolute;inset:0}
.plane svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;visibility:hidden}
.plane.drawn svg{visibility:visible}
.no-js .floor{background-image:linear-gradient(rgba(var(--acc-rgb),calc(var(--grid-a)*.6)) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--acc-rgb),calc(var(--grid-a)*.6)) 1px,transparent 1px);background-size:120px 120px;background-position:50% 100%}
.no-js .plane{display:none}
.horizon{position:absolute;left:0;right:0;top:var(--horizon);height:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--acc-rgb),.35) 18%,rgba(190,246,255,.75) 50%,rgba(var(--acc-rgb),.35) 82%,transparent);
  box-shadow:0 0 calc(14px*var(--glow)) rgba(var(--acc-rgb),.35)}
.horizon::before{content:"";position:absolute;left:15%;right:15%;bottom:0;height:90px;background:radial-gradient(50% 100% at 50% 100%,rgba(var(--acc-rgb),calc(.07*var(--glow))),transparent 70%)}
.plane .gl{fill:rgba(var(--acc-rgb),var(--grid-a));stroke:none}
/* light cycles: core stroke + two wider, fainter copies underneath = static glow (no filter) */
.plane .cyc path{fill:none;stroke:var(--acc);stroke-linejoin:miter;stroke-linecap:butt}
.plane .cyc.warm path{stroke:var(--warm)}
.plane .cyc .g1{stroke-width:16px;stroke-opacity:.10}
.plane .cyc .g2{stroke-width:8px;stroke-opacity:.24}
.plane .cyc .core{stroke-width:3px}
/* draw once on load, then stay put (finite; was ride 11s infinite) */
.motion .plane .cyc path{stroke-dasharray:1 1;animation:ride 4.2s cubic-bezier(.45,0,.2,1) .3s both}
.motion .plane .cyc.warm path{animation-delay:2.7s}
@keyframes ride{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.tv-familjen .hero{--horizon:561px}@media (min-width:981px){.tv-familjen .hero{padding-top:108px}}.tv-archivo .hero,.tv-bold .hero{--horizon:551px}
@media (max-width:980px){.hero,.tv-archivo .hero,.tv-bold .hero,.tv-familjen .hero{--horizon:58%}}
@media (max-width:520px){.tv-archivo .hero,.tv-bold .hero{--horizon:353px}.tv-familjen .hero{--horizon:383px}}
@media (max-width:370px){.tv-archivo .hero,.tv-bold .hero{--horizon:338px}.tv-familjen .hero{--horizon:364px}}
@media (max-width:520px){.plane{--cell:84}.floor{--persp:360}}

/* keep body copy legible over the floor */
.hero-lede{color:#B4BCC7;text-shadow:0 1px 14px var(--bg),0 0 2px var(--bg)}
.identity{text-shadow:0 0 10px var(--bg)}
.terminal{background:rgba(6,9,13,.86);border-color:rgba(var(--acc-rgb),.22);box-shadow:0 0 0 1px rgba(0,0,0,.5),0 40px 120px -30px rgba(0,0,0,.95),0 0 calc(60px*var(--glow)) -24px rgba(var(--acc-rgb),.35)}

/* ---------- name: solid fill + thin light edge ---------- */
.hero-title{text-transform:none}
.tv-archivo .hero-title,.tv-bold .hero-title{font-family:"Archivo",var(--sans);font-weight:800;font-variation-settings:'wdth' 112;font-size:clamp(84px,11.24vw,175px);line-height:.82;letter-spacing:-.05em}
.tv-familjen .hero-title{font-family:"Familjen Grotesk",var(--sans);font-weight:700;font-size:clamp(96px,12.9vw,200px);line-height:.8;letter-spacing:-.05em}
@media (max-width:520px){.tv-archivo .hero-title,.tv-bold .hero-title{font-size:84px}.tv-familjen .hero-title{font-size:103px}}
@media (max-width:370px){.tv-archivo .hero-title,.tv-bold .hero-title{font-size:76px}.tv-familjen .hero-title{font-size:92px}}
.hero-title .line{padding:.16em .12em .24em;margin:-.16em -.12em -.24em;overflow:visible}
.motion:not(.settled) .hero-title .line{overflow:hidden}
.hero-title .line>span{position:relative;padding:.16em 0 .24em;margin:-.16em 0 -.24em;color:var(--fill-a);
  background:linear-gradient(180deg,var(--fill-a) 35%,var(--fill-b) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* hardfix: drop-shadow filters removed from the name (it animates in on load); the ::after stroke edge carries the look */
.hero-title .line:nth-child(2)>span{background:linear-gradient(180deg,var(--fill-a) 30%,#9CC9D8 100%);-webkit-background-clip:text;background-clip:text}
.hero-title .line>span::after{content:attr(data-text);position:absolute;left:0;top:0;padding:inherit;pointer-events:none;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:var(--edge-w) var(--edge)}
.caret{color:var(--acc);-webkit-text-fill-color:var(--acc)}
.tv-bold .caret,.tv-ac .caret{color:var(--warm);-webkit-text-fill-color:var(--warm)}

/* ---------- light-trail section dividers ---------- */
.trail{position:relative;z-index:3;height:0;pointer-events:none}
.trail svg{position:absolute;left:0;top:-20px;width:100%;height:40px;overflow:visible}
/* hardfix: glow = a wider faint duplicate path (.glow) instead of a drop-shadow filter */
.trail path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.trail .body{stroke:var(--acc);stroke-width:var(--trail-w);opacity:.8}
.trail .glow{stroke:var(--acc);stroke-width:calc(var(--trail-w) * 1px + 6px);opacity:.16}
.trail .head{stroke:#E9FCFF;stroke-width:calc(var(--trail-w) + 1px);opacity:0}
.trail.warm .body,.trail.warm .glow{stroke:var(--warm)}
.trail.warm .head{stroke:#FFE6CF}
/* JS drives --p (0..1) from scroll, forward only; a fully drawn trail stops. No JS / reduced motion / calm: fully drawn. */
.trails-live .trail .body,.trails-live .trail .glow{stroke-dasharray:var(--L,3000px) var(--L,3000px);stroke-dashoffset:calc(var(--L,3000px) * (1 - var(--p,0)))}
.trails-live .trail .glow{stroke:var(--acc);stroke-width:calc(var(--trail-w) * 1px + 6px);opacity:.16}
.trail .head{opacity:calc(var(--p,0) * 12 * (1 - var(--p,0)) * 0.9 + .0001);stroke-dasharray:28px var(--L,3000px);stroke-dashoffset:calc(28px - var(--L,3000px) * var(--p,0))}

/* All Four rules become trails in the bold take */
.tv-bold .af-rule{height:2px;background:linear-gradient(90deg,var(--acc),rgba(var(--acc-rgb),.35) 70%,transparent);box-shadow:0 0 14px rgba(var(--acc-rgb),.55)}
.tv-bold .af-rule::after{content:"";position:absolute;right:30%;top:-1px;width:40px;height:4px;border-radius:2px;background:#E9FCFF;box-shadow:0 0 12px var(--acc);opacity:.0}

@media (prefers-reduced-motion:reduce){
  .plane .cyc path{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}
}
.no-anim .plane .cyc path{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}