/* Movimento do site, no espírito das páginas de produto da Apple: entradas suaves,
   revelação ao rolar, um único efeito preso à rolagem e microinterações. Tudo só com
   transform e opacity, e nada disso roda para quem pede menos movimento. */
:root { --m-ease: cubic-bezier(.28, .11, .32, 1); --m-out: cubic-bezier(.16, 1, .3, 1); interpolate-size: allow-keywords; }

@media (prefers-reduced-motion: no-preference) {
  /* 1. Abertura: o texto sobe em sequência e a tela do sistema entra por último */
  .js .s-hero .s-eyebrow, .js .s-hero .s-h1 > span, .js .s-hero .s-lead, .js .s-hero .s-cta, .js .s-hero .s-micro { opacity: 0; transform: translateY(26px); animation: m-up .95s var(--m-ease) forwards; }
  .js .s-hero .s-eyebrow { animation-delay: .05s; }
  .js .s-hero .s-h1 > span:nth-child(1) { animation-delay: .15s; }
  .js .s-hero .s-h1 > span:nth-child(2) { animation-delay: .3s; }
  .js .s-hero .s-lead { animation-delay: .45s; }
  .js .s-hero .s-cta { animation-delay: .58s; }
  .js .s-hero .s-micro { animation-delay: .68s; }
  .js .s-stage .s-shot.hero { opacity: 0; transform: translateY(70px) scale(.93); animation: m-stage 1.4s var(--m-out) .55s forwards; }
  @keyframes m-up { to { opacity: 1; transform: none; } }
  @keyframes m-stage { to { opacity: 1; transform: none; } }

  /* 2. Revelação ao rolar: sobe e aparece, e os irmãos entram em cascata */
  .js .m-r { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--m-ease), transform .9s var(--m-ease); transition-delay: var(--d, 0ms); }
  .js .m-r.m-in { opacity: 1; transform: none; }
  .js .m-r.m-pop { transform: translateY(40px) scale(.97); }
  .js .m-r.m-pop.m-in { transform: none; }

  /* 3. A tela principal afasta e some de leve ao sair (só onde o navegador já sabe fazer) */
  @supports (animation-timeline: view()) {
    .js .s-stage { animation: m-saida linear both; animation-timeline: view(); animation-range: exit 5% exit 85%; transform-origin: 50% 0; }
    @keyframes m-saida { to { transform: scale(.94) translateY(30px); opacity: .35; } }
  }

  /* 4. Frase de abertura: as palavras acendem conforme a rolagem */
  .js .s-stmt .big .m-w { opacity: var(--o, .25); transition: opacity .25s linear; }

  /* 5. Troca de aba e ampliação de imagem */
  .s-tabpanel:not([hidden]) { animation: m-fade .55s var(--m-ease); }
  @keyframes m-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .s-lb:not([hidden]) { animation: m-lb .35s var(--m-ease); }
  .s-lb:not([hidden]) img { animation: m-lbimg .5s var(--m-out); }
  @keyframes m-lb { from { opacity: 0; } }
  @keyframes m-lbimg { from { opacity: 0; transform: scale(.94); } }

  /* 6. Microinterações */
  .s-btn { transition: transform .35s var(--m-ease), box-shadow .35s var(--m-ease), background-color .25s, border-color .25s; }
  .s-btn:active { transform: scale(.97); }
  .s-tile, .s-plano, .s-passo { transition: transform .5s var(--m-ease), border-color .3s, background-color .3s, box-shadow .5s var(--m-ease), opacity .9s var(--m-ease); }
  .s-link { transition: opacity .2s; }
  .s-faq summary::after { transition: transform .4s var(--m-ease); }
  .s-faq details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--m-ease), content-visibility .45s allow-discrete; }
  .s-faq details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .s-tile:hover, .s-plano:hover { transform: translateY(-6px); box-shadow: 0 30px 70px -34px rgba(0,0,0,.9); }
  .s-btn:not(.sec):hover { transform: scale(1.03); }
  .s-btn.sec:hover, .s-link:hover { opacity: .8; }
}
/* 7. Menu: ganha corpo depois que a página começa a rolar */
.s-nav { transition: background-color .4s, border-color .4s; }
.s-nav.m-rolou { background: rgba(10,10,13,.88); border-bottom-color: var(--line2); }