/* ===== HERO: título (arranca cuando JS agrega run-title) ===== */
/* Estado base: fuera y SIN animación (para que no se ejecute antes) */
#hero .hero-line{
  opacity: 0;
  transform: translateX(-40px);
  animation: none !important;
}

/* Cuando JS agrega run-title: ahora sí corre la animación */
#hero.run-title .hero-line{
  animation: heroLineIn 1.6s cubic-bezier(.22,.9,.2,1) forwards !important;

}

/* Keyframe: entrada por izquierda */
@keyframes heroLineIn{
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== Texto + botones (aparecen al final) ===== */
#hero .hero-surround{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s ease, transform .75s ease;
}

#hero.show-surround .hero-surround{
  opacity: 1;
  transform: translateY(0);
}

/* ===== Botones con stagger ===== */
#hero .hero-cta{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .65s ease, transform .65s ease;
}

#hero.show-surround .hero-cta{
  opacity: 1;
  transform: translateY(0);
}

#hero.show-surround .hero-cta:nth-of-type(1){ transition-delay: .18s; }
#hero.show-surround .hero-cta:nth-of-type(2){ transition-delay: .30s; }

/* ===== Texto rotativo (fade + derecha + blur) ===== */
#hero-rotating-text{
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity .8s ease, transform .8s ease, filter .8s ease;
  will-change: opacity, transform, filter;
}

#hero-rotating-text.is-fading{
  opacity: 0;
  transform: translateX(40px);
  filter: blur(6px);
}

/* ===== Accesibilidad ===== */
@media (prefers-reduced-motion: reduce){
  #hero .hero-line{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #hero .hero-surround,
  #hero .hero-cta,
  #hero-rotating-text{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}