/* ========================================
   MY HAPPY LITTLE SCHOOL - motion.css
   Alexia aime les animations : ballons à l'ouverture, blobs qui respirent,
   titre qui scintille, montgolfières qui dérivent, étoiles, apparitions.
   ======================================== */

/* ===== Ballons à l'ouverture (portés du site en ligne) ===== */
.balloons-container { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; overflow: hidden; }
.balloon { position: absolute; bottom: -150px; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateX(-50%); animation: balloonWobble var(--wobble-speed, 1.5s) ease-in-out infinite; }
.balloon--floating { opacity: 1; animation: balloonFloat var(--float-duration, 5000ms) ease-out forwards, balloonWobble var(--wobble-speed, 1.5s) ease-in-out infinite; }
.balloon__body { position: relative; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; box-shadow: inset -10px -10px 30px rgba(0,0,0,0.1), inset 5px 5px 20px rgba(255,255,255,0.4), 0 10px 30px rgba(0,0,0,0.15); transform-origin: center bottom; }
.balloon__shine { position: absolute; top: 15%; left: 20%; width: 30%; height: 30%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); border-radius: 50%; transform: rotate(-30deg); }
.balloon__knot { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid; margin-top: -1px; }
.balloon__string { width: 2px; height: 80px; background: linear-gradient(to bottom, rgba(150,150,150,0.8) 0%, rgba(150,150,150,0.4) 50%, rgba(150,150,150,0.1) 100%); border-radius: 2px; transform-origin: top center; animation: stringWave 2s ease-in-out infinite; }
/* Montée en `translate` (et non `bottom`) : même trajet, sans décalage de mise en page compté par Lighthouse */
@keyframes balloonFloat { 0% { translate: 0 0; opacity: 0; } 5% { opacity: 1; } 85% { opacity: 1; } 100% { translate: 0 calc(-120vh - 150px); opacity: 0; } }
@keyframes balloonWobble { 0%, 100% { transform: translateX(-50%) rotate(-3deg) translateX(calc(var(--wobble-amount, 30px) * -1)); } 50% { transform: translateX(-50%) rotate(3deg) translateX(var(--wobble-amount, 30px)); } }
@keyframes stringWave { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* ===== Blobs qui respirent ===== */
.blob { animation: morphFloat 26s ease-in-out infinite; will-change: transform, border-radius; }
.blob--2 { animation-delay: -8s; }
.blob--3 { animation-delay: -13s; }
.blob--4 { animation-delay: -5s; }
@keyframes morphFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; }
    25% { transform: translate(30px, -40px) rotate(5deg) scale(1.05); border-radius: 50% 60% 40% 50% / 60% 50% 50% 40%; }
    50% { transform: translate(-20px, -20px) rotate(-3deg) scale(0.98); border-radius: 40% 50% 60% 50% / 50% 40% 60% 50%; }
    75% { transform: translate(15px, -50px) rotate(8deg) scale(1.02); border-radius: 55% 45% 45% 55% / 45% 55% 45% 55%; }
}

/* ===== Titre qui scintille ===== */
.shimmer { animation: shimmer 5s linear infinite; }
@keyframes shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

/* ===== Étoiles ===== */
.sparkle { animation: twinkle 2.8s ease-in-out infinite; }
.sparkle--2 { animation-delay: -0.7s; animation-duration: 3.4s; }
.sparkle--3 { animation-delay: -1.4s; }
.sparkle--4 { animation-delay: -2.1s; animation-duration: 3.8s; }
.sparkle--5 { animation-delay: -0.4s; animation-duration: 2.4s; }
@keyframes twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.25) rotate(25deg); } }

/* ===== Nuages, montgolfières, photo qui respire ===== */
.cloud { animation: cloudDrift 60s linear infinite alternate; }
.cloud--2 { animation-duration: 78s; animation-delay: -30s; }
@keyframes cloudDrift { from { transform: translateX(-30px); } to { transform: translateX(40px); } }

.mg { animation: drift var(--drift-duration, 30s) ease-in-out infinite alternate; will-change: transform; }
.mg--1 { --drift-duration: 30s; }
.mg--2 { --drift-duration: 38s; animation-delay: -12s; }
.mg--3 { --drift-duration: 26s; animation-delay: -6s; }
@media (min-width: 900px) { .mg { filter: drop-shadow(0 18px 24px rgba(107, 91, 149, 0.18)); } }
@keyframes drift { 0% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(14px, -26px) rotate(3deg); } 100% { transform: translate(-10px, -8px) rotate(-1.5deg); } }

.hero__blob, .blob-photo { animation: blobBreathe 14s ease-in-out infinite; }
.blob-photo--alt { animation-delay: -7s; }
@keyframes blobBreathe {
    0%, 100% { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; }
    33% { border-radius: 50% 60% 40% 55% / 60% 45% 55% 40%; }
    66% { border-radius: 45% 55% 60% 40% / 45% 55% 45% 60%; }
}
.hero__logo { animation: floatY 5s ease-in-out infinite; }
.hero__note { animation: floatNote 6s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floatNote { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-8px); } }

