/* Reset Básico */
body {
  background-color: #000000;
  color: #ffffff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Base do Lenis Smooth Scroll */
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; }

/* Física do Skew (Inclinação) */
.skew-section {
  transform: skewY(-3deg);
  transform-origin: top left;
  overflow: hidden;
  scale: 1.05; 
}

.skew-content {
  transform: skewY(3deg);
}

/* Mesh Gradient Imersivo */
.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;
}

/* --- High-End Refinements --- */

/* Textura sutil para o Divisor Verde do Hero no Mobile */
#hero-divider-mask {
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
  mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
  mask-mode: alpha;
  /* Garante que o gradiente não fique com bordas duras */
  filter: blur(10px); 
}

@media (max-width: 768px) {
    /* Reforça o preenchimento do gradiente no mobile */
    #hero-divider-mask {
        filter: blur(5px);
        background-image: radial-gradient(
            circle 400px at 50% 100%, 
            rgba(13, 36, 24, 1) 0%, 
            rgba(13, 36, 24, 0.8) 40%, 
            transparent 80%
        );
    }
}

/* --- High-End Refinements --- */

/* Efeito Glow Respiratório para o Texto Dourado */
.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;
}

@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); 
  }
}

/* Textura sutil para o Divisor Verde do Hero no Mobile (caso ainda não tenha adicionado) */
#hero-divider-mask {
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
  mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
  mask-mode: alpha;
  filter: blur(10px); 
}

@media (max-width: 768px) {
    #hero-divider-mask {
        filter: blur(5px);
        background-image: radial-gradient(
            circle 400px at 50% 100%, 
            rgba(13, 36, 24, 1) 0%, 
            rgba(13, 36, 24, 0.8) 40%, 
            transparent 80%
        );
    }
}

/* --- Ativos Locais Customizados --- */

/* Textura sutil de fundo 'Stardust' LOCAL */
.texture-overlay {
  /* Aponta para a pasta assets/img/ */
  background-image: url('assets/img/stardust.png');
  background-repeat: repeat;
  /* Ajuste a opacidade aqui se preferir */
  opacity: 0.3; 
}

/* Responsividade para opacidade da textura (opcional) */
@media (min-width: 768px) {
    .texture-overlay {
        opacity: 0.4;
    }
}

/* --- Animações Nativas de Texto (High-End Reveal) --- */

/* Estado Inicial Oculto */
.headline-mask-reveal {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease-out;
}

.text-reveal-item {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease-out;
}

/* Estado Animado (Classe adicionada via JS) */
.is-animated .headline-mask-reveal {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.1s; /* Leve atraso para o título secundário aparecer antes */
}

.is-animated .text-reveal-item {
  transform: translateY(0);
  opacity: 1;
}

/* Atraso extra para o parágrafo final */
.is-animated .delay-last {
  transition-delay: 0.3s;
}

/* --- Bento Grid Cards & Animations (Section 4) --- */

.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;
  transform: translateY(40px);
  opacity: 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease-out, border-color 0.4s ease;
}

/* Interação de Hover suave */
.bento-card:hover {
  border-color: rgba(244, 187, 132, 0.3);
}

/* --- Luz Viva (Animated Spotlight) --- */
.bento-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at center, 
    rgba(244, 187, 132, 0.12) 0%, 
    transparent 50%
  );
  pointer-events: none;
  z-index: 0;
  /* Animação contínua e infinita */
  animation: floatLight 8s infinite alternate ease-in-out;
}

/* Inverte o movimento em cards pares para dar dinamismo e quebrar o padrão */
.bento-card:nth-child(even)::before {
  animation-duration: 10s;
  animation-direction: alternate-reverse;
}

/* A coreografia matemática do movimento da luz */
@keyframes floatLight {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(8%, 12%); }
  66%  { transform: translate(-8%, 5%); }
  100% { transform: translate(5%, -10%); }
}

/* Garante que os textos e ícones não sejam ofuscados */
.bento-card > * {
  position: relative;
  z-index: 1;
}

/* Gatilho da Animação de Entrada (Disparado pelo JS que já temos) */
.is-animated .bento-card,
.is-animated .text-reveal-item,
.is-animated .headline-mask-reveal {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--stagger) * 0.1s),
              opacity 0.8s ease-out calc(var(--stagger) * 0.1s);
}

.glow-emerald {
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
}

/* ==========================================================================
   SEÇÃO 5 (Filtro de Audiência) - EFEITO CINEMÁTICO 100% ATIVO (SEM HOVER)
   Visual Cinemático baseado em image_0.png
   ========================================================================== */

