/* ==========================================================================
   KÉDMA LUCIA | HIGH-END STYLE.CSS (OTIMIZADO & BLINDADO)
   ========================================================================== */

/* --- 1. RESET E BASE --- */
body {
  background-color: #000000;
  color: #ffffff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

html, body {
  max-width: 100vw;
}

/* --- 2. ESTABILIZADOR GLOBAL (FIM DOS PULOS NA ROLAGEM) --- */
/* Força todas as seções a fluírem naturalmente, ignorando 'sticky' do HTML */
section {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: 100dvh !important;
  transform: translateZ(0); /* Força aceleração de hardware */
  backface-visibility: hidden;
}

/* --- 3. LENIS SMOOTH SCROLL (MOTOR) --- */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* --- 4. FÍSICA DE INCLINAÇÃO (SKEW - APENAS DESKTOP) --- */
.skew-section {
  transform: skewY(-3deg);
  transform-origin: top left;
  overflow: hidden;
  scale: 1.05; 
}
.skew-content {
  transform: skewY(3deg);
}

/* --- 5. FUNDOS E TEXTURAS --- */
.mesh-gradient {
  position: absolute;
  inset: -20%;
  background-image: radial-gradient(
    circle 800px at var(--x, 50%) var(--y, 50%), 
    rgba(244, 187, 132, 0.12) 0%, 
    rgba(13, 36, 24, 0.9) 40%, 
    #000000 80%
  );
  z-index: 0;
  transition: background 0.15s ease-out;
  pointer-events: none;
}

/* --- 6. EFEITOS DE LUZ (GLOWS & SHADOWS) --- */
.glow-gold {
  text-shadow: 0 0 15px rgba(244, 187, 132, 0.4), 0 0 30px rgba(244, 187, 132, 0.2);
  animation: pulse-glow 3s infinite alternate ease-in-out;
}
.glow-emerald { text-shadow: 0 0 20px rgba(52, 211, 153, 0.3); }
.shadow-emerald { filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.7)); }
.shadow-gold-glow { box-shadow: 0 0 30px rgba(244, 187, 132, 0.6); }

.icon-glow { box-shadow: 0 0 20px rgba(244, 187, 132, 0.3); }
.icon-glow-emerald { box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); }
.glow-gold-text { text-shadow: 0 0 15px rgba(244, 187, 132, 0.5); }
.glow-emerald-text { text-shadow: 0 0 15px rgba(16, 185, 129, 0.5); }

/* --- 7. MÁSCARAS DE IMAGEM --- */
.mask-image-x {
  background: radial-gradient(circle at center, transparent 20%, #000 60%);
  filter: blur(8px);
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%), 
                      linear-gradient(to bottom, black 50%, transparent 100%);
  mix-blend-mode: screen;
}

.mask-image-check {
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.2) 0%, transparent 40%);
  filter: blur(12px);
  -webkit-mask-image: radial-gradient(circle 300px at 70% 30%, black 30%, transparent 70%);
  mix-blend-mode: screen;
}

/* --- 8. CARDS E GLASSMORPHISM --- */
.bento-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.5rem;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease;
}
.bento-card:hover { border-color: rgba(244, 187, 132, 0.3); }

.result-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1.5rem;
  padding: 2rem;
  transition: transform 0.4s ease, border-color 0.4s ease;
}
.result-card:hover {
  transform: translateY(-5px);
  border-color: rgba(244, 187, 132, 0.3);
}

/* --- 9. ANIMAÇÕES KEYFRAMES --- */
@keyframes pulse-glow {
  0% { text-shadow: 0 0 10px rgba(244, 187, 132, 0.3), 0 0 20px rgba(244, 187, 132, 0.1); }
  100% { text-shadow: 0 0 25px rgba(244, 187, 132, 0.7), 0 0 45px rgba(244, 187, 132, 0.4); }
}

@keyframes pulse-graphic {
  0% { transform: scale(1); opacity: 0.3; }
  100% { transform: scale(1.05); opacity: 0.6; }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
}
.animate-marquee { animation: marquee 30s linear infinite; width: max-content; }

@keyframes gradient-x {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-gradient-x { animation: gradient-x 4s ease infinite; }

.active-pulse { animation: pulse-graphic 6s infinite alternate ease-in-out; }
.active-pulse-reverse { animation: pulse-graphic 7s infinite alternate-reverse ease-in-out; }

/* --- 10. GSAP REVEALS (Prepara as classes para o JS animar) --- */
.hero-reveal, .section-reveal, .headline-mask-reveal, .text-reveal-item, 
.bento-card, .gsap-sec5-label, .gsap-sec5-headline, .gsap-sec5-list-title-left, 
.gsap-sec5-list-title-right, .audit-item, .sec6-reveal-up, .sec6-reveal-left, 
.sec6-reveal-scale, .sec7-reveal, .sec8-text-up, .sec8-line-top, .sec8-line-bottom,
.sec9-reveal, .sec9-card-reveal, .sec9-icon-pop, .sec9-text-reveal, .sec10-reveal { 
  opacity: 0; 
  will-change: transform, opacity;
  filter: none !important; /* Trava antiblur */
  -webkit-filter: none !important;
}

/* ==========================================================================
   11. A OPÇÃO NUCLEAR PARA MOBILE (FIM DO LAG E TRAVAMENTOS)
   ========================================================================== */
@media (max-width: 768px) {
  
  /* Desliga os vídeos de fundo no celular. Poupando 80% da GPU. */
  video { display: none !important; }

  /* Desliga as sombras complexas e animações infinitas */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    animation-play-state: paused !important;
  }

  /* Desliga a inclinação (Skew). O site fica reto, fluido e perfeito. */
  .skew-section, .skew-content {
    transform: none !important;
    scale: 1 !important;
  }

  /* Arranca as bolas de luz gigantes */
  .blur-\[100px\], .blur-\[120px\], .blur-\[150px\], .mesh-gradient {
    display: none !important; 
  }

  /* Transforma cálculos de "vidro" em cor sólida elegante (Verde Escuro) */
  .backdrop-blur-sm, .backdrop-blur-md, .backdrop-blur-xl, .backdrop-blur,
  .bento-card, .result-card, .sec9-card-reveal, .bg-white\/5 {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: #061e14 !important; 
    border: 1px solid rgba(255,255,255,0.05) !important;
  }

  /* Desliga as misturas de cores matemáticas e máscaras */
  .mix-blend-screen, .mix-blend-overlay, .mix-blend-luminosity { mix-blend-mode: normal !important; }
  img { -webkit-mask-image: none !important; mask-image: none !important; }
}