/* ================================================================
   CONF. DOS FILHOS 26 — movimento
   Tudo é progressivo: sem JS ou com movimento reduzido, o conteúdo
   aparece normalmente (ver bloco final).
   ================================================================ */

/* ---- 1. revelação de texto por máscara ------------------------- */
.js .mask__i{
  transform:translateY(150%);
  transition:transform 1.05s var(--ease-out) var(--d,0s);
  will-change:transform}
.js .is-in .mask__i,.js .mask.is-in .mask__i{transform:translateY(0)}
.js h2 .mask:nth-of-type(2) .mask__i,
.js p .mask:nth-of-type(2) .mask__i{--d:.1s}

.js h2 .mask:nth-of-type(3) .mask__i,
.js p .mask:nth-of-type(3) .mask__i{--d:.2s}

/* ---- 2. revelação suave de blocos ------------------------------ */
.js .rv{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease) var(--rvd,0s),transform .9s var(--ease-out) var(--rvd,0s)}
.js .rv.is-in{opacity:1;transform:none}

/* ---- 3. revelação de imagem: corte + zoom lento ----------------
   O corte fica no <picture>, nunca no elemento observado: clip-path
   zera a área de interseção e o observer deixaria de disparar. */
.js .rv-img .ph{clip-path:inset(0 0 101% 0);transition:clip-path 1.2s var(--ease-out) var(--rvd,0s)}
.js .rv-img.is-in .ph{clip-path:inset(0 0 0 0)}
.js .rv-img .ph img{scale:1.06;transition:scale 1.8s var(--ease-out)}
.js .rv-img.is-in .ph img{scale:1}
.js .rv-img .cap{opacity:0;transform:translateY(10px);
  transition:opacity .8s var(--ease) .38s,transform .8s var(--ease-out) .38s}
.js .rv-img.is-in .cap{opacity:1;transform:none}

/* parallax — o JS escreve --py; `translate` não conflita com `scale` */
.ph img{translate:0 var(--py,0px)}
.hero__bg{translate:0 var(--py,0px)}

/* ---- 3b. entrada do lockup, em duas etapas --------------------
   O letreiro é revelado de baixo para cima; o "26" entra depois,
   crescendo até o lugar, como se tivesse sido escrito por cima. */
.js .rv-logo .hero__logo-in{clip-path:inset(0 0 101% 0);
  transition:clip-path 1.3s var(--ease-out) .08s}
.js .rv-logo.is-in .hero__logo-in{clip-path:inset(0 0 0 0)}

.js .rv-logo .lockup--26{opacity:0;scale:.82;
  transition:opacity .75s var(--ease) .6s, scale 1.15s var(--ease-out) .55s}
.js .rv-logo.is-in .lockup--26{opacity:1;scale:1}

/* os traços de marca-texto também ganham profundidade própria */
.mark{translate:var(--mkx,0px) 0}

/* ---- 4. desenho à mão (grifos) --------------------------------- */
.js .ink{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);
  transition:stroke-dashoffset 1.5s var(--ease-out) var(--d,0s)}
.js .is-in .ink{stroke-dashoffset:0}
.js .hl__line .ink{--d:.5s;transition-duration:1s}

/* ---- 5. marquee ------------------------------------------------ */
.marquee__track{translate:var(--mx,0px) 0}

/* ---- 6. linha do scroll no hero -------------------------------- */
@keyframes scrollLine{
  0%{transform:translateX(-100%)}
  55%{transform:translateX(0)}
  100%{transform:translateX(100%)}
}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---- 7. accordion --------------------------------------------- */
.acc__c{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
.acc__i[open] .acc__c{grid-template-rows:1fr}
.acc__c > p{min-height:0}

/* ---- 8. cartões do lineup — entrada escalonada ----------------- */
.js .cards .pre:nth-child(1){--rvd:.00s}
.js .cards .pre:nth-child(2){--rvd:.08s}
.js .cards .pre:nth-child(3){--rvd:.16s}
.js .cards .pre:nth-child(4){--rvd:.24s}
.js .cards .pre:nth-child(5){--rvd:.32s}
.js .cards .pre:nth-child(6){--rvd:.40s}
.js .info .info__i:nth-child(1){--rvd:.00s}
.js .info .info__i:nth-child(2){--rvd:.06s}
.js .info .info__i:nth-child(3){--rvd:.12s}
.js .info .info__i:nth-child(4){--rvd:.18s}
.js .info .info__i:nth-child(5){--rvd:.24s}

/* ---- 9. drawer ------------------------------------------------- */
.drawer{opacity:0;transition:opacity .38s var(--ease)}
.drawer.is-open{opacity:1}
.drawer__nav a{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease) var(--d,0s),transform .6s var(--ease-out) var(--d,0s)}
.drawer.is-open .drawer__nav a{opacity:1;transform:none}
.drawer.is-open .drawer__nav a:nth-child(1){--d:.06s}
.drawer.is-open .drawer__nav a:nth-child(2){--d:.12s}
.drawer.is-open .drawer__nav a:nth-child(3){--d:.18s}
.drawer.is-open .drawer__nav a:nth-child(4){--d:.24s}
.drawer.is-open .drawer__nav a:nth-child(5){--d:.30s}

/* ---- 10. consentimento ----------------------------------------- */
.consent{opacity:0;transform:translateY(18px);
  transition:opacity .45s var(--ease),transform .5s var(--ease-out)}
.consent.is-on{opacity:1;transform:none}

/* ================================================================
   acessibilidade — movimento reduzido
   ================================================================ */
@media (prefers-reduced-motion: reduce){
  .js .mask__i{transform:none!important}
  .js .rv{opacity:1!important;transform:none!important}
  .js .rv-img .ph{clip-path:none!important}
  .js .rv-img .cap{opacity:1!important;transform:none!important}
  .js .rv-logo .hero__logo-in{clip-path:none!important}
  .js .rv-logo .lockup--26{opacity:1!important;scale:1!important}
  .lockup--word,.lockup--26{translate:none!important;rotate:none!important}
  .mark{translate:none!important}
  .js .rv-img .ph img{scale:1!important}
  .js .ink{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .ph img,.hero__bg{translate:none!important}
  .marquee__track{translate:0!important}
  .hero__scroll i::after{animation:none;transform:none}
  .drawer__nav a{opacity:1!important;transform:none!important}
  .consent{opacity:1!important;transform:none!important}
  .acc__c{transition:none}
}