/* Siliveri Systems — W1 The Monolith hero (Gate 2) */
@import url("fonts/fonts.css");

:root{
  --blacksite:#080A0E; --void:#030405; --gunmetal:#19232D; --line:#1A242E;
  --titanium:#D8E2E8; --ti-2:#B7C3CB; --ti-3:#8E9AA3; --cyan:#82DDEB;
  --wide:"Archivo",system-ui,sans-serif; --sans:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --gutter:clamp(16px,4.5vw,72px);
  --bar:72px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--void)}
/* html body: outranks the site-wide body rule in global.css, which loads after this file */
html body{margin:0;background:var(--void);color:var(--titanium);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.skip-link{position:absolute;left:12px;top:-80px;z-index:60;background:var(--titanium);color:var(--blacksite);padding:12px 16px;font:500 14px var(--sans);text-decoration:none}
.skip-link:focus{top:12px}

/* ---------- top bar ---------- */
/* fixed once JS is running (html.js), so the nav stays with you; over the hero it is unchanged, and past
   the hero nav.js adds .past-hero, which turns it into a light frosted bar (light tokens: src/styles/lab.css).
   Without JS the bar stays absolute, exactly as approved, and scrolls away with the hero. */
.site-bar{position:absolute;top:0;left:0;right:0;z-index:40;height:calc(var(--bar) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;display:flex;align-items:center;gap:24px;background:linear-gradient(180deg,rgba(3,4,5,.92),rgba(3,4,5,.55) 70%,rgba(3,4,5,0))}
html.js .site-bar{position:fixed}
.mark{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;font:600 13px/1 var(--wide);font-stretch:118%;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.mark i{width:9px;height:9px;background:var(--cyan);box-shadow:0 0 14px rgba(130,221,235,.8)}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);list-style:none;margin:0;padding:0}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font:500 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ti-2);transition:color .2s}
.site-nav a:hover{color:var(--titanium)}
.site-nav a.nav-cta{color:var(--blacksite);background:var(--titanium);padding:0 16px;min-height:40px}
.site-nav a.nav-cta:hover{background:#fff}
.menu-btn{display:none}

/* ---------- bar past the hero: the light cleanroom bar ---------- */
html.past-hero .site-bar{background:rgba(251,252,252,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--lab-line);transition:background .25s ease,border-color .25s ease}
html.past-hero .mark{color:var(--lab-ink)}
html.past-hero .mark i{box-shadow:none}
html.past-hero .site-nav a{color:var(--lab-ink-3)}
html.past-hero .site-nav a:hover{color:var(--lab-ink)}
html.past-hero .site-nav a.nav-cta{background:var(--lab-ink);color:var(--lab-paper)}
html.past-hero .site-nav a.nav-cta:hover{background:#1B2733}
/* the section in view, marked with a 2px rule under the label */
.site-nav a{position:relative}
.site-nav a[aria-current="true"]{--nav-rule:var(--cyan)}
html.past-hero .site-nav a[aria-current="true"]{--nav-rule:var(--lab-signal)}
.site-nav a[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:2px;background:var(--nav-rule)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;max-height:1200px;overflow:hidden;background:var(--void);isolation:isolate}
.stage,.stage canvas,.poster,.poster img{position:absolute;inset:0;width:100%;height:100%}
.poster img{object-fit:cover;object-position:62% 50%}
.stage canvas{display:block;opacity:0;transition:opacity .5s ease}
html.gl-ready .stage canvas{opacity:1}
/* first paint: the opening frame for motion, the finished frame for everyone else */
.p-open{display:none}
html.js:not(.still):not(.no-gl) .p-open{display:block}
html.js:not(.still):not(.no-gl) .p-final{display:none}
html.still .stage canvas{display:none}
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(3,4,5,.86) 0,rgba(3,4,5,.55) 30%,rgba(3,4,5,.08) 56%,rgba(3,4,5,0) 70%),
  linear-gradient(0deg,rgba(3,4,5,.7),rgba(3,4,5,0) 24%)}

