/* ═══════════════════════════════════════════════════════════
   Stein Bros. — splash page only
   Requires core.css. Everything shared lives there.
   ═══════════════════════════════════════════════════════════ */

/* ── preloader ──────────────────────────────────────────── */

.boot{
  position:fixed; inset:0; z-index:60;
  display:grid; place-content:center; justify-items:center; gap:1.15rem;
  background:var(--ink);
  transition:opacity .5s var(--easing), visibility .5s;
}
.boot.is-done{ opacity:0; visibility:hidden; }

.boot__mark{
  font-family:"Anton",sans-serif; font-size:clamp(1.6rem,4.5vw,2.4rem);
  letter-spacing:.06em; transform:skewX(-8deg);
}
.boot__mark span{ color:var(--heat); }

.boot__bar{
  width:min(230px,52vw); height:2px; background:color-mix(in srgb, var(--bone) 16%, transparent); overflow:hidden;
}
.boot__bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--heat-dim),var(--heat),var(--honey));
  transition:width .3s var(--easing);
}
.boot__pct{
  font-family:"Barlow Condensed",sans-serif; font-size:.72rem;
  letter-spacing:.34em; color:var(--ash); text-transform:uppercase;
}

/* ── hero ───────────────────────────────────────────────── */

.hero{
  flex:1 1 auto;
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(1.5rem,4vw,4rem);
  padding:clamp(1rem,2.6vh,2.25rem) var(--shell-x);
}

/* ── 3d stage ───────────────────────────────────────────── */

.hero__stage{
  position:relative; justify-self:center; align-self:center;
  width:100%; max-width:640px;
  aspect-ratio:1/1; max-height:min(58vh,560px);
  display:grid; place-items:center;
}

/* The atmosphere holds back until the badge lands — an empty dark stage makes
   the fly-in read as an arrival rather than a fade-up. */
.stage__glow{
  position:absolute; width:76%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb, var(--heat) 45%, transparent),color-mix(in srgb, var(--heat-dim) 22%, transparent) 42%,transparent 68%);
  filter:blur(46px); opacity:0;
}
.hero__stage.is-impact .stage__glow{ animation:pulse 7s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.72; transform:scale(1) } 50%{ opacity:1; transform:scale(1.08) } }

.stage__flash{
  position:absolute; width:90%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb, var(--honey) 85%, transparent),color-mix(in srgb, var(--heat) 38%, transparent) 44%,transparent 70%);
  filter:blur(30px); opacity:0; pointer-events:none;
}
.hero__stage.is-impact .stage__flash{ animation:flash .85s ease-out forwards; }
@keyframes flash{
  0%  { opacity:0; transform:scale(.45) }
  12% { opacity:1; transform:scale(1.02) }
  100%{ opacity:0; transform:scale(1.4) }
}

.stage__shock{
  position:absolute; width:58%; aspect-ratio:1; border-radius:50%;
  border:3px solid color-mix(in srgb, var(--heat) 90%, transparent); opacity:0; pointer-events:none;
}
.hero__stage.is-impact .stage__shock{ animation:shock 1s var(--easing) forwards; }
@keyframes shock{
  0%  { opacity:.95; transform:scale(.32); border-width:4px }
  65% { opacity:.25 }
  100%{ opacity:0;   transform:scale(1.85); border-width:1px }
}

.stage__ring{
  position:absolute; border-radius:50%; border:1px solid color-mix(in srgb, var(--bone) 12%, transparent);
  opacity:0; transition:opacity 1.1s var(--easing) .12s;
}
.hero__stage.is-impact .stage__ring{ opacity:1; }
.stage__ring--a{ width:74%; aspect-ratio:1; }
.stage__ring--b{
  width:92%; aspect-ratio:1;
  border-style:dashed; border-color:color-mix(in srgb, var(--heat) 24%, transparent);
  animation:spin 46s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }


.stage__viewport{ position:relative; width:100%; height:100%; z-index:1; }
.stage__viewport canvas{ display:block; width:100%; height:100%; }

.stage__poster{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.32));
}

.stage__hint{
  position:absolute; bottom:-.4rem; left:50%; transform:translateX(-50%);
  margin:0; font-family:"Barlow Condensed",sans-serif;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ash);
  opacity:0; transition:opacity .6s var(--easing);
}
.stage__hint.is-shown{ opacity:.55; }

/* ── responsive ─────────────────────────────────────────── */

@media (max-width:900px){
  .hero{
    grid-template-columns:1fr;
    justify-items:center; text-align:center;
    gap:.5rem; padding-top:1.25rem;
  }
  .hero__copy{ order:2; display:flex; flex-direction:column; align-items:center; }
  .hero__stage{ order:1; max-width:min(74vw,400px); max-height:34vh; }

  /* skew comes from core.css — restating it here would clobber the reveal states */
  .display__sm,.display__lg{ transform-origin:center; }
  .eyebrow{ justify-content:center; margin-bottom:.9rem; }
  .lede{ margin-top:.9rem; }
  .actions{ justify-content:center; margin-top:1.25rem; }
  .microcopy{ justify-content:center; margin-top:1.1rem; }

  .foot{
    justify-content:center; text-align:center; gap:1.1rem;
    padding:1rem var(--shell-x) calc(1rem + env(safe-area-inset-bottom));
  }
  .signup label{ margin-bottom:.5rem; }
  .signup__msg{ text-align:center; }

  /* stacked layout puts the copy right under the badge — no room for the hint */
  .stage__hint{ display:none; }
}

@media (max-width:520px){
  .microcopy{ display:none; }
  .hero__stage{ max-height:32vh; }

  /* side-by-side beats stacked here — a stacked pair pushes the footer off-screen */
  .actions{
    display:grid; grid-template-columns:1fr 1fr;
    gap:.55rem; width:100%; max-width:360px;
  }
  .btn{
    justify-content:center; padding:.85rem .7rem;
    font-size:.82rem; letter-spacing:.11em;
  }
  .btn svg{ width:15px; height:15px; }

  .signup label{ font-size:.7rem; letter-spacing:.14em; }
  .foot{ gap:.9rem; }
}

/* short-and-wide screens: keep everything on one page */
@media (max-height:760px) and (min-width:901px){
  .hero__stage{ max-height:50vh; }
  .lede{ margin-top:1rem; }
  .actions{ margin-top:1.25rem; }
  .microcopy{ margin-top:1.1rem; }
  .foot{ padding-block:1rem; }
}

@media (prefers-reduced-motion:reduce){
  .stage__ring--b{ animation:none; }
}