/* Custom styles for Inkvance Soluções de Impressoras */

/* Marquee track animation */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* FAQ Accordion Transitions */
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out, opacity 0.25s ease-out;
  opacity: 0;
}

.faq-item.active .faq-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-item .faq-icon {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* Pulse animation for WhatsApp buttons */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.pulse-whatsapp {
  animation: pulseGlow 2.2s infinite cubic-bezier(0.45, 0, 0.55, 1);
}

/* Diagnostic button selected state */
.diag-btn.active {
  background-color: var(--color-brand, #0057D9) !important;
  color: #ffffff !important;
  border-color: var(--color-brand, #0057D9) !important;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

/* Top Announcement Bar */
.top-announcement-bar {
  background: linear-gradient(90deg, #070d17 0%, #0e1e38 50%, #070d17 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Floating Alert: Coleta Grátis Ainda Hoje (Estrela Pisca-Pisca) */
@keyframes starTwinkle {
  0%, 100% {
    transform: scale(0.65) rotate(0deg);
    opacity: 0.55;
    filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.4));
  }
  50% {
    transform: scale(1.4) rotate(90deg);
    opacity: 1;
    filter: drop-shadow(0 0 16px rgba(250, 204, 21, 1)) drop-shadow(0 0 28px rgba(34, 197, 94, 0.95));
  }
}

@keyframes badgePiscaPisca {
  0%, 100% {
    transform: scale(0.97);
    border-color: rgba(250, 204, 21, 0.45);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.65), 0 0 0 0 rgba(250, 204, 21, 0.3);
  }
  50% {
    transform: scale(1.05);
    border-color: rgba(250, 204, 21, 1);
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.75), 0 0 25px 4px rgba(250, 204, 21, 0.75), 0 0 45px 8px rgba(34, 197, 94, 0.5);
  }
}

.star-twinkle {
  animation: starTwinkle 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, opacity, filter;
  display: inline-block;
}

.star-twinkle-delay {
  animation: starTwinkle 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.75s;
  will-change: transform, opacity, filter;
  display: inline-block;
}

.badge-pisca-pisca {
  animation: badgePiscaPisca 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, box-shadow, border-color;
}

/* Pisca-Pisca de Atenção: Efeito Estroboscópico / Giroflex */
@keyframes atencaoStrobeFlash {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #f59e0b) drop-shadow(0 0 18px #ef4444);
    transform: scale(1);
  }
  25% {
    opacity: 0.3;
    filter: none;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 20px #ef4444) drop-shadow(0 0 35px #f59e0b) drop-shadow(0 0 25px #10b981);
    transform: scale(1.3);
  }
  75% {
    opacity: 0.35;
    filter: none;
    transform: scale(0.9);
  }
}

/* Card de Atenção que Literalmente Abre e Fecha (Pulsação Elástica) */
@keyframes atencaoAbreFecha {
  0%, 100% {
    transform: scale(0.94) translateY(0);
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.7), 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  45%, 55% {
    transform: scale(1.06) translateY(-4px);
    border-color: rgba(239, 68, 68, 1);
    box-shadow: 0 20px 40px -4px rgba(0, 0, 0, 0.8), 0 0 30px 6px rgba(245, 158, 11, 0.85), 0 0 55px 12px rgba(239, 68, 68, 0.65);
  }
}

.pisca-alerta-strobe {
  animation: atencaoStrobeFlash 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, opacity, filter;
  display: inline-block;
}

.card-atencao-abre-fecha {
  animation: atencaoAbreFecha 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, box-shadow, border-color;
}