/* Phone page. The design is a 390x844 artboard. JS (fit() in app.js) scales it to the phone's width and sets
   the stage height to what the phone shows. Layers then pin to the top or the bottom with these variables:
   --stage-h, --shift-top, --shift-bottom, --shift-mid, --draw-shift, --result-shift */

:root {
  --night: #1f0838;
  --orange: #ff7a00;
  --ink: #222;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--night);
  font-family: 'Kanit', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

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

/* Blurred copy of the art behind the artboard, so side bars on wide/short screens don't look empty */
.backdrop {
  position: fixed;
  inset: -40px;
  background: url('/assets/bg-request.jpg') center / cover no-repeat;
  filter: blur(24px) brightness(0.7);
  transition: background-image 0.3s;
}

.stage {
  --rise: 900px; /* how far fizz bubbles travel */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 390px;
  height: var(--stage-h, 844px);
  background: #1e0838; /* = top colour of the Figma sky gradient */
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center;
  overflow: hidden;
  overflow: clip; /* clip, not hidden: hidden boxes can still be scrolled by focus/scrollIntoView */
}

.screen { position: absolute; inset: 0; }
.screen[hidden], .draw[hidden] { display: none; }

.art {
  position: absolute;
  inset: 0;
  width: 390px;
  height: 844px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- 1. Request screen: living background ---------- */

.intro-zoom { position: absolute; inset: 0; overflow: clip; }

/* Anchor containers: full artboard size, moved up/down to fit the phone */
.anchor, #wishForm {
  position: absolute;
  left: 0;
  top: 0;
  width: 390px;
  height: 844px;
}
.anchor { pointer-events: none; }
[data-anchor="top"], #wishForm { transform: translateY(var(--shift-top, 0px)); }
[data-anchor="mid"] { transform: translateY(var(--shift-mid, 0px)); }
[data-anchor="bottom"] { transform: translateY(var(--shift-bottom, 0px)); }
.rq-static { position: absolute; left: 0; top: 0; width: 390px; height: 844px; display: block; }

/* Soft pulsing glow on the moon */
.fx-moon {
  position: absolute;
  left: -40px;
  top: 300px;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 170, 0.5) 30%, rgba(255, 200, 120, 0.18) 50%, transparent 68%);
  mix-blend-mode: screen;
  animation: moon-pulse 4s ease-in-out infinite;
}

/* Figma layers (generated into index.html by scripts/build-request-layers.js). --i = layer index, used to offset timing. */
.rq { position: absolute; }
.rq div, .rq img { position: absolute; display: block; max-width: none; }

.rq-logo { filter: drop-shadow(0 4px 2px rgba(25, 5, 45, 0.75)); animation: logo-float 4s ease-in-out infinite; } /* shadow = Figma layer effect */
.rq-logo img { animation: neon 3.2s ease-in-out infinite; }

.rq-bat-orange, .rq-bat-black, .rq-bat-small { animation: bat-drift 3.4s ease-in-out calc(var(--i) * -0.83s) infinite; }
.rq-bat-orange img, .rq-bat-black img, .rq-bat-small img,
.rq-bus .bat { transform-origin: center 35%; animation: flap 0.32s ease-in-out calc(var(--i) * -0.11s) infinite alternate; }

.rq-ghost-left { animation: ghost-float 3.2s ease-in-out infinite; }
.rq-ghost-right { animation: ghost-float 2.8s ease-in-out -1.3s infinite reverse; }

.rq-spider { transform-origin: 50% 0; animation: swing 2.6s ease-in-out infinite; }

.rq-pumpkin { transform-origin: 50% 100%; animation: pumpkin-hop 1.6s ease-in-out calc(var(--i) * -0.4s) infinite; }

.rq-sparkle { animation: twinkle 2.2s ease-in-out calc(var(--i) * -0.37s) infinite; }

.rq-bus { transform-origin: 50% 100%; animation: bus-bump 0.9s ease-in-out infinite; }
.rq-bus .cat { transform-origin: 50% 100%; animation: cat-bob 1.8s ease-in-out infinite; }

