/* ==========================================================================
   Politron — estilos complementares ao Tailwind v4 (build para navegador)
   (tokens, utilities, keyframes, scroll-reveal, drawer, base)
   ========================================================================== */

/* ----- Fontes Geist self-hosted (a CSP do host bloqueia Google Fonts) ----- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/Geist-Variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/GeistMono-Variable.woff2') format('woff2-variations');
}

/* ----- Tokens (espelham o @theme do index.html, para uso em CSS puro) ----- */
:root {
  --radius: 0.875rem;

  --background: oklch(0.99 0.004 110);
  --foreground: oklch(0.22 0.02 165);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.02 165);
  --primary: oklch(0.52 0.11 162);
  --primary-foreground: oklch(0.99 0.01 110);
  --secondary: oklch(0.96 0.012 160);
  --secondary-foreground: oklch(0.28 0.03 165);
  --muted: oklch(0.965 0.006 120);
  --muted-foreground: oklch(0.48 0.02 165);
  --accent: oklch(0.74 0.16 70);
  --accent-foreground: oklch(0.24 0.04 60);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.91 0.008 155);
  --input: oklch(0.92 0.008 155);
  --ring: oklch(0.52 0.11 162);
}

/* ----- Base (a borda padrão fica no @layer base do bloco Tailwind do
   index.html, para não sobrescrever utilitários como border-white/10) ----- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
body {
  font-feature-settings: "ss01", "cv01";
}

/* ----- Utilities de fundo (verbatim do globals.css) ----- */
.bg-grid {
  background-image:
    linear-gradient(to right, oklch(0.52 0.11 162 / 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.52 0.11 162 / 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}
.bg-grid-dark {
  background-image:
    linear-gradient(to right, oklch(1 0 0 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.bg-dots {
  background-image: radial-gradient(oklch(0.52 0.11 162 / 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Scrollbar customizada */
.fancy-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.fancy-scroll::-webkit-scrollbar-track { background: transparent; }
.fancy-scroll::-webkit-scrollbar-thumb {
  background: oklch(0.52 0.11 162 / 0.3);
  border-radius: 9999px;
}
.fancy-scroll::-webkit-scrollbar-thumb:hover { background: oklch(0.52 0.11 162 / 0.5); }

/* ----- Keyframes (verbatim) ----- */
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 oklch(0.52 0.11 162 / 0.4); }
  70% { box-shadow: 0 0 0 12px oklch(0.52 0.11 162 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.52 0.11 162 / 0); }
}
.animate-pulse-ring { animation: pulse-ring 2.4s ease-out infinite; }

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 32s linear infinite; }

/* ----- Keyframes novas (substituem framer-motion) ----- */

/* "ping" do ponto da badge do hero */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* crescimento das barras do mini-chart do hero */
@keyframes bar-grow {
  from { height: 0; }
}
.animate-bar { animation: bar-grow 0.7s ease-out both; }

/* entrada fade-up do conteúdo do hero (montagem) */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  opacity: 0;
  animation: fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* entrada do mockup do hero */
@keyframes mockup-in {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-mockup {
  opacity: 0;
  animation: mockup-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

/* flutuação suave dos cards do hero (dois ritmos) */
@keyframes float-a {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes float-b {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}
.animate-float-a { animation: float-a 6s ease-in-out infinite; }
.animate-float-b { animation: float-b 7s ease-in-out 1s infinite; }

/* spinner do botão de envio */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 0.8s linear infinite; }

/* ----- Scroll-reveal (substitui whileInView do framer-motion) ----- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal="scale"] {
  transform: scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal="left"] { transform: translateX(24px); }
[data-reveal="right"] { transform: translateX(16px); }
[data-reveal].in-view {
  opacity: 1;
  transform: none;
}
/* stagger por índice */
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }

/* ----- Header: estado ao rolar (sem depender de classes dinâmicas do CDN) ----- */
#site-header.scrolled {
  background-color: oklch(0.99 0.004 110 / 0.85);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid oklch(0.91 0.008 155 / 0.7);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* ----- Logo grande no topo; encolhe ao rolar ----- */
/* Logo em retrato (442×564): largura define a altura pela proporção */
.site-logo {
  width: 8rem;      /* 128px de largura ≈ 163px de altura */
  height: 10.2rem;  /* mantém a proporção e permite transição suave */
  object-fit: contain;
  transition: width 0.3s ease, height 0.3s ease;
}
/* Espaçamento do cabeçalho: margem generosa no topo, pouca no bottom */
#site-header .header-inner {
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
  transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
}
/* Ao rolar: logo pequena e cabeçalho compacto */
#site-header.scrolled .site-logo {
  width: 2.5rem;   /* 40px */
  height: 3.2rem;  /* ~51px */
}
#site-header.scrolled .header-inner {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ----- Drawer mobile (substitui Radix Sheet) ----- */
.drawer-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer-panel {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.drawer-panel.open { transform: translateX(0); }

/* ----- Slide de turmas (scroll-snap suave, sem scrollbar visível) ----- */
.turmas-track {
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.turmas-track::-webkit-scrollbar { display: none; }

/* ----- Lightbox (ampliar foto das turmas) ----- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background-color: oklch(0.16 0.016 165 / 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox.open { display: flex; }
.lightbox-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(90vw, 1100px);
  max-height: 84vh;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 25px 60px -15px rgb(0 0 0 / 0.6);
  object-fit: contain;
}
.lightbox-placeholder {
  display: grid;
  place-items: center;
  width: min(80vw, 900px);
  aspect-ratio: 4 / 3;
  border-radius: 0.75rem;
  border: 2px dashed oklch(1 0 0 / 0.25);
  background-color: oklch(1 0 0 / 0.05);
  color: oklch(1 0 0 / 0.5);
}
.lightbox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: oklch(1 0 0 / 0.1);
  border: 1px solid oklch(1 0 0 / 0.2);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.lightbox-btn:hover { background-color: oklch(1 0 0 / 0.2); }
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
}
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  z-index: 2;
}
.lightbox-arrow:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
@media (max-width: 640px) {
  .lightbox-arrow { width: 2.5rem; height: 2.5rem; }
  .lightbox { padding: 1rem; }
}

/* ----- Tabs (Audiência) ----- */
.tab-panel { display: none; }
.tab-panel.active {
  display: block;
  animation: fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.tab-trigger { transition: background-color 0.2s ease, color 0.2s ease; }

/* ----- Acessibilidade: respeitar preferência por menos movimento ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .animate-fade-up, .animate-mockup { opacity: 1 !important; }
}