/* Doma — camada rica de movimento (etapa 7)
   Só transform/opacity. Guard de prefers-reduced-motion e antídoto sem JS. */

/* ==========================================================================
   HERO — zoom out da imagem + entrada escalonada dos elementos
   ========================================================================== */
.hero__media img{transform:scale(1.16);transition:transform 1.9s var(--ease)}
.hero.is-in .hero__media img{transform:scale(1.06)}   /* 6% de folga fica para o parallax */

.hero__mark,.hero h1,.hero__sub,.hero .btn{
  opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--ease),transform 1s var(--ease),
             background .3s var(--ease),color .3s var(--ease)}
.hero.is-in .hero__mark,.hero.is-in h1,.hero.is-in .hero__sub,.hero.is-in .btn{
  opacity:1;transform:none}
.hero.is-in .hero__mark{transition-delay:.25s}
.hero.is-in h1{transition-delay:.40s}
.hero.is-in .hero__sub{transition-delay:.58s}
.hero.is-in .btn{transition-delay:.74s}
.hero__mark::before{transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) .45s}
.hero.is-in .hero__mark::before{transform:scaleX(1)}

/* ==========================================================================
   SEÇÕES — filete do eyebrow cresce e os filhos sobem escalonados
   ========================================================================== */
.eyebrow::before{transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease) .1s}
.is-in .eyebrow::before,.is-in.eyebrow::before{transform:scaleX(1)}

[data-stagger]{opacity:1!important;transform:none!important}   /* quem anima são os filhos */
[data-stagger] > *{opacity:0;transform:translateY(18px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-stagger].is-in > *{opacity:1;transform:none}
[data-stagger].is-in > *:nth-child(1){transition-delay:.05s}
[data-stagger].is-in > *:nth-child(2){transition-delay:.17s}
[data-stagger].is-in > *:nth-child(3){transition-delay:.29s}
[data-stagger].is-in > *:nth-child(4){transition-delay:.41s}
[data-stagger].is-in > *:nth-child(5){transition-delay:.53s}

/* sublinhado que desenha (filete de ouro, mesmo elemento gráfico do eyebrow) */
[data-underline]{
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
  padding-bottom:.06em;
  transition:background-size .9s var(--ease) .25s;
}
[data-underline].is-drawn{background-size:100% 2px}

/* parallax: a mídia respira dentro do recorte.
   Só em figura SEM legenda: a imagem escalada extrapola a própria caixa de layout
   e cobriria qualquer elemento irmão abaixo dela dentro do mesmo <figure>. */
[data-parallax]{overflow:hidden;display:block}
[data-parallax] img{will-change:transform;transform:translate3d(0,0,0) scale(1.12)}

/* mapa: o eixo rodoviário desenha e os marcadores entram escalonados */
.map__road{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease)}
.map__road--alt{stroke-dasharray:.012 .014;stroke-dashoffset:0;opacity:0;
  transition:opacity .8s var(--ease) .9s}
.is-in .map__road{stroke-dashoffset:0}
.is-in .map__road--alt{opacity:1}
.map__pin,.map__scale,.map__north{opacity:0;transition:opacity .7s var(--ease)}
.is-in .map__pin{opacity:1;transition-delay:calc(.5s + var(--i) * .13s)}
.is-in .map__scale,.is-in .map__north{opacity:1;transition-delay:1.1s}
html:not(.js) .map__road{stroke-dashoffset:0}
html:not(.js) .map__pin,html:not(.js) .map__scale,html:not(.js) .map__north,
html:not(.js) .map__road--alt{opacity:1}
@media (prefers-reduced-motion:reduce){
  .map__road{stroke-dashoffset:0}
  .map__pin,.map__scale,.map__north,.map__road--alt{opacity:1}
}

/* filete que desenha na lista editorial */
.edito__list{position:relative}
.edito__item{--draw:0}
.edito__item::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.edito__item.is-in::after{transform:scaleX(1)}

/* índice numérico entra deslizando */
.edito__n,.bento__n{display:inline-block;opacity:0;transform:translateX(-8px);
  transition:opacity .6s var(--ease) .15s,transform .6s var(--ease) .15s}
.is-in .edito__n,.is-in .bento__n,.edito__item.is-in .edito__n{opacity:1;transform:none}

/* mídia abre por clip-path */
.split__media,.imgcard__media,.band__media,.region__media{
  clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)}
.split__media.is-in,.imgcard__media.is-in,.band__media.is-in,.region__media.is-in,
.is-in .split__media,.is-in .imgcard__media,.is-in .band__media,.is-in .region__media{
  clip-path:inset(0 0 0 0)}

/* antídoto: sem JS nada fica escondido */
html:not(.js) [data-underline]{background-size:100% 2px}
html:not(.js) .edito__n,html:not(.js) .bento__n{opacity:1;transform:none}
html:not(.js) .split__media,html:not(.js) .imgcard__media,
html:not(.js) .band__media,html:not(.js) .region__media{clip-path:none}
html:not(.js) .steps::before{transform:scaleY(1)}
html:not(.js) [data-parallax] img{transform:none}
html:not(.js) .hero__media img{transform:scale(1)}
html:not(.js) .hero__mark,html:not(.js) .hero h1,
html:not(.js) .hero__sub,html:not(.js) .hero .btn{opacity:1;transform:none}
html:not(.js) .eyebrow::before,html:not(.js) .hero__mark::before{transform:scaleX(1)}
html:not(.js) [data-stagger] > *{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  [data-underline]{background-size:100% 2px}
  .edito__n,.bento__n{opacity:1;transform:none}
  .split__media,.imgcard__media,.band__media,.region__media{clip-path:none}
  .steps::before{transform:scaleY(1)}
  [data-parallax] img{transform:none}
  .hero__media img{transform:scale(1)}
  .hero__mark,.hero h1,.hero__sub,.hero .btn,[data-stagger] > *{opacity:1;transform:none}
  .eyebrow::before,.hero__mark::before{transform:scaleX(1)}
}