/* /v11/css/animations.css
   Intro + ciclo. NO pisa las clases del motor (.hg-cycle-*, .hg-out-*).
*/

/* Seguridad: estado base para subtítulos durante toda la intro (antes de data-intro-done).
   Cubre el tramo previo a que aparezca data-intro="1" y también cuando ya está data-intro="1".
   No lleva !important para no bloquear keyframes ni el motor. */
body.intro-first #programSection:not([data-intro-done="1"]) .section-subtitle{
  visibility: visible;
  opacity: 0;
  transform: none;
  -webkit-backface-visibility: hidden;
  backface-visibility:hidden;
  will-change: opacity, transform;
}

/* Evitar cualquier fade accidental del contenedor principal al cargar assets */
body.loaded #programSection{
  transition:none !important;
  opacity:1 !important;
  transform:none !important;
}

/* Reset post-intro: SOLO si NO hay clases activas del motor */
#programSection[data-intro-done="1"] .program-card:not(.hg-cycle-prepare):not(.hg-cycle-in):not(.hg-out-prepare):not(.hg-out),
#programSection[data-intro-done="1"] .audio-controls:not(.hg-cycle-prepare):not(.hg-cycle-in):not(.hg-out-prepare):not(.hg-out),
#programSection[data-intro-done="1"] .section-subtitle:not(.hg-cycle-prepare):not(.hg-cycle-in):not(.hg-out-prepare):not(.hg-out),
#programSection[data-intro-done="1"] ~ .footer-info:not(.hg-cycle-prepare):not(.hg-cycle-in):not(.hg-out-prepare):not(.hg-out){
  opacity:1;
  visibility:visible;
  transform:none;
  animation:none;
}

/* Visibilidad por defecto fuera de intro */
body:not(.intro-first) #programSection .program-card,
body:not(.intro-first) #programSection .audio-controls,
body:not(.intro-first) #programSection .section-subtitle,
body:not(.intro-first) .footer-info{
  opacity:1;
  visibility:visible;
  transform:none;
}

/* ALERTA blindada post-intro SIN bloquear animaciones del motor */
#programSection[data-intro-done="1"] .program-card.alert-card:not(.hg-cycle-prepare):not(.hg-cycle-in):not(.hg-out-prepare):not(.hg-out){
  opacity:1;
  visibility:visible;
  transform:none;
}

/* Intro secuencial */
:root{
  --intro-delay:140ms;
  --intro-step:220ms;
  --intro-dur:420ms;
  /* mismo easing que el ciclo */
  --ease: cubic-bezier(.22,1,.36,1);
}
@media (min-width: 901px){
  :root{
    --intro-step:200ms;
    --intro-dur:380ms;
  }
}

/* Entrada tipo cinta, SIN escala: solo desde abajo + fade */
@keyframes dropIn {
  from{
    opacity:0;
    transform:translate3d(0,14px,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes fadeIn {
  from{ opacity:0; }
  to{   opacity:1; }
}

/* Antes terminaba en .7 → ahora en 1 para no saltar contra el motor/ciclo */
@keyframes fadeInToSubtle {
  from{ opacity:0; }
  to{   opacity:1; }
}

/* FIX puntual iOS/mobile: estado inicial visible pero opaco para subtítulos durante la intro */
.intro-first #programSection[data-intro="1"] .section-subtitle{
  visibility: visible;
  opacity: 0;
  transform: none;
  -webkit-backface-visibility: hidden;
  backface-visibility:hidden;
  will-change: opacity, transform;
}

/* Secuencia de entrada */
.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{
  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{
  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){
  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)));
}

/* Transiciones suaves + perf hints (no bloquea motor) */
.program-card,
.audio-controls,
.section-subtitle,
.footer-info{
  /* quitamos la transición de opacity para evitar parpadeos al reanudar/pintar */
  transition: transform .25s ease;
  will-change: transform;
}

/* Ajuste: valores finales de subtítulos después de intro/ciclo = misma opacidad que el motor (1) */
#programSection[data-intro-done="1"] .section-subtitle:not(.hg-cycle-prepare):not(.hg-cycle-in):not(.hg-out-prepare):not(.hg-out){
  opacity:1;
}
body:not(.intro-first) #programSection .section-subtitle{
  opacity:1;
}

/* 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 */
@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;
  }
}