/* ═══════════════════════════════════════════════════════════
   PART 02 — Fright visual effects
   Character positions:
     Boy  top:240px left:185px  (SVG 90×200) → head at ~243–300px
     Girl top:282px left:548px  (SVG 112×158) → head at ~285–340px
═══════════════════════════════════════════════════════════ */

/* ── Boy eyes: single keyframe — normal → wide → normal ─── */
#s2-boy .eye {
  transform-box: fill-box;
  transform-origin: center;
}
body.scenes-started #stage #s2-boy .eye {
  animation: eyeFright 5s 10s ease-in-out both;
}
@keyframes eyeFright {
  0%   { transform: scale(1);   }
  8%   { transform: scale(1.9); }
  70%  { transform: scale(1.9); }
  85%  { transform: scale(1);   }
  100% { transform: scale(1);   }
}

/* ── Shock mark above the boy's head ────────────────────── */
/* Boy head top ≈ top:243px → shock sits just above at top:215px */
.shock-mark {
  position: absolute;
  top:  215px;
  left: 275px;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 42px;
  color: #ffe600;
  -webkit-text-stroke: 2px #000;
  opacity: 0;
  animation: shockPop 3.5s 10s both;
}
@keyframes shockPop {
  0%   { opacity: 0; transform: scale(0)   rotate(-15deg); }
  15%  { opacity: 1; transform: scale(1.3) rotate(5deg);   }
  50%  { opacity: 1; transform: scale(1)   rotate(0deg);   }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: scale(0.8); }
}

/* ── Sparkles spread around the girl ────────────────────── */
/* Girl SVG: top:282px, left:548px, width:112px
   Head centre approx top:307px, left:604px               */
.sparkle {
  position: absolute;
  color: #ffe600;
  -webkit-text-stroke: 1px #b8820a;
  opacity: 0;
  animation: sparklePop 2.8s both;
}

.sp-1 { top: 268px; left: 482px; font-size: 24px; animation-delay: 10.1s; }  /* upper-left  */
.sp-2 { top: 252px; left: 518px; font-size: 20px; animation-delay: 10.4s; }  /* above head  */
.sp-3 { top: 265px; left: 558px; font-size: 26px; animation-delay: 10.2s; }  /* upper-right */
.sp-4 { top: 305px; left: 574px; font-size: 18px; animation-delay: 10.6s; }  /* right        */
.sp-5 { top: 340px; left: 560px; font-size: 22px; animation-delay: 10.8s; }  /* lower-right */
.sp-6 { top: 318px; left: 468px; font-size: 16px; animation-delay: 10.5s; }  /* left         */

@keyframes sparklePop {
  0%   { opacity: 0; transform: scale(0)   rotate(0deg);   }
  18%  { opacity: 1; transform: scale(1.3) rotate(25deg);  }
  45%  { opacity: 1; transform: scale(1)   rotate(0deg);   }
  70%  { opacity: 1; transform: scale(1.1) rotate(-15deg); }
  100% { opacity: 0; transform: scale(0.6) rotate(10deg);  }
}