/* =========================================================
   LineArt · camada de movimento
   Regras: só transform/opacity/clip-path, curvas fortes,
   hover só em mouse, reduced-motion = só opacidade.
   ========================================================= */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-arrive:cubic-bezier(.16,1,.3,1);
  interpolate-size:allow-keywords;
}

/* ---------- feedback de toque/clique ---------- */
.btn,.wa{
  transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,transform 160ms var(--ease-out);
}
.btn:active,.wa:active{transform:scale(.97)}
.checks label{transition:border-color 200ms ease,background-color 200ms ease,transform 160ms var(--ease-out)}
.checks label:active{transform:scale(.97)}
.vip-card,.serv,.tst{transition:border-color 250ms ease,background-color 250ms ease}

/* hover com movimento só em quem tem mouse (toque dispara hover falso) */
@media (hover:none),(pointer:coarse){
  .btn-gold:hover,.btn-dark:hover,.wa:hover{transform:none}
  .celeb:hover img{transform:none}
}
@media (hover:hover) and (pointer:fine){
  .btn:hover svg:last-child:not(:first-child){transform:translateX(3px)}
  .btn svg{transition:transform 200ms var(--ease-out)}
  .celeb img{transition:transform 900ms var(--ease-out)}
  .tst{transition:border-color 250ms ease,transform 250ms var(--ease-out)}
  .tst:hover{border-color:rgba(238,211,168,.4);transform:translateY(-3px)}
}

/* ---------- revelação ao rolar ----------
   Só ativa quando o JS marca <html class="motion">; sem JS tudo fica visível. */
.motion [data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity 800ms var(--ease-arrive),transform 800ms var(--ease-arrive);
  transition-delay:calc(var(--i,0) * 70ms);
}
.motion [data-reveal].in{opacity:1;transform:none}
/* fotos entram com máscara em vez de deslizar (o card fica, a foto é revelada) */
.motion [data-reveal="mask"]{opacity:1;transform:none}
.motion [data-reveal="mask"] figure{clip-path:inset(0 0 100% 0);transition:clip-path 1000ms var(--ease-in-out);transition-delay:calc(var(--i,0) * 70ms)}
.motion [data-reveal="mask"] img{transform:scale(1.12);transition:transform 1400ms var(--ease-arrive);transition-delay:calc(var(--i,0) * 70ms)}
.motion [data-reveal="mask"] figcaption{opacity:0;transform:translateY(10px);transition:opacity 700ms var(--ease-arrive),transform 700ms var(--ease-arrive);transition-delay:calc(var(--i,0) * 70ms + 350ms)}
.motion [data-reveal="mask"].in figure{clip-path:inset(0 0 0 0)}
.motion [data-reveal="mask"].in img,.motion [data-reveal="mask"].in figcaption{opacity:1;transform:none}

/* movimento reduzido: sem deslocamento, só um fade curto */
.motion-lite [data-reveal]{opacity:0;transition:opacity 300ms ease}
.motion-lite [data-reveal].in{opacity:1}

/* ---------- globo em linha (assinatura da marca) ---------- */
.globe-live .meridian{stroke-dasharray:1;stroke-dashoffset:1}
.globe-live.drawn .meridian{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1800ms var(--ease-in-out);
  transition-delay:calc(var(--m,0) * 140ms);
}
/* depois de desenhado, os meridianos "giram" devagar — só no hero */
.hero-mark.spin .spin-a{transform-box:fill-box;transform-origin:center;animation:turnA 14s var(--ease-in-out) infinite alternate}
.hero-mark.spin .spin-b{transform-box:fill-box;transform-origin:center;animation:turnB 14s var(--ease-in-out) infinite alternate}
.hero-mark.paused .spin-a,.hero-mark.paused .spin-b{animation-play-state:paused}
@keyframes turnA{from{transform:scaleX(1)}to{transform:scaleX(1.95)}}
@keyframes turnB{from{transform:scaleX(1)}to{transform:scaleX(.5)}}
.hero-mark{opacity:.11}

/* ---------- hero (home) ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise 900ms var(--ease-arrive) backwards}
  .hero-copy>*:nth-child(1){animation-delay:80ms}
  .hero-copy>*:nth-child(2){animation-delay:150ms}
  .hero-copy>*:nth-child(3){animation-delay:220ms}
  .hero-copy>*:nth-child(4){animation-delay:290ms}
  .hero-figure{animation:unmask 1200ms var(--ease-in-out) backwards 150ms}
  .hero-figure img{animation:settle 1800ms var(--ease-arrive) backwards 150ms}
  .hero-figure .figcap{animation:rise 700ms var(--ease-arrive) backwards 1000ms}
  @keyframes unmask{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes settle{from{transform:scale(1.14)}to{transform:none}}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  /* linhas das etapas se desenham em sequência */
  .motion .step[data-reveal]{border-top-color:transparent;position:relative}
  .motion .step[data-reveal]::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line-dark);
    transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--ease-in-out);transition-delay:calc(var(--i,0) * 160ms)}
  .motion .step[data-reveal].in::before{transform:none}

  /* faixa da frase: foto com leve parallax atrelado ao scroll */
  @supports (animation-timeline:view()){
    .band img{height:118%;top:-9%;animation:drift linear both;animation-timeline:view();animation-range:cover}
    @keyframes drift{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
    .final img{height:118%;top:-9%;animation:drift linear both;animation-timeline:view();animation-range:cover}
  }

  /* botão flutuante chega depois da primeira leitura */
  .wa{animation:rise 600ms var(--ease-out) backwards 1200ms}
  .wa::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(238,211,168,.55);
    animation:ping 1600ms var(--ease-out) 4200ms 2;pointer-events:none}
  @keyframes ping{from{box-shadow:0 0 0 0 rgba(238,211,168,.55)}to{box-shadow:0 0 0 16px rgba(238,211,168,0)}}

  /* landing: foto do topo assenta devagar, sem atrasar texto nem botões */
  .lp-hero img.bg{animation:settle 2200ms var(--ease-arrive) backwards}
  /* ponto "ao vivo" do selo — suporte em tempo real */
  .lp-badge i{position:relative}
  .lp-badge i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--gold);animation:live 2400ms var(--ease-out) infinite}
  @keyframes live{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.2);opacity:0}}
}

/* frase do fundador: palavra por palavra */
.motion .q .w{display:inline-block;opacity:0;transform:translateY(.35em);
  transition:opacity 700ms var(--ease-arrive),transform 700ms var(--ease-arrive);transition-delay:calc(var(--w,0) * 65ms)}
.motion .q.in .w{opacity:1;transform:none}
.motion-lite .q .w{display:inline}

/* ---------- FAQ abre suave (navegadores que suportam) ---------- */
.faq details::details-content{
  block-size:0;overflow:clip;
  transition:block-size 280ms var(--ease-out),content-visibility 280ms allow-discrete;
}
.faq details[open]::details-content{block-size:auto}
.faq summary::after{transition:transform 250ms var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  .faq details::details-content{transition:none}
}

/* a foto da faixa é maior que a faixa (para o parallax): recorta */
.band{overflow:hidden}
.band blockquote{max-width:36rem}