/* =========================================================
   Homepage only — "live class" motion on the hero (2026-10-23, Option A).
   The photo stays a photo; the two speech bubbles act out a short conversation:
     1. teacher's bubble pops in, "typing…" dots, then the 3 lines appear and count up
     2. boy's bubble pops in, a voice wave, then the score ring fills 0 → 86
     3. both rest, fade out, and the scene plays again
   Plus a very slow zoom on the photo so the scene never looks frozen.
   Everything here only applies when mua-hero-motion.js adds .mu-motion to the hero.
   To switch it off: remove the <link> and <script> for mua-hero-motion in index.html.
   ========================================================= */

/* Slow "breathing" zoom on the photo (bubbles stay on target: the zoom centre is the photo focus point) */
.mu-motion .mu-hero__photo { overflow: hidden; }   /* keep the zoomed photo inside its box */
.mu-motion .mu-hero__photo > img { transform-origin: 62% 30%; animation: mu-kenburns 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes mu-kenburns { from { transform: scale(1); } to { transform: scale(1.04); } }

/* Bubbles: hidden until their turn, then pop from the tail side */
.mu-motion .mu-hero__scene .mu-float { opacity: 0; transition: opacity .45s ease, scale .55s cubic-bezier(.2, 1.4, .4, 1); scale: .82; }
.mu-motion .mu-hero__scene .mu-float--summary { transform-origin: 100% 26%; }   /* tail on the right */
.mu-motion .mu-hero__scene .mu-float--score { transform-origin: 26px 0; }         /* tail on top-left */
.mu-motion .mu-hero__scene .mu-float.is-on { opacity: 1; scale: 1; }
.mu-motion .mu-hero__scene .mu-float.is-out { opacity: 0; scale: .96; transition-duration: .6s, .6s; }

/* Teacher's bubble: lines hidden while she is "typing" */
.mu-motion .mu-float--summary .mu-float__row { opacity: 0; translate: 0 6px; transition: opacity .35s ease, translate .35s ease; }
.mu-motion .mu-float--summary .mu-float__row.is-on { opacity: 1; translate: 0 0; }
.mu-motion .mu-float--summary .mu-float__row b { font-variant-numeric: tabular-nums; }

.mu-typing { position: absolute; left: 15px; top: 46px; display: flex; gap: 5px; padding: 9px 12px; border-radius: 14px; background: var(--soft, #F3F5F9); opacity: 0; transition: opacity .25s; pointer-events: none; }
.mu-typing.is-on { opacity: 1; }
.mu-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--navy, #1B2F5E); opacity: .35; animation: mu-typing 1s ease-in-out infinite; }
.mu-typing i:nth-child(2) { animation-delay: .16s; }
.mu-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes mu-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* Boy's bubble: voice wave first, then the score ring */
.mu-motion .mu-float--score svg { position: relative; transition: opacity .3s; }
.mu-wave { position: absolute; left: 13px; top: 50%; width: 50px; height: 50px; margin-top: -25px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 50%; background: var(--gold-wash, #FBF6EA); opacity: 0; transition: opacity .25s; pointer-events: none; }
.mu-wave.is-on { opacity: 1; }
.mu-wave i { width: 4px; height: 8px; border-radius: 2px; background: var(--gold, #D8B051); animation: mu-wave .9s ease-in-out infinite; }
.mu-wave i:nth-child(2) { animation-delay: .12s; }
.mu-wave i:nth-child(3) { animation-delay: .24s; }
.mu-wave i:nth-child(4) { animation-delay: .36s; }
.mu-wave i:nth-child(5) { animation-delay: .48s; }
@keyframes mu-wave { 0%, 100% { height: 6px; } 50% { height: 24px; } }
.mu-motion .mu-float--score.is-listening svg { opacity: 0; }

/* Night mode */
html[data-theme="dark"] .mu-typing { background: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .mu-typing i { background: var(--dk-link, #D3DEFF); }
html[data-theme="dark"] .mu-wave { background: rgba(216, 176, 81, .14); }

/* Visitors who turn off motion in their settings see the bubbles as before (still) */
@media (prefers-reduced-motion: reduce) {
  .mu-motion .mu-hero__photo > img { animation: none; }
  .mu-motion .mu-hero__scene .mu-float, .mu-motion .mu-float--summary .mu-float__row { opacity: 1; scale: 1; translate: none; }
  .mu-typing, .mu-wave { display: none; }
}