/* ═══════════════════════════════════════════════════════════
   PART 04 — Close-up: full boy scaled up, butterflies
   Fright ends at ~t=11.6s → overlay starts at t=12s
═══════════════════════════════════════════════════════════ */

/* ── Overlay fades in right after the fright ────────────── */
.closeup-overlay {
  position: absolute;
  inset: 0;
  background-color: #fff9e6;
  background-image: radial-gradient(circle, rgba(0,0,0,0.13) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* fades in at t=12s — scene 3 covers it at t=17s (4 s visible) */
  animation: overlayIn 1.0s 12s ease-in-out both;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Full boy SVG ────────────────────────────────────────── */
.cu-boy {
  position: absolute;
  width:  225px;
  height: 500px;
  top:  3px;
  left: 50%;
  transform: translateX(-50%);
  animation: bodyPulse 2.2s 13.2s ease-in-out infinite;
}
@keyframes bodyPulse {
  0%, 100% { transform: translateX(-50%) scale(1);    }
  50%       { transform: translateX(-50%) scale(1.03); }
}

/* ── Butterfly ring ──────────────────────────────────────── */
.butterfly-ring {
  position: absolute;
  top:  242px;
  left: calc(50% - 14px);
  width: 0;
  height: 0;
}

.b-orbit {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  animation: orbit 3.2s linear infinite;
}
.b1 { --r: 58px; animation-delay: 13.2s; }
.b2 { --r: 44px; animation-delay: 12.4s; }
.b3 { --r: 52px; animation-delay: 12.8s; }
.b4 { --r: 36px; animation-delay: 12.0s; }

@keyframes orbit {
  from { transform: rotate(0deg)   translateX(var(--r, 110px)) rotate(0deg);   }
  to   { transform: rotate(360deg) translateX(var(--r, 110px)) rotate(-360deg); }
}

/* Wing flap */
.butterfly {
  display: block;
  transform-origin: center;
  animation: wingFlap 0.22s 13.2s ease-in-out infinite;
}
.b2 .butterfly { animation-duration: 0.28s; animation-delay: 12.4s; }
.b3 .butterfly { animation-duration: 0.25s; animation-delay: 12.8s; }
.b4 .butterfly { animation-duration: 0.20s; animation-delay: 12.0s; }

@keyframes wingFlap {
  0%, 100% { transform: scaleX(1);    }
  50%       { transform: scaleX(0.15); }
}