/* Movimiento compartido y animaciones progresivas de la pagina de inicio. */
:root {
  --animate-duration: 700ms;
  --reveal-distance: 30px;
  --reveal-delay: 0ms;
}

/* Animate.css solo se activa cuando el elemento entra en pantalla. */
.reveal.animate__animated:not(.is-visible) {
  animation-name: none !important;
}

/* La clase se agrega con JS: sin JavaScript el contenido permanece visible. */
.motion-ready .scroll-reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity 700ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay),
    transform 700ms cubic-bezier(.22, 1, .36, 1) var(--reveal-delay);
  will-change: opacity, transform;
}

.motion-ready .scroll-reveal.reveal-left {
  transform: translate3d(-34px, 0, 0);
}

.motion-ready .scroll-reveal.reveal-right {
  transform: translate3d(34px, 0, 0);
}

.motion-ready .scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Entrada editorial del hero, de arriba hacia abajo. */
.motion-ready #inicio .hero-copy > *,
.motion-ready #inicio .hero-media {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.motion-ready #inicio.hero-is-visible .hero-copy > *,
.motion-ready #inicio.hero-is-visible .hero-media {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 750ms cubic-bezier(.22, 1, .36, 1), transform 750ms cubic-bezier(.22, 1, .36, 1);
}

.motion-ready #inicio.hero-is-visible .hero-copy > :nth-child(1) { transition-delay: 80ms; }
.motion-ready #inicio.hero-is-visible .hero-copy > :nth-child(2) { transition-delay: 160ms; }
.motion-ready #inicio.hero-is-visible .hero-copy > :nth-child(3) { transition-delay: 240ms; }
.motion-ready #inicio.hero-is-visible .hero-copy > :nth-child(4) { transition-delay: 320ms; }
.motion-ready #inicio.hero-is-visible .hero-copy > :nth-child(5) { transition-delay: 400ms; }
.motion-ready #inicio.hero-is-visible .hero-copy > :nth-child(6) { transition-delay: 480ms; }
.motion-ready #inicio.hero-is-visible .hero-media { transition-delay: 230ms; }

/* Movimiento ambiental casi imperceptible, limitado al visual principal. */
#inicio .hero-media { position: relative; isolation: isolate; }
#inicio .hero-media::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}
#inicio.hero-is-visible .hero-media img { animation: hero-breathe 9s ease-in-out 1s infinite alternate; }

/* Heroes de las paginas internas. */
.motion-ready .site-hero .site-hero-line,
.motion-ready .site-hero .site-hero-visual {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.motion-ready .site-hero.hero-is-visible .site-hero-line,
.motion-ready .site-hero.hero-is-visible .site-hero-visual {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 720ms cubic-bezier(.22, 1, .36, 1), transform 720ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--hero-delay, 0ms);
}

.motion-ready .site-hero .site-hero-visual { transform: translate3d(28px, 0, 0); }

/* Las imagenes internas ganan profundidad sin alterar su composicion. */
.scroll-reveal.image-card img,
.scroll-reveal[class*="-visual"] img {
  transition: transform 800ms cubic-bezier(.22, 1, .36, 1);
}

.scroll-reveal.image-card:hover img,
.scroll-reveal[class*="-visual"]:hover img {
  transform: scale(1.025);
}

@media (max-width: 760px) {
  :root { --reveal-distance: 22px; }
  .motion-ready .scroll-reveal.reveal-left,
  .motion-ready .scroll-reveal.reveal-right,
  .motion-ready .site-hero .site-hero-visual {
    transform: translate3d(0, var(--reveal-distance), 0);
  }
}

@keyframes hero-breathe {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}