/* ═══════════════════════════════════════════════════════════════
   KIDS KINGDOM — living caption overlay (بند 305, 2026-09-03)
   v2 rewrite per Yousef's direct feedback: v1 (a single fixed oval
   "pill" badge, linear fade) read as a flat, corporate flash-card --
   the opposite of the warm, hand-made photo it sat on. This version
   drops the pill/background shape entirely: nine short first-person
   phrases appear as hand-written marker text, each anchored near a
   different part of the scene (the cross, the heart, the hands),
   in a different warm color, at a gentle tilt, popping in with a
   soft bounce instead of a rigid fade -- so the words feel drawn
   INTO the moment, not stuck on top of it.

   Scoped strictly to .cm-hero--kids -- can never affect any other
   room's hero. Pure CSS keyframes, zero JS: nothing here can throw a
   runtime error or leak a timer. Real HTML/CSS text, never baked
   into the image pixels, per the site's standing rule.
   ═══════════════════════════════════════════════════════════════ */

.cm-hero--kids .cm-kids-caption {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.cm-hero--kids .cm-kids-caption__phrase {
  --kc-rot: 0deg;
  --kc-color: #F26773;
  position: absolute;
  transform: translate(-50%, -50%) scale(.4) rotate(var(--kc-rot));
  transform-origin: center;
  margin: 0;
  white-space: nowrap;
  font-family: "Permanent Marker", "Comic Sans MS", cursive;
  font-size: clamp(1.05rem, 2.3vw, 1.55rem);
  line-height: 1.15;
  color: var(--kc-color);
  text-shadow:
    0 0 3px rgba(253, 251, 245, .95),
    0 0 12px rgba(253, 251, 245, .75),
    0 0 26px rgba(253, 251, 245, .4),
    0 4px 10px rgba(60, 24, 12, .32);
  opacity: 0;
  animation: cmKidsPop 36s infinite;
}

/* Nine anchors, each tied loosely to a part of the scene (the hanging
   cross upper-left, the raised heart center-right, the hands below)
   with its own tilt and warm-palette color -- no two look alike, so
   nothing repeats in the same spot the same way twice per cycle. */
.cm-hero--kids .cm-kids-caption__phrase:nth-child(1) {
  left: 17%; top: 24%; --kc-rot: -5deg; --kc-color: #F26773;
  animation-delay: 0s;
}
.cm-hero--kids .cm-kids-caption__phrase:nth-child(2) {
  left: 68%; top: 15%; --kc-rot: 3deg; --kc-color: #C98A2E;
  animation-delay: 4s;
}
.cm-hero--kids .cm-kids-caption__phrase:nth-child(3) {
  left: 78%; top: 36%; --kc-rot: -3deg; --kc-color: #4C9BD6;
  animation-delay: 8s;
}
.cm-hero--kids .cm-kids-caption__phrase:nth-child(4) {
  left: 40%; top: 45%; --kc-rot: 4deg; --kc-color: #F26773;
  animation-delay: 12s;
}
.cm-hero--kids .cm-kids-caption__phrase:nth-child(5) {
  left: 23%; top: 39%; --kc-rot: -2deg; --kc-color: #5FA875;
  animation-delay: 16s;
}
.cm-hero--kids .cm-kids-caption__phrase:nth-child(6) {
  left: 59%; top: 27%; --kc-rot: 2deg; --kc-color: #C98A2E;
  animation-delay: 20s;
}
.cm-hero--kids .cm-kids-caption__phrase:nth-child(7) {
  left: 15%; top: 20%; --kc-rot: 5deg; --kc-color: #4C9BD6;
  animation-delay: 24s;
}
.cm-hero--kids .cm-kids-caption__phrase:nth-child(8) {
  left: 70%; top: 45%; --kc-rot: -4deg; --kc-color: #F26773;
  animation-delay: 28s;
}
.cm-hero--kids .cm-kids-caption__phrase:nth-child(9) {
  left: 33%; top: 19%; --kc-rot: 3deg; --kc-color: #C98A2E;
  animation-delay: 32s;
}

/* Shared timeline: 36s total / 9 slots = 4s each. Within its own 4s
   slot (0%-11.1% of the 36s duration, from the moment its delay ends)
   a phrase pops in with a small overshoot bounce, holds, then eases
   back out -- never a flat linear fade. */
@keyframes cmKidsPop {
  0%    { opacity: 0; transform: translate(-50%, -50%) scale(.4)  rotate(var(--kc-rot)) translateY(10px); }
  2.2%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(var(--kc-rot)) translateY(-3px); }
  3.6%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(var(--kc-rot)) translateY(0); }
  8.5%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(var(--kc-rot)) translateY(0); }
  10.5% { opacity: 0; transform: translate(-50%, -50%) scale(.82) rotate(var(--kc-rot)) translateY(-8px); }
  100%  { opacity: 0; transform: translate(-50%, -50%) scale(.82) rotate(var(--kc-rot)); }
}

/* Accessibility / battery: show the first phrase only, static, no motion. */
@media (prefers-reduced-motion: reduce) {
  .cm-hero--kids .cm-kids-caption__phrase { animation: none; opacity: 0; }
  .cm-hero--kids .cm-kids-caption__phrase:nth-child(1) {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--kc-rot));
  }
}

@media (max-width: 640px) {
  .cm-hero--kids .cm-kids-caption__phrase {
    font-size: clamp(.85rem, 4.2vw, 1.15rem);
  }
}