/* =========================================================
   Landing page — estilos complementares ao Tailwind CDN
   Apenas o que Tailwind não cobre nativamente:
   - Variante glass customizada
   - Gradiente hero de fundo
   - Camadas decorativas (devem ficar ATRÁS do conteúdo
     mas NÃO capturar scroll: z-index 0 + pointer-events none)
   - Animações de reveal-on-scroll
   - Ajustes de prefers-reduced-motion
   ========================================================= */

/* Sobrescreve regras globais do base.css que bloqueiam scroll
   (overflow-x: hidden + overscroll-behavior: none no html/body).
   Mantém o resto do app inalterado. */
html:has(.landing-page),
body.landing-page,
html body.landing-page {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: auto !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  touch-action: pan-y !important;
  position: static !important;
}

body.landing-page {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  touch-action: pan-y !important;
}

/* Garante que NENHUM ancestral do conteúdo cria um container de scroll */
.landing-page main,
.landing-page section,
.landing-page nav,
.landing-page footer,
.landing-page div,
.landing-page article {
  overflow: visible !important;
}

/* Exceto o mockup do hero, que tem overflow escondido para o brilho não vazar */
.landing-page #hero-img-container {
  overflow: hidden !important;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.hero-gradient {
  background: linear-gradient(135deg, #f9f9f9 0%, #ffd9d6 50%, #ae131a 100%);
}

/* Background decorations — fixed, behind content, no scroll capture */
.hero-gradient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #f9f9f9 0%, #ffd9d6 50%, #ae131a 100%);
  opacity: 0.2;
}

.hero-blob-peach {
  position: fixed;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 60%;
  z-index: 0;
  pointer-events: none;
  background: #ffb4a4;
  border-radius: 9999px;
  filter: blur(120px);
  opacity: 0.3;
}

.hero-blob-red {
  position: fixed;
  bottom: -20%;
  right: -10%;
  width: 50%;
  height: 50%;
  z-index: 0;
  pointer-events: none;
  background: #ae131a;
  border-radius: 9999px;
  filter: blur(100px);
  opacity: 0.2;
}

/* Conteúdo principal sempre acima das decorações */
.landing-content {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .reveal-element.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-element.delay-100 { transition-delay: 100ms; }
  .reveal-element.delay-200 { transition-delay: 200ms; }
  .reveal-element.delay-300 { transition-delay: 300ms; }

  .hero-parallax {
    transition: transform 0.1s linear;
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-element {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}