.fx-fog {
  position: absolute;
  width: 640px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(225, 200, 255, 0.32), transparent 65%);
  filter: blur(6px);
}
.fx-fog-1 { left: -200px; bottom: 64px; animation: fog-drift 14s ease-in-out infinite alternate; }
.fx-fog-2 { left: -60px; bottom: -31px; animation: fog-drift 18s ease-in-out -6s infinite alternate-reverse; opacity: 0.8; }

/* ---------- Request form (positions from Figma: Request Input / Submit Button) ---------- */

.wish-input {
  position: absolute;
  left: 45px;
  top: 390.47px;
  width: 300px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 16px 0 20px;
  background: #fff;
  border: 1px solid #8c8c8c;
  border-radius: 24px;
  cursor: text;
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
  animation: input-glow 2.8s ease-in-out infinite;
}

.wish-input:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.35), 0 0 22px rgba(255, 160, 60, 0.55);
  transform: scale(1.03);
  animation: none;
}

.wish-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: 500 16px/1 'Kanit', system-ui, sans-serif;
  color: var(--ink);
}

.wish-input input::placeholder { color: var(--ink); opacity: 0.75; }

.wish-input img { flex: none; display: block; }

.counter {
  position: absolute;
  right: 53px;
  top: 440px;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(31, 8, 56, 0.6);
  color: #fff;
  font: 500 12px/1.5 'Kanit', system-ui, sans-serif;
  transition: background 0.2s, transform 0.2s;
}

.counter.full { background: var(--orange); transform: scale(1.1); }

.submit {
  position: absolute;
  left: 107.5px;
  top: 465.47px;
  width: 175px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 26px;
  overflow: hidden;
  background: var(--orange);
  box-shadow: 0 6px 14px rgba(255, 122, 0, 0.45);
  color: #fff;
  font: 700 20px/1 'Kanit', system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
  animation: btn-breathe 2.4s ease-in-out infinite;
}

/* Light sweep across the button */
.submit::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: sheen 3.2s ease-in-out infinite;
}

.submit span { position: relative; z-index: 1; }
.submit:active { transform: scale(0.94); animation: none; }
.submit:disabled { filter: saturate(0.6) brightness(0.9); cursor: wait; animation: none; }

.toast {
  position: absolute;
  left: 35px;
  right: 35px;
  top: 532px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #c4161c;
  font: 500 14px/1.4 'Kanit', system-ui, sans-serif;
  text-align: center;
  animation: pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.toast[hidden] { display: none; }

.shake { animation: shake 0.4s !important; }

/* The wish flying up to the moon */
.wish-fly {
  position: absolute;
  left: 45px;
  top: calc(390px + var(--shift-top, 0px));
  width: 300px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 24px 8px rgba(255, 210, 120, 0.8);
  color: var(--ink);
  font: 700 16px/1 'Kanit', system-ui, sans-serif;
  white-space: nowrap;
  z-index: 8;
}

/* ---------- 2. The draw ---------- */

.draw { position: absolute; inset: 0; z-index: 5; overflow: clip; }
.draw-body { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: translateY(var(--draw-shift, 0px)); }

.draw-dim { position: absolute; inset: 0; background: rgba(14, 3, 28, 0.84); }

.draw-tint {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 46%, var(--tint, #ff7a00) 0%, transparent 62%);
  opacity: 0.55;
  transition: background 0.12s;
}

.draw-rays {
  position: absolute;
  left: -255px;
  top: -60px;
  width: 900px;
  height: 900px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.09) 0deg 9deg, transparent 9deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 55%);
  mask-image: radial-gradient(circle, #000 15%, transparent 55%);
  animation: spin 14s linear infinite;
}

.draw-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 178px;
  margin: 0;
  text-align: center;
  color: #fff;
  font: 700 28px/1.3 'Kanit', system-ui, sans-serif;
  text-shadow: 0 0 12px rgba(255, 140, 30, 0.9), 0 2px 0 #7a2b00;
}

.dots i { display: inline-block; font-style: normal; animation: dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }

