/* Shared shell for the waitlist concepts: one fixed phone-height screen, no scrolling.
   Each concept page only styles its own .stage. The current flavor sets --bg, --deep, --glow, --ink and --btn. */
/* Registered so gradients built from these colors blend smoothly between flavors */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #ef4c3c; }
@property --deep { syntax: "<color>"; inherits: true; initial-value: #cf3a2b; }
@property --glow { syntax: "<color>"; inherits: true; initial-value: #ff8a78; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --btn { syntax: "<color>"; inherits: true; initial-value: #2a0f0b; }
:root {
  transition: --bg .9s cubic-bezier(.65, 0, .35, 1), --deep .9s cubic-bezier(.65, 0, .35, 1), --glow .9s cubic-bezier(.65, 0, .35, 1), --ink .6s ease, --btn .9s ease;
  --bg: #ef4c3c; --deep: #cf3a2b; --glow: #ff8a78; --ink: #ffffff; --btn: #2a0f0b;
  --ease: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html { background: var(--bg); }
body {
  position: fixed; inset: 0;
  font-family: "Archivo", system-ui, sans-serif; color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.app {
  position: relative; height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto auto 1fr auto;
  padding: max(env(safe-area-inset-top), 12px) 18px max(env(safe-area-inset-bottom), 14px);
  max-width: 560px; margin: 0 auto; isolation: isolate;
}

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; height: 44px; position: relative; z-index: 5; }
.wordmark {
  display: block; width: 104px; aspect-ratio: 640 / 460; background: currentColor;
  -webkit-mask: url(../../assets/happy-spoon-wordmark-mask.png) center / contain no-repeat;
  mask: url(../../assets/happy-spoon-wordmark-mask.png) center / contain no-repeat;
}
.chip { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 14%, transparent); }

/* Turn indicator: five segments, the active one fills while that flavor has the stage */
.bars { display: flex; align-items: center; gap: 5px; margin-top: 10px; position: relative; z-index: 5; }
.bars button { flex: 1; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.bars button i { display: block; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 25%, transparent); overflow: hidden; }
.bars button i::after { content: ""; display: block; height: 100%; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.bars button.done i::after { transform: scaleX(1); }
.bars button.on i::after { animation: fill var(--turn, 3.4s) linear forwards; }
.bars.paused button.on i::after { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }
.bars .pause { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); }
.bars .pause svg { width: 10px; height: 10px; fill: currentColor; }

/* Stage: each concept fills this */
.stage { position: relative; min-height: 0; touch-action: none; }
.tub { position: absolute; left: 0; top: 0; display: block; aspect-ratio: 600 / 720; will-change: transform; pointer-events: auto; }
.tub img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; pointer-events: none; }

/* Bottom: flavor name + waitlist */
.bottom { position: relative; z-index: 5; padding-top: 6px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.name {
  position: relative; height: 1.02em; overflow: hidden; margin-top: 4px;
  font-size: min(11.2vw, 58px); line-height: 1; font-weight: 880; font-stretch: 72%;
  font-variation-settings: "wdth" 72; text-transform: uppercase; letter-spacing: -.005em;
}
.name span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.name span.in { animation: nameIn .8s var(--ease) both; }
.name span.out { animation: nameOut .8s var(--ease) both; }
@keyframes nameIn { from { transform: translateY(105%); } }
@keyframes nameOut { to { transform: translateY(-105%); } }
.offer { margin-top: 8px; font-size: 16px; line-height: 1.35; font-weight: 500; }
.offer b { font-weight: 800; white-space: nowrap; padding: 1px 7px 2px; border-radius: 7px; background: color-mix(in srgb, var(--ink) 16%, transparent); }

.join { display: flex; gap: 6px; margin-top: 14px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); }
.join input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 14px; font: 500 16px/1 "Archivo", system-ui, sans-serif; color: #15191d; user-select: text; -webkit-user-select: text; }
.join input::placeholder { color: #8a9299; }
.join button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 15px 18px; background: var(--btn); color: #fff; font: 700 15px/1 "Archivo", system-ui, sans-serif; cursor: pointer; transition: background-color .9s var(--ease), transform .15s ease; }
.join button:active { transform: scale(.97); }
.note { min-height: 18px; margin-top: 9px; font-size: 12px; text-align: center; opacity: .78; }
.done-msg { display: none; margin-top: 14px; padding: 16px 18px; border-radius: 22px; background: #fff; color: #15191d; font-size: 15px; line-height: 1.35; }
.done-msg b { display: block; font-size: 17px; margin-bottom: 2px; }
.app.joined .join { display: none; }
.app.joined .done-msg { display: block; animation: nameIn .6s var(--ease) both; }

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

/* Short phones (iPhone SE, Safari with toolbars) */
@media (max-height: 640px) {
  .offer { font-size: 14px; margin-top: 6px; }
  .bars { margin-top: 4px; }
  .name { font-size: min(10vw, 48px); }
}
@media (prefers-reduced-motion: reduce) {
  html, body, .join button { transition-duration: .01s; }
  .name span.in, .name span.out { animation-duration: .01s; }
}