/* ============================================================
   TK7 — motion.css (camada rica de movimento, etapa 7)
   Só transform/opacity. Tudo dentro do guard de reduced-motion.
   Scroll é NATIVO (scroll-behavior do CSS), sem inércia.
   ============================================================ */

[data-reveal] {
  transition: opacity .7s var(--ease), transform .7s cubic-bezier(.16, 1, .3, 1);
}
[data-delay="1"] { transition-delay: .10s }
[data-delay="2"] { transition-delay: .20s }
[data-delay="3"] { transition-delay: .30s }
[data-delay="4"] { transition-delay: .40s }
[data-delay="5"] { transition-delay: .50s }

/* hero: zoom invertido (a imagem começa ampliada e assenta) */
.hero-media { transform: scale(1.16); transition: transform 1.5s cubic-bezier(.16, 1, .3, 1); }
.hero-media.is-settled { transform: scale(1); }
html:not(.js) .hero-media { transform: none; }

/* título: realce que desenha sob a expressão-chave */
[data-underline] {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0 3px;
  transition: background-size .9s var(--ease) .25s;
  padding-bottom: 2px;
}
[data-underline].is-in { background-size: 100% 3px; }
html:not(.js) [data-underline] { background-size: 100% 3px; }

/* parallax: apenas translate3d, aplicado por JS */
[data-parallax] { will-change: transform; }

/* marquee (respiro em faixa) */
.marquee { overflow: hidden; }
.marquee__track { display: inline-flex; gap: var(--sp-8); white-space: nowrap; animation: mq 34s linear infinite; }
@keyframes mq { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* imagem de portfólio: revelação por clip-path */
.folio__media img, .split__media img, .alt__media img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .hero-media, [data-underline] { transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-media { transform: none !important; }
  [data-underline] { background-size: 100% 3px !important; }
  .marquee__track { animation: none !important; }
}