/* Efectos de banner (HOME + módulos)
   Diseñado para funcionar con los fallbacks inline (header.php) */

@media (prefers-reduced-motion: no-preference) {
  /* Slides: modo robusto (show/hide) para evitar “pantalla vacía” */
  #main_banner.gb-fallback .viewer .item,
  #sub_banner.gb-fallback .viewer .item {
    display: none;
  }
  #main_banner.gb-fallback .viewer .item.active,
  #sub_banner.gb-fallback .viewer .item.active {
    display: block;
  }

  /* Animación de textos (título + descripción) */
  /* No “esconder” texto por defecto (si no hay fallback/gb-anim, debe verse normal) */
  #main_banner.gb-fallback .item .tit .l1 span,
  #main_banner.gb-fallback .item .tit .l2 span,
  #sub_banner.gb-fallback .item .tit .l1 span,
  #sub_banner.gb-fallback .item .tit .l2 span {
    display: inline-block;
    will-change: opacity, transform;
  }

  #main_banner.gb-fallback .item .txt,
  #sub_banner.gb-fallback .item .txt {
    display: block;
    will-change: opacity, transform;
  }

  /* Disparador: cuando el slide activo recibe .gb-anim (lo aplica el fallback JS) */
  #main_banner.gb-fallback .item.gb-anim .tit .l1 span,
  #sub_banner.gb-fallback .item.gb-anim .tit .l1 span {
    animation: gbBannerLineIn 900ms cubic-bezier(.2,.9,.2,1) both;
    animation-delay: 60ms;
  }
  #main_banner.gb-fallback .item.gb-anim .tit .l2 span,
  #sub_banner.gb-fallback .item.gb-anim .tit .l2 span {
    animation: gbBannerLineIn 900ms cubic-bezier(.2,.9,.2,1) both;
    animation-delay: 140ms;
  }
  #main_banner.gb-fallback .item.gb-anim .txt,
  #sub_banner.gb-fallback .item.gb-anim .txt {
    animation: gbBannerTextIn 850ms cubic-bezier(.2,.9,.2,1) both;
    animation-delay: 260ms;
  }

  /* Entrada del slide (suave) */
  #main_banner.gb-fallback .item.gb-anim,
  #sub_banner.gb-fallback .item.gb-anim {
    animation: gbBannerSlideIn 650ms cubic-bezier(.2,.9,.2,1) both;
  }

  /* Barra de tiempo: que se vea más “viva” */
  #main_banner .timer_bar {
    background: linear-gradient(90deg, rgba(0,255,255,.9), rgba(255,255,255,.75));
    box-shadow: 0 0 10px rgba(0,255,255,.35);
  }

  @keyframes gbBannerLineIn {
    from { opacity: 0; transform: translateY(46px); filter: blur(0.2px); }
    to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
  }

  @keyframes gbBannerTextIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes gbBannerSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Accesibilidad: si el usuario pide reducir movimiento, no animar */
@media (prefers-reduced-motion: reduce) {
  #main_banner .viewer .item,
  #sub_banner .viewer .item,
  #main_banner .item .tit .l1 span,
  #main_banner .item .tit .l2 span,
  #sub_banner .item .tit .l1 span,
  #sub_banner .item .tit .l2 span,
  #main_banner .item .txt,
  #sub_banner .item .txt {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}