/* Efeitos cinematográficos v2 (DESIGN-SYSTEM.md seção 4b). Tudo vanilla, ADR-0008. */

/* ===== Liquid glass (navbar, pills, cards sobre foto) ===== */
.liquid-glass {
  background: rgba(30, 61, 47, 0.38);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass { background: rgba(30, 61, 47, 0.92); }
}

/* ===== Textura de noise (seções escuras) ===== */
.noise { position: relative; }
.noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
}
.noise > .container { position: relative; z-index: 1; }

/* ===== BlurText: H1 palavra por palavra ===== */
.js .blur-text .palavra {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  animation: blur-in 0.7s var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes blur-in {
  60% { opacity: 0.6; filter: blur(4px); transform: translateY(-4px); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}

/* ===== Color grade cinematográfico: todas as fotos do site ===== */
.card-foto img, .galeria-item img, .carrossel-trilho img { filter: var(--cinematic-grade); }

/* ===== Grão de filme global (sutil, desligado em reduced-motion) ===== */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grao 0.5s steps(1) infinite;
}
@keyframes grao {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(2%, -1%); }
}

/* ===== Entrada cinematográfica de seção (reveal v2, DESIGN-SYSTEM 4b) =====
   A seção sobe saindo de um desfoque sutil ao entrar na viewport e reverte
   quando o visitante rola de volta pra cima. Só transform, opacity e filter. */
.js main > section:not(.hero):not(.page-hero) {
  opacity: 0;
  transform: translateY(48px) scale(0.97);
  filter: blur(8px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
  will-change: opacity, transform, filter;
}
.js main > section:not(.hero):not(.page-hero).visivel { opacity: 1; transform: none; filter: none; }

/* Parallax interno de profundidade: elementos [data-depth] flutuam em
   velocidades diferentes conforme a seção cruza a viewport (rAF, sem transição) */
.js [data-depth] { transform: translateY(var(--pd, 0px)); }

/* ===== Manifesto: text-reveal karaokê por palavra ligado ao scroll ===== */
.js [data-scroll-words] .sw {
  background-image: linear-gradient(to right, var(--verde-900) 50%, #A8A195 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Carrossel infinito de fotos (CSS puro) ===== */
.carrossel-faixa { overflow: hidden; margin-top: var(--space-4); }
.carrossel-trilho {
  display: flex;
  width: max-content;
  animation: rolar 60s linear infinite;
}
.carrossel-faixa:hover .carrossel-trilho { animation-play-state: paused; }
@keyframes rolar { to { transform: translateX(-50%); } }
.carrossel-trilho img {
  height: 28vh;
  min-height: 180px;
  aspect-ratio: 4 / 3;
  width: auto;
  object-fit: cover;
  border-radius: var(--radius);
  margin-right: var(--space-3);
  filter: var(--cinematic-grade) saturate(0.4);
  transition: filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .carrossel-trilho img:hover { filter: var(--cinematic-grade); transform: scale(1.03); }
}
.carrossel-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--grafite-600);
}

/* ===== Stagger de cards (usa o sistema .reveal existente) ===== */
.js .stagger > .reveal { transition-delay: calc(var(--i, 0) * 120ms); }

/* Vídeo de fundo (FadingVideo, quando o cliente enviar os vídeos) */
.video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* ===== Acento serif itálico ===== */
.acento { font-family: var(--font-display); font-style: italic; font-weight: 600; }
.section-escura .acento { color: var(--dourado-500); }

/* ===== Galeria ===== */
.galeria-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .galeria-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .galeria-grid { grid-template-columns: repeat(3, 1fr); } }
.galeria-item { border-radius: var(--radius); overflow: hidden; background: var(--verde-100); aspect-ratio: 4 / 3; }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Formulários públicos: mensagens visíveis e honeypot ===== */
.msg { display: none; border-radius: var(--radius); padding: var(--space-4); margin-top: var(--space-4); font-weight: 600; }
.msg.visivel { display: block; }
.msg-ok { background: var(--verde-100); color: var(--verde-900); }
.msg-erro { background: #FBEFEA; color: var(--erro); }
.honeypot { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* ===== Mapa ===== */
.mapa-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.mapa-wrap iframe { width: 100%; height: 420px; border: 0; display: block; }

@media (prefers-reduced-motion: reduce) {
  .js .blur-text .palavra { animation: none; opacity: 1; filter: none; transform: none; }
  .js [data-scroll-words] .sw { background: none; color: inherit; }
  .js .stagger > .reveal { transition-delay: 0ms; }
  .grain { display: none; }
  .carrossel-trilho { animation: none; }
  .js main > section:not(.hero):not(.page-hero) { opacity: 1; transform: none; filter: none; transition: none; }
  .js [data-depth] { transform: none !important; }
}