/* ===========================================================================
   CASA TOHMÉ — motion.css
   Regra: o movimento serve à leitura. Entrada suave, nada de balé.
   Tudo aqui é opt-in por classe e desliga inteiro em prefers-reduced-motion.
   =========================================================================== */

/* Estado inicial só é aplicado quando o JS confirma que está vivo
   (html.js). Sem JS, o conteúdo aparece normalmente. */
.js [data-revela] {
  opacity: 0;
  transform: translate3d(0, var(--rev-y, 26px), 0);
  transition:
    opacity 760ms var(--ease-out),
    transform 900ms var(--ease-out);
  transition-delay: var(--rev-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-revela].is-visivel {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Variantes */
.js [data-revela="esq"]  { transform: translate3d(-34px, 0, 0); }
.js [data-revela="dir"]  { transform: translate3d(34px, 0, 0); }
.js [data-revela="zoom"] { transform: scale(.965); }
.js [data-revela="nada"] { transform: none; }

/* Corte que abre: a foto se revela por clip-path.
   ATENÇÃO: o clip vai no FILHO, nunca no elemento observado. Um elemento com
   clip-path: inset(0 0 100%) tem área visível zero, e o IntersectionObserver
   do Chromium nunca o considera visível — ele jamais se revelaria. */
.js [data-revela="corte"] {
  opacity: 1;
  transform: none;
}
.js [data-revela="corte"] img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease-out);
  transition-delay: var(--rev-delay, 0ms);
}
.js [data-revela="corte"].is-visivel img { clip-path: inset(0 0 0% 0); }

/* Filhos em cascata: cada filho direto entra com um atraso crescente */
.js [data-cascata] > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 700ms var(--ease-out), transform 820ms var(--ease-out);
}
.js [data-cascata].is-visivel > * { opacity: 1; transform: none; }
.js [data-cascata].is-visivel > *:nth-child(1)  { transition-delay:  40ms; }
.js [data-cascata].is-visivel > *:nth-child(2)  { transition-delay: 110ms; }
.js [data-cascata].is-visivel > *:nth-child(3)  { transition-delay: 180ms; }
.js [data-cascata].is-visivel > *:nth-child(4)  { transition-delay: 250ms; }
.js [data-cascata].is-visivel > *:nth-child(5)  { transition-delay: 320ms; }
.js [data-cascata].is-visivel > *:nth-child(6)  { transition-delay: 390ms; }
.js [data-cascata].is-visivel > *:nth-child(7)  { transition-delay: 460ms; }
.js [data-cascata].is-visivel > *:nth-child(8)  { transition-delay: 530ms; }
.js [data-cascata].is-visivel > *:nth-child(n+9) { transition-delay: 600ms; }

/* ---------------------------------------------------------------------------
   Texto que sobe palavra a palavra por trás de uma máscara.
   O JS quebra o texto em <span class="palavra"><i>…</i></span>.
   --------------------------------------------------------------------------- */
.palavra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.palavra > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--w, 0) * 34ms);
}
.is-visivel .palavra > i { transform: none; }

/* ---------------------------------------------------------------------------
   Parallax — o JS escreve --py; o CSS só desloca.
   --------------------------------------------------------------------------- */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); }

/* Entrada do hero: acontece uma vez, no load */
.hero__conteudo > * {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  animation: entra 1.15s var(--ease-out) forwards;
}
.hero__conteudo > *:nth-child(1) { animation-delay: .22s; }
.hero__conteudo > *:nth-child(2) { animation-delay: .34s; }
.hero__conteudo > *:nth-child(3) { animation-delay: .46s; }
.hero__conteudo > *:nth-child(4) { animation-delay: .58s; }
.hero__provas { opacity: 0; animation: entra 1.1s var(--ease-out) .8s forwards; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* Véu de carregamento: some assim que a página está pronta */
.veu-carga {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ink-deep);
  display: grid;
  place-items: center;
  transition: opacity 700ms var(--ease-out), visibility 700ms;
}
.veu-carga__marca { width: 74px; opacity: .9; animation: pulsa 1.6s var(--ease-in-out) infinite; }
@keyframes pulsa { 50% { opacity: .38; transform: scale(.94); } }
.is-pronto .veu-carga { opacity: 0; visibility: hidden; }

/* ---------------------------------------------------------------------------
   ACESSIBILIDADE — quem pede menos movimento recebe zero movimento.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-revela],
  .js [data-cascata] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .palavra > i { transform: none !important; }
  .hero__conteudo > *, .hero__provas { opacity: 1 !important; transform: none !important; }
  .hero__midia img { animation: none !important; transform: scale(1.02) !important; }
  [data-parallax] { transform: none !important; }
  .faixa__trilho { animation: none !important; }
  .dia__palco { height: auto !important; }
  .dia__preso { position: static !important; height: auto !important; }
  .dia__trilho { overflow-x: auto; transform: none !important; }
  .hero__rolar::after { animation: none !important; }
}