/* ============ BASE — reset, environment, typography, frames, buttons ============ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--void);
  color:var(--cream);
  font-family:var(--serif);
  font-weight:300;
  line-height:1.55;
  overflow-x:hidden;
}
::selection{background:var(--amber);color:var(--void)}

.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em}

img{max-width:100%}
a{color:inherit}

/* vignette + faint scanlines over everything */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5) 100%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:41;opacity:.035;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#EDE7D6 2px 3px)}

/* the traveling wave */
#wave{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.5}

main{position:relative;z-index:2}

/* top strip: just the dot */
.strip{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:flex-start;
  padding:1.2rem 1.6rem;pointer-events:none}
.strip .dot{width:9px;height:9px;border-radius:50%;background:var(--alert);animation:pulse 3s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 10px rgba(200,69,47,.5)}50%{opacity:.25;box-shadow:none}}

/* the page never scrolls sideways; only the carousels inside it do */
html{background:var(--void)}
html,body{overflow-x:clip}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}

/* full-viewport statements */
.frame > *{min-width:0}
.frame{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:6rem clamp(1.4rem,8vw,8rem);position:relative}
.frame .idx{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;color:var(--cream-faint);
  margin-bottom:2.2rem;text-transform:uppercase}
.frame h1,.frame h2{font-weight:300;font-size:clamp(2.4rem,6.4vw,5.6rem);line-height:1.08;
  letter-spacing:-.015em;max-width:20ch}
.frame h1 em,.frame h2 em{font-style:italic;font-weight:400;color:var(--amber)}
.frame .sub{margin-top:2.2rem;max-width:52ch;color:var(--cream-dim);
  font-size:clamp(1rem,1.6vw,1.25rem);font-weight:300}
.frame .sub b{color:var(--cream);font-weight:400}

.reveal{opacity:0;transform:translateY(26px);
  transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.16,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.15s}
.reveal.d2{transition-delay:.3s}
.reveal.d3{transition-delay:.45s}

.hero-logo{height:clamp(48px,6.5vw,76px);width:auto;margin-bottom:3.2rem}
.cursor{display:inline-block;width:.55ch;height:1em;background:var(--amber);
  vertical-align:-.12em;animation:blinkc 1.1s steps(1) infinite;margin-left:.15ch}
@keyframes blinkc{0%,100%{opacity:1}50%{opacity:0}}

/* buttons */
.ctas{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:3rem}
.btn{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;padding:.95rem 1.6rem;border:1px solid var(--cream-faint);color:var(--cream);
  border-radius:9px;transition:all .3s;background:transparent;cursor:pointer;display:inline-block}
.btn:hover{border-color:var(--amber);color:var(--amber);box-shadow:0 0 26px rgba(224,122,40,.18)}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--amber);border-color:var(--amber);color:var(--void)}
.btn.solid:hover{background:transparent;color:var(--amber)}
.hint{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--cream-faint);
  text-transform:uppercase;margin-top:1.4rem}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* status lamps in copy */
.status{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-faint);display:inline-flex;align-items:center;gap:.55em}
.status.hot{color:var(--signal)}
.status.warm{color:var(--amber)}

/* reduced motion: kill it all */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  #wave{display:none}
  html{scroll-behavior:auto}
}

@media(max-width:700px){
  .frame{padding:3.2rem 1.4rem;min-height:0}
}