/* ───────── GLASS QUENTE ───────── */
.glass {
  position: relative; isolation: isolate;
  /* sem backdrop-filter: era o maior custo de pintura durante o scroll */
  background: linear-gradient(160deg, rgb(255 251 244 / 0.96), rgb(255 251 244 / 0.82));
  box-shadow: var(--shadow-warm);
}
.glass { box-shadow: inset 0 0 0 1px rgb(200 145 58 / 0.35), var(--shadow-warm); }
/* brilho especular do tilt: sem mix-blend (em Safari forçava composição fora da tela) */
.glass[data-tilt]::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / 0.35), transparent 45%);
  opacity: var(--spec, 0); transition: opacity 0.4s;
}

/* ───────── SHINE NOS BOTÕES PRINCIPAIS ───────── */
.btn--primary::before, .btn--gold::before, .ctabar__btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.45) 50%, transparent 70%);
  translate: -120% 0; animation: shine 4.5s var(--ease-in-out-soft) infinite;
}

/* ───────── RIPPLE DE LUZ ───────── */
.ripple {
  position: absolute; left: var(--px); top: var(--py); z-index: -1;
  width: 10px; height: 10px; border-radius: 50%; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(circle, rgb(255 251 244 / 0.85), rgb(233 194 122 / 0.45) 40%, transparent 70%);
  animation: ripple 0.7s var(--ease-out-expo) forwards;
}

/* ───────── GRÃO DE FILME ───────── */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.06;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────── FUNDO ENTRE SEÇÕES ─────────
   camadas fixas com crossfade de opacidade (compositor) em vez de repintar o fundo da página a cada frame */
.bgfx { display: none; }
.has-motion .bgfx { position: fixed; inset: 0; z-index: -10; display: block; background: var(--c-cream); pointer-events: none; }
.bgfx i { position: absolute; inset: 0; opacity: 0; }
.bgfx [data-c="sand"] { background: var(--c-sand); }
.bgfx [data-c="ivory"] { background: var(--c-ivory); }

/* ───────── HERO FALLBACK (sem WebGL) ───────── */
.hero__fallback {
  background:
    radial-gradient(90% 60% at 50% -5%, rgb(233 194 122 / 0.75), transparent 60%),
    conic-gradient(from var(--ray-angle) at 50% -10%,
      transparent 0 40%, rgb(233 194 122 / 0.35) 42%, transparent 45% 48%,
      rgb(255 251 244 / 0.6) 50%, transparent 53% 56%, rgb(233 194 122 / 0.3) 58%, transparent 61%),
    var(--c-cream);
  animation: rays-sway 14s var(--ease-in-out-soft) infinite alternate;
}

/* ───────── CURSOR-LUZ (desktop) ───────── */
.cursor-light {
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 36rem; height: 36rem; margin: -18rem 0 0 -18rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(233 194 122 / 0.18), transparent);
  opacity: 0; translate: -100vw -100vh; transition: opacity 0.6s;
}
.has-cursor .cursor-light { opacity: 1; }

/* ───────── PRELOADER + INTRO DO HERO ─────────
   Só CSS: começa no primeiro paint, sem esperar GSAP chegar do CDN (LCP). */
.preloader { display: none; }
html.motion .preloader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--c-cream); pointer-events: none;
  animation: preloader-out 0.35s var(--ease-in-out-soft) 0.45s forwards;
}
.preloader__dot {
  /* ponto de luz que se abre em claridade (não um disco sólido) */
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #fff3d6 30%, rgb(233 194 122 / 0.7) 55%, rgb(233 194 122 / 0) 72%);
  animation: dot-burst 0.7s var(--ease-in-out-soft) forwards;
}
/* o título acende da esquerda para a direita conforme o feixe passa */
html.motion .hero__title[data-light] {
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--beam) - 12%), rgb(0 0 0 / 0.06) calc(var(--beam) + 4%));
  mask-image: linear-gradient(100deg, #000 calc(var(--beam) - 12%), rgb(0 0 0 / 0.06) calc(var(--beam) + 4%));
  /* title-settle só com fill backwards: depois de terminar não disputa transform/filter com o GSAP do scroll */
  animation: light-reveal 1.9s cubic-bezier(0.35, 0.05, 0.3, 1) 0.7s both, title-settle 2s var(--ease-out-expo) 0.6s backwards;
}
html.motion .hero__beam { animation: beam-sweep 1.9s cubic-bezier(0.35, 0.05, 0.3, 1) 0.7s both; }
html.motion .scroll-cue { animation: fade-up 0.8s var(--ease-out-expo) 2.3s both; }
@property --beam { syntax: "<percentage>"; inherits: false; initial-value: 130%; }
@keyframes light-reveal { from { --beam: -25%; } to { --beam: 130%; } }
@keyframes title-settle { from { translate: 0 14px; letter-spacing: -0.005em; filter: blur(6px); } }
@keyframes beam-sweep { 0% { opacity: 0; transform: translateX(-60%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
@keyframes paz-shine { 0%, 55% { background-position: 100% 0; } 100% { background-position: -50% 0; } }
@keyframes paz-sway { 50% { rotate: -2deg; translate: 0 -0.04em; } }
@keyframes dust-float { from { transform: translate3d(0, 18px, 0); opacity: 0.25; } to { transform: translate3d(12px, -26px, 0); opacity: 0.85; } }
@keyframes preloader-out { to { opacity: 0; visibility: hidden; } }
@keyframes dot-burst { 0% { scale: 2; } 60% { opacity: 1; } to { scale: 160; opacity: 0.9; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }

/* ───────── KEYFRAMES ───────── */
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes rays-sway { from { --ray-angle: -8deg; } to { --ray-angle: 8deg; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes ring { from { scale: 1; opacity: 0.9; } to { scale: 1.8; opacity: 0; } }
@keyframes halo { 50% { scale: 1.06; opacity: 0.85; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes breathe { 50% { scale: 1.15; opacity: 0.7; } }
@keyframes shine { 0%, 60% { translate: -120% 0; } 100% { translate: 120% 0; } }
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-5%, 3%); }
  40% { transform: translate(4%, -4%); }
  60% { transform: translate(-3%, 5%); }
  80% { transform: translate(5%, 2%); }
  100% { transform: translate(0, 0); }
}
@keyframes ripple { to { width: 26rem; height: 26rem; opacity: 0; } }

/* ───────── REDUCED MOTION ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .grain, .cursor-light { display: none; }
}