/* ============================================================
   LOTUS — reactbits.css
   Efeitos inspirados no reactbits.dev, recriados em CSS/JS puro:
   SplitText, BlurText, ShinyText, GradientText, ClickSpark,
   StarBorder, ScrollReveal. Mais gradientes sutis por seção.
   Carregado depois de style.css e premium.css.
============================================================ */

/* ============================================================
   GRADIENTES SUTIS POR SEÇÃO
   Mesmo em branco/off-white, cada seção ganha um leve banho
   de cor radial nos cantos — quase imperceptível, mas dá vida.
============================================================ */
#hero {
  background:
    radial-gradient(circle at 12% 18%, rgba(46,127,204,0.06), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(232,119,34,0.05), transparent 45%),
    #FCFAF8 !important;
}
.section-tese {
  background:
    radial-gradient(circle at 85% 15%, rgba(232,195,74,0.07), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(27,58,107,0.04), transparent 45%),
    #F8F5F1 !important;
}
.section-antes-depois {
  background:
    radial-gradient(circle at 50% 0%, rgba(46,127,204,0.05), transparent 50%),
    #FCFAF8 !important;
}
.section-metodo {
  background:
    radial-gradient(circle at 15% 20%, rgba(232,119,34,0.05), transparent 40%),
    radial-gradient(circle at 90% 85%, rgba(46,127,204,0.05), transparent 42%),
    #F8F5F1 !important;
}
.section-solucoes {
  background:
    radial-gradient(circle at 80% 10%, rgba(27,58,107,0.05), transparent 45%),
    radial-gradient(circle at 5% 95%, rgba(232,195,74,0.06), transparent 40%),
    #FCFAF8 !important;
}
.section-porque {
  background:
    radial-gradient(circle at 50% 100%, rgba(46,127,204,0.06), transparent 50%),
    #F8F5F1 !important;
}
.section-cta {
  background:
    radial-gradient(circle at 20% 50%, rgba(232,119,34,0.06), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(46,127,204,0.06), transparent 45%),
    #F8F5F1 !important;
}


/* ============================================================
   SPLIT TEXT (reactbits) — palavras sobem por máscara
   Reaproveita a estrutura .rb-word-wrap / .rb-word
============================================================ */
.rb-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
}
.rb-word {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1),
              opacity 0.8s cubic-bezier(0.16,1,0.3,1);
}
.rb-word.rb-in { transform: translateY(0); opacity: 1; }


/* ============================================================
   BLUR TEXT (reactbits) — fade com blur-to-focus por palavra
============================================================ */
.rb-blur-word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(12px);
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
}
.rb-blur-word.rb-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}


/* ============================================================
   SCROLL REVEAL (reactbits) — bloco de texto sobe e clareia
   conforme entra na viewport. É o efeito principal pedido.
============================================================ */
.rb-reveal {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(4px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1),
              filter 0.8s ease;
  will-change: opacity, transform, filter;
}
.rb-reveal.rb-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}


/* ============================================================
   SHINY TEXT (reactbits) — varredura metálica nos CTAs
============================================================ */
.rb-shiny {
  position: relative;
  overflow: hidden;
}
.rb-shiny::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255,255,255,0.45) 50%,
    transparent 80%
  );
  transform: skewX(-18deg);
  animation: rb-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rb-shine {
  0%   { left: -120%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}


/* ============================================================
   GRADIENT TEXT (reactbits) — gradiente animado nos kickers
============================================================ */
.rb-gradient-text {
  background: linear-gradient(90deg, #E87722, #E8C34A, #2E7FCC, #E87722);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rb-gradient-move 6s linear infinite;
}
@keyframes rb-gradient-move {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}


/* ============================================================
   STAR BORDER (reactbits) — borda animada nos cards no hover
============================================================ */
.solucao-card {
  position: relative;
  isolation: isolate;
}
.solucao-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  padding: 1.5px;
  background: conic-gradient(
    from var(--rb-angle, 0deg),
    transparent 0deg,
    #E87722 60deg,
    #E8C34A 120deg,
    #2E7FCC 180deg,
    transparent 240deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}
.solucao-card:hover::before {
  opacity: 1;
  animation: rb-rotate-border 2.5s linear infinite;
}
@property --rb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rb-rotate-border {
  to { --rb-angle: 360deg; }
}

/* Hover refinado nos cards (lift + sombra colorida) */
.solucao-card {
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.35s ease;
}
.solucao-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(27,58,107,0.14);
}
/* O ícone do card "pulsa" no hover */
.solucao-card:hover .solucao-icon-svg {
  animation: rb-icon-bounce 0.6s ease;
}
@keyframes rb-icon-bounce {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-6px) scale(1.08); }
}


