/* Child space animations. Keyframes only — layout, colors and sizes
   stay in Tailwind classes in the templates. */

@keyframes childBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes childBlink {
    0%, 92%, 100% { transform: scaleY(1); }
    95%, 97% { transform: scaleY(0.1); }
}

@keyframes childHop {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-20px) rotate(-6deg); }
    60% { transform: translateY(-6px) rotate(5deg); }
}

@keyframes childPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@keyframes childShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

@keyframes childBubbleIn {
    0% { opacity: 0; transform: translateY(8px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes childFall {
    0% { transform: translateY(-40px) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(880px) rotate(520deg); opacity: 0; }
}

@keyframes childPop {
    0% { opacity: 0; transform: scale(0.4); }
    60% { opacity: 1; transform: scale(1.25); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes childSheetIn {
    0% { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Mascot */
.mascot {
    transform-origin: center bottom;
}
.mascot-idle {
    animation: childBreathe 2000ms ease-in-out infinite;
}
.mascot-idle .mascot-eyes {
    transform-origin: center;
    transform-box: fill-box;
    animation: childBlink 5000ms ease-in-out infinite;
}
.mascot-happy {
    animation: childHop 900ms ease-in-out infinite;
}
.mascot-talk .mascot-mouth-smile { display: none; }
.mascot-idle .mascot-mouth-open,
.mascot-happy .mascot-mouth-open { display: none; }

/* Speech bubble */
.child-bubble-in {
    animation: childBubbleIn 300ms ease-out both;
}

/* Nudge (pulse) — used to draw attention to "La semaine" if the child hesitates */
.child-nudge {
    animation: childPulse 1200ms ease-in-out infinite;
}

/* PIN modal */
.child-sheet-in {
    animation: childSheetIn 260ms ease-out;
}
.pin-shake {
    animation: childShake 300ms ease-in-out;
}

/* Celebration */
.child-confetti {
    position: absolute;
    top: 0;
    border-radius: 3px;
    animation: childFall 2400ms linear infinite;
}
.child-confetti-round { border-radius: 999px; }

.child-star-pop {
    display: inline-block;
    opacity: 0;
}
.child-star-pop.on {
    animation: childPop 400ms ease-out forwards;
}

/* Activity screens (step 08) */
@keyframes childCardIn {
    0% { opacity: 0; transform: perspective(900px) rotateY(-40deg); }
    100% { opacity: 1; transform: perspective(900px) rotateY(0); }
}
@keyframes childCardBounce {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-14px); }
    60% { transform: translateY(-4px); }
}
@keyframes childKaraokeGlow {
    0%, 100% { background-color: rgba(255, 210, 63, 0.35); }
    50% { background-color: rgba(255, 210, 63, 0.65); }
}

.child-card-in { animation: childCardIn 300ms ease-out both; }
.child-card-bounce { animation: childCardBounce 460ms ease-out; }
.child-karaoke-current {
    animation: childKaraokeGlow 1400ms ease-in-out infinite;
    border-radius: 16px;
    padding: 6px 12px;
}

/* Accessibility: respect the user's OS motion preference. */
@media (prefers-reduced-motion: reduce) {
    .mascot,
    .mascot-idle,
    .mascot-idle .mascot-eyes,
    .mascot-happy,
    .child-bubble-in,
    .child-nudge,
    .child-sheet-in,
    .pin-shake,
    .child-confetti,
    .child-star-pop.on,
    .child-card-in,
    .child-card-bounce,
    .child-karaoke-current {
        animation: none !important;
        transition: none !important;
    }
    .child-star-pop { opacity: 1; }
}