/* Scion Re — animaciones de entrada, sin cambios de layout estático.
   Duración y activación ajustadas para desktop y dispositivos táctiles. */
@media (prefers-reduced-motion: no-preference) {
  /* HERO — 0.8 s */
  .scion-motion-ready .hero-title,
  .scion-motion-ready .hero-description {
    opacity: 0;
    transition: opacity .8s ease-out;
  }
  .scion-motion-ready .hero.scion-motion-visible .hero-title,
  .scion-motion-ready .hero.scion-motion-visible .hero-description { opacity: 1; }
  .scion-motion-ready .hero.scion-motion-visible .hero-description { transition-delay: .08s; }

  /* NOSOTROS — las dos piezas del SVG entran desde extremos opuestos, 1.8 s. */
  .scion-motion-ready .about-symbol { overflow: visible; }
  .scion-motion-ready .about-symbol-upper,
  .scion-motion-ready .about-symbol-lower {
    transform-box: fill-box;
    transition: transform 1.8s ease-in-out;
  }
  .scion-motion-ready .about-symbol-upper { transform: translateY(-110%); }
  .scion-motion-ready .about-symbol-lower { transform: translateY(110%); }
  .scion-motion-ready .about.scion-motion-visible .about-symbol-upper,
  .scion-motion-ready .about.scion-motion-visible .about-symbol-lower { transform: translateY(0); }

  /* VALORES — 1.1 s. Las entradas individuales esperan hasta llegar al viewport. */
  .scion-motion-ready .values-intro { opacity:0; translate:-65px 0; transition: translate 1.1s ease-out, opacity 1.1s ease-out; }
  .scion-motion-ready .values-list { opacity:0; translate:65px 0; transition: translate 1.1s ease-out, opacity 1.1s ease-out; }
  .scion-motion-ready .values.scion-motion-visible .values-intro,
  .scion-motion-ready .values.scion-motion-visible .values-list { opacity:1; translate:0 0; }
  .scion-motion-ready .value-item > * { opacity:0; transition:opacity 1.1s ease-out; }
  .scion-motion-ready .value-item.scion-motion-visible > * { opacity:1; }

  /* SOLUCIONES — 0.9 s; cada tarjeta entra al llegar a pantalla. */
  .scion-motion-ready .solution-content { opacity:0; transition:opacity .9s ease-out; }
  .scion-motion-ready .solution-card.scion-motion-visible .solution-content { opacity:1; }

  /* EXPERTISE — 1.5 s; cada ícono entra al llegar a pantalla. */
  .scion-motion-ready .expertise-card > img { opacity:0; transition:opacity 1.5s ease-in-out; }
  .scion-motion-ready .expertise-card.scion-motion-visible > img { opacity:1; }

  /* POR QUÉ SCION RE — entrada lateral de tres grupos, 1 s. */
  .scion-motion-ready .why h2,
  .scion-motion-ready .why-label { opacity:0; translate:-85px 0; transition:translate 1s ease-out, opacity 1s ease-out; }
  .scion-motion-ready .why-copy { opacity:0; translate:85px 0; transition:translate 1s ease-out, opacity 1s ease-out; }
  .scion-motion-ready .why.scion-motion-visible h2,
  .scion-motion-ready .why.scion-motion-visible .why-label,
  .scion-motion-ready .why.scion-motion-visible .why-copy { opacity:1; translate:0 0; }

  @media (max-width:580px) {
    .scion-motion-ready .values-intro { translate:-28px 0; }
    .scion-motion-ready .values-list { translate:28px 0; }
    .scion-motion-ready .why h2,.scion-motion-ready .why-label { translate:-28px 0; }
    .scion-motion-ready .why-copy { translate:28px 0; }
  }
}