/* ============================================================
   booth.css — The Positivity Lab (iPad booth experiment)
   Self-contained. Reuses only tokens.css for brand vars.
   Kiosk: fills the screen, no page scroll, big touch targets,
   crisp dragging, works portrait or landscape.
   ============================================================ */

:root {
  --ink: #F4F1EA;
  --ink-soft: rgba(244, 241, 234, 0.68);
  --ink-faint: rgba(244, 241, 234, 0.42);
  --bg-a: #171233;
  --bg-b: #0d0a20;
  --glass: rgba(255, 255, 255, 0.09);
  --glass-edge: rgba(255, 255, 255, 0.3);
  --accent: #74d6c8; /* attract highlight */
  /* live mix colour of the flask liquid — JS updates these */
  --mix-a: #b9b3c9;
  --mix-b: #6f6a86;
  /* reveal flood colours — JS updates on result + swipe */
  --rev-top: #171233;
  --rev-bot: #0d0a20;
}

/* rounded display font for the cover headline (self-hosted → works offline) */
@font-face {
  font-family: "Baloo 2"; src: url("fonts/baloo2.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}

body {
  font-family: "Kallisto", "Playfair Display", Georgia, serif;
  color: var(--ink); height: 100svh;
  background: radial-gradient(120% 90% at 50% -10%, var(--bg-a), var(--bg-b) 70%);
  transition: background 0.8s ease;
}
/* the whole screen floods with the matched energy on the reveal */
body.result-mode { background: radial-gradient(135% 105% at 50% 12%, var(--rev-top), var(--rev-bot) 74%); }


body::before {
  content: ""; position: fixed; inset: -20%; z-index: 0;
  background:
    radial-gradient(38% 34% at 26% 30%, color-mix(in srgb, var(--mix-a) 55%, transparent), transparent 70%),
    radial-gradient(40% 38% at 78% 66%, color-mix(in srgb, var(--mix-b) 45%, transparent), transparent 72%);
  filter: blur(30px); opacity: 0.5;
  transition: background 1.2s ease, opacity 1.2s ease; pointer-events: none;
}
body.result-mode::before { opacity: 0.8; }

#app {
  position: relative; z-index: 1; height: 100svh; display: flex; flex-direction: column;
  padding: max(env(safe-area-inset-top), 20px) 18px max(env(safe-area-inset-bottom), 18px);
}

/* ---------------------------------------------------------- Screens */
.screen { display: none; flex: 1; min-height: 0; flex-direction: column; position: relative; z-index: 1; }
.screen.is-on { display: flex; animation: fadeIn 0.5s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------- Attract (dark, kinetic) */
#attract { align-items: center; justify-content: center; text-align: center; cursor: pointer; }
.cover { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; max-width: 820px; height: 100%; padding: clamp(16px, 4.5vh, 60px) 0; }
.attract-q { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.8vh, 24px); }
.attract-go { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.8vh, 20px); }
.attract-go .bigcta { margin-top: 0; }

