/* Soft-park / WBRB Holding overlay:
   Idle: (1) `> …` Press Start hero (2) wake tagline
   WBRB: hero only (`> We'll be right back`)
   Preview letterboxes a 16:9 stream frame; OBS fills the Browser Source.
   Brand tokens only (PINNED RULE #3). */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  position: relative;
}

body.soft-park-preview {
  background: var(--bg);
  display: grid;
  place-content: center;
}

/* 16:9 stream frame — largest that fits the viewport, letterboxed. */
.soft-park-stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  container-type: size;
}

body.soft-park-obs .soft-park-stage {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
}

.soft-park-bg {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

body.soft-park-obs .soft-park-bg,
body.soft-park-obs .soft-park-canvas {
  display: none !important;
}

.soft-park-canvas {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: var(--bg);
}

body.soft-park-preview .soft-park-canvas {
  display: block;
}

.soft-park {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  /* Low mins — portrait phone letterbox is ~390×219; 24px padding ate the frame. */
  padding: clamp(8px, 4cqi, 48px);
  text-align: center;
  pointer-events: none;
}

.soft-park-stack {
  display: grid;
  max-width: min(92cqi, 920px);
  justify-items: center;
  /* Single grid cell — copy layers stack for crossfade. */
  grid-template-columns: minmax(0, 1fr);
  animation: soft-park-enter 0.55s ease-out;
}

.soft-park-copy {
  grid-area: 1 / 1;
  display: grid;
  gap: clamp(10px, 1.4cqi, 16px);
  justify-items: center;
  width: 100%;
  max-width: 100%;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.soft-park-copy.is-active {
  opacity: 1;
}

.soft-park-headline {
  margin: 0;
  max-width: 100%;
  white-space: nowrap;
  font-family: var(--font-display);
  /* Press Start is ~1em/glyph — "> We'll be right back" ≈ 21em.
     Old min 18px overflowed ~390cqi phone stages (clipped the final "k").
     Keep stream-relative 3.2cqi; only floor at 10px for tiny previews. */
  font-size: clamp(10px, 3.2cqi, 36px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--text);
  text-shadow: 0 2px 0 var(--bg);
}

/* Keep `>` at normal hero size; only the sleepy glyph is bigger + nudged. */
.soft-park-headline.is-emoji {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  line-height: 1.45;
}

.soft-park-headline .soft-park-prompt {
  font-size: inherit;
  line-height: inherit;
}

.soft-park-headline .soft-park-emoji {
  display: inline-block;
  font-size: 1.35em;
  line-height: 1;
  transform: translate(-0.08em, -0.1em);
  text-shadow: none;
}

.soft-park-tagline {
  margin: 0;
  max-width: 42ch;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: clamp(12px, 1.35cqi, 15px);
  font-weight: 600;
  line-height: 1.25;
  padding: 0.22em 0.65em;
  color: var(--text);
  border-radius: var(--radius-sm);
  background: var(--bg-stream);
  text-shadow: none;
}

.soft-park-mark {
  position: absolute;
  left: clamp(8px, 1.8cqi, 20px);
  bottom: clamp(8px, 1.8cqi, 20px);
  /* Match hero: 5cqi tracks 3.2cqi type (same ratio as desktop max 46/36). */
  width: clamp(14px, 5cqi, 46px);
  height: clamp(14px, 5cqi, 46px);
  pointer-events: none;
}

.soft-park-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes soft-park-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .soft-park-stack {
    animation: none;
  }

  .soft-park-copy {
    transition: none;
  }
}