/* Universal Read Aloud — controls + speaking-state animation (additive). Paired with public/assets/read-aloud.js. No dependency on lesson-player.css; safe to include on any opted-in page (). */ .ra-controls { display: inline-flex; gap: 0.4rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; } .ra-btn { font: inherit; font-weight: 700; font-size: 0.85rem; line-height: 1; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.8rem; min-height: 40px; /* comfortable touch target */ border: 1.5px solid currentColor; border-radius: 999px; background: #fff; color: #123c69; cursor: pointer; } .ra-btn:hover { background: #eef3fb; } /* Visible keyboard focus for accessibility. */ .ra-btn:focus-visible { outline: 3px solid #f4a259; outline-offset: 2px; } .ra-read[aria-pressed="true"] { background: #123c69; color: #fff; } /* Loading / generating state. */ .ra-btn[aria-busy="true"] { cursor: progress; opacity: 0.8; } .ra-stop { color: #9a3b3b; } /* ── Speaking-state animation ──────────────────────────────────────────────── Tier A–C: if the figure already has a mouth / talking-sprite / mouth-open animation (e.g. the lesson player's `.is-speaking` rules), that keeps working. Tier D (here): a reduced-motion-safe fallback so a speaking figure is always visibly active. This is NOT phoneme-driven lip sync. */ .ra-speaking { /* Always-on subtle glow (no motion) — safe under reduced-motion. */ filter: drop-shadow(0 0 6px rgba(244, 162, 89, 0.65)); transition: filter 0.2s ease; } @media (prefers-reduced-motion: no-preference) { .ra-speaking { animation: ra-speak-bounce 1.1s ease-in-out infinite; transform-origin: bottom center; } /* Paused: hold the animation + dim the glow so "paused" reads visually. */ .ra-speaking.ra-paused { animation-play-state: paused; filter: drop-shadow(0 0 3px rgba(244, 162, 89, 0.4)); } } /* Paused state under reduced motion: just soften the glow. */ .ra-speaking.ra-paused { filter: drop-shadow(0 0 3px rgba(244, 162, 89, 0.4)); } @keyframes ra-speak-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.015); } }