/* Camada de motion — Simplesmente Contábil (Envolve, 23/10/2026)
   Mesma linguagem dos sites Envolve / Dr. Saulo: palavra por palavra, palavra que gira,
   reveal com mola, marquee de logos, linha dourada, FAQ com mola, confete no CTA. */
:root{--sc-ease:cubic-bezier(.2,.8,.2,1);--sc-spring:cubic-bezier(.34,1.56,.64,1)}

@keyframes scUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes scZoom{from{opacity:0;transform:scale(.92) translateY(18px)}to{opacity:1;transform:none}}
@keyframes scFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes scSweep{from{background-size:0% .32em}to{background-size:100% .32em}}
@keyframes scShine{from{left:-60%}to{left:130%}}
@keyframes scGlow{0%,100%{box-shadow:0 12px 30px -10px #c99a3e99,0 0 0 0 #c99a3e55}50%{box-shadow:0 12px 30px -10px #c99a3e99,0 0 0 12px #c99a3e00}}
@keyframes scDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes scWord{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes scShow{to{opacity:1}}
@keyframes scPing{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(1.75);opacity:0}}
@keyframes scMarq{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:no-preference){
  /* cabeçalho entra e ganha vidro ao rolar */
  header{animation:scDown .7s var(--sc-ease) both;transition:box-shadow .35s,backdrop-filter .35s}
  html[data-sc-scrolled] header{box-shadow:0 10px 30px -18px #0b1d2b66;backdrop-filter:saturate(1.4) blur(10px)}

  /* 01 · hero: título palavra por palavra (o JS quebra as palavras; se o JS falhar, aparece sozinho) */
  .hero h1{opacity:0;animation:scShow .6s 2.2s forwards}
  .hero h1[data-sc-split]{opacity:1;animation:none}
  .sc-w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(10px);animation:scWord .9s var(--sc-ease) forwards;animation-delay:calc(var(--i) * .085s + .15s)}
  .hero .eyebrow,.hero .alert-pill{animation:scUp .8s .1s var(--sc-ease) both}
  .hero .lead{animation:scUp .9s .9s var(--sc-ease) both}
  .hero .hero-cta{animation:scZoom .8s 1.1s var(--sc-spring) both}
  .hero .trust-line{animation:scUp .9s 1.3s var(--sc-ease) both}
  .hero .sc-hero-figure{animation:scZoom 1.1s .35s var(--sc-spring) both}
  .hero .sc-hero-figure img{animation:scFloat 7s 1.6s ease-in-out infinite}
  .hero .hl{background-image:linear-gradient(90deg,#e2b85c55,#c99a3e55);background-repeat:no-repeat;background-position:0 88%;background-size:0% .32em;animation:scSweep 1.1s 1.5s var(--sc-ease) forwards}

  /* botões: brilho passando + mola */
  .btn,.nav-cta,.btn-gold{position:relative;overflow:hidden;transition:transform .35s var(--sc-spring),box-shadow .25s,filter .25s}
  .btn::after,.nav-cta::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffff66,transparent);transform:skewX(-20deg);pointer-events:none;opacity:0}
  .btn:hover,.nav-cta:hover{transform:translateY(-3px) scale(1.02)}
  .btn:active{transform:scale(.97)}
  .btn:hover::after,.nav-cta:hover::after{opacity:1;animation:scShine .8s ease}
  .cta .btn-gold,.hero .btn-gold{animation:scGlow 2.8s 2.4s ease-in-out infinite}

  /* cards sobem com mola */
  .path-card,.feat,.svc,.step,.stat,.risk,.inc,.persona,article.sc-gm,.sc-logo{transition:transform .45s var(--sc-spring),box-shadow .35s,border-color .35s}
  .path-card:hover,.feat:hover,.svc:hover,.step:hover,.risk:hover,.inc:hover,.persona:hover,article.sc-gm:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px #0b1d2b55;border-color:var(--gold-line)}
  .feat .ic,.svc .ic,.risk .ic,.inc .ic,.persona .ic,.path-card .ic{transition:transform .5s var(--sc-spring)}
  .feat:hover .ic,.svc:hover .ic,.risk:hover .ic,.inc:hover .ic,.persona:hover .ic,.path-card:hover .ic{transform:rotate(-10deg) scale(1.15)}
  .sc-figure img{transition:transform 1.2s var(--sc-ease)}
  .sc-figure:hover img{transform:scale(1.04)}

  /* FAQ: + gira com mola e a resposta desliza */
  summary:after{transition:transform .45s var(--sc-spring),color .3s!important}
  details.qa{transition:box-shadow .3s,border-color .3s}
  details.qa[open]{box-shadow:0 16px 32px -24px #0b1d2b55;border-color:var(--gold-line)}
  details.qa[open] > :not(summary){animation:scUp .5s var(--sc-ease) both}

  /* WhatsApp flutuante com anel pulsando */
  .wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;animation:scPing 2.4s ease-out infinite}
  .wa-float{transition:transform .35s var(--sc-spring)!important}
  .wa-float:hover{transform:scale(1.1)}

  /* linha dourada que costura os passos (desenhada pelo JS ao aparecer) */
  .steps{position:relative}
  .steps::before{content:"";position:absolute;left:4%;right:4%;top:-22px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold-2,#e2b85c) 12%,var(--gold,#c99a3e) 88%,transparent);transform-origin:0 50%;transform:scaleX(0)}
}
@media (max-width:760px){.steps::before{display:none}}

/* 02 · palavra que gira (pílula) */
.sc-rot{position:relative;display:inline-block;vertical-align:bottom;height:1.9em;line-height:1.9em;padding:0 .75em;margin-left:.35em;border-radius:999px;background:var(--gold-soft,#c99a3e1f);border:1px solid var(--gold-line,#c99a3e47);color:var(--gold-2,#e2b85c);overflow:hidden;white-space:nowrap;transition:width .55s var(--sc-spring)}
.sc-rot i{font-style:normal;position:absolute;left:.75em;top:0;transition:transform .55s var(--sc-spring),opacity .35s}
.sc-rot i.pre{transform:translateY(110%);opacity:0}
.sc-rot i.out{transform:translateY(-110%);opacity:0}
.sc-rot-wrap{display:inline-flex;align-items:center;flex-wrap:wrap;row-gap:6px}

/* marquee de clientes */
.sc-marq{margin-top:40px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.sc-marq-rail{display:flex;gap:18px;width:max-content;animation:scMarq 45s linear infinite}
.sc-marq:hover .sc-marq-rail{animation-play-state:paused}
.sc-marq .sc-logo{flex:none;width:220px;height:auto;min-height:150px}
.sc-marq .sc-logo:hover{transform:translateY(-6px) scale(1.04);border-color:var(--gold-line)}
@media (prefers-reduced-motion:reduce){.sc-marq-rail{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}

/* confete */
.sc-conf{position:fixed;width:9px;height:14px;border-radius:2px;pointer-events:none;z-index:100000}

/* barra de progresso de leitura */
#sc-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold-2,#e2b85c),var(--gold,#c99a3e));z-index:99999;pointer-events:none}
@media (prefers-reduced-motion:reduce){#sc-progress{display:none}}

/* links legais no rodapé */
.sc-legal-links a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sc-legal-links a:hover{color:var(--gold,#c99a3e)}
