/* ═══════════════════════════════════════════════════════════════
   COMBO DAS ESTRELAS — ANIMATIONS
   Versão 1.0 | Todos os efeitos visuais em movimento
   Agente A2 — Especialista em Animações & Canvas
   ═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   5.1 — HERO: CANVAS PARTÍCULAS DOURADAS (setup via JS/particles.js)
   ══════════════════════════════════════════════════════════════ */
#hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  width: 100%;
  height: 100%;
}


/* ══════════════════════════════════════════════════════════════
   5.2 — HERO: SHIMMER DOURADO ANIMADO (texto "A 1ª da América Latina")
   ══════════════════════════════════════════════════════════════ */
@keyframes gold-shimmer {
  0%   { background-position: -300% center; }
  38%  { background-position:  300% center; }
  100% { background-position:  300% center; }
}

.shimmer-gold {
  background: linear-gradient(
    90deg,
    #8B6914 0%,
    #D4AF37 20%,
    #FFD700 35%,
    #FFFFFF 50%,
    #FFD700 65%,
    #D4AF37 80%,
    #8B6914 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gold-shimmer 3.5s linear infinite;
}

/* Typewriter cursor */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.typewriter-cursor {
  display: inline-block;
  color: var(--gold-primary);
  animation: blink 1s step-end infinite;
  font-weight: 300;
  margin-left: 2px;
}


/* ══════════════════════════════════════════════════════════════
   5.3 — GLITTER: PARTÍCULAS CSS via JS/glitter.js
          (setup via JS — esta regra só garante o container)
   ══════════════════════════════════════════════════════════════ */
.glitter-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.glitter-particle {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes glitter-fall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 0.6; }
  100% {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
  }
}


/* ══════════════════════════════════════════════════════════════
   5.4 — TRANSIÇÃO BLACK → PURPLE (via JS + IntersectionObserver)
   ══════════════════════════════════════════════════════════════ */
body {
  transition: background 1.2s ease-in-out;
}

/* Gradiente dinâmico de passagem — aplicado via classe JS */
.section-ecoar-zone {
  position: relative;
}

.section-ecoar-zone::before {
  content: '';
  position: absolute;
  top: -280px;
  left: 0;
  right: 0;
  height: 280px;
  background: linear-gradient(
    to bottom,
    #050508 0%,
    #060510 25%,
    #09061C 50%,
    #0D0118 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}


/* ══════════════════════════════════════════════════════════════
   5.5 — ECOAR: ONDAS CÓSMICAS (Canvas via js/waves.js)
   ══════════════════════════════════════════════════════════════ */
#ecoar-waves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.65;
}


/* ══════════════════════════════════════════════════════════════
   5.6 — ECOAR LOGO: PULSAÇÃO DE LUZ CENTRAL
   ══════════════════════════════════════════════════════════════ */
@keyframes ecoar-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 12px #FF6B00)
      drop-shadow(0 0 30px rgba(255, 107, 0, 0.6))
      drop-shadow(0 0 60px rgba(255, 107, 0, 0.25));
    transform: scale(1);
  }
  50% {
    filter:
      drop-shadow(0 0 25px #FF8C00)
      drop-shadow(0 0 60px rgba(255, 140, 0, 0.85))
      drop-shadow(0 0 100px rgba(255, 107, 0, 0.5))
      drop-shadow(0 0 140px rgba(123, 47, 190, 0.35));
    transform: scale(1.06);
  }
}

.ecoar-logo {
  animation: ecoar-pulse 2.5s ease-in-out infinite;
  display: block;
  transform-origin: center center;
  will-change: filter, transform;
}

/* Halo âmbar/laranja que pulsa atrás da logo ECOAR */
@keyframes ecoar-pulse-halo {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
}


/* ══════════════════════════════════════════════════════════════
   5.7 — SCROLL REVEAL (Intersection Observer via js/main.js)
   ══════════════════════════════════════════════════════════════ */

/* Estado inicial — elementos ocultos */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Estado visível — quando JS adiciona .is-visible */
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Delays escalonados para grupos de elementos */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }


/* ══════════════════════════════════════════════════════════════
   5.8 — CARDS DE VÍDEO: SHINE EFFECT NO HOVER
   ══════════════════════════════════════════════════════════════ */
.video-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: var(--radius-md);
  background: #080810;
  cursor: pointer;
  transition: var(--transition-med);
}

