/* ============================================================
   MYNA TV — Animation tokens & keyframes
   v1.0 · Juin 2026
   ============================================================ */

/* ── Durées ─────────────────────────────────────────────── */
:root {
  --myna-dur-draw:     4s;      /* tracé principal — slow: 6s, fast: 2.4s */
  --myna-dur-breathe:  2.8s;   /* respiration idle */
  --myna-dur-spin:     1.6s;   /* anneau orbital */
  --myna-dur-error:    4s;     /* secoue + glow erreur */
  --myna-dur-dots:     1.1s;   /* pulse des trois points */
  --myna-dots-delay:   0.18s;  /* décalage entre chaque point */

  --myna-ease-draw:    cubic-bezier(0.42, 0, 0.58, 1);

  --myna-gold:         var(--accent);
  --myna-gold-glow:    color-mix(in srgb, var(--accent) 55%, transparent);
  --myna-red:          #D24132;
  --myna-red-glow:     rgba(210, 60, 40, 0.5);
}

/* ── 1 · TRACÉ PROGRESSIF (splash / onboarding) ─────────── */
/*
   Appliquer sur le <path> SVG :
     pathLength="1"
     stroke-dasharray="1"
     stroke-dashoffset="1"
     style="animation: birdDraw var(--myna-dur-draw) var(--myna-ease-draw) infinite;"
*/
@keyframes birdDraw {
  0%        { stroke-dashoffset: 1; opacity: 0; }
  6%        { opacity: 1; }
  50%       { stroke-dashoffset: 0; opacity: 1; }
  82%       { stroke-dashoffset: 0; opacity: 1; }
  90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ── 2 · HALO DORÉ (wrapper autour du SVG) ───────────────── */
/*
   Appliquer sur le <div> qui entoure le SVG :
     style="animation: birdGlow var(--myna-dur-draw) ease-in-out infinite;"
*/
@keyframes birdGlow {
  0%, 44%, 90%, 100% { filter: drop-shadow(0 0 0px transparent); }
  66%                { filter: drop-shadow(0 0 24px color-mix(in srgb, var(--accent) 55%, transparent)); }
}

/* ── 3 · TEXTE SLIDE-IN (logotype sous l'oiseau) ────────── */
/*
   style="animation: textIn var(--myna-dur-draw) ease-in-out infinite;"
*/
@keyframes textIn {
  0%, 44%  { opacity: 0; transform: translateY(10px); }
  58%, 78% { opacity: 1; transform: translateY(0); }
  88%, 100%{ opacity: 0; transform: translateY(-5px); }
}

/* ── 4 · RESPIRATION IDLE ────────────────────────────────── */
/*
   État chargé / en attente. Appliquer sur le wrapper SVG :
     style="animation: breathe var(--myna-dur-breathe) ease-in-out infinite;"
*/
@keyframes breathe {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0  2px color-mix(in srgb, var(--accent) 10%, transparent)); }
  50%      { transform: scale(1.07); filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 52%, transparent)); }
}

/* ── 5 · ANNEAU ORBITAL (spinner compact) ────────────────── */
/*
   Appliquer sur le <svg> de l'anneau :
     style="animation: spinRing var(--myna-dur-spin) linear infinite;"
   Réglage cercle : pathLength="1" stroke-dasharray="0.28 0.72"
*/
@keyframes spinRing {
  to { transform: rotate(360deg); }
}

/* ── 6 · DOT PULSE (trois points bas d'écran) ────────────── */
/*
   Chaque point reçoit son propre delay :
     dot-1 : animation-delay: 0s
     dot-2 : animation-delay: var(--myna-dots-delay)        → 0.18s
     dot-3 : animation-delay: calc(2 * var(--myna-dots-delay)) → 0.36s
*/
@keyframes dotPulse {
  0%, 100% { opacity: 0.15; transform: scale(0.65); }
  50%      { opacity: 1;    transform: scale(1); }
}

/* ── 7 · SECOUSSE ERREUR (oiseau) ────────────────────────── */
/*
   Appliquer sur le <div> qui entoure le SVG :
     style="animation: birdShake var(--myna-dur-error) ease-in-out infinite;"
*/
@keyframes birdShake {
  0%, 26%, 100% { transform: translateX(0) rotate(0deg); }
  31%  { transform: translateX(-6px) rotate(-2.8deg); }
  36%  { transform: translateX( 6px) rotate( 2.4deg); }
  41%  { transform: translateX(-4px) rotate(-1.8deg); }
  46%  { transform: translateX( 5px) rotate( 1.6deg); }
  51%  { transform: translateX(-3px) rotate(-1deg);   }
  56%  { transform: translateX( 3px) rotate( 0.8deg); }
  61%  { transform: translateX(-1px) rotate(-0.3deg); }
  66%  { transform: translateX(0) rotate(0deg);       }
}

/* ── 8 · GLOW ERREUR (rouge, même wrapper) ───────────────── */
/*
   Appliquer sur le parent du wrapper birdShake :
     style="animation: errorGlow var(--myna-dur-error) ease-in-out infinite;"
*/
@keyframes errorGlow {
  0%, 24%, 68%, 100% { filter: drop-shadow(0 0  0px rgba(210, 60, 40, 0)); }
  40%, 55%           { filter: drop-shadow(0 0 20px rgba(210, 60, 40, 0.5)); }
}

/* ── 9 · TEXTE ERREUR ────────────────────────────────────── */
/*
   style="animation: errorTextIn var(--myna-dur-error) ease-in-out infinite;"
*/
@keyframes errorTextIn {
  0%, 28%  { opacity: 0; transform: translateY(5px); }
  40%, 65% { opacity: 1; transform: translateY(0); }
  78%, 100%{ opacity: 0; transform: translateY(0); }
}

/* ── 10 · CÉLÉBRATIONS DE VALIDATION (épisode / saison / terminé) ──────────── */
/* Éléments transitoires posés/animés par js/celebrate.js (WAAPI). Le JS gère
   lui-même prefers-reduced-motion (il n'en crée aucun). Ici : style statique. */
#celebrate-layer {
  position: fixed;
  inset: 0;
  z-index: 320;            /* au-dessus du contenu et des toasts, éphémère */
  pointer-events: none;
  overflow: hidden;
}

.celebrate-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--accent);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.celebrate-mote {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--myna-gold-glow);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

/* Balayage doré qui descend la liste d'épisodes (saison vue). */
.celebrate-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent
  );
  will-change: transform, opacity;
}

/* ── Accessibilité ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [style*="animation"] { animation: none !important; }
  .loading-spinner::after { animation: none !important; }
}