/* a soft glow behind the hero that shifts to the current energy's colour */
.attract-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(44% 34% at 50% 46%, color-mix(in srgb, var(--cur-a, #8b86a0) 48%, transparent), transparent 72%);
  opacity: 0.85; transition: background 0.9s ease;
}
.attract-mark {
  width: clamp(62px, 10vw, 110px); height: auto; opacity: 0.96;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--cur-a, #fff) 55%, transparent));
  transition: filter 0.9s ease;
}
.attract-head {
  font-family: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 800;
  color: var(--ink); font-size: clamp(2.5rem, 1.4rem + 5.6vw, 4.6rem);
  line-height: 1.06; letter-spacing: -0.01em; margin: 0; max-width: 16ch;
}
.attract-head em { font-style: italic; position: relative; white-space: nowrap; padding: 0 0.04em; }
/* swoop pulled up tight under "today" so it never meets the energy word below */
.attract-head em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.04em; height: 0.24em;
  background: url("swoop.svg") no-repeat center / 100% 100%;
}
/* the star: a big energy word that cycles, each in its own glowing colour */
.energy-cycle { height: 1.1em; margin: 0; display: flex; align-items: center; justify-content: center; }
.energy-word {
  font-family: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 800;
  font-size: clamp(3.2rem, 1.9rem + 9.6vw, 8.6rem); line-height: 1; letter-spacing: -0.01em;
  color: var(--cur-a, #fff);
  text-shadow: 0 0 44px color-mix(in srgb, var(--cur-a, #fff) 70%, transparent);
  transition: color 0.55s ease, text-shadow 0.55s ease;
}
.energy-word.swap { animation: wordSwap 0.55s var(--ease, ease) both; }
@keyframes wordSwap {
  0% { opacity: 0; transform: translateY(14px) scale(0.94); filter: blur(4px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.attract-fine { margin-top: 0; font-family: "DM Sans", system-ui, sans-serif; font-size: clamp(0.82rem, 0.72rem + 0.45vw, 1rem); color: var(--ink-faint); letter-spacing: 0.02em; }

/* a real, unmissable button */
.bigcta {
  margin-top: clamp(30px, 5vh, 56px);
  font-family: "Kallisto", "Playfair Display", Georgia, serif;
  font-size: clamp(1.3rem, 1rem + 1.8vw, 2rem);
  color: #12112a; background: var(--ink);
  border: none; border-radius: 999px;
  padding: clamp(16px, 2.4vh, 24px) clamp(44px, 8vw, 76px);
  cursor: pointer; letter-spacing: 0.01em;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.5), 0 16px 40px rgba(0,0,0,0.4);
  animation: cta 2.4s ease-in-out infinite;
}
@keyframes cta {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(255,255,255,0.35), 0 16px 40px rgba(0,0,0,0.4); }
  50% { transform: translateY(-4px); box-shadow: 0 0 0 14px rgba(255,255,255,0), 0 22px 48px rgba(0,0,0,0.5); }
}
#attract .fine { margin-top: 18px; font-family: "DM Sans", system-ui, sans-serif; font-size: 0.8rem; color: var(--ink-faint); }

.attract-orbs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.attract-orbs span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, color-mix(in srgb, var(--oc, #fff) 60%, transparent), color-mix(in srgb, var(--oc, #fff) 12%, transparent) 55%, transparent 74%);
  filter: blur(3px); opacity: 0.55; animation: bob 9s ease-in-out infinite;
}

/* ---------------------------------------------------------- Round */
.round-head { text-align: center; flex: 0 0 auto; padding-top: 2px; }
.progress { display: flex; gap: 7px; justify-content: center; margin-bottom: 16px; }
.progress i { width: 22px; height: 4px; border-radius: 4px; background: var(--glass-edge); transition: background 0.4s ease, width 0.4s ease; }
.progress i.done { background: var(--mix-a); }
.progress i.here { background: var(--ink); width: 32px; }
.prompt { font-size: clamp(1.7rem, 1.1rem + 3.2vw, 2.9rem); line-height: 1.1; margin: 0 auto; max-width: 18ch; letter-spacing: -0.01em; }

/* orb field */
.orbfield {
  flex: 1; min-height: 0; display: flex; flex-wrap: wrap;
  align-content: center; justify-content: center;
  gap: clamp(14px, 2.8vw, 30px); padding: 10px 0; position: relative;
  overflow-y: auto; /* safety: rounds with 5 orbs never clip an option */
}
.orb {
  --d: clamp(112px, 28vw, 198px);
  width: var(--d); height: var(--d); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 16px; color: var(--ink);
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.36), rgba(255,255,255,0.09) 54%, rgba(255,255,255,0.03) 76%);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22), inset 0 1px 8px rgba(255,255,255,0.2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: grab; touch-action: none; will-change: transform;
  animation: orbIn 0.5s var(--in, 0ms) ease both, bob 7s var(--in, 0ms) ease-in-out infinite 0.5s;
}
/* BIGGER text inside the bubbles */
.orb span {
  font-family: "DM Sans", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(1.02rem, 0.72rem + 1.5vw, 1.5rem); line-height: 1.16;
}
.orb.grab { cursor: grabbing; animation: none; transition: none; z-index: 30;
  box-shadow: 0 26px 54px rgba(0,0,0,0.4), inset 0 1px 10px rgba(255,255,255,0.28); }
.orb.spent { pointer-events: none; opacity: 0; transform: scale(0.2); transition: transform 0.3s ease, opacity 0.3s ease; }
@keyframes orbIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-11px) rotate(1.4deg); } }

/* ---------------------------------------------------------- Flask */
.flaskwrap { flex: 0 0 auto; height: clamp(176px, 31vh, 320px); display: flex; align-items: flex-end; justify-content: center; position: relative; }
/* stage: canvas liquid sits UNDER the real glass photo. The canvas is taller than
   the glass (bottom-aligned) so bubbles can rise out past the rim into open air —
   the 160% must match TALL in flask.js. */
.flask { position: relative; height: 100%; aspect-ratio: 640 / 838; pointer-events: none; transition: filter 0.4s ease, transform 0.4s ease; }
.flaskcanvas { position: absolute; left: 0; bottom: 0; width: 100%; height: 160%; pointer-events: none; }
.flaskglass { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.flask.pulse { animation: flaskPulse 0.5s ease; }
@keyframes flaskPulse { 30% { transform: translateY(-6px) scale(1.03); } }
.flaskwrap.hot .flask { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--mix-a) 75%, transparent)); }
/* invite: gently glow + a label so people know where the orb goes */
.flaskwrap.invite .flask { animation: invite 1.8s ease-in-out infinite; }
@keyframes invite {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50% { filter: drop-shadow(0 0 16px rgba(255,255,255,0.4)); }
}
.drophere {
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  font-family: "DM Sans", system-ui, sans-serif; font-size: 0.82rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none; white-space: nowrap;
}
.flaskwrap.invite .drophere { opacity: 1; animation: pulseText 1.8s ease-in-out infinite; }
@keyframes pulseText { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ---------------------------------------------------------- Coach (first run) */
.coach { position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.coach.on { opacity: 1; }
.coach-finger {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff, rgba(255,255,255,0.35) 62%, transparent 74%);
  border: 2px solid rgba(255,255,255,0.9); box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transform: translate(var(--c0x, 0), var(--c0y, 0));
  animation: coach 2.8s ease-in-out infinite;
}
@keyframes coach {
  0%   { transform: translate(var(--c0x), var(--c0y)) scale(1);    opacity: 0; }
  10%  { opacity: 1; }
  22%  { transform: translate(var(--c0x), var(--c0y)) scale(0.82); opacity: 1; }
  68%  { transform: translate(var(--c1x), var(--c1y)) scale(0.82); opacity: 1; }
  80%  { transform: translate(var(--c1x), var(--c1y)) scale(1);    opacity: 1; }
  100% { transform: translate(var(--c1x), var(--c1y)) scale(1);    opacity: 0; }
}

/* the flying clone heading into the flask */
.flyer {
  position: fixed; z-index: 60; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.5), rgba(255,255,255,0.1) 60%, transparent 74%);
  border: 1px solid var(--glass-edge); pointer-events: none;
  transition: left 0.5s cubic-bezier(.5,.1,.2,1), top 0.5s cubic-bezier(.6,0,.3,1), width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
}

