/* ============================================================
   LOTUS — premium.css
   Camada premium estilo Apple: reveals suaves no scroll,
   parallax, escala progressiva, cursor bolinha.
   SEM tema escuro. Carregado depois do style.css.
   Tudo respeita prefers-reduced-motion.
============================================================ */

/* ------------------------------------------------------------
   ÍCONES SVG (substituem os PNGs)
------------------------------------------------------------ */
.solucao-icon-svg {
  width: 52px;
  height: 52px;
  display: block;
}
.conteudo-icon-svg {
  width: 38px;
  height: 38px;
  display: block;
}
.step-icon-svg {
  width: 56px;
  height: 56px;
  display: block;
  margin: 1rem auto 0.75rem;
}

/* Traço do ícone "desenha" levemente ao entrar */
.metodo-step.fx-in .step-icon-svg,
.solucao-card.fx-in .solucao-icon-svg {
  animation: icon-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes icon-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}


/* ------------------------------------------------------------
   REVEAL ESTILO APPLE
   Sobe + fade + leve escala. Easing suave. Reversível.
------------------------------------------------------------ */
.fx {
  opacity: 0;
  transform: translateY(48px) scale(0.98);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.fx.fx-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Variações de direção */
.fx-from-left  { transform: translateX(-60px); }
.fx-from-right { transform: translateX(60px); }
.fx-from-left.fx-in,
.fx-from-right.fx-in { transform: translateX(0); }

/* Escala dramática (para imagens/hero) */
.fx-scale { transform: scale(1.08); opacity: 0; }
.fx-scale.fx-in { transform: scale(1); opacity: 1; }


/* ------------------------------------------------------------
   TÍTULO DO HERO — palavras sobem com clip (estilo Apple)
------------------------------------------------------------ */
.fx-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;     /* evita corte de descendentes (g, ç) */
}
.fx-word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.fx-word.fx-in { transform: translateY(0); }


/* ------------------------------------------------------------
   CURSOR BOLINHA
------------------------------------------------------------ */
.fx-cursor-dot,
.fx-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
}
.fx-cursor-dot {
  width: 7px; height: 7px;
  background: #E87722;
  transform: translate(-50%, -50%);
}
.fx-cursor-ring {
  width: 32px; height: 32px;
  border: 1.5px solid rgba(232,119,34,0.5);
  transform: translate(-50%, -50%);
  transition: width 0.28s ease, height 0.28s ease,
              background 0.28s ease, border-color 0.28s ease;
}
.fx-cursor-ring.hover {
  width: 56px; height: 56px;
  background: rgba(232,119,34,0.08);
  border-color: rgba(232,119,34,0.8);
}
@media (hover: none) {
  .fx-cursor-dot, .fx-cursor-ring { display: none !important; }
}


/* ------------------------------------------------------------
   PROGRESS BAR DE LEITURA (premium, mais fina e elegante)
   (a do effects.js é mantida; aqui só refinamos visual)
------------------------------------------------------------ */
.reading-progress {
  height: 2px !important;
  background: #E87722 !important;
}


/* ------------------------------------------------------------
   BOTÃO VOLTAR AO TOPO
------------------------------------------------------------ */
.fx-top {
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #1B3A6B;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  transition: opacity 0.4s, transform 0.4s, background 0.2s;
  z-index: 900;
  box-shadow: 0 6px 20px rgba(27,58,107,0.3);
}
.fx-top.show { opacity: 1; transform: translateY(0) scale(1); }
.fx-top:hover { background: #E87722; }
.fx-top svg { width: 20px; height: 20px; }


/* ------------------------------------------------------------
   RIPPLE NO CLIQUE
------------------------------------------------------------ */
.fx-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.4);
  pointer-events: none;
  animation: ripple-out 0.6s ease-out forwards;
}
@keyframes ripple-out {
  to { transform: scale(3); opacity: 0; }
}


/* ------------------------------------------------------------
   LINK UNDERLINE ANIMADO no nav
------------------------------------------------------------ */
.nav-links a { position: relative; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: #E87722;
  transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }


/* ------------------------------------------------------------
   NEUTRALIZA a animação antiga .animate-icon do style.css
   No premium, quem controla a entrada é a classe .fx
------------------------------------------------------------ */
.animate-icon {
  opacity: 1 !important;
  transform: none !important;
}


/* ------------------------------------------------------------
   REDUCED MOTION — desliga tudo
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fx, .fx-word, .fx-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .fx-cursor-dot, .fx-cursor-ring { display: none !important; }
  .metodo-step.fx-in .step-icon-svg,
  .solucao-card.fx-in .solucao-icon-svg { animation: none !important; }
}