/* Movimento. Tudo que esconde conteudo vive so dentro de no-preference e depende de html.js. */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    .js [data-reveal] { opacity: 0; transform: translateY(3.4375rem); transition: opacity 1.1s var(--ease), transform 1.3s var(--ease); transition-delay: var(--d, 0s); }
    .js [data-reveal="fade"] { transform: none; }
    .js [data-reveal="left"] { transform: translateX(-3.4375rem); }
    .js [data-reveal].is-in { opacity: 1; transform: none; }
    .js [data-mask] { display: block; overflow: clip; padding-block-end: .12em; margin-block-end: -.12em; }
    .js [data-mask] > span { display: block; transform: translateY(110%); transition: transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
    .js [data-mask].is-in > span { transform: none; }
    .js .rule-draw { position: relative; }
    .js .feat, .js .post-card, .js .addr, .js .local, .js .pagto > div, .js .stat, .js .trustband li, .js .faq details, .js .atalhos li, .js .etapas > li, .js .lista-ic li, .js .list li { --x: 1; }
    .js .gal__i img, .js .sm__track img, .js .duo__fig img, .js .hero__img img { will-change: transform; }
    [data-parallax] { will-change: transform; }

    /* abertura */
    .intro { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; background: var(--black); }
    html.has-intro .intro { display: grid; animation: intro-out .9s var(--ease-io) 1.9s forwards; }
    .intro img { inline-size: clamp(6rem, 16vw, 11rem); block-size: auto; opacity: 0; animation: intro-in 1.2s var(--ease) .1s forwards; }
    .intro i { position: absolute; inset-block-end: 38%; inset-inline: 50%; block-size: 1px; background: var(--gold); inline-size: 0; transform: translateX(-50%); animation: intro-line 1.3s var(--ease-io) .5s forwards; }
    @keyframes intro-in { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
    @keyframes intro-line { to { inline-size: min(16rem, 40vw); } }
    @keyframes intro-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
    html.has-intro .hh [data-mask] > span, html.has-intro .hh [data-reveal] { transition-delay: calc(var(--d, 0s) + 2.3s); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .hh__rail { display: none; }
  }
}
