/* ==========================================================================
   ASTREA GT-R — drag to rotate, scroll to open apart
   ========================================================================== */

:root{
  --ink:    #000000;
  --paper:  #ffffff;
  --muted:  rgba(255,255,255,.56);
  --faint:  rgba(255,255,255,.3);
  --line:   rgba(255,255,255,.13);
  --volt:   #ffd11a;
  --shell:  clamp(18px, 3.6vw, 56px);
  --ease:   cubic-bezier(.22,.61,.36,1);
  --font:   'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--ink); scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  font-weight:300;
  color:var(--paper);
  background:var(--ink);
  overflow-x:hidden;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,p,dl,dd{ margin:0; }
a{ color:inherit; text-decoration:none; }
canvas{ display:block; }

.eyebrow{
  font-size:10px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--faint);
}
.display{
  font-size:clamp(52px,9.6vw,150px);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:.9;
  margin:.14em 0 .3em;
}
.lede{
  font-size:clamp(13px,1.05vw,15px);
  color:var(--muted);
  max-width:38ch;
}

/* ==========================================================================
   Bar
   ========================================================================== */

.bar{
  position:fixed;
  inset:0 0 auto;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:clamp(14px,1.8vw,22px) var(--shell);
  background:linear-gradient(rgba(0,0,0,.72), transparent);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.34em;
}
.brand svg{ width:17px; fill:var(--volt); }

.bar__nav{ display:flex; gap:clamp(18px,2.6vw,40px); }
.bar__nav a{
  font-size:10px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
  transition:color .3s var(--ease);
}
.bar__nav a:hover,
.bar__nav a.is-live{ color:var(--paper); }

.cta{
  padding:9px 20px;
  border-radius:100px;
  background:var(--volt);
  color:#120d00;
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cta:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,209,26,.28); }
.cta--big{ justify-self:start; margin-top:26px; padding:15px 34px; font-size:11px; }

/* ==========================================================================
   Stage — one canvas behind every beat
   ========================================================================== */

.stage{
  position:fixed;
  inset:0;
  z-index:1;
  touch-action:pan-y;              /* let the page scroll, we take the x-drag */
  cursor:grab;
}
.stage.is-dragging{ cursor:grabbing; }
.stage canvas{ width:100%; height:100%; }

.loading,
.hint{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--faint);
  pointer-events:none;
}
.loading{ top:50%; }
.loading span{ animation:blink 1.2s infinite; }
.loading span:nth-child(2){ animation-delay:.15s; }
.loading span:nth-child(3){ animation-delay:.3s; }
@keyframes blink{ 0%,60%,100%{ opacity:.2; } 30%{ opacity:1; } }

.hint{
  bottom:clamp(22px,4vh,40px);
  transition:opacity .6s var(--ease);
}
.hint.is-gone{ opacity:0; }

/* ==========================================================================
   Story — transparent beats scrolling over the canvas
   ========================================================================== */

.story{ position:relative; z-index:2; pointer-events:none; }
.story a{ pointer-events:auto; }

.beat{
  position:relative;                 /* .price and .specs anchor to the beat */
  min-height:100vh;
  display:grid;
  align-content:end;
  padding:0 var(--shell) clamp(60px,11vh,120px);
}

.beat__copy{
  max-width:min(46ch,52vw);
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.beat__copy.is-in{ opacity:1; transform:none; }
.beat__copy--wide{ max-width:min(52ch,60vw); display:grid; justify-items:start; }

.price{
  position:absolute;
  top:clamp(74px,11vh,110px);
  right:var(--shell);
  font-size:clamp(13px,1.3vw,17px);
  font-weight:500;
  letter-spacing:.12em;
  color:var(--muted);
}

/* --- spec readout, right rail ------------------------------------------- */
.specs{
  position:absolute;
  right:var(--shell);
  top:50%;
  transform:translateY(-50%);
  display:grid;
  gap:clamp(14px,2.4vh,30px);
  text-align:right;
}
.specs > div{
  opacity:0;
  transform:translateX(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.specs.is-in > div{ opacity:1; transform:none; }
.specs.is-in > div:nth-child(2){ transition-delay:.09s; }
.specs.is-in > div:nth-child(3){ transition-delay:.18s; }
.specs.is-in > div:nth-child(4){ transition-delay:.27s; }
.specs dt{
  font-size:clamp(26px,3.4vw,50px);
  font-weight:200;
  letter-spacing:-.03em;
  line-height:1;
}
.specs dt i{
  font-style:normal;
  font-size:.32em;
  font-weight:500;
  letter-spacing:.12em;
  margin-left:.5em;
  color:var(--faint);
  text-transform:uppercase;
}
.specs dd{
  margin:6px 0 0;
  font-size:9px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ==========================================================================
   Foot
   ========================================================================== */

.foot{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:space-between;
  padding:30px var(--shell);
  background:var(--ink);
  border-top:1px solid var(--line);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--faint);
}
.foot a:hover{ color:var(--paper); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:820px){
  .bar__nav{ display:none; }
  .beat__copy,
  .beat__copy--wide{ max-width:none; }
  .specs{
    position:static;
    transform:none;
    grid-template-columns:repeat(2,1fr);
    text-align:left;
    margin-top:34px;
    gap:20px;
  }
  .specs > div{ transform:translateY(20px); }
  .price{ top:auto; bottom:calc(100vh - 78px); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .beat__copy,.specs > div{ opacity:1; transform:none; }
  .loading span{ animation:none; }
}