.copy{position:absolute;z-index:2;left:var(--gutter);bottom:clamp(96px,14vh,150px);width:min(860px,calc(100% - 2*var(--gutter)))}
html.js:not(.still) .copy{animation:copy-in .7s cubic-bezier(.2,.7,.2,1) both}
html.frozen .copy{animation:none!important}
@keyframes copy-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eyebrow{margin:0 0 22px;display:flex;align-items:center;gap:14px;font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.eyebrow:before{content:"";width:32px;height:1px;background:currentColor}
h1{margin:0;font-family:var(--wide);color:var(--titanium);text-wrap:balance}
h1 span{display:block}
h1 .l1{font-weight:200;font-stretch:125%;font-size:clamp(46px,7.6vw,132px);line-height:.92;letter-spacing:-.04em}
h1 .l2{font-weight:650;font-stretch:96%;font-size:clamp(46px,7.6vw,132px);line-height:.98;letter-spacing:-.035em;margin-top:.04em}
.lede{margin:28px 0 0;max-width:54ch;font-size:clamp(16px,1.2vw,19px);line-height:1.62;color:var(--ti-2)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;font:500 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;transition:background .2s,border-color .2s,color .2s}
.btn-primary{background:var(--titanium);color:var(--blacksite)}
.btn-primary:hover{background:#fff}
.btn-ghost{border-color:rgba(216,226,232,.36);color:var(--titanium);background:rgba(3,4,5,.35);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--titanium)}

.hero-foot{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:calc(22px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:20px;border-top:1px solid rgba(216,226,232,.12);padding-top:16px}
.axes{margin:0;display:flex;gap:10px 26px;flex-wrap:wrap;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ti-3)}
.axes span:before{content:"";display:inline-block;width:5px;height:5px;margin-right:10px;vertical-align:2px;background:var(--ti-3)}
.controls{margin-left:auto;display:flex;gap:8px}
.ctl{min-height:44px;min-width:44px;padding:0 14px;font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ti-2);background:rgba(3,4,5,.45);border:1px solid rgba(216,226,232,.22);cursor:pointer}
.ctl:hover{color:var(--titanium);border-color:rgba(216,226,232,.6)}

/* ---------- below the fold ---------- */
main{outline:none}
/* the lab sections below the hero are styled in src/styles/lab.css */

/* ---------- phone ---------- */
@media (max-width:760px){
  :root{--bar:60px}
  .site-bar{background:linear-gradient(180deg,rgba(3,4,5,.95),rgba(3,4,5,.6) 75%,rgba(3,4,5,0))}
  .mark{font-size:12px;letter-spacing:.2em}
  .menu-btn{display:inline-flex;align-items:center;gap:12px;min-height:44px;min-width:44px;padding:0 12px;margin-right:-12px;background:none;border:0;color:var(--titanium);font:500 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
  .menu-icon{position:relative;width:20px;height:10px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;transition:transform .2s}
  .menu-btn[aria-expanded="true"] .menu-icon{border-bottom-color:transparent;transform:translateY(4px)}
  .site-nav ul{display:none}
  html.no-js .site-nav ul,.site-nav.open ul{display:flex}
  .site-nav ul{position:fixed;left:0;right:0;top:calc(var(--bar) + env(safe-area-inset-top,0px));flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px;background:rgba(3,4,5,.97);border-bottom:1px solid var(--line)}
  html.no-js .site-nav ul{position:static;flex-direction:row;flex-wrap:wrap;gap:0 18px;padding:0;background:none;border:0}
  html.no-js .menu-btn{display:none}
  html.no-js .site-bar{flex-wrap:wrap;height:auto;padding-block:8px}
  .site-nav li a{min-height:52px;font-size:14px;border-bottom:1px solid var(--line);width:100%}
  html.no-js .site-nav li a{min-height:44px;border:0;font-size:12px;width:auto}
  .site-nav a.nav-cta{justify-content:center;margin-top:14px;min-height:52px}
  html.no-js .site-nav a.nav-cta{margin:0;min-height:40px}

  .hero{min-height:600px;max-height:none}
  .poster img{object-position:50% 50%}
  .scrim{background:linear-gradient(0deg,rgba(3,4,5,.95) 0,rgba(3,4,5,.82) 36%,rgba(3,4,5,.2) 58%,rgba(3,4,5,0) 70%)}
  .copy{left:var(--gutter);right:var(--gutter);width:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .eyebrow{margin-bottom:14px;font-size:11px}
  h1 .l1,h1 .l2{font-size:clamp(38px,11.4vw,58px)}
  h1 .l1{font-stretch:112%}
  .lede{margin-top:16px;font-size:15px;line-height:1.55}
  .actions{margin-top:22px;gap:10px}
  .btn{flex:1 1 auto;padding:0 16px;font-size:12px}
  .hero-foot{bottom:calc(14px + env(safe-area-inset-bottom,0px));padding-top:10px}
  .axes{display:none}
  .controls{margin-left:auto}

  /* the open menu follows the bar into its light state */
  html.past-hero .site-nav ul{background:rgba(251,252,252,.97);border-bottom-color:var(--lab-line)}
  html.past-hero .menu-btn{color:var(--lab-ink)}
  html.past-hero .site-nav li a{border-bottom-color:var(--lab-line);color:var(--lab-ink)}
  html.past-hero .site-nav a.nav-cta{background:var(--lab-ink);color:var(--lab-paper)}
}
@media (max-width:760px) and (max-height:700px){
  .lede{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}