/* /v5/css/animations.css
   Intro secuencial y LIVIANA en desktop; igual de fluida en móvil.
   Si el SO pide “reduce”, solo lo respetamos cuando el body NO tiene .force-intro (desktop).
*/

body.loaded #programSection{ transition:none !important; opacity:1 !important; transform:none !important; }

/* Ritmo base (móvil) */
:root{
  --intro-delay:140ms;
  --intro-step:220ms;
  --intro-dur:420ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Desktop: un toque más ágil, menos desplazamiento → más suave */
@media (min-width: 901px){
  :root{
    --intro-step:200ms;
    --intro-dur:380ms;
  }
}

/* Keyframes */
@keyframes dropIn {
  from{opacity:0; transform:translateY(-10px);}
  to  {opacity:1; transform:translateY(0);}
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
/* ⬇️ finaliza en 0.7 para coincidir con .section-subtitle (sin salto tras la intro) */
@keyframes fadeInToSubtle { from{opacity:0;} to{opacity:.7;} }

/* Orden estricto */
.intro-first img.logo{
  opacity:0; animation:dropIn var(--intro-dur) var(--ease) both;
  animation-delay: calc(var(--intro-delay) + (0 * var(--intro-step)));
}
.intro-first #programSection[data-intro="1"] .section-subtitle.estason{
  opacity:0; animation:fadeInToSubtle var(--intro-dur) var(--ease) both;
  animation-delay: calc(var(--intro-delay) + (1 * var(--intro-step)));
}
.intro-first #programSection[data-intro="1"] #heroWrap > .program-card{
  opacity:0; animation:dropIn var(--intro-dur) var(--ease) both;
  animation-delay: calc(var(--intro-delay) + (2 * var(--intro-step)));
}
.intro-first #programSection[data-intro="1"] .audio-controls{
  opacity:0; animation:dropIn var(--intro-dur) var(--ease) both;
  animation-delay: calc(var(--intro-delay) + (3 * var(--intro-step)));
}
.intro-first #programSection[data-intro="1"] .section-subtitle.acontinuacion{
  opacity:0; animation:fadeInToSubtle var(--intro-dur) var(--ease) both;
  animation-delay: calc(var(--intro-delay) + (4 * var(--intro-step)));
}
.intro-first #programSection[data-intro="1"] #upcomingList > .program-card{
  opacity:0; animation:dropIn var(--intro-dur) var(--ease) both;
}
.intro-first #programSection[data-intro="1"] #upcomingList > .program-card:nth-child(1){
  animation-delay: calc(var(--intro-delay) + (5 * var(--intro-step)));
}
.intro-first #programSection[data-intro="1"] #upcomingList > .program-card:nth-child(2){
  animation-delay: calc(var(--intro-delay) + (6 * var(--intro-step)));
}
.intro-first #programSection[data-intro="1"] #upcomingList > .program-card:nth-child(3){
  animation-delay: calc(var(--intro-delay) + (7 * var(--intro-step)));
}
.intro-first #programSection[data-intro="1"] #upcomingList > .program-card:nth-child(4){
  animation-delay: calc(var(--intro-delay) + (8 * var(--intro-step)));
}
.intro-first #programSection[data-intro="1"] #upcomingList > .program-card:nth-child(5){
  /* ALERTA futura, si existe */
  animation-delay: calc(var(--intro-delay) + (9 * var(--intro-step)));
}
.intro-first #programSection[data-intro="1"] ~ .footer-info{
  opacity:0; animation:fadeIn var(--intro-dur) var(--ease) both;
  animation-delay: calc(var(--intro-delay) + (10 * var(--intro-step)));
}

/* Fuera de intro: transiciones mínimas */
.program-card, .audio-controls, .section-subtitle, .footer-info{
  transition: opacity .18s ease;
}

/* Accesibilidad: foco visible */
#programSection[data-intro-done="1"] #heroWrap > .program-card:focus-visible,
#programSection[data-intro-done="1"] #upcomingList > .program-card:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Reduce motion (si no forzamos intro) */
@media (prefers-reduced-motion: reduce){
  body:not(.force-intro) .intro-first img.logo,
  body:not(.force-intro) .intro-first #programSection[data-intro="1"] .section-subtitle.estason,
  body:not(.force-intro) .intro-first #programSection[data-intro="1"] #heroWrap > .program-card,
  body:not(.force-intro) .intro-first #programSection[data-intro="1"] .audio-controls,
  body:not(.force-intro) .intro-first #programSection[data-intro="1"] .section-subtitle.acontinuacion,
  body:not(.force-intro) .intro-first #programSection[data-intro="1"] #upcomingList > .program-card,
  body:not(.force-intro) .intro-first #programSection[data-intro="1"] ~ .footer-info{
    animation-duration:140ms !important;
    animation-delay:0ms !important;
    animation-timing-function:linear !important;
    transform:none !important;
  }
}