/* ==================================================================
   Animações da home da Polarium — reescritas em CSS puro.
   Reconstruídas a partir do site original; sem React, sem Framer.
   ================================================================== */

/* ---------- 1. Revelação letra a letra (na carga da página) ------- */
.pl-letra{
  display:inline-block;
  opacity:0;
  transform:translateY(0.34em);
  animation:pl-entra .55s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:var(--atraso,0ms);
}
@keyframes pl-entra{
  to{opacity:1;transform:translateY(0);}
}

/* ---------- 2. Revelação ao rolar (cards do bento grid) ----------- */
.pl-revela{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
.pl-revela.pl-visivel{
  opacity:1;
  transform:none;
}

/* ---------- 3. Esteiras em loop (depoimentos e logos) ------------- */
.pl-esteira{
  width:max-content;
  animation:pl-desliza var(--duracao,40s) linear infinite;
}
.pl-esteira:hover{
  animation-play-state:paused;
}
@keyframes pl-desliza{
  from{transform:translateX(0);}
  to  {transform:translateX(-50%);}
}

/* ---------- 4. Blobs flutuantes da seção de depoimentos ----------
   Três manchas de fundo que giram e flutuam lentamente, em loop.
   Valores capturados do site original (duração 6.667s, linear).     */
.pl-blob{
  animation-duration:6.667s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}
.pl-blob-1{animation-name:pl-flutua-1;}
.pl-blob-2{animation-name:pl-flutua-2;}
.pl-blob-3{animation-name:pl-flutua-3;}
@keyframes pl-flutua-1{
  0%{transform:translate(0%) scale(1) rotate(0deg);}
  25%{transform:translate(15%,10%) scale(1.2) rotate(5deg);}
  50%{transform:translate(-10%,15%) scale(0.8) rotate(-3deg);}
  75%{transform:translate(8%,-8%) scale(1.1) rotate(8deg);}
  100%{transform:translate(0%) scale(1) rotate(0deg);}
}
@keyframes pl-flutua-2{
  0%{transform:translate(0%) scale(1) rotate(0deg) skewX(0deg);}
  25%{transform:translate(-12%,12%) scale(0.85) rotate(-6deg) skewX(2deg);}
  50%{transform:translate(12%,-10%) scale(1.15) rotate(4deg) skewX(-3deg);}
  75%{transform:translate(-5%,5%) scale(0.95) rotate(-2deg) skewX(1deg);}
  100%{transform:translate(0%) scale(1) rotate(0deg) skewX(0deg);}
}
@keyframes pl-flutua-3{
  0%{transform:translate(0%) scale(1) rotate(0deg) skewY(0deg);}
  25%{transform:translate(10%,-12%) scale(1.25) rotate(7deg) skewY(-2deg);}
  50%{transform:translate(-15%,8%) scale(0.75) rotate(-5deg) skewY(3deg);}
  75%{transform:translate(5%,10%) scale(1.05) rotate(3deg) skewY(-1deg);}
  100%{transform:translate(0%) scale(1) rotate(0deg) skewY(0deg);}
}

/* ---------- 5. Texto que acende no scroll ------------------------
   Bloco "Aprenda a investir...": as palavras vão do escuro ao claro
   conforme entram na tela. Capturado do original:
   escuro rgb(31,44,56) -> claro rgb(223,240,254).                    */
[data-acende] .pl-acende{
  color:rgb(31,44,56);
  transition:color .5s ease;
}
[data-acende] .pl-acende.pl-aceso{
  color:rgb(223,240,254);
}

/* ---------- 6. Brilho girando na borda do selo ------------------
   O ponto de luz vive num ::before que gira com rotate() contínuo —
   o navegador interpola sem saltos. O miolo escuro do selo cobre o
   centro, deixando só a borda acesa. */
.pl-brilho-anel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.pl-brilho-anel::before{
  content:"";
  position:absolute;
  inset:-60%;
  z-index:0;
  background:radial-gradient(circle at 50% 88%,
    #ffffff 0%,
    #0087ff 20%,
    rgba(0,135,255,.12) 40%,
    transparent 58%);
  animation:pl-brilho-gira 4s linear infinite;
}
.pl-brilho-anel > *{
  position:relative;
  z-index:1;
}
@keyframes pl-brilho-gira{
  from{transform:rotate(0deg);}
  to  {transform:rotate(360deg);}
}

/* ---------- 7. Ícone do selo girando com pulso ------------------ */
.pl-gira{
  animation:pl-roda 3.2s ease-in-out infinite;
}
@keyframes pl-roda{
  0%{transform:rotate(0deg) scale(1);}
  25%{transform:rotate(90deg) scale(1.18);}
  50%{transform:rotate(180deg) scale(1);}
  75%{transform:rotate(270deg) scale(1.12);}
  100%{transform:rotate(360deg) scale(1);}
}

/* ---------- 8. Barra do topo: seta pulsando --------------------- */
[data-rotativo] .pl-seta{
  animation:pl-seta-desliza 1.1s ease-in-out infinite;
}
@keyframes pl-seta-desliza{
  0%,100%{transform:translateX(0);opacity:.7;}
  50%{transform:translateX(4px);opacity:1;}
}
[data-rotativo] .pl-frase{
  transition:opacity .4s ease;
}

/* ---------- Acessibilidade ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pl-letra{animation:none;opacity:1;transform:none;}
  .pl-revela{opacity:1;transform:none;transition:none;}
  .pl-esteira,.pl-blob,.pl-brilho-anel::before,.pl-gira,[data-rotativo] .pl-seta{animation:none;}
  [data-acende] .pl-acende{color:rgb(223,240,254);transition:none;}
}