/* keyframes e estados de revelação */

/* revelação genérica no scroll, via IntersectionObserver */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out-soft),
              transform 1s var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0s);
}

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

[data-reveal='fade'] {
  transform: none;
}

[data-reveal='scale'] {
  transform: scale(0.96);
}

[data-reveal='scale'].is-visible {
  transform: scale(1);
}

/* preloader */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy-950);
  transition: opacity 0.8s var(--ease-out-quart), visibility 0s linear 0.8s;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__mark {
  width: 46px;
  aspect-ratio: 198/241;
  background-color: var(--color-gold-light);
  -webkit-mask: url('../assets/logos/ellos-icon-mark.png') center / contain no-repeat;
  mask: url('../assets/logos/ellos-icon-mark.png') center / contain no-repeat;
  animation: preloaderPulse 1.4s var(--ease-in-out-quart) infinite;
}

@keyframes preloaderPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1); }
}

/* dica de rolagem do hero */
@keyframes scrollCue {
  0% { top: -40%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

/* marquee em CSS puro, sem JS rodando o tempo todo, é mais leve assim */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* traço de linha, usado no diagrama da Missão */
.draw-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* respeita quem prefere menos movimento na tela */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}