/* ============================================================
   layout.css — structural skeleton for the WebGL engine.

   .sr-stage                 ← tall scroll track (height set by JS, vh)
     └ .sr-viewport.is-sticky  ← sticky pin, one screen tall
         ├ .sr-bg
         ├ .sr-frame           ← portrait box
         │   ├ canvas.sr-canvas   ← the WebGL face
         │   └ .sr-bg-glow
         ├ .sr-vignette
         ├ .sr-badge--before / --after
         ├ .sr-content (title/desc/cta)
         └ .sr-scroll-hint
   ============================================================ */

.sr-stage {
  position: relative;
  width: 100%;
}

.sr-viewport {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--sr-top, 0px));
  height: calc(100svh - var(--sr-top, 0px));
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--sr-hero-bg);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sr-viewport.is-sticky {
  position: sticky;
  top: var(--sr-top, 0px);
}
.sr-stage.sr--ready .sr-viewport {
  opacity: 1;
}

.sr-bg,
.sr-bg-glow,
.sr-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sr-bg { z-index: 0; }
.sr-vignette { z-index: 3; }

.sr-frame {
  position: relative;
  z-index: 1;
  height: min(84vh, 780px);
  aspect-ratio: 627 / 1054;
  max-width: 92vw;
}
.sr-canvas,
.sr-fallback-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--sr-radius);
}
.sr-fallback-img { object-fit: cover; }
.sr-bg-glow { z-index: 2; }

.sr-badge {
  position: absolute;
  z-index: 4;
  top: 1.25rem;
  inset-inline-end: 1.25rem;
  padding: 6px 14px;
}
.sr-badge--after { opacity: 0; }

.sr-content {
  position: absolute;
  z-index: 5;
  inset: auto 0 clamp(1.5rem, 6vh, 5rem) 0;
  margin-inline: auto;
  width: min(560px, 88vw);
  text-align: center;
  pointer-events: none;
}
.sr-content.is-live { pointer-events: auto; }
/* Lead (kicker + title) shows from the start; the outro (desc + CTA) is
   hidden until the engine raises its opacity on scroll. */
.sr-outro { opacity: 0; }

.sr-scroll-hint {
  position: absolute;
  z-index: 6;
  inset-inline: 0;
  bottom: 1.1rem;
  text-align: center;
  color: var(--sr-gold);
  font-size: 12px;
  letter-spacing: 3px;
}

/* ── Desktop: portrait and copy sit side by side as one centred group —
   image on the (physical) left, copy on the right, a small gap between them
   so they read together. On mobile the base rules keep the copy centred at
   the bottom of the portrait. ── */
@media (min-width: 901px) {
  /* The viewport becomes a centred row; row-reverse puts the portrait
     (first child) on the physical left and the copy on the right in RTL. */
  .sr-viewport {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 3.5rem);
  }
  .sr-frame { flex: 0 0 auto; }

  /* Copy is now an in-flow flex column beside the portrait (no absolute
     positioning). Vertical centring via the row's align-items. */
  .sr-content {
    position: static;
    inset: auto;
    margin: 0;
    width: min(420px, 34vw);
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  /* Copy lives on the plain black backdrop — no scrim needed. */
  .sr-content::before { display: none; }
  .sr-desc { margin-inline: 0; }
}

/* ── Demo-page spacers (index.html / demo/*) ── */
.sr-demo-intro {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  background: radial-gradient(circle at 50% 30%, #1c1c1c 0%, #0e0e0e 70%);
}
.sr-demo-after {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  background: #0e0e0e;
}