/* ===== Emojis qui dansent ===== */
.badge__emoji, .dream-card__emoji, .age__emoji, .step__emoji, .extra__emoji, .pro__emoji, .press-card__emoji, .place__emoji { animation: gentleBounce 3s ease-in-out infinite; }
.badge:nth-child(2) .badge__emoji, .dream-card:nth-child(2) .dream-card__emoji, .age:nth-child(2) .age__emoji, .step:nth-child(2) .step__emoji, .pro__card:nth-child(2) .pro__emoji { animation-delay: -0.6s; }
.badge:nth-child(3) .badge__emoji, .dream-card:nth-child(3) .dream-card__emoji, .age:nth-child(3) .age__emoji, .step:nth-child(3) .step__emoji, .pro__card:nth-child(3) .pro__emoji { animation-delay: -1.2s; }
.age:nth-child(4) .age__emoji, .step:nth-child(4) .step__emoji { animation-delay: -1.8s; }
.age:nth-child(5) .age__emoji, .step:nth-child(5) .step__emoji { animation-delay: -2.4s; }
@keyframes gentleBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ===== Entrée du hero ===== */
.hero__copy > * { animation: riseIn 0.9s var(--ease) both; }
.hero__copy > :nth-child(2) { animation-delay: 0.1s; }
.hero__copy > :nth-child(3) { animation-delay: 0.2s; }
.hero__copy > :nth-child(4) { animation-delay: 0.3s; }
.hero__copy > :nth-child(5) { animation-delay: 0.4s; }
.hero__art { animation: popIn 1.1s var(--bounce) both; animation-delay: 0.25s; }
.press-strip { animation: riseIn 0.9s var(--ease) both; animation-delay: 0.6s; }
.press-tile { animation: popIn 0.8s var(--bounce) both, tileFloat 4.2s ease-in-out infinite; animation-delay: 0.75s, 1.55s; }
.press-strip__list li:nth-child(2) .press-tile { animation-delay: 0.85s, 1.05s; }
.press-strip__list li:nth-child(3) .press-tile { animation-delay: 0.95s, 0.55s; }
.press-strip__list li:nth-child(4) .press-tile { animation-delay: 1.05s, 0.05s; }
.press-tile:hover { animation-play-state: paused; }
@keyframes tileFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.press-strip::after { animation: pressShine 7s var(--ease) infinite; animation-delay: 1.8s; }
@keyframes pressShine { 0% { transform: translateX(-140%) skewX(-12deg); } 22% { transform: translateX(420%) skewX(-12deg); } 100% { transform: translateX(420%) skewX(-12deg); } }
.press-strip__spark { animation: twinkle 2.6s ease-in-out infinite; }
.team__emoji { animation: gentleBounce 3s ease-in-out infinite; }
.team__pill:nth-child(2) .team__emoji { animation-delay: -0.6s; }
.team__pill:nth-child(3) .team__emoji { animation-delay: -1.2s; }
.team__pill:nth-child(4) .team__emoji { animation-delay: -1.8s; }
.team__pill:nth-child(5) .team__emoji { animation-delay: -2.4s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: none; } }

/* ===== Apparitions au scroll ===== */
.reveal { opacity: 0; transform: translateY(24px) scale(0.97); transition: opacity 0.8s var(--ease), transform 0.8s var(--bounce); }
.reveal.is-visible { opacity: 1; transform: none; }
.clubs__cards .reveal:nth-child(2), .snaps .reveal:nth-child(2), .places .reveal:nth-child(2), .ages .reveal:nth-child(2), .press .reveal:nth-child(2), .partners .reveal:nth-child(2), .pro .reveal:nth-child(2), .values .reveal:nth-child(2), .steps .reveal:nth-child(2) { transition-delay: 0.1s; }
.clubs__cards .reveal:nth-child(3), .snaps .reveal:nth-child(3), .places .reveal:nth-child(3), .ages .reveal:nth-child(3), .press .reveal:nth-child(3), .partners .reveal:nth-child(3), .pro .reveal:nth-child(3), .values .reveal:nth-child(3), .steps .reveal:nth-child(3) { transition-delay: 0.2s; }
.places .reveal:nth-child(4), .ages .reveal:nth-child(4), .press .reveal:nth-child(4), .partners .reveal:nth-child(4), .steps .reveal:nth-child(4) { transition-delay: 0.3s; }
.places .reveal:nth-child(5), .ages .reveal:nth-child(5), .partners .reveal:nth-child(5), .steps .reveal:nth-child(5) { transition-delay: 0.4s; }
.places .reveal:nth-child(6) { transition-delay: 0.5s; }
.places .reveal:nth-child(7) { transition-delay: 0.6s; }
.places .reveal:nth-child(8) { transition-delay: 0.7s; }

@media print {
    .reveal { opacity: 1; transform: none; }
    .balloons-container, .ctabar, .dream { display: none; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .balloons-container { display: none; }
    .blob, .shimmer, .sparkle, .cloud, .mg, .hero__blob, .blob-photo, .hero__logo, .hero__note, .badge__emoji, .dream-card__emoji, .age__emoji, .step__emoji, .extra__emoji, .pro__emoji, .press-card__emoji, .place__emoji, .hero__copy > *, .hero__art, .press-strip, .press-strip::after, .press-tile, .press-strip__spark, .team__emoji { animation: none !important; }
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}