/* =========================================================
   ÉVORA PIPE — MOTION LAYER (landing)
   Camada aditiva: animações, micro-interações e polish.
   Não altera layout nem funcionalidade — apenas movimento.
   ========================================================= */

/* ---------- Barra de progresso de rolagem ---------- */
.scroll-progress{
  position: fixed; top:0; left:0; height:3px; width:100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-flow);
  z-index: 300; pointer-events:none;
  will-change: transform;
}

/* ---------- Navbar: esconde ao rolar para baixo ---------- */
.navbar{
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              background .3s ease, box-shadow .3s ease,
              backdrop-filter .3s ease;
  will-change: transform;
}
.navbar.nav-hidden{ transform: translateY(-110%); }
.navbar.is-scrolled{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 30px rgba(15,23,41,.08);
}
.navbar__nav a{ position: relative; }
.navbar__nav a::after{
  content:""; position:absolute; left:0; bottom:-4px;
  width:100%; height:2px; border-radius:2px;
  background: var(--grad-flow);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.navbar__nav a:hover::after,
.navbar__nav a:focus-visible::after{ transform: scaleX(1); }

/* ---------- Hero: entrada orquestrada ---------- */
@keyframes heroRise{
  from{ opacity:0; transform: translateY(26px); }
  to  { opacity:1; transform: translateY(0); }
}
@keyframes heroPop{
  0%  { opacity:0; transform: translateY(18px) scale(.94); }
  70% { opacity:1; transform: translateY(-3px) scale(1.01); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
.hero__copy .eyebrow        { animation: heroRise .7s cubic-bezier(.22,.61,.36,1) .05s both; }
.hero__copy h1              { animation: heroRise .8s cubic-bezier(.22,.61,.36,1) .15s both; }
.hero__copy .hero__subtitle { animation: heroRise .8s cubic-bezier(.22,.61,.36,1) .28s both; }
.hero__copy .hero__value-chip{ animation: heroPop .7s cubic-bezier(.22,.61,.36,1) .42s both; }
.hero__copy .hero__cta      { animation: heroRise .8s cubic-bezier(.22,.61,.36,1) .52s both; }
.hero__copy .hero__proof    { animation: heroRise .8s cubic-bezier(.22,.61,.36,1) .64s both; }
.hero__visual .device-mock  { animation: heroPop 1s cubic-bezier(.22,.61,.36,1) .35s both; }
.hero__visual .float-card--stat  { animation: heroPop .8s cubic-bezier(.22,.61,.36,1) .9s both; }
.hero__visual .float-card--social{ animation: heroPop .8s cubic-bezier(.22,.61,.36,1) 1.05s both; }

/* Orbes ambientes flutuando atrás do hero */
.hero{ position: relative; overflow: hidden; }
.hero-orb{
  position:absolute; border-radius:50%; pointer-events:none;
  filter: blur(70px); opacity:.5; z-index:0;
  animation: orbDrift 16s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-orb--1{ width:420px; height:420px; top:-120px; left:-100px;
  background: radial-gradient(circle, rgba(47,111,237,.35), transparent 70%); }
.hero-orb--2{ width:360px; height:360px; top:10%; right:-120px;
  background: radial-gradient(circle, rgba(124,58,237,.30), transparent 70%);
  animation-duration: 20s; animation-delay:-6s; }
.hero-orb--3{ width:300px; height:300px; bottom:-120px; left:35%;
  background: radial-gradient(circle, rgba(236,72,153,.22), transparent 70%);
  animation-duration: 24s; animation-delay:-12s; }
@keyframes orbDrift{
  from{ transform: translate3d(0,0,0) scale(1); }
  to  { transform: translate3d(50px,-38px,0) scale(1.12); }
}
.hero .container{ position: relative; z-index:1; }

/* Device mock: tilt 3D suave (controlado por JS) */
.hero__visual{ perspective: 1200px; }
.device-mock{
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.device-mock:hover{ box-shadow: 0 32px 70px rgba(15,23,41,.22); }

/* Float cards com leve flutuação contínua */
@keyframes floatIdle{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-8px); }
}
.float-card--stat  { animation: heroPop .8s cubic-bezier(.22,.61,.36,1) .9s both,
                       floatIdle 6s ease-in-out 2s infinite; }
.float-card--social{ animation: heroPop .8s cubic-bezier(.22,.61,.36,1) 1.05s both,
                       floatIdle 7s ease-in-out 2.4s infinite; }

/* ---------- Reveal on scroll (aplicado via JS) ---------- */
.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal--left { transform: translateX(-36px); }
.reveal--right{ transform: translateX(36px); }
.reveal--scale{ transform: translateY(18px) scale(.96); }
.reveal.is-visible{ opacity:1; transform: none; }

/* ---------- Botões: brilho + elevação ---------- */
.btn{
  position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              box-shadow .25s ease, background .25s ease,
              border-color .25s ease, color .25s ease;
  will-change: transform;
}
.btn--primary::before{
  content:""; position:absolute; top:0; left:-80%;
  width:50%; height:100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events:none;
}
.btn--primary:hover::before{ left: 130%; }
.btn--primary:hover,
.btn--outline:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(47,111,237,.30);
}
.btn:active{ transform: translateY(0) scale(.98); }

/* ---------- Marquee: pausa ao passar o mouse ---------- */
.screenshot-marquee:hover .screenshot-marquee__track{ animation-play-state: paused; }
.screenshot-marquee__item{ transition: transform .35s ease, box-shadow .35s ease; }
.screenshot-marquee__item:hover{ transform: scale(1.03); z-index:2; }

/* ---------- Showcase: vídeos com hover + moldura viva ---------- */
.showcase-row__video{
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
  will-change: transform;
}
.showcase-row__video:hover{
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 26px 60px rgba(15,23,41,.18);
}

/* ---------- Feature cards ---------- */
.feature-card{
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}
.feature-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 48px rgba(15,23,41,.14);
}
.feature-card__icon{ transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.feature-card:hover .feature-card__icon{ transform: translateY(-4px) scale(1.1) rotate(-4deg); }

/* ---------- Depoimentos ---------- */
.testimonials__track:hover{ animation-play-state: paused; }
.testimonial-card{ transition: transform .35s ease, box-shadow .35s ease; }
.testimonial-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15,23,41,.12); }

