@layer motion {
  /* ============================================================
     MOVIMENTO — regra da casa: só transform e opacity.
     Nada ligado à rolagem: a sobreposição entre o hero e o
     conteúdo é feita com position: sticky, que o compositor
     resolve sozinho, sem um único cálculo por frame.
     ============================================================ */

  /* ---------- sobreposição: o conteúdo sobe por cima do hero ---------- */
  .ticker, main > section:not(.hero), .foot {
    position: relative; z-index: 1;
  }
  /* .plano ficava nesta lista e herdava position: relative. Um <dialog>
     modal vive na top layer e precisa ser fixed — no fluxo, ele fica no
     fim do documento e o showModal() arrasta a página até lá. */
  /* a borda de cima do primeiro bloco marca a camada que passa por cima */
  .hsec { box-shadow: 0 -2.5rem 5rem -1.5rem color-mix(in oklab, var(--ink) 45%, transparent); }

  /* ============================================================
     CORTINA DE ABERTURA
     Painel preto que sobe com a borda inferior curvando —
     transform + border-radius num só elemento.
     ============================================================ */
  .curtain {
    position: fixed; inset: 0; z-index: 999;
    display: grid; place-items: center;
    background: var(--ink);
    transform: translate3d(0, 0, 0);
    will-change: transform, border-radius;
  }
  .curtain__mark { display: grid; justify-items: center; gap: 1.1rem; color: var(--white); }
  /* O viewBox da marca é justo ao desenho, sem a folga que o <text> antigo
     carregava: no mesmo inline-size ela já chega maior. A escala subiu junto
     porque a cortina é o único momento em que a marca aparece sozinha. */
  .curtain__logo { inline-size: clamp(5.5rem, 11vw, 8rem); block-size: auto; }
  .curtain__sub {
    font-size: .68rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
    color: color-mix(in oklab, var(--white) 56%, transparent);
  }
  .curtain__bar {
    display: block; inline-size: clamp(6rem, 14vw, 9rem); block-size: 1px;
    background: color-mix(in oklab, var(--white) 22%, transparent);
    overflow: clip; margin-block-start: .4rem;
  }
  .curtain__bar b {
    display: block; block-size: 100%; background: color-mix(in oklab, var(--white) 70%, transparent);
    transform: scaleX(0); transform-origin: 0 50%;
    animation: curtain-load 1.05s var(--ease-io) forwards;
  }
  @keyframes curtain-load { to { transform: scaleX(1); } }

  .curtain__mark { animation: curtain-mark .58s var(--ease-out) both; }
  @keyframes curtain-mark { from { opacity: 0; transform: translateY(.7rem); } }

  html.is-opening .curtain__mark { animation: curtain-out .3s var(--ease-io) forwards; }
  @keyframes curtain-out { to { opacity: 0; transform: translateY(-1.2rem); } }

  html.is-opening .curtain { animation: curtain-lift .95s var(--ease-io) .14s forwards; }
  @keyframes curtain-lift {
    35%  { border-end-start-radius: 46% 26%; border-end-end-radius: 46% 26%; transform: translate3d(0, -4%, 0); }
    100% { border-end-start-radius: 50% 22%; border-end-end-radius: 50% 22%; transform: translate3d(0, -108%, 0); }
  }
  html.is-open .curtain { display: none; }

  /* o hero assenta quando a cortina sobe */
  html.js .hero__slide.is-on img { animation: hero-settle 1.15s var(--ease-out) both; }
  @keyframes hero-settle { from { transform: scale(1.06); } }
  html.js .hero__inner > * { animation: hero-rise .8s var(--ease-out) both; }
  html.js .hero h1        { animation-delay: .20s; }
  html.js .hero__lead     { animation-delay: .32s; }
  html.js .hero__actions  { animation-delay: .44s; }
  @keyframes hero-rise { from { transform: translate3d(0, 1.6rem, 0); } }
  html.js .facts, html.js .hero__ctrl { animation: hero-rise .8s var(--ease-out) .56s both; }
  html.js:not(.is-opening) .hero__slide.is-on img,
  html.js:not(.is-opening) .hero__inner > *,
  html.js:not(.is-opening) .facts,
  html.js:not(.is-opening) .hero__ctrl { animation-play-state: paused; }

  /* ============================================================
     REVELAÇÃO DE ENTRADA — uma só, barata, uma vez por elemento
     ============================================================ */
  .js .rise {
    opacity: 0;
    transform: translate3d(0, 1.15rem, 0);
    transition: opacity .6s var(--ease-out) calc(var(--d, 0) * 60ms),
                transform .7s var(--ease-out) calc(var(--d, 0) * 60ms);
  }
  .rise.is-in { opacity: 1; transform: none; }

  /* ============================================================
     ACESSIBILIDADE
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    .curtain { display: none !important; }
    .hero { position: static; }
    .hsec { box-shadow: none; }
    .hero__slide, .hero__inner, .facts, .hero__ctrl, .hero__inner > * {
      transform: none !important; animation: none !important;
    }
    .hero__slide { transition: none; }
    .js .rise, .rise { opacity: 1 !important; transform: none !important; transition: none !important; }
    .ticker__track { animation: none; }
    .curtain__bar b { animation: none; transform: scaleX(1); }
    * { scroll-behavior: auto !important; }
  }
}