/* ============================================================
   UV Audio System — Animações
   Arquivo: home/css/animations.css
   ============================================================ */

/* ---------- Botão neon: luzes piscando ao ligar ---------- */
@keyframes neon-flicker {
  0%   { opacity: 1; box-shadow: 0 0 5px rgba(255,255,255,0.3); }
  10%  { opacity: 0.85; box-shadow: 0 0 8px rgba(255,255,255,0.5); }
  20%  { opacity: 1; box-shadow: 0 0 12px rgba(255,255,255,0.7); }
  30%  { opacity: 0.7; box-shadow: 0 0 6px rgba(255,255,255,0.4); }
  40%  { opacity: 0.95; box-shadow: 0 0 15px rgba(255,255,255,0.8); }
  50%  { opacity: 1; box-shadow: 0 0 20px rgba(255,255,255,0.9); }
  60%  { opacity: 0.9; box-shadow: 0 0 10px rgba(255,255,255,0.6); }
  70%  { opacity: 1; box-shadow: 0 0 25px rgba(255,255,255,1); }
  100% { opacity: 1; box-shadow: 0 0 10px rgba(255,255,255,0.6), 0 0 25px rgba(255,255,255,0.4), 0 0 45px rgba(255,255,255,0.2); }
}

/* ---------- Botão neon: vibração na posição ---------- */
@keyframes btn-shake {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1.5px, 1px); }
  40%  { transform: translate(1.5px, -1px); }
  60%  { transform: translate(-1px, -1.5px); }
  80%  { transform: translate(1px, 1.5px); }
  100% { transform: translate(0, 0); }
}

/* ---------- Título brilhante: pulsação suave ---------- */
@keyframes glow-pulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.15);
  }
}

.glow-title {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* ---------- Seta bounce (barra flutuante hero) ---------- */
@keyframes bounce-down {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(10px);
    opacity: 0.7;
  }
}

.bounce-arrow {
  animation: bounce-down 1.5s ease-in-out infinite;
}

/* ---------- Fade in/out para barra flutuante ---------- */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

.floating-content {
  animation: fade-in 0.35s ease forwards;
}

.floating-content.is-leaving {
  animation: fade-out 0.25s ease forwards;
}

/* ---------- Knob rotate suave ---------- */
.knob-rotate-hook.is-rotating {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Entrada suave de seções ---------- */
@keyframes section-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

.snap-section.is-active .hero-content,
.snap-section.is-active .faq-content,
.snap-section.is-active .product-content,
.snap-section.is-active .brand-content,
.snap-section.is-active .services-content,
.snap-section.is-active .contact-content {
  animation: section-fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}