.video-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}

.video-card:hover::after {
  left: 125%;
}

.video-card:hover {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow:
    0 0 20px rgba(212, 175, 55, 0.15),
    0 8px 40px rgba(0, 0, 0, 0.6);
  transform: translateY(-3px);
}

/* Ícone Play no hover */
.video-card .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 64px;
  height: 64px;
  background: rgba(212, 175, 55, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 1.5rem;
  transition: var(--transition-bounce);
  opacity: 0.9;
}

.video-card:hover .play-btn {
  transform: translate(-50%, -50%) scale(1);
  background: var(--gold-neon);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
  opacity: 1;
}


/* ══════════════════════════════════════════════════════════════
   5.9 — HEADER: BLUR ON SCROLL
         (classe .scrolled adicionada via JS)
   ══════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.site-header.scrolled {
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.site-header.scrolled .header-logo {
  transform: scale(0.9);
}

.header-logo {
  transition: transform 0.4s ease;
  display: block;
}


/* ══════════════════════════════════════════════════════════════
   ANIMAÇÕES EXTRAS — FLUTUAÇÃO (Amelhinha + Logo redonda)
   ══════════════════════════════════════════════════════════════ */

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  33%       { transform: translateY(-12px) rotate(0deg); }
  66%       { transform: translateY(-6px) rotate(1deg); }
}

@keyframes float-gentle {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes float-rotate {
  0%   { transform: translateY(0px) rotate(0deg); }
  25%  { transform: translateY(-10px) rotate(3deg); }
  50%  { transform: translateY(-5px) rotate(0deg); }
  75%  { transform: translateY(-14px) rotate(-3deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.float-anim        { animation: float 6s ease-in-out infinite; }
.float-gentle-anim { animation: float-gentle 5s ease-in-out infinite; }
.float-rotate-anim { animation: float-rotate 8s ease-in-out infinite; }


/* ══════════════════════════════════════════════════════════════
   BOTÃO WHATSAPP — RING PULSE
   ══════════════════════════════════════════════════════════════ */
@keyframes wp-pulse {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}


/* ══════════════════════════════════════════════════════════════
   STAR SPIN — decorativa
   ══════════════════════════════════════════════════════════════ */
@keyframes star-spin {
  to { transform: rotate(360deg); }
}

.star-spin { animation: star-spin 12s linear infinite; }


/* ══════════════════════════════════════════════════════════════
   GLOW PULSE — bordas/elementos dourados
   ══════════════════════════════════════════════════════════════ */
@keyframes glow-pulse-gold {
  0%, 100% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }
  50%       { box-shadow: 0 0 25px rgba(212, 175, 55, 0.65), 0 0 50px rgba(212, 175, 55, 0.2); }
}

@keyframes glow-pulse-purple {
  0%, 100% { box-shadow: 0 0 10px rgba(123, 47, 190, 0.3); }
  50%       { box-shadow: 0 0 25px rgba(155, 61, 255, 0.65), 0 0 50px rgba(255, 107, 0, 0.2); }
}

.glow-gold   { animation: glow-pulse-gold 2.5s ease-in-out infinite; }
.glow-purple { animation: glow-pulse-purple 2.5s ease-in-out infinite; }


/* ══════════════════════════════════════════════════════════════
   FADE IN — efeito de entrada geral
   ══════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.fade-in       { animation: fadeIn 0.8s ease forwards; }
.fade-in-scale { animation: fadeInScale 0.6s ease forwards; }


/* ══════════════════════════════════════════════════════════════
   MODAL DE VÍDEO — ANIMAÇÃO DE ENTRADA/SAÍDA
   ══════════════════════════════════════════════════════════════ */
@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.video-modal {
  animation: modal-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


/* ══════════════════════════════════════════════════════════════
   CARROSSEL — TRANSIÇÃO FADE
   ══════════════════════════════════════════════════════════════ */
@keyframes slide-fade-in {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}

.carousel-slide.active {
  animation: slide-fade-in 0.6s ease forwards;
}


/* ══════════════════════════════════════════════════════════════
   HAMBURGUER — MENU MOBILE
   ══════════════════════════════════════════════════════════════ */
@keyframes menu-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes menu-slide-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

.nav-mobile.open {
  animation: menu-slide-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slow-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes slow-spin-reverse {
  0% { transform: rotate(360deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}