#section-5 {
  min-height: auto; /* Deixa o conteúdo ditar a altura */
}

/* Atmosfera de Fundo Imersiva (Red esq, Green dir - Full Width) */
.section-5-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #000;
  overflow: hidden;
}

/* Esfera Gigante de Luz Vermelha (Esquerda - Imersiva) */
.section-5-bg::before {
  content: "";
  position: absolute;
  top: 10%;
  left: -20%;
  width: 70%;
  height: 120%;
  background: radial-gradient(circle at center, rgba(127, 29, 29, 0.15) 0%, transparent 50%);
  border-radius: 50%;
  filter: blur(120px);
  animation: ambient-breathe-left 8s infinite alternate ease-in-out;
}

/* Esfera Gigante de Luz Verde (Direita - Imersiva) */
.section-5-bg::after {
  content: "";
  position: absolute;
  top: 10%;
  right: -20%;
  width: 70%;
  height: 120%;
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.15) 0%, transparent 50%);
  border-radius: 50%;
  filter: blur(120px);
  animation: ambient-breathe-right 10s infinite alternate-reverse ease-in-out;
}

/* A Divisória de Luz Dourada Central (Fixa e Brilhante) */
.glowing-divider {
  background: linear-gradient(to bottom, transparent, rgba(244, 187, 132, 0.8), transparent);
  box-shadow: 0 0 25px 2px rgba(244, 187, 132, 0.4);
}

