/* ============================================================
   ATIVA EVENTOS — Landing Page (tema dark, conforme modelo)
   Tailwind (CDN) cuida do layout utilitário. Aqui ficam:
   fontes, base, marquee, reveals, accordion, player e a11y.
   ============================================================ */

:root {
  --cream:  #FAF9F6;
  --dark:   #09090B;
  --accent: #EB1C24;
}

/* ------- Base ------- */
body {
  margin: 0;
  background-color: var(--dark);
  color: var(--cream);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

html { scroll-behavior: smooth; }

/* Playfair Display para detalhes serifados (aspas, "combinado") */
.font-serif { font-family: 'Playfair Display', serif; }

/* Scrollbar discreta (estética do modelo) */
::-webkit-scrollbar { width: 0; height: 0; }

.text-balance { text-wrap: balance; }

/* ------- Marquee ------- */
.mask-marquee {
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
          mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
  width: max-content;
  animation: marquee 40s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------- Reveal ao rolar (substitui o framer-motion) ------- */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1) var(--d, 0s),
              transform .8s cubic-bezier(.22,1,.36,1) var(--d, 0s);
  will-change: opacity, transform;
}
.reveal-up.is-visible { opacity: 1; transform: none; }

/* ------- Accordion (altura animada) ------- */
.accordion-panel {
  height: 0;
  transition: height .35s cubic-bezier(.22,1,.36,1);
}
.accordion-trigger[aria-expanded="true"] .acc-chevron { transform: rotate(180deg); }

/* ------- Player de depoimento: barra de progresso ------- */
.tv-range {
  background: #27272a; /* zinc-800 */
  outline: none;
}
.tv-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 0;
}
.tv-range::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 0;
}
.tv-range::-webkit-slider-runnable-track { height: 4px; border-radius: 9999px; }
.tv-range::-moz-range-track { height: 4px; border-radius: 9999px; background: #27272a; }

/* Quando o vídeo de depoimento carrega de verdade, some o placeholder */
#testimonial-player.has-video #testimonial-fallback { display: none; }

/* Foco visível e acessível */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ------- prefers-reduced-motion ------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .reveal-up { opacity: 1; transform: none; transition: none; }
  .animate-pulse { animation: none !important; }
  *, *::before, *::after { transition-duration: .001ms !important; }
}