/* ===== Idle / call-to-action screen (layout mirrors cta_screen_mockup.png) ===== */

#stage-idle { background: var(--bg); }

.idle-frame {
  position: absolute;
  inset: clamp(10px, 1.5vw, 22px);
  border: 4px solid var(--ink);
  border-radius: 22px;
  overflow: hidden;
}

.idle-title {
  position: absolute;
  top: 3.5%;
  width: 100%;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, min(7vw, 8.75vh), 6rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* --- characters, % positions taken from the mockup ---
 * Width uses min(% of frame, vh-based cap): the mockup is 4:3, so on wider
 * screens (real iPads are ~1.44:1) width-proportional art outgrows the
 * height-proportional layout and collides with the text. The vh cap keeps
 * characters sized to the height whenever the screen is wider than 4:3. */
.char {
  position: absolute;
  animation: ambient-bounce var(--dur, 12s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.char-1 { left: 4.4%;  top: 37%;   width: min(11.5%, 14.4vh); --dur: 13s;  --delay: 0s; }
.char-2 { left: 14.8%; top: 21.3%; width: min(15.8%, 19.8vh); --dur: 11s;  --delay: 2.5s; }
.char-3 { left: 31.4%; top: 28.6%; width: min(10.0%, 12.5vh); --dur: 14s;  --delay: 5s; }
.char-4 { left: 42.3%; top: 19.3%; width: min(15.4%, 19.3vh); --dur: 12s;  --delay: 7.5s; }
.char-5 { left: 57.8%; top: 31.5%; width: min(10.0%, 12.5vh); --dur: 13s;  --delay: 3.8s; }
.char-6 { left: 68.6%; top: 21.3%; width: min(15.0%, 18.8vh); --dur: 11.5s; --delay: 6.2s; }
.char-7 { left: 85.0%; top: 37.5%; width: min(12.1%, 15.1vh); --dur: 12.5s; --delay: 9s; }

/* Gentle periodic bounce: still ~90% of the cycle, one soft double-hop otherwise. */
@keyframes ambient-bounce {
  0%, 86%, 100% { transform: translateY(0); }
  89%  { transform: translateY(-1.8%) rotate(-0.6deg); }
  92%  { transform: translateY(0.4%); }
  95%  { transform: translateY(-1%) rotate(0.5deg); }
  98%  { transform: translateY(0); }
}

.idle-instructions {
  position: absolute;
  top: 55.5%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding-left: 1.2em;
  font-size: clamp(1.05rem, min(3.1vw, 3.9vh), 2.5rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  white-space: nowrap;
}

.cta-button.pulse { animation: cta-pulse 2.6s ease-in-out infinite; }
#cta-button {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.55em 1.5em;
  font-size: clamp(1.3rem, min(3.2vw, 4vh), 2.4rem);
}
@keyframes cta-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 6px 18px rgba(22, 65, 78, 0.35); }
  50% { transform: translateX(-50%) scale(1.05); box-shadow: 0 10px 26px rgba(22, 65, 78, 0.45); }
}

.idle-footer {
  position: absolute;
  top: 89%;
  width: 100%;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, min(3.6vw, 4.5vh), 2.9rem);
  font-weight: 600;
  color: var(--ink);
}