/* =====================================================================
   THE BIRTHDAY RITUAL — animations.css
   ===================================================================== */
@keyframes fogdrift { from { transform: translate3d(-4%, 2%, 0) scale(1); } to { transform: translate3d(5%, -3%, 0) scale(1.15); } }
@keyframes btnpulse { 0%, 100% { filter: drop-shadow(0 0 12px rgba(255,23,23,.5)); } 50% { filter: drop-shadow(0 0 34px rgba(255,23,23,1)); } }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 14px; } }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }
@keyframes flame { from { transform: scale(1, 1) skewX(-3deg); } to { transform: scale(.92, 1.14) skewX(4deg); } }
@keyframes smoke { from { transform: translateY(0); opacity: .8; } to { transform: translateY(-60px); opacity: 0; } }
@keyframes chaostext { 0% { transform: translate(0,0) skewX(0); } 50% { transform: translate(2px,-1px) skewX(-2deg); } 100% { transform: translate(-2px,1px) skewX(2deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinr { to { transform: rotate(-360deg); } }
@keyframes halo { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

/* sceau de secours (sans WebGL) */
#seal-fallback canvas:nth-child(1) { animation: spin 90s linear infinite; }
#seal-fallback canvas:nth-child(2) { animation: spinr 60s linear infinite; }
#seal-fallback canvas:nth-child(3) { animation: spin 40s linear infinite; }
#seal-fallback canvas:nth-child(4) { animation: halo 2.4s ease-in-out infinite; }
#seal-fallback.fast canvas { animation-duration: 4s !important; }

/* tremblement global (vibration de la scène) */
body.shake #main, body.shake #gl { animation: shake .5s linear both; }
@keyframes shake {
  0% { transform: translate(0,0); } 10% { transform: translate(-6px, 3px); } 20% { transform: translate(5px,-4px); } 30% { transform: translate(-4px,-2px); }
  40% { transform: translate(4px,3px); } 55% { transform: translate(-3px,1px); } 70% { transform: translate(2px,-2px); } 100% { transform: translate(0,0); }
}

/* glitch VHS ponctuel appliqué à un élément texte */
.glitching { animation: vhs .22s steps(3) 1; }
@keyframes vhs {
  0% { transform: translate(0,0); text-shadow: 3px 0 rgba(255,23,23,.9), -3px 0 rgba(232,225,214,.6); clip-path: inset(0 0 0 0); }
  33% { transform: translate(-6px,0) skewX(-6deg); clip-path: inset(18% 0 52% 0); }
  66% { transform: translate(5px,0) skewX(4deg); text-shadow: -4px 0 rgba(255,23,23,.9), 4px 0 rgba(232,225,214,.6); clip-path: inset(55% 0 12% 0); }
  100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
}

/* Respect de prefers-reduced-motion : aucune secousse, aucun glitch, aucune pulsation agressive */
@media (prefers-reduced-motion: reduce) {
  .grain, .btn-main, #cake-svg .fl, .bg-fog, #seal-fallback canvas { animation: none !important; }
  body.shake #main, body.shake #gl { animation: none !important; }
  body.chaos .hfb, body.chaos .final-line, body.chaos .long-live { animation: none !important; }
  .glitching { animation: none !important; }
}