.reel-frame {
  position: absolute;
  left: 69.5px;
  top: 248px;
  width: 251px;
  height: 245px;
  padding: 10px;
  border-radius: 28px;
  background: #1f0838;
  box-shadow: 0 0 0 3px #ffb35c, 0 0 26px 8px rgba(255, 122, 0, 0.75), inset 0 0 18px rgba(255, 122, 0, 0.6);
  transition: transform 0.08s;
}

.reel-frame.tick { transform: scale(1.025); }
.reel-frame.win { animation: win 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.5); box-shadow: 0 0 0 4px #fff3c4, 0 0 40px 16px rgba(255, 220, 120, 0.95), inset 0 0 18px rgba(255, 200, 80, 0.8); }

.reel-window {
  position: relative;
  width: 231px;
  height: 225px;
  border-radius: 18px;
  overflow: hidden;
}

.reel-window::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 2, 20, 0.6), transparent 22%, transparent 78%, rgba(10, 2, 20, 0.6));
  pointer-events: none;
}

.reel-strip { will-change: transform, filter; }

/* One reel card = the sticker + headline area of a result screen (x 30–360, y 362–683), scaled 0.7 */
.reel-item {
  width: 231px;
  height: 225px;
  margin-bottom: 10px;
  border-radius: 18px;
  background-repeat: no-repeat;
  background-size: 273px 590.8px;
  background-position: -21px -253.4px;
}

.draw-wish {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 520px;
  margin: 0;
  color: #fff;
  font: 500 16px/1.4 'Kanit', system-ui, sans-serif;
  text-align: center;
  opacity: 0.9;
}

.draw-wish b { color: #ffd38a; font-weight: 700; }

/* ---------- 3. Result ---------- */

.result-art { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: translateY(var(--result-shift, 0px)); }
.pieces { position: absolute; inset: 0; pointer-events: none; }
.piece, .patch { position: absolute; background-repeat: no-repeat; background-size: 390px 844px; }

.again {
  position: absolute;
  left: 10px;
  top: 10px; /* over the dark drips, never on top of the text */
  padding: 6px 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  background: rgba(31, 8, 56, 0.55);
  color: #fff;
  font: 500 12px/1.4 'Kanit', system-ui, sans-serif;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 2;
}
.again.show { opacity: 1; }

/* ---------- overlays ---------- */

#burstFx { z-index: 15; }

.flash {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #fff6dc 45%, #ffd08a 100%);
  opacity: 0;
  pointer-events: none;
}

/* ---------- keyframes ---------- */

@keyframes moon-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes neon {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 80, 220, 0.35)); }
  45% { filter: drop-shadow(0 0 10px rgba(255, 80, 220, 0.9)); }
  48% { filter: drop-shadow(0 0 2px rgba(255, 80, 220, 0.2)); }
  51% { filter: drop-shadow(0 0 9px rgba(255, 80, 220, 0.85)); }
}
@keyframes logo-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-1deg); } }
@keyframes bat-drift {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(5px, -6px); }
  66% { transform: translate(-4px, 3px); }
}
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(0.55); } }
@keyframes ghost-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}
@keyframes swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes pumpkin-hop {
  0%, 60%, 100% { transform: translateY(0) scale(1, 1); }
  70% { transform: translateY(0) scale(1.08, 0.9); }
  80% { transform: translateY(-7px) scale(0.95, 1.06); }
  90% { transform: translateY(0) scale(1.04, 0.96); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(45deg); }
}
@keyframes bus-bump { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-2px) rotate(-0.8deg); } 60% { transform: translateY(0) rotate(0.6deg); } }
@keyframes cat-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fog-drift { from { transform: translateX(-40px); } to { transform: translateX(120px); } }
@keyframes input-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 120, 0); } 50% { box-shadow: 0 0 18px 2px rgba(255, 200, 120, 0.55); } }
@keyframes btn-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); box-shadow: 0 8px 22px rgba(255, 122, 0, 0.7); } }
@keyframes sheen { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }
@keyframes shake {
  20%, 60% { translate: -6px 0; }
  40%, 80% { translate: 6px 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-6px); opacity: 1; } }
@keyframes win { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .rq, .rq img, .fx-moon, .fx-fog, .fx-bubble, .fx-sparkle, .draw-rays, .submit, .submit::after, .wish-input { animation: none !important; }
}