/* ═══════════════════════════════════════════════════════════
   SCENE 05 — Days passing / daydreaming

   All animations are defined only inside body.scene5-active
   so they cannot start until the Continue button is clicked.
═══════════════════════════════════════════════════════════ */

#scene-05 {
  overflow: hidden;
  z-index: 30;
}

/* ── Scene fade-in ──────────────────────────────────────── */
body.scene5-active #stage #scene-05 {
  animation: s5FadeIn 1.4s both;
}
@keyframes s5FadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Sky ─────────────────────────────────────────────────── */
#s5-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, #020210 0%, #0a0520 100%); /* default night */
}
body.scene5-active #stage #s5-sky {
  animation: skyColor 4s 0.3s ease-in-out 3 both;
}
@keyframes skyColor {
  0%   { background: linear-gradient(to bottom, #020210 0%, #0a0520 100%); }
  8%   { background: linear-gradient(to bottom, #1a0830 0%, #6b2500 100%); }
  18%  { background: linear-gradient(to bottom, #3a1050 0%, #e84800 100%); }
  30%  { background: linear-gradient(to bottom, #1a6fbb 0%, #87ceeb 100%); }
  50%  { background: linear-gradient(to bottom, #0a5fa8 0%, #6ab8e8 100%); }
  70%  { background: linear-gradient(to bottom, #1a6fbb 0%, #87ceeb 100%); }
  82%  { background: linear-gradient(to bottom, #2a0840 0%, #cc3000 100%); }
  92%  { background: linear-gradient(to bottom, #0a0520 0%, #1a0830 100%); }
  100% { background: linear-gradient(to bottom, #020210 0%, #0a0520 100%); }
}

/* ── Sun ─────────────────────────────────────────────────── */
#s5-sun {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fffde0, #ffd700 55%, #ff8c00);
  box-shadow:
    0 0 20px 8px  rgba(255,200, 60, 0.65),
    0 0 60px 20px rgba(255,160, 20, 0.38);
  left: 50%;
  top:  50%;
  margin-left: -32px;
  margin-top:  -32px;
  z-index: 2;
  opacity: 0; /* hidden until animation kicks in */
}
body.scene5-active #stage #s5-sun {
  animation: sunArc 4s 0.3s linear 3 both;
}
@keyframes sunArc {
  0%   { transform: translate(-540px,  320px) scale(0.70); opacity: 0;    }
  6%   { transform: translate(-380px,  180px) scale(0.90); opacity: 0.85; }
  20%  { transform: translate(-200px,   20px) scale(1.05); opacity: 1;    }
  50%  { transform: translate(    0,  -180px) scale(1.15); opacity: 1;    }
  80%  { transform: translate( 200px,   20px) scale(1.05); opacity: 1;    }
  94%  { transform: translate( 380px,  180px) scale(0.90); opacity: 0.85; }
  100% { transform: translate( 540px,  320px) scale(0.70); opacity: 0;    }
}

/* ── Lighting overlay ────────────────────────────────────── */
#s5-light {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: rgba(0, 0, 30, 0.72); /* default: night dark */
}
body.scene5-active #stage #s5-light {
  animation: lightCycle 4s 0.3s ease-in-out 3 both;
}
@keyframes lightCycle {
  0%   { background: rgba(  0,  0, 30, 0.72); }
  18%  { background: rgba(200, 80,  0, 0.18); }
  30%  { background: rgba(255,255,200, 0.05); }
  50%  { background: rgba(  0,  0,  0, 0.00); }
  70%  { background: rgba(255,255,200, 0.05); }
  82%  { background: rgba(180, 50,  0, 0.22); }
  92%  { background: rgba(  0,  0, 20, 0.55); }
  100% { background: rgba(  0,  0, 30, 0.72); }
}

/* ── Ground ──────────────────────────────────────────────── */
#s5-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 85px;
  background: linear-gradient(to bottom, #3d7a22, #2a5a12);
  z-index: 5;
  filter: brightness(0.22); /* default: night dark */
}
body.scene5-active #stage #s5-ground {
  animation: groundLight 4s 0.3s ease-in-out 3 both;
}
@keyframes groundLight {
  0%   { filter: brightness(0.22); }
  20%  { filter: brightness(0.75); }
  50%  { filter: brightness(1.00); }
  80%  { filter: brightness(0.70); }
  95%  { filter: brightness(0.28); }
  100% { filter: brightness(0.22); }
}

/* ── Boy ─────────────────────────────────────────────────── */
#s5-boy {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

body.scene5-active #s5-boy .eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: s5EyeHide 0.35s 13s ease-out both;
}
@keyframes s5EyeHide { from { opacity: 1; } to { opacity: 0; } }

body.scene5-active #s5-boy .heart-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    s5HeartPop   0.55s 13s   ease-out    both,
    s5HeartPulse 1.1s  13.6s ease-in-out infinite;
}
@keyframes s5HeartPop {
  0%   { opacity: 0; transform: scale(0);   }
  55%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: 1; transform: scale(1.2); }
}
@keyframes s5HeartPulse {
  0%, 100% { transform: scale(1.2);  }
  50%       { transform: scale(1.45); }
}

body.scene5-active #s5-boy .mouth.smile {
  animation: s5Appear 0.5s 13s ease-out both;
}
body.scene5-active #s5-boy .blush {
  animation: s5Appear 0.8s 13s ease-out both;
}
@keyframes s5Appear { from { opacity: 0; } to { opacity: 1; } }

/* ── Thought bubble ──────────────────────────────────────── */
#s5-thought-wrap {
  position: absolute;
  bottom: 262px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#s5-thought {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.40);
  transform-origin: bottom center;
}

/* Animation only attaches when scene is active */
body.scene5-active #stage #s5-thought {
  animation: thoughtGrow 12s 0.5s ease-in-out forwards;
}

.thought-main {
  background: rgba(255, 252, 240, 0.97);
  border: 3px solid #333;
  border-radius: 50px;
  padding: 12px 26px;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 30px;
  letter-spacing: 3px;
  color: #e53935;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.15);
  white-space: nowrap;
}

.thought-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
}
.td {
  background: rgba(255, 252, 240, 0.97);
  border: 2px solid #333;
  border-radius: 50%;
}
.td1 { width: 14px; height: 14px; }
.td2 { width:  9px; height:  9px; }
.td3 { width:  5px; height:  5px; }

/* Smooth growth across 3 days:
   Day 1 (0–33%,  0–7 s):  scale ~0.40–0.50
   Ramp  (33–40%, 7–8.4 s): 0.44 → 0.82
   Day 2 (40–66%, 8.4–14 s): scale ~0.82–0.92
   Ramp  (66–73%, 14–15.3 s): 0.85 → 1.20
   Day 3 (73–100%,15.3–21 s): scale ~1.18–1.35        */
@keyframes thoughtGrow {
  0%   { transform: scale(0.40); }
  5%   { transform: scale(0.48) translateY(-4px); }
  10%  { transform: scale(0.41); }
  16%  { transform: scale(0.50) translateY(-4px); }
  22%  { transform: scale(0.42); }
  28%  { transform: scale(0.49) translateY(-4px); }
  33%  { transform: scale(0.44); }
  40%  { transform: scale(0.82); }
  45%  { transform: scale(0.90) translateY(-7px); }
  50%  { transform: scale(0.82); }
  55%  { transform: scale(0.92) translateY(-7px); }
  60%  { transform: scale(0.83); }
  66%  { transform: scale(0.85); }
  73%  { transform: scale(1.20); }
  78%  { transform: scale(1.32) translateY(-12px); }
  83%  { transform: scale(1.18); }
  88%  { transform: scale(1.35) translateY(-13px); }
  93%  { transform: scale(1.20); }
  98%  { transform: scale(1.33) translateY(-12px); }
  100% { transform: scale(1.28) translateY(-10px); }
}