/* ==========================================================================
   123 Quadros
   style.css — Estilos personalizados do projeto (fora do Tailwind)
   O layout, cores e utilitários continuam vindo do Tailwind via classes.
   Última atualização: 18/10/2026
   ========================================================================== */

html { -webkit-font-smoothing: antialiased; }
body { background-color: #ffffff; }
::selection { background: rgba(234,2,115,.3); }

/* Todos os ícones Lucide com traço fino e consistente */
.lucide { stroke-width: 1.5; }

/* Revelação no scroll (fade-in + slide-up) */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Atrasos da animação de reveal (escalonamento em cascata)
   Substituem os antigos style="transition-delay:..." inline no HTML */
.reveal-delay-60  { transition-delay: 60ms; }
.reveal-delay-70  { transition-delay: 70ms; }
.reveal-delay-80  { transition-delay: 80ms; }
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-120 { transition-delay: 120ms; }
.reveal-delay-140 { transition-delay: 140ms; }
.reveal-delay-160 { transition-delay: 160ms; }
.reveal-delay-180 { transition-delay: 180ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-210 { transition-delay: 210ms; }
.reveal-delay-240 { transition-delay: 240ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-320 { transition-delay: 320ms; }

/* Textura de "tela" para as obras geradas em CSS */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Acordeão (FAQ) */
details[open] .faq-body { animation: faqIn .35s ease-out; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
details summary::-webkit-details-marker { display: none; }

/* Barras de rolagem discretas */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #ffffff; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 9999px; border: 2px solid #ffffff; }

/* ---- Obras de arte geradas em CSS (placeholders elegantes) ---- */
.art { position: absolute; inset: 0; }
.a1 { background:
  radial-gradient(58% 52% at 30% 24%, rgba(253,195,3,.95), rgba(253,195,3,0) 58%),
  radial-gradient(52% 52% at 76% 72%, rgba(234,2,115,.85), rgba(234,2,115,0) 60%),
  radial-gradient(90% 70% at 50% 118%, rgba(1,154,235,.35), rgba(1,154,235,0) 60%),
  linear-gradient(155deg,#161022,#050509); }
.a2 { background:
  radial-gradient(62% 55% at 50% 80%, rgba(234,88,12,.92), rgba(234,88,12,0) 60%),
  radial-gradient(50% 50% at 22% 22%, rgba(250,204,21,.85), rgba(250,204,21,0) 60%),
  linear-gradient(180deg,#1a0f08,#070405); }
.a3 { background:
  radial-gradient(60% 55% at 28% 30%, rgba(56,189,248,.85), rgba(56,189,248,0) 60%),
  radial-gradient(60% 60% at 78% 74%, rgba(16,185,129,.7), rgba(16,185,129,0) 60%),
  linear-gradient(160deg,#071626,#030814); }
.a4 { background:
  radial-gradient(55% 55% at 30% 28%, rgba(167,243,208,.8), rgba(167,243,208,0) 60%),
  radial-gradient(60% 60% at 76% 76%, rgba(22,163,74,.7), rgba(22,163,74,0) 62%),
  radial-gradient(70% 60% at 60% -10%, rgba(253,230,138,.4), rgba(253,230,138,0) 60%),
  linear-gradient(160deg,#0b1710,#040806); }
.a5 { background:
  radial-gradient(60% 60% at 35% 30%, rgba(226,232,240,.6), rgba(226,232,240,0) 60%),
  radial-gradient(60% 60% at 70% 75%, rgba(148,163,184,.5), rgba(148,163,184,0) 62%),
  linear-gradient(160deg,#14171c,#05070a); }
.a6 { background:
  radial-gradient(58% 52% at 30% 26%, rgba(244,114,182,.9), rgba(244,114,182,0) 60%),
  radial-gradient(58% 58% at 76% 74%, rgba(139,92,246,.8), rgba(139,92,246,0) 62%),
  radial-gradient(60% 60% at 50% 120%, rgba(251,113,133,.4), rgba(251,113,133,0) 60%),
  linear-gradient(160deg,#1b0f1d,#080409); }
.a7 { background:
  radial-gradient(80% 70% at 72% 18%, rgba(255,250,238,.95), rgba(255,250,238,0) 62%),
  radial-gradient(60% 60% at 18% 82%, rgba(206,184,146,.8), rgba(206,184,146,0) 62%),
  linear-gradient(160deg,#efe7d6,#cabca0); }
.a8 { background:
  radial-gradient(55% 55% at 30% 30%, rgba(248,113,113,.95), rgba(248,113,113,0) 60%),
  radial-gradient(58% 58% at 76% 74%, rgba(249,115,22,.8), rgba(249,115,22,0) 62%),
  radial-gradient(70% 60% at 50% 120%, rgba(159,18,57,.5), rgba(159,18,57,0) 60%),
  linear-gradient(160deg,#1c0a0a,#0a0405); }
.a9 { background:
  radial-gradient(60% 55% at 34% 30%, rgba(125,211,252,.85), rgba(125,211,252,0) 60%),
  radial-gradient(60% 60% at 74% 76%, rgba(79,70,229,.8), rgba(79,70,229,0) 62%),
  linear-gradient(160deg,#0a0f26,#03040f); }

/* ---- Carrossel de obras em destaque (Hero) ---- */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), visibility 0s linear .7s;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
/* Zoom lento (Ken Burns) enquanto a obra está em cartaz */
.hero-slide .art,
.hero-slide img { transform: scale(1.08); transition: transform 6s ease-out; }
.hero-slide.is-active .art,
.hero-slide.is-active img { transform: scale(1); }

/* Indicadores (dots) — o ativo vira uma pílula escura */
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #d4d4d8;
  transition: all .35s cubic-bezier(.16,1,.3,1);
}
.hero-dot:hover { background: #a1a1aa; }
.hero-dot.is-active { width: 26px; background: #18181b; }

/* Acessibilidade: respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .hero-slide .art,
  .hero-slide img { transform: none; transition: none; }
}