/* ---------- Planos ---------- */
.pricing__grid > *{
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.pricing__grid > *:hover{
  transform: translateY(-10px);
  box-shadow: 0 28px 60px rgba(15,23,41,.16);
}
@keyframes featuredGlow{
  0%,100%{ box-shadow: 0 20px 48px rgba(47,111,237,.20); }
  50%    { box-shadow: 0 24px 60px rgba(124,58,237,.30); }
}
.pricing-card--featured,
.plan-card--featured,
.pricing__grid .is-featured{ animation: featuredGlow 4s ease-in-out infinite; }

/* Switch de cobrança com mola */
.switch__thumb{ transition: transform .35s cubic-bezier(.34,1.56,.64,1) !important; }

/* ---------- FAQ: abertura suave ---------- */
.accordion-item__icon{ transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.accordion-item.is-open .accordion-item__icon{ transform: rotate(45deg); }

/* ---------- CTA final: gradiente vivo ---------- */
.final-cta{ position: relative; overflow:hidden; }
.final-cta::before{
  content:""; position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 20% 30%, rgba(47,111,237,.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(236,72,153,.14), transparent 40%),
    radial-gradient(circle at 60% 20%, rgba(124,58,237,.14), transparent 40%);
  animation: ctaFlow 14s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes ctaFlow{
  from{ transform: rotate(0deg) scale(1); }
  to  { transform: rotate(8deg) scale(1.15); }
}
.final-cta__inner{ position:relative; z-index:1; }

/* ---------- Texto gradiente animado ---------- */
.text-gradient{
  background-size: 220% 220%;
  animation: gradSlide 6s ease-in-out infinite alternate;
}
@keyframes gradSlide{
  from{ background-position: 0% 50%; }
  to  { background-position: 100% 50%; }
}

/* ---------- Acessibilidade ---------- */
:focus-visible{
  outline: 3px solid rgba(47,111,237,.55);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Reduced motion: desliga tudo ---------- */
@media (prefers-reduced-motion: reduce){
  .scroll-progress,
  .hero-orb{ display:none; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero__copy > *,
  .hero__visual > *,
  .float-card--stat,
  .float-card--social,
  .device-mock,
  .text-gradient,
  .final-cta::before,
  .pricing-card--featured,
  .plan-card--featured{
    animation: none !important;
  }
  .navbar,
  .btn,
  .feature-card,
  .testimonial-card,
  .showcase-row__video{ transition: none !important; }
}

/* ---------- Responsividade extra ---------- */
@media (max-width: 640px){
  .hero-orb--1{ width:260px; height:260px; }
  .hero-orb--2,
  .hero-orb--3{ display:none; }
  .btn--primary:hover,
  .btn--outline:hover,
  .feature-card:hover,
  .pricing__grid > *:hover{ transform:none; }
}