/* ============================================================
   ANIMATIONS — Grupo Modão
   Keyframes, scroll-reveal, parallax leve, preloader.
   Efeitos sutis e propositais — nada chamativo.
   ============================================================ */

/* ==================== SCROLL REVEAL ==================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slow) var(--ease-cinematic),
              transform var(--duration-slow) var(--ease-cinematic);
  will-change: opacity, transform;
}

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

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

[data-reveal="left"] {
  transform: translateX(-32px);
}
[data-reveal="left"].is-visible {
  transform: translateX(0);
}

[data-reveal="right"] {
  transform: translateX(32px);
}
[data-reveal="right"].is-visible {
  transform: translateX(0);
}

[data-reveal-group] > * {
  transition-delay: calc(var(--reveal-index, 0) * 90ms);
}

/* ==================== GLOW PULSE ==================== */
@keyframes glowPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.glow-pulse {
  animation: glowPulse 3.2s ease-in-out infinite;
}

/* ==================== PARTÍCULAS DOURADAS (HERO) ==================== */
@keyframes floatParticle {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate3d(var(--drift, 12px), -120vh, 0); opacity: 0; }
}

.particle {
  position: absolute;
  bottom: -10%;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: var(--color-gold-light);
  box-shadow: 0 0 8px 2px rgba(244, 211, 122, 0.6);
  animation: floatParticle var(--duration, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
  pointer-events: none;
}

/* ==================== FUMAÇA (HERO) ==================== */
@keyframes smokeDrift {
  0% { transform: translateX(-4%) scale(1); opacity: 0.35; }
  50% { transform: translateX(4%) scale(1.08); opacity: 0.5; }
  100% { transform: translateX(-4%) scale(1); opacity: 0.35; }
}

.smoke-layer {
  position: absolute;
  inset: -10%;
  background: var(--gradient-stage);
  animation: smokeDrift 18s ease-in-out infinite;
  pointer-events: none;
}

/* ==================== SCROLL INDICATOR ==================== */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(10px); opacity: 1; }
}

.scroll-indicator {
  animation: scrollBounce 2s ease-in-out infinite;
}

/* ==================== PRELOADER "MODO SHOW" ==================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-black-deep);
  transition: opacity var(--duration-cinematic) var(--ease-cinematic),
              visibility var(--duration-cinematic) var(--ease-cinematic);
}

.preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-stage);
  animation: glowPulse 2.4s ease-in-out infinite;
}

.preloader__logo {
  position: relative;
  width: clamp(120px, 20vw, 200px);
  opacity: 0;
  animation: preloaderReveal 1.6s var(--ease-cinematic) forwards 0.2s;
  filter: drop-shadow(0 0 24px rgba(216, 166, 67, 0.5));
}

@keyframes preloaderReveal {
  0% { opacity: 0; transform: scale(0.85); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

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

body.is-loading {
  overflow: hidden;
  height: 100vh;
}

/* ==================== HERO PARALLAX ==================== */
.hero__media {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ==================== COUNTER TICK ==================== */
.counter[data-counting] {
  color: var(--color-gold-light);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .particle,
  .smoke-layer,
  .scroll-indicator,
  .glow-pulse {
    animation: none;
  }
}