/* ============================================
   BIENAL DE PASSOS · Museum Design System
   Complementos ao Tailwind
   ============================================ */

body {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-newsreader {
  font-family: 'Newsreader', 'Times New Roman', serif !important;
}

/* ░░░░░░ NAV · estado scrolled ░░░░░░ */
.ds-nav {
  background: rgba(250, 242, 232, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}
.ds-nav.scrolled {
  background: rgba(250, 242, 232, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(107, 53, 32, 0.12);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

/* Section anchors offset */
.ds-section {
  scroll-margin-top: 80px;
}

/* ░░░░░░ ART CANVAS · gradientes que substituem imagens ░░░░░░ */
.art-canvas {
  background:
    radial-gradient(ellipse 60% 40% at 28% 22%, #ecc079 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 75% 45%, #d68a1e 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 85%, #8b4a35 0%, transparent 65%),
    linear-gradient(135deg, #c97817 0%, #6b3520 55%, #2b2622 100%);
  position: relative;
}
.art-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 245, 220, 0.18) 0%, transparent 4%),
    radial-gradient(circle at 75% 65%, rgba(255, 245, 220, 0.12) 0%, transparent 6%),
    radial-gradient(circle at 45% 80%, rgba(0, 0, 0, 0.18) 0%, transparent 5%);
  mix-blend-mode: overlay;
}
.art-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.08 0 0 0 0 0.04 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.art-canvas-2 {
  background:
    radial-gradient(ellipse at 30% 30%, #ecc079 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, #d68a1e 0%, transparent 55%),
    linear-gradient(135deg, #8b4a35 0%, #5a2a18 100%);
}

/* ░░░░░░ MARQUEE ░░░░░░ */
@keyframes marquee {
  to { transform: translateX(-50%); }
}
.marquee__track {
  animation: marquee 36s linear infinite;
  width: max-content;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ░░░░░░ REVEAL ░░░░░░ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ░░░░░░ Italic em via .italic ou em em headings ░░░░░░ */
em {
  font-style: italic;
  font-family: 'Newsreader', serif;
}

/* ░░░░░░ Reduced motion ░░░░░░ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .marquee__track { animation: none !important; }
}

/* ░░░░░░ Scrollbar suave ░░░░░░ */
html { scroll-behavior: smooth; }
::selection { background: #5a2a18; color: #faf2e8; }

/* ░░░░░░ Mobile fine-tuning ░░░░░░ */
@media (max-width: 640px) {
  /* Reduz tamanho do font do marquee em telas muito pequenas */
  .marquee__track { animation-duration: 28s; }

  /* Garante que iconify-icons não causem reflow */
  iconify-icon { display: inline-block; line-height: 0; }

  /* Section anchors offset menor no mobile (nav menor) */
  .ds-section { scroll-margin-top: 64px; }
}

/* ░░░░░░ Hero composition · garantia de visibilidade das molduras ░░░░░░ */
.hero-composition {
  /* Reserva altura mínima pro conjunto de molduras nunca colapsar */
  min-height: clamp(360px, 60vw, 560px);
}
@media (min-width: 1024px) {
  .hero-composition { min-height: 580px; }
}

/* As 3 molduras (capela, ticket, santuário) devem renderizar imagens
   com object-cover sem esticar, em qualquer dimensão de tela */
.hero-composition img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Devices ultra pequenos (iPhone SE 1ª gen · 320px) */
@media (max-width: 360px) {
  .hero-composition .max-w-\[15rem\] { max-width: 13.5rem; }
}

/* Evita que imagens "estourem" o container em qualquer breakpoint */
img { max-width: 100%; height: auto; }

/* Trava overflow horizontal global como segurança */
html, body { overflow-x: hidden; max-width: 100vw; }