/* ---------------------------------------------------------- Reveal (carousel) */
#reveal { padding: 0; }
.revwrap { flex: 1; min-height: 0; width: 100%; overflow: hidden; position: relative; touch-action: pan-y; }
.revtrack { display: flex; height: 100%; will-change: transform; }
.revslide {
  flex: 0 0 100%; height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  text-align: center; padding: 14px 20px;
}
.revslide .eyebrow { font-family: "DM Sans", system-ui, sans-serif; font-size: 0.9rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
.revslide .energy { font-size: clamp(2.8rem, 1.6rem + 7vw, 5.4rem); line-height: 0.96; margin: 0; color: color-mix(in srgb, var(--mix-a) 30%, white); letter-spacing: -0.02em; }
.revslide .stone { font-size: clamp(1.1rem, 0.9rem + 1.2vw, 1.5rem); color: var(--ink); margin: 6px 0 0; }
.revslide .blend { font-family: "DM Sans", system-ui, sans-serif; font-size: clamp(0.92rem, 0.8rem + 0.7vw, 1.1rem); color: var(--ink-soft); margin: 14px auto 0; max-width: 26ch; line-height: 1.45; }

.rproducts { display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 4vw, 40px); margin: 18px auto 0; }
.rprod { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: rise 0.6s ease both; }
.rprod:nth-child(2) { animation-delay: 0.1s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rprod img { height: clamp(120px, 23vh, 208px); width: auto; object-fit: contain; filter: drop-shadow(0 16px 26px rgba(0,0,0,0.42)); }
.rprod figcaption { font-family: "DM Sans", system-ui, sans-serif; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }

.revslide .mantra { font-size: clamp(1.3rem, 1rem + 1.8vw, 2rem); line-height: 1.2; margin: 20px auto 0; max-width: 20ch; }
.revslide .mantra::before { content: "\201C"; }
.revslide .mantra::after { content: "\201D"; }
.revslide .findit { font-family: "DM Sans", system-ui, sans-serif; margin: 20px auto 0; max-width: 28ch; line-height: 1.5; font-size: clamp(1rem, 0.85rem + 0.9vw, 1.22rem); padding: 14px 22px; border-radius: 18px; background: rgba(255,255,255,0.1); border: 1px solid var(--glass-edge); }
.revslide .findit b { color: color-mix(in srgb, var(--mix-a) 30%, white); }

.swipehint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-family: "DM Sans", system-ui, sans-serif; font-size: 0.9rem; letter-spacing: 0.04em;
  color: var(--ink-soft); background: rgba(255,255,255,0.1); padding: 8px 16px; border-radius: 999px;
  animation: nudge 1.6s ease-in-out infinite; transition: opacity 0.4s ease;
}
.swipehint.gone { opacity: 0; pointer-events: none; }
@keyframes nudge { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(calc(-50% + 6px)); } }

.revdots { flex: 0 0 auto; display: flex; gap: 10px; justify-content: center; padding: 12px; }
.revdots i { width: 9px; height: 9px; border-radius: 50%; background: var(--glass-edge); transition: all 0.3s ease; cursor: pointer; }
.revdots i.on { background: var(--ink); width: 24px; border-radius: 5px; }

.restart {
  flex: 0 0 auto; margin: 0 auto max(env(safe-area-inset-bottom), 10px);
  font-family: "DM Sans", system-ui, sans-serif; font-size: 1rem; letter-spacing: 0.06em;
  color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 10px 20px;
}
.restart::before { content: "\21BB  "; }

@media (prefers-reduced-motion: reduce) {
  .orb, .attract-orbs span, .bigcta, .coach-finger, .flaskwrap.invite .flask, .swipehint { animation: none !important; }
}