/* ============================================================
   HOVER nos itens de conteúdo (stroke + lift)
============================================================ */
.conteudo-item {
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.conteudo-item:hover {
  transform: translateY(-5px);
  border-color: #E87722;
  box-shadow: 0 10px 24px rgba(232,119,34,0.12);
}
.conteudo-item:hover .conteudo-icon-svg {
  stroke: #E87722;
  transition: stroke 0.3s ease;
}

/* Hover nos passos do método */
.metodo-step {
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.metodo-step:hover {
  transform: translateY(-6px);
}
.metodo-step:hover .step-num {
  transform: scale(1.15);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.step-num { transition: transform 0.3s ease; }


/* ============================================================
   STROKE ON CLICK (boxes ganham contorno momentâneo)
============================================================ */
.rb-clicked {
  animation: rb-stroke-pulse 0.5s ease;
}
@keyframes rb-stroke-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,119,34,0.5); }
  100% { box-shadow: 0 0 0 12px rgba(232,119,34,0); }
}


/* ============================================================
   HOVER NOS TEXTOS — leve aumento ao passar o mouse
   Aplicado em títulos e itens de texto. Sutil e elegante.
============================================================ */

/* Títulos e blocos (já são block/flex — scale funciona direto) */
.tese-title,
.porque-title,
.cta-title,
.solucao-title,
.step-title,
.antes-title,
.depois-title,
.tese-method-title,
.antes-list li,
.depois-list li,
.porque-list li,
.hero-subtitle,
.footer-form-title {
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
              color 0.3s ease;
  transform-origin: left center;
}

/* Links do footer são inline → precisam de inline-block p/ escalar */
.footer-col a {
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
              color 0.3s ease;
  transform-origin: left center;
  display: inline-block;
}

.tese-title:hover,
.porque-title:hover,
.cta-title:hover,
.solucao-title:hover,
.step-title:hover,
.antes-title:hover,
.depois-title:hover,
.tese-method-title:hover,
.hero-subtitle:hover {
  transform: scale(1.04);
}

/* Itens de lista: aumenta e desloca levemente */
.antes-list li:hover,
.depois-list li:hover,
.porque-list li:hover {
  transform: scale(1.04) translateX(4px);
  color: #1B3A6B;
}

/* Links do footer */
.footer-col a:hover {
  transform: scale(1.06);
}

/* Step title centralizado: origem no centro */
.step-title,
.solucao-title { transform-origin: center; }
.solucao-title { transform-origin: left center; }


/* ============================================================
   TOUCH / MOBILE — desliga hovers que não fazem sentido
   e previne overflow horizontal causado por scale.
============================================================ */
@media (hover: none) {
  .tese-title:hover, .porque-title:hover, .cta-title:hover,
  .solucao-title:hover, .step-title:hover, .antes-title:hover,
  .depois-title:hover, .tese-method-title:hover, .hero-subtitle:hover,
  .antes-list li:hover, .depois-list li:hover, .porque-list li:hover,
  .footer-col a:hover,
  .conteudo-item:hover, .solucao-card:hover, .metodo-step:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .solucao-card:hover::before { opacity: 0 !important; }
}

/* Evita scroll horizontal em qualquer cenário */
html, body { overflow-x: hidden; max-width: 100%; }


/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rb-word, .rb-blur-word, .rb-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .rb-shiny::before,
  .rb-gradient-text,
  .solucao-card:hover::before { animation: none !important; }

  /* desliga o scale no hover dos textos */
  .tese-title:hover, .porque-title:hover, .cta-title:hover,
  .solucao-title:hover, .step-title:hover, .antes-title:hover,
  .depois-title:hover, .tese-method-title:hover, .hero-subtitle:hover,
  .antes-list li:hover, .depois-list li:hover, .porque-list li:hover,
  .footer-col a:hover { transform: none !important; }
}