/*!
 * Awwwards Design Engine: Motion Kit v2.0 (estilos de suporte)
 * Os estados iniciais só se aplicam com JS ativo (.js no <html>) e sem movimento reduzido.
 * Personalize cores e medidas pelos tokens (--c-*, --theme-*) no CSS da página, sem editar este arquivo.
 */

/* ---------- Estados iniciais (só com JS e movimento permitido) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; }
  .js [data-reveal="image"] { clip-path: inset(100% 0 0 0); }
  .js [data-reveal-group] > * { opacity: 0; }
}

/* ---------- Temas por seção ----------
   Cada tema declara --theme-bg / --theme-ink (e opcionais --theme-ink-2 / --theme-accent)
   a partir dos tokens base da marca. Sem JS ou com movimento reduzido, cada seção pinta o próprio fundo.
   Com o kit ativo (.mk-travel), as seções ficam transparentes e o <body> faz a transição. */
[data-theme="light"]  { --theme-bg: var(--c-bg);      --theme-ink: var(--c-ink);      --theme-ink-2: var(--c-ink-2); }
[data-theme="dark"]   { --theme-bg: var(--c-ink);     --theme-ink: var(--c-bg);       --theme-ink-2: var(--c-ink-2-inverse, var(--c-bg)); }
[data-theme="accent"] { --theme-bg: var(--c-accent);  --theme-ink: var(--c-on-accent); --theme-ink-2: var(--c-on-accent); --theme-accent: var(--c-on-accent); }

body { background: var(--page-bg, var(--c-bg)); color: var(--page-ink, var(--c-ink)); }
[data-theme] { background: var(--theme-bg); color: var(--theme-ink); }
.mk-travel [data-theme] { background: transparent; color: inherit; }

/* ---------- Máscara de linhas do SplitText ---------- */
.mk-mask { padding-bottom: 0.1em; margin-bottom: -0.1em; } /* evita cortar descendentes (g, p, j) */

/* ---------- Cenas fixadas ---------- */
[data-scene] { position: relative; }
[data-stage] { min-height: 100vh; min-height: 100svh; }

/* ---------- Trilho horizontal ---------- */
[data-track] {
  display: flex; gap: var(--gutter, 1.5rem);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-inline: var(--margin, 1.25rem);
}
[data-track]::-webkit-scrollbar { display: none; }
[data-track] > * { flex: none; scroll-snap-align: start; }
[data-track].mk-track-on { overflow: visible; scroll-snap-type: none; }
.mk-track-section { overflow: clip; } /* o trilho em movimento não vaza a largura da página */

/* ---------- Marquee ---------- */
[data-marquee] { display: flex; overflow: hidden; white-space: nowrap; }
[data-marquee] > * { flex: none; padding-right: 0.5em; }

/* ---------- Números ---------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- Cursor customizado ---------- */
.mk-cursor {
  position: fixed; left: 0; top: 0; z-index: var(--z-cursor, 100);
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 999px;
  background: var(--cursor-color, #fff); mix-blend-mode: var(--cursor-blend, difference);
  pointer-events: none; display: grid; place-items: center;
  transition: width .45s var(--ease-out, cubic-bezier(.16,1,.3,1)), height .45s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              margin .45s var(--ease-out, cubic-bezier(.16,1,.3,1)), opacity .3s;
}
.mk-cursor.is-hover { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.mk-cursor.has-label { width: 88px; height: 88px; margin: -44px 0 0 -44px; mix-blend-mode: normal; background: var(--cursor-label-bg, var(--c-accent, #000)); }
.mk-cursor.is-hidden { opacity: 0; }
.mk-cursor__label {
  font: 500 11px/1 var(--f-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cursor-label-ink, var(--c-on-accent, #fff)); opacity: 0; transition: opacity .2s;
}
.mk-cursor.has-label .mk-cursor__label { opacity: 1; }

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