/* site-alto-padrao · movimento.css
   Tokens de movimento e estados de interação. Copie para assets/ e ajuste só as cores pelos tokens da página.
   Regra: o conteúdo é visível sem JavaScript. Os estados "escondidos" só valem quando <html> tem a classe .js
   (adicionada por um script no <head>) e o movimento não está reduzido. */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --t-open: 1200ms;
}

/* ---------- Detalhes de acabamento ---------- */
::selection { background: var(--accent, #222); color: var(--accent-ink, #fff); }
input, textarea { caret-color: var(--accent, currentColor); }
html { scrollbar-color: var(--muted, #888) transparent; scrollbar-width: thin; }
a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus, var(--accent, currentColor)); outline-offset: 3px; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Pular para o conteúdo ---------- */
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 12px 16px;
  background: var(--ink, #111); color: var(--bg, #fff); }
.skip-link:focus { top: 16px; }

/* Botões e WhatsApp flutuante: componentes da página (.btn, .btn--sec, .link, .btn-icone, .segmentado, .whats-flutuante) no index.html */

/* ---------- Navegação ---------- */
.js [data-nav-hide] { transition: transform 360ms var(--ease-out), background-color var(--t-ui) ease; }
.js [data-nav-hide].is-hidden { transform: translateY(-110%); }
.menu-panel[hidden] { display: none; }
.menu-open { overflow: hidden; }

/* ---------- Entradas (reveal) ---------- */
/* As entradas são feitas pelo GSAP a partir do estado visível; nada aqui esconde conteúdo sem JS. */
.js:not(.reduce) [data-reveal] > *, .js:not(.reduce) [data-reveal-self] { will-change: transform, opacity; }

/* Revelação de imagem por máscara */
[data-reveal-img] { overflow: hidden; }
[data-reveal-img] img, [data-reveal-img] video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Letreiro (marquee) ---------- */
[data-marquee] { overflow: hidden; white-space: nowrap; }
[data-marquee] .marquee__track { display: inline-flex; gap: var(--marquee-gap, 3rem); padding-right: var(--marquee-gap, 3rem);
  animation: marquee var(--marquee-dur, 30s) linear infinite; }
[data-marquee]:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- FAQ ---------- */
details.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq .faq__icon { transition: transform var(--t-ui) var(--ease-out); flex: none; }
details.faq[open] .faq__icon { transform: rotate(45deg); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details.faq::details-content { block-size: 0; overflow: hidden; transition: block-size 360ms var(--ease-out), content-visibility 360ms allow-discrete; }
  details.faq[open]::details-content { block-size: auto; }
}

/* ---------- Cenas de scroll (nível 2) ---------- */
/* As cenas controlam a própria altura: sem o espaçamento das seções comuns (senão sobram vãos vazios) */
.scene-zoom, .scene-h, .scroll-video { padding-block: 0; }

/* Zoom: imagem que cresce de janela até tela cheia */
.scene-zoom { position: relative; }
.scene-zoom__stage { position: relative; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.scene-zoom__frame { position: absolute; inset: 0; overflow: hidden; }
.scene-zoom__frame img, .scene-zoom__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene-zoom__caption { position: absolute; z-index: 2; }

/* Galeria horizontal presa */
.scene-h { position: relative; overflow: hidden; }
.scene-h__track { display: flex; gap: var(--gap, 24px); width: max-content; }
.no-js .scene-h, .scene-h--stack { overflow: visible; }
.no-js .scene-h__track, .scene-h--stack .scene-h__track { flex-wrap: wrap; width: auto; padding-inline: var(--m, 20px); }
.no-js .scene-h__track > *, .scene-h--stack .scene-h__track > * { width: calc(50% - var(--gap, 24px) / 2) !important; margin-top: 0 !important; }
@media (max-width: 520px) { .no-js .scene-h__track > *, .scene-h--stack .scene-h__track > * { width: 100% !important; } }

/* Texto que se preenche com o scroll */
[data-scene="scrub-text"] .word { color: var(--muted-strong, color-mix(in srgb, var(--ink) 22%, transparent)); }
.reduce [data-scene="scrub-text"] .word, .no-js [data-scene="scrub-text"] .word { color: inherit; }

/* ---------- Vídeo controlado pelo scroll (nível 3) ---------- */
.scroll-video { position: relative; }
.scroll-video__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--film-bg, #0b0b0b); }
.scroll-video__poster, .scroll-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scroll-video video { opacity: 0; transition: opacity 600ms ease; }
.scroll-video.is-ready video { opacity: 1; }
.scroll-video__progress { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3;
  font-size: var(--step-small, .875rem); color: var(--film-ink, #fff); opacity: .8; transition: opacity 400ms ease; }
.scroll-video.is-ready .scroll-video__progress { opacity: 0; }
.scroll-video__beat { position: absolute; z-index: 2; opacity: 0; }
.no-js .scroll-video__beat, .reduce .scroll-video__beat { position: relative; opacity: 1; }
.reduce .scroll-video, .no-js .scroll-video { height: auto !important; }
.reduce .scroll-video__stage, .no-js .scroll-video__stage { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.25rem; padding: 96px var(--m, 20px) 48px; }
.reduce .scroll-video__beat, .no-js .scroll-video__beat { position: relative; inset: auto; transform: none; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-marquee] .marquee__track { animation: none; }
}