/* ==========================================================================
   Instituto Londucci — Camada de experiência ("uau")
   Abertura cinematográfica, cursor customizado, textura de material,
   galeria horizontal e hovers refinados. Tudo aditivo e com fallback:
   sem JS/GSAP ou com "reduzir movimento", o site funciona normalmente.
   ========================================================================== */

/* ---------- Textura de material: grão fino sobre tudo ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9970; pointer-events: none; opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) { .grain { opacity: 0.03; } }

/* ---------- Luz dourada suave (deriva lenta) em fundos escuros ---------- */
.gold-glow {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, oklch(0.8 0.09 84 / 0.28) 0%, oklch(0.8 0.09 84 / 0) 62%);
  filter: blur(10px); opacity: 0.9;
  animation: glowDrift 16s ease-in-out infinite alternate;
}
@keyframes glowDrift {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1); opacity: 0.7; }
  100% { transform: translate3d(6%, 4%, 0) scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .gold-glow { animation: none; } }

/* ---------- Cursor customizado (só desktop, injetado via JS) ---------- */
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor [role="button"] { cursor: none; }
.cursor { position: fixed; top: 0; left: 0; z-index: 9995; pointer-events: none; will-change: transform; }
.cursor-dot {
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: oklch(0.8 0.055 84); transition: opacity .3s, transform .3s;
}
.cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9994; pointer-events: none; will-change: transform;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 1px solid oklch(0.8 0.055 84 / 0.7);
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease),
              background .35s var(--ease), border-color .35s var(--ease), opacity .3s;
}
html.cursor-hover .cursor-ring { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: oklch(0.8 0.055 84 / 0.1); border-color: oklch(0.8 0.055 84 / 0.9); }
html.cursor-hover .cursor-dot { opacity: 0; }
html.cursor-hidden .cursor, html.cursor-hidden .cursor-ring { opacity: 0; }

/* ---------- Abertura cinematográfica (injetada via JS) ---------- */
.intro {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: var(--teal-deeper); overflow: hidden;
}
.intro__glow {
  position: absolute; width: 80vw; height: 80vw; max-width: 1000px; max-height: 1000px;
  background: radial-gradient(circle, oklch(0.8 0.09 84 / 0.22) 0%, oklch(0.8 0.09 84 / 0) 60%);
  opacity: 0;
}
.intro__mark { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.intro__logo { height: clamp(46px, 6vw, 72px); width: auto; opacity: 0; }
.intro__line { width: 0; height: 1px; background: oklch(0.8 0.055 84 / 0.85); }
.intro__word {
  position: absolute; bottom: clamp(40px, 8vh, 90px); left: 0; right: 0; text-align: center;
  font: 600 11px/1 var(--sans); letter-spacing: 0.42em; text-transform: uppercase;
  color: oklch(0.985 0.005 90 / 0.55); opacity: 0;
}
.intro__cover { position: absolute; inset: 0; background: var(--bone); transform: translateY(101%); }

/* ---------- Galeria horizontal cinematográfica (desktop, via .cine) ---------- */
html.cine .gallery { overflow: visible; scroll-snap-type: none; }
.gallery-stage { position: relative; }
html.cine .gallery-stage { min-height: 100svh; overflow: hidden; display: flex; align-items: center; }
html.cine .gallery-stage .gallery {
  min-height: 0; align-items: center; flex-wrap: nowrap;
  padding-top: clamp(40px, 6vw, 90px); padding-bottom: clamp(40px, 6vw, 90px); will-change: transform;
}
html.cine .gallery-stage .gallery figure { width: clamp(300px, 32vw, 440px); }

/* ---------- Hovers refinados de imagem (revelação dourada) ---------- */
.gallery figure { position: relative; }
.gallery img, .wide-media__frame img, .spec-card img, .split__media img { will-change: transform; }
.reveal-media { position: relative; overflow: hidden; }
.reveal-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, oklch(0.8 0.09 84 / 0) 30%, oklch(0.9 0.09 84 / 0.16) 50%, oklch(0.8 0.09 84 / 0) 70%);
  transform: translateX(-120%); transition: transform 1.1s var(--ease);
}
.reveal-media:hover::after { transform: translateX(120%); }

/* Botões magnéticos: preparo de camada */
.btn, .header-cta, .wa-fab { will-change: transform; }

/* Ajustes de acessibilidade / mobile: sem cursor custom em toque */
@media (hover: none), (max-width: 1039px) {
  html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: auto; }
  .cursor, .cursor-ring { display: none; }
}