/* ==========================================================================
   VortexNeural — Animaciones
   Scroll-reveal genérico y animación del símbolo en el hero.
   Todo respeta prefers-reduced-motion (además del bloqueo global en base.css).
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Scroll-reveal genérico (data-reveal, controlado por scroll-reveal.js)   */
/* ---------------------------------------------------------------------- */

html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

html.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------- */
/* Símbolo del hero (index.html) — logo real dividido en dos mitades      */
/* Estado base: totalmente visible y estático (seguro sin JS y en         */
/* prefers-reduced-motion). La animación de entrada solo se activa si el  */
/* usuario no ha pedido reducir el movimiento.                            */
/* ---------------------------------------------------------------------- */

.hero-symbol__half--left,
.hero-symbol__half--right {
  opacity: 1;
}

.hero-symbol__sheen {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-symbol__half--left {
    opacity: 0;
    transform: translateX(-18px);
    filter: blur(6px);
    animation: symbol-in-left 900ms var(--ease-out) forwards;
  }

  .hero-symbol__half--right {
    opacity: 0;
    transform: translateX(18px);
    filter: blur(6px);
    animation: symbol-in-right 900ms var(--ease-out) forwards;
    animation-delay: 260ms;
  }

  .hero-symbol {
    animation: symbol-float 6s ease-in-out infinite;
    animation-delay: 1600ms;
  }

  .hero-symbol__sheen {
    animation: sheen-sweep 1600ms var(--ease-in-out) forwards;
    animation-delay: 1000ms;
  }

  /* Destello adicional: se repite cada vez que se pasa el cursor por el
     recuadro del hero, no solo una vez al cargar. */
  .hero-visual:hover .hero-symbol__sheen {
    animation: sheen-sweep 1100ms var(--ease-out);
  }
}

@keyframes symbol-in-left {
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes symbol-in-right {
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes symbol-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes sheen-sweep {
  0% { opacity: 0; background-position: -60% -60%; }
  18% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; background-position: 60% 60%; }
}

/* ---------------------------------------------------------------------- */
/* Visual del hero (composición de flujo de datos / documentos)           */
/* ---------------------------------------------------------------------- */

html.js-reveal .hero-visual .flow-dot {
  opacity: 0;
  animation: chip-in 500ms var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}

html:not(.js-reveal) .hero-visual .flow-dot {
  opacity: 1;
}

@keyframes chip-in {
  from { opacity: 0; transform: scale(0.9) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}