/* 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);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --t-open: 1200ms;
  /* Cores de apoio da biblioteca. A página define --bg, --ink, --accent e --accent-ink; estas derivam delas. */
  --film-bg: color-mix(in srgb, var(--ink, #111) 92%, black);
  --film-ink: var(--bg, #f2f2ee);
}

/* Evita rolagem lateral no celular sem quebrar position: sticky (hidden quebraria as cenas presas) */
html, body { overflow-x: clip; }

/* ---------- Detalhes de acabamento ---------- */
::selection { background: var(--accent); color: var(--accent-ink); }
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); color: var(--bg); }
.skip-link:focus { top: 16px; }

/* ---------- Botões ---------- */
.btn { --btn-bg: var(--accent); --btn-ink: var(--accent-ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .85em 1.5em; border: 0; border-radius: var(--radius, 0);
  background: var(--btn-bg); color: var(--btn-ink); font: inherit; font-weight: 600; line-height: 1.1;
  text-decoration: none; cursor: pointer; isolation: isolate; overflow: hidden;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.btn:active { transform: scale(0.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--secondary { --btn-bg: transparent; --btn-ink: var(--ink); border: 2px solid currentColor; padding: calc(.85em - 2px) calc(1.5em - 2px); }

/* Preenchimento que entra da esquerda */
.btn--fill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill, var(--ink));
  transform: scaleX(0); transform-origin: right; transition: transform 420ms var(--ease-in-out); }
.btn--fill:hover { color: var(--fill-ink, var(--bg)); }
@media (hover: hover) and (pointer: fine) {
  .btn--fill:hover::before { transform: scaleX(1); transform-origin: left; }
}

/* Texto que rola (precisa de data-label igual ao texto) */
.btn--roll .btn__label { display: block; position: relative; transition: transform 380ms var(--ease-expo); }
.btn--roll .btn__label::after { content: attr(data-label); position: absolute; left: 0; top: 100%; width: 100%; }
.btn--roll { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .btn--roll:hover .btn__label { transform: translateY(-100%); }
}

/* Magnético: o deslocamento vem do JS em --mx / --my */
[data-magnetic] { transform: translate(var(--mx, 0px), var(--my, 0px)); }
[data-magnetic]:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(0.97); }

/* ---------- WhatsApp flutuante ---------- */
.wa-float { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 90; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-width: 56px; height: 56px; padding: 0 16px; border-radius: 999px;
  background: var(--wa-bg, var(--accent)); color: var(--wa-ink, var(--accent-ink)); text-decoration: none; font-weight: 600;
  transition: transform var(--t-ui) var(--ease-out), opacity var(--t-ui) ease; }
.wa-float svg { width: 26px; height: 26px; flex: none; }
.wa-float__text { display: none; }
@media (min-width: 900px) { .wa-float__text { display: inline; } }
.js .wa-float[data-wa-float] { opacity: 0; transform: translateY(16px); pointer-events: none; }
.js .wa-float[data-wa-float].is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- 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); }
.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); 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; }
}