/* Meger Engenharia · baseline de movimento (etapa 6). A camada rica entra na etapa 7 sobre estes ganchos.
   Clima do DS: calmo e confiante. Reveal ~0,9 s, 24 px, cascata de no máximo 0,4 s (S15).
   FAIL-SAFE: os estados "antes" só valem com html.js (setado inline no <head>). Sem JS, tudo aparece.
   Ganchos: [data-reveal] (+ data-delay="1|2|3"), [data-parallax], .hero-media, [data-underline],
            [data-timeline] .line, [data-count], .marquee > .marquee__track. */

html.js [data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
html.js [data-reveal].is-in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.12s}
[data-delay="2"]{transition-delay:.24s}
[data-delay="3"]{transition-delay:.36s}
/* em elemento sticky a entrada é só por opacidade (transform faz saltar ao colar) */
html.js [data-reveal][data-reveal="fade"]{transform:none}

/* hero: a foto assenta uma vez (sem zoom contínuo) */
html.js .hero-media{transform:scale(1.05);transition:transform 1.6s var(--ease)}
html.js .hero-media.is-in{transform:none}

/* título: sublinhado em ouro que desenha */
[data-underline]{background-image:linear-gradient(var(--c-accent),var(--c-accent));background-repeat:no-repeat;
  background-position:0 100%;background-size:100% 3px}
html.js [data-underline]{background-size:0 3px;transition:background-size .9s var(--ease) .3s}
html.js [data-underline].is-in{background-size:100% 3px}

/* linha do tempo que desenha */
html.js [data-timeline] .line{transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--ease)}
html.js [data-timeline].is-in .line{transform:scaleY(1)}

/* faixa contínua (marquee) */
.marquee{overflow:hidden}
.marquee__track{display:flex;width:max-content;animation:mq 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* parallax: a foto desliza (propriedade translate, sem brigar com scale/transform) dentro de um wrapper com overflow:hidden */
html.js [data-parallax]{will-change:translate}

/* scrub: o elemento recebe --sp (0 a 1) conforme cruza a tela; sem JS ou com RM, --sp fica 1 */
[data-scrub]{--sp:1}

/* odômetro: cada dígito é uma coluna 0 a 9 que rola até o valor (data-count + data-odometer) */
.odo{display:inline-flex;align-items:flex-start;font-variant-numeric:tabular-nums;white-space:nowrap}
.odo__d{display:block;height:1em;overflow:hidden;line-height:1}
.odo__r{display:block;transform:translateY(0);transition:transform 1.5s var(--ease) var(--o,0s)}
.odo__r > span{display:block;height:1em;line-height:1}
.odo__s{display:block;line-height:1;height:1em}
.odo.is-on .odo__r{transform:translateY(calc(var(--d) * -1em))}

/* revelar por máscara (fotos editoriais, pente fino 11/2026): a foto abre de baixo para cima e assenta (zoom-out leve).
   A máscara fica na <img> filha (o IntersectionObserver do Chrome ignora alvo recortado por clip-path).
   O zoom usa "transform" (o hover das fotos usa "scale"; os dois somam sem brigar). */
html.js [data-reveal="mask"]{opacity:1;transform:none}
html.js [data-reveal="mask"] > img{clip-path:inset(100% 0 0 0);transform:scale(1.14);
  transition:clip-path 1.2s cubic-bezier(.77,0,.18,1),transform 1.7s cubic-bezier(.16,1,.3,1),scale 1.1s cubic-bezier(.2,.8,.2,1)}
html.js [data-reveal="mask"].is-in > img{clip-path:inset(0 0 0 0);transform:none}
html.js [data-reveal="mask"][data-delay="1"] > img{transition-delay:.12s,.12s,0s}
html.js [data-reveal="mask"][data-delay="2"] > img{transition-delay:.24s,.24s,0s}
html.js [data-reveal="mask"][data-delay="3"] > img{transition-delay:.36s,.36s,0s}

@media (prefers-reduced-motion:reduce){
  html.js [data-reveal],html.js .hero-media,html.js [data-timeline] .line{transition:none !important;transform:none !important;opacity:1 !important}
  html.js [data-reveal="mask"] > img{clip-path:none !important;transform:none !important;transition:none !important}
  html.js [data-underline]{transition:none !important;background-size:100% 3px !important}
  .marquee__track{animation:none !important}
  html.js [data-parallax]{will-change:auto;translate:none !important}
  .odo__r{transition:none !important}
}