/* ==========================================================================
   YPF RUTA — Rediseño 2026 · Animaciones de entrada

   Los elementos aparecen cuando el scroll los alcanza. Se usa con atributos,
   sin escribir CSS por sección:

     <div data-reveal>                 sube y aparece (por defecto)
     <div data-reveal="fade">          sólo opacidad
     <div data-reveal="left">          entra desde la izquierda
     <div data-reveal="right">         entra desde la derecha
     <div data-reveal="down">          baja y aparece
     <div data-reveal="scale">         crece apenas y aparece

     <div data-reveal data-reveal-delay="150">   arranca 150ms después
     <ul data-reveal-group>...</ul>              escalona a sus hijos solo

   Por qué así y no una librería: sólo se animan `opacity` y `transform`, que
   el navegador resuelve en el compositor sin recalcular layout ni repintar.
   Y quien decide cuándo disparar es IntersectionObserver, no un listener de
   scroll. Ver js/newdesign/reveal.js.

   IMPORTANTE: el estado oculto sólo se aplica bajo .nd-reveal-ready, clase
   que pone el JS apenas arranca. Si el JS falla o no llega a cargar, el
   contenido queda visible igual. Nunca se esconde algo que no se pueda
   volver a mostrar.
   ========================================================================== */

.nd-reveal-ready [data-reveal] {
  opacity: 0;
  transition-duration: 0.7s;
  transition-property: opacity, transform;
  /* Arranca rápido y frena suave: se siente natural, no mecánico */
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* Desplazamientos cortos a propósito: la idea es que se note el movimiento,
   no que el elemento viaje por la pantalla. */
.nd-reveal-ready [data-reveal=""],
.nd-reveal-ready [data-reveal="up"] {
  transform: translate3d(0, 24px, 0);
}

.nd-reveal-ready [data-reveal="down"] {
  transform: translate3d(0, -24px, 0);
}

.nd-reveal-ready [data-reveal="left"] {
  transform: translate3d(-32px, 0, 0);
}

.nd-reveal-ready [data-reveal="right"] {
  transform: translate3d(32px, 0, 0);
}

.nd-reveal-ready [data-reveal="scale"] {
  transform: scale(0.96);
}

/* "fade" no lleva transform: sólo aparece */

/* Estado final: siempre el mismo, sin importar de dónde venga */
.nd-reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Terminada la animación se suelta el will-change: mantenerlo activo
   consume memoria de GPU al pedo. */
.nd-reveal-ready [data-reveal].is-done {
  will-change: auto;
}

/* --------------------------------------------------------------------------
   Fondos de sección

     <section data-reveal-bg="left">    el fondo entra desplazándose a la izquierda
     <section data-reveal-bg="right">   idem hacia la derecha
     <section data-reveal-bg="fade">    sólo aparece, sin moverse

   El fondo no puede animarse estando puesto sobre la sección: se llevaría
   puesto el contenido. Por eso cada sección lo pasa a su pseudo-elemento
   (ver el CSS de cada una) y acá se anima ese pseudo.

   Es más lento y más corto que la entrada de los textos —1,2s y 40px— para
   que se lea como un movimiento de fondo y no compita con lo que se está
   leyendo.

   Durante el movimiento el fondo va apenas escalado (6%): eso tapa el hueco
   que dejaría el desplazamiento, sin tener que agrandar la caja —lo que
   cambiaría el encuadre—. Al terminar vuelve a `transform: none`, o sea
   exactamente al encuadre de hoy.
   -------------------------------------------------------------------------- */

.nd-reveal-ready [data-reveal-bg]::before {
  opacity: 0;
  transition-duration: 1.2s;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.nd-reveal-ready [data-reveal-bg="left"]::before {
  transform: translate3d(40px, 0, 0) scale(1.06);
}

.nd-reveal-ready [data-reveal-bg="right"]::before {
  transform: translate3d(-40px, 0, 0) scale(1.06);
}

.nd-reveal-ready [data-reveal-bg="fade"]::before {
  transform: scale(1.04);
}

.nd-reveal-ready [data-reveal-bg].is-revealed::before {
  opacity: 1;
  transform: none;
}

.nd-reveal-ready [data-reveal-bg].is-done::before {
  will-change: auto;
}

/* --------------------------------------------------------------------------
   Accesibilidad

   Si el sistema pide menos movimiento, no hay animación: todo entra visible.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nd-reveal-ready [data-reveal],
  .nd-reveal-ready [data-reveal-bg]::before {
    opacity: 1;
    transform: none;
    transition: none;
  }
}