/* --- PAINÉIS DE VIDRO (CLASSMorphism Master) --- */
.compare-block {
  overflow: hidden;
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* O Segredo do Vidro: Translucidez + Blur + Borda Fina */
.compare-block .skew-content {
  position: relative;
  background: rgba(255, 255, 255, 0.05); /* Translucidez branca sutil */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Borda fina */
  border-radius: 2rem;
  padding: 40px;
  overflow: hidden;
  backdrop-filter: blur(15px); /* Efeito Jateado */
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Garante que o texto fique acima do vidro e da luz */
.compare-block .skew-content > * {
  position: relative;
  z-index: 20;
}

/* --- Máscaras Visuais Abstratas (Cores Fortes, SEMPRE ATIVAS) --- */
.mask-image-x {
  background: radial-gradient(circle at center, transparent 20%, #000 60%),
              linear-gradient(45deg, transparent 46%, #7f1d1d 48%, #7f1d1d 52%, transparent 54%),
              linear-gradient(-45deg, transparent 46%, #7f1d1d 46.5%, #7f1d1d 49.5%, transparent 50%),
              radial-gradient(ellipse 70% 30% at center, rgba(127, 29, 29, 0.5) 0%, transparent 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 70% 30%, rgba(16, 185, 129, 0.3) 0%, transparent 50%),
              conic-gradient(from 120deg at 70% 30%, transparent, rgba(16, 185, 129, 0.4) 10%, rgba(16, 185, 129, 0.6) 20%, transparent),
              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;
}

/* --- Animações Pulsantes Independentes (Sempre Ativas) --- */
.active-pulse {
  animation: pulse-graphic 6s infinite alternate ease-in-out;
}

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

/* A coreografia matemática do movimento da luz ambiente */
@keyframes ambient-breathe-left {
  0% { transform: translateY(-50%) scale(0.9); opacity: 0.7; }
  100% { transform: translateY(-50%) scale(1.1); opacity: 1; }
}

@keyframes ambient-breathe-right {
  0% { transform: translateY(-50%) scale(0.9); opacity: 0.7; }
  100% { transform: translateY(-50%) scale(1.1); opacity: 1; }
}

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

/* Interação suave no Desktop (Apenas um leve destaque ao passar o mouse) */
@media (min-width: 1024px) {
  .premium-compare-group:hover .compare-block {
    opacity: 0.8; /* Suavizamos a opacidade para o texto não sumir */
    filter: blur(1px); /* Leve desfoque para focar no card sob hover */
  }
  
  .premium-compare-group .compare-block:hover {
    opacity: 1;
    filter: blur(0px);
    scale: 1.02;
    z-index: 40;
  }
}

.glow-emerald {
  text-shadow: 0 0 15px rgba(52, 211, 153, 0.6);
}

.shadow-emerald {
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.7));
}

/* ==========================================================================
   SEÇÃO 6 (A Jornada e Mentora) - EFEITOS DE ENTRADA PREMIUM
   ========================================================================== */

/* 1. Estado Inicial (Invisível e deslocado, esperando o scroll) */
.sec6-reveal-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.sec6-reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1s ease-out, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.sec6-reveal-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 2. O Gatilho (Quando a classe 'is-animated' entra em ação) */
#section-6.is-animated .sec6-reveal-up,
#section-6.is-animated .sec6-reveal-left,
#section-6.is-animated .sec6-reveal-scale {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* 3. A Coreografia em Cascata (Delays) */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.2s; } /* Foto da mentora (entra junto com o texto) */
.delay-5 { transition-delay: 0.4s; }
.delay-6 { transition-delay: 0.5s; }
.delay-7 { transition-delay: 0.6s; }
.delay-8 { transition-delay: 0.8s; } /* O botão CTA é o grande finale */

/* Brilho do Botão Dourado no Hover */
.shadow-gold-glow {
  box-shadow: 0 0 30px rgba(244, 187, 132, 0.6);
}

/* Trava de Segurança Final: Se por algum motivo extremo o JS falhar, revela tudo após 2.5s */
@keyframes emergency-reveal {
  to { opacity: 1; transform: translate(0) scale(1); }
}

.sec6-reveal-up, .sec6-reveal-left, .sec6-reveal-scale {
  animation: emergency-reveal 0.5s ease-out 2.5s forwards;
}

/* ==========================================================================
   SEÇÃO 7 (Resultados Esperados) - GLASS CARDS & GOLDEN STATEMENT
   ========================================================================== */

/* Design dos Cards de Resultado */
.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, background 0.4s ease;
}

.result-card:hover {
  transform: translateY(-5px);
  border-color: rgba(244, 187, 132, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

/* Brilhos (Glows) */
.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); }

/* --- Coreografia de Entrada (CSS Puro & Blindado) --- */
.sec7-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Quando o JS adiciona 'is-animated' */
#section-7.is-animated .sec7-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Delays da Cascata */
#section-7.is-animated .delay-1 { transition-delay: 0.1s; }
#section-7.is-animated .delay-2 { transition-delay: 0.2s; }
#section-7.is-animated .delay-3 { transition-delay: 0.3s; }
#section-7.is-animated .delay-4 { transition-delay: 0.4s; }
#section-7.is-animated .delay-5 { transition-delay: 0.5s; }
#section-7.is-animated .delay-6 { transition-delay: 0.6s; }
#section-7.is-animated .delay-7 { transition-delay: 0.7s; }
#section-7.is-animated .delay-8 { transition-delay: 0.9s; } /* Frase final entra por último */

/* Trava de Segurança (Visível em 2.5s se JS falhar) */
@keyframes force-sec7 { to { opacity: 1; transform: translateY(0); } }
.sec7-reveal { animation: force-sec7 0.5s ease-out 2.5s forwards; }

/* ==========================================================================
   ANIMAÇÕES DE ENTRADA (SEÇÕES 6 E 7)
   ========================================================================== */

/* Estado Inicial Comum */
.sec6-reveal-up, .sec6-reveal-left, .sec6-reveal-scale, .sec7-reveal {
  opacity: 0;
  will-change: transform, opacity;
}

.sec6-reveal-up, .sec7-reveal { transform: translateY(40px); }
.sec6-reveal-left { transform: translateX(-40px); }
.sec6-reveal-scale { transform: scale(0.9); }

/* Gatilho de Ativação (Quando a seção entra na tela) */
.is-animated .sec6-reveal-up,
.is-animated .sec6-reveal-left,
.is-animated .sec6-reveal-scale,
.is-animated .sec7-reveal {
  opacity: 1;
  transform: translate(0) scale(1);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Delays para o efeito cascata (Stagger) */
.is-animated .delay-1 { transition-delay: 0.1s; }
.is-animated .delay-2 { transition-delay: 0.2s; }
.is-animated .delay-3 { transition-delay: 0.3s; }
.is-animated .delay-4 { transition-delay: 0.4s; }
.is-animated .delay-5 { transition-delay: 0.5s; }
.is-animated .delay-6 { transition-delay: 0.6s; }
.is-animated .delay-7 { transition-delay: 0.7s; }
.is-animated .delay-8 { transition-delay: 0.8s; }

/* Efeito extra nos cards da Seção 7 (entrada sutilmente mais lenta) */
.result-card {
  transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

/* --- Ajustes Seção 8 (Física de Distância e Movimento) --- */

/* Linhas de luz que se adaptam ao tamanho da tela */
#section-8.is-animated .sec8-line-top,
#section-8.is-animated .sec8-line-bottom {
  opacity: 1;
  transition: height 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

/* No Mobile: Linhas curtas para não ocupar espaço */
.sec8-line-top, .sec8-line-bottom {
  height: 0px;
  width: 1px;
}

#section-8.is-animated .sec8-line-top,
#section-8.is-animated .sec8-line-bottom {
  height: 40px; /* Curta no mobile */
}

/* No Desktop: Linhas elegantes e longas */
@media (min-width: 768px) {
  #section-8.is-animated .sec8-line-top,
  #section-8.is-animated .sec8-line-bottom {
    height: 100px;
  }
}

/* Efeito de Entrada (Texto Desembaçando e Subindo) */
.sec8-text-up {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(10px);
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.is-animated .sec8-text-up {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* Delays para cascata */
.is-animated .delay-1 { transition-delay: 0.2s; }
.is-animated .delay-2 { transition-delay: 0.4s; }
.is-animated .delay-3 { transition-delay: 0.6s; }
.is-animated .delay-4 { transition-delay: 0.8s; }

/* ==========================================================================
   SEÇÃO 9 (O Que Te Espera) - COREOGRAFIA PREMIUM
   ========================================================================== */

/* 1. Estados Iniciais (Escondidos) */
.sec9-card-reveal {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.sec9-icon-pop {
  opacity: 0;
  transform: scale(0.5); /* Começa pequeno */
  will-change: transform, opacity;
  /* Curva de mola/elástico premium (Apple style) */
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sec9-text-reveal {
  opacity: 0;
  transform: translateX(15px); /* Deslocamento leve para o lado */
  filter: blur(5px); /* Começa desfocado */
  will-change: transform, opacity, filter;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Gatilhos de Ativação (Quando #section-9 ganha .is-animated) */
#section-9.is-animated .sec9-card-reveal,
#section-9.is-animated .sec9-icon-pop,
#section-9.is-animated .sec9-text-reveal {
  opacity: 1;
  transform: translate(0) scale(1);
  filter: blur(0px);
}

/* 3. A Coreografia de Delays (Efeito Cascata Controlado) */

/* Delays dos Cards (O contêiner sobe primeiro) */
#section-9.is-animated .delay-card-1 { transition-delay: 0.2s; }
#section-9.is-animated .delay-card-2 { transition-delay: 0.35s; }
#section-9.is-animated .delay-card-3 { transition-delay: 0.5s; }
#section-9.is-animated .delay-card-4 { transition-delay: 0.65s; }

/* Delays dos Ícones (Pop-in acontece logo após o card começar a subir) */
#section-9.is-animated .delay-icon-1 { transition-delay: 0.4s; }
#section-9.is-animated .delay-icon-2 { transition-delay: 0.55s; }
#section-9.is-animated .delay-icon-3 { transition-delay: 0.7s; }
#section-9.is-animated .delay-icon-4 { transition-delay: 0.85s; }

/* Delays dos Textos (Aparecem por último para fechar a composição) */
#section-9.is-animated .delay-text-1 { transition-delay: 0.6s; }
#section-9.is-animated .delay-text-2 { transition-delay: 0.75s; }
#section-9.is-animated .delay-text-3 { transition-delay: 0.9s; }
#section-9.is-animated .delay-text-4 { transition-delay: 1.05s; }

/* ==========================================================================
   SEÇÃO 10 (Fechamento e CTA)
   ========================================================================== */

/* Entrada Suave dos Textos */
.sec10-reveal {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

#section-10.is-animated .sec10-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Coreografia / Delays */
#section-10.is-animated .delay-1 { transition-delay: 0.1s; }
#section-10.is-animated .delay-2 { transition-delay: 0.3s; }
#section-10.is-animated .delay-3 { transition-delay: 0.5s; }
#section-10.is-animated .delay-4 { transition-delay: 0.7s; }
#section-10.is-animated .delay-5 { transition-delay: 0.9s; }

/* Efeito Shine no Botão (Raio de luz passando) */
@keyframes shine {
  100% { left: 200%; }
}

.animate-shine {
  animation: shine 1.5s ease-out infinite;
}

/* ==========================================================================
   ANIMAÇÕES DA FAIXA GLOBAL DE URGÊNCIA (TICKER)
   ========================================================================== */

/* Movimento contínuo do texto para a esquerda */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
}

.animate-marquee {
  animation: marquee 30s linear infinite;
  width: max-content;
}

/* Brilho metálico deslizando no fundo dourado */
@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;
}