/* ============================================================
   Centro de Treinamentos EAG — Motion Layer (aditivo)
   Slideshow do hero + parallax + kinetic titles + divider.
   100% opt-in via classes/atributos. Respeita prefers-reduced-motion.
   ============================================================ */

/* ----------------------------------------------------------------
   1) HERO SLIDESHOW · 4 fotos · wipe diagonal · 5s loop
   Substitui o .hero__bg estático. Mantém .hero__overlay por cima.
   ---------------------------------------------------------------- */
.motion-hero-slides {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  isolation: isolate;
  background: var(--eag-black);
}

.motion-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.65) contrast(1.05);
  clip-path: polygon(0 0, 0 0, -15% 100%, -15% 100%);
  transform: translate3d(0, var(--hero-parallax-y, 0px), 0) scale(1.1);
  transition: clip-path 1.5s var(--ease-in-out);
  will-change: clip-path, transform;
  z-index: 1;
}

.motion-slide.is-active {
  clip-path: polygon(0 0, 120% 0, 100% 100%, -15% 100%);
  z-index: 2;
}

/* Preload escondido das imagens 2–4 (não bloqueia LCP do hero.webp) */
.motion-hero-preload {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  clip: rect(0, 0, 0, 0);
}

/* ----------------------------------------------------------------
   2) PARALLAX · galeria
   ---------------------------------------------------------------- */
.gallery__item {
  overflow: hidden;
}
.gallery__item img[data-parallax] {
  transform: translate3d(0, var(--p-y, 0px), 0) scale(1.08);
  transition: transform 0.45s linear;
  will-change: transform;
}

/* ----------------------------------------------------------------
   3) KINETIC TITLES · split-text + stagger fade-up
   .word é criada por motion.js só quando JS roda.
   Sem JS (ou reduced-motion): heading aparece normal, sem flash.
   ---------------------------------------------------------------- */
[data-kinetic] .word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms);
  will-change: opacity, transform;
}
[data-kinetic].kinetic--in .word {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ----------------------------------------------------------------
   4) SECTION DIVIDER · cinematográfico, decorativo, sem texto
   ---------------------------------------------------------------- */
.motion-divider {
  position: relative;
  height: 60vh;
  min-height: 360px;
  overflow: hidden;
  background: var(--eag-black);
  isolation: isolate;
}
@media (max-width: 767px) {
  .motion-divider {
    height: 35vh;
    min-height: 220px;
  }
}
.motion-divider__bg {
  position: absolute;
  inset: -25% 0;
  background: url('../img/palco-vazio.webp') center/cover no-repeat;
  filter: brightness(0.4) contrast(1.1) saturate(1.05);
  transform: translate3d(0, var(--divider-parallax-y, 0px), 0) scale(1.12);
  will-change: transform;
  z-index: 1;
}
.motion-divider__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 190, 43, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at center, transparent 30%, rgba(2, 16, 23, 0.55) 100%);
  pointer-events: none;
}

/* ----------------------------------------------------------------
   5) prefers-reduced-motion · desliga tudo
   Slideshow trava no primeiro slide (já vem com .is-active no HTML).
   ---------------------------------------------------------------- */
/* Nota intencional: removidos overrides de prefers-reduced-motion daqui.
   A LP é institucional e os efeitos fazem parte da comunicação visual.
   Slideshow + parallax + split-text rodam pra todos os usuários. */