.page--home .site-main {
  min-height: 100svh;
}

.page--stack {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  scroll-padding: 0;
}

.page--stack.page--home {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

.page--stack .site-main {
  background: var(--color-black);
}

.page--stack .site-main > section {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.page--stack .site-main > .home-loading {
  content-visibility: visible;
  /* Disable snap so the intro animation flows continuously with scroll */
  scroll-snap-align: none;
}

.page--stack .site-header {
  opacity: 1;
  /* SEM transform aqui — se setar transform (mesmo identity) o header vira
     containing-block dos descendentes `position: fixed`, prendendo o
     mobile-menu dentro da largura do header (~44px) em vez de cobrir
     o viewport inteiro. */
}

/*
 * Header behavior:
 *  - ENQUANTO na tela de loading inicial (home, ainda não passou loading):
 *    logo + menu ESCONDIDOS pra a intro cinemática não ter distrações
 *    (usuário só vê a animação da cortina + C).
 *  - DEPOIS de passar o loading: header volta com fade suave; nav esconde
 *    por padrão, volta ao revelar (hover/scroll top/touch).
 */
.page--stack:not(.has-passed-loading) .site-header {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-premium);
}

.page--stack:not(.has-passed-loading) .site-header__nav {
  opacity: 0;
  transform: translateY(0);
  pointer-events: none;
}

/* Header + nav SEMPRE visíveis depois de passar pelo loading (feedback do
   cliente 09/09 — antes escondia e só voltava no hover). */
.page--stack.has-passed-loading .site-header {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--duration-base) var(--ease-premium);
}

.page--stack.has-passed-loading .site-header__nav {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.page--stack .footer-fixed {
  position: absolute;
  top: calc(100svh - var(--footer-height));
  bottom: auto;
}

.page--stack .disorder-panel,
.page--stack .works-hero {
  min-height: 100svh;
  height: 100svh;
}

/* Contato menor pra reduzir gap com o rodapé (82svh vs 100svh antigo) */
.page--stack .contato-hero {
  min-height: 82svh;
  height: 82svh;
}

/*
 * Disorder-hero fica ATRÁS da home-loading (z:1) e é MAIS ALTO (200svh)
 * pra o conteúdo rolar em parallax. Margin-top -100svh sobrepõe o
 * último 100svh da loading, então:
 * - Loading: doc y 0-200svh (mesma altura mas segura o sticky em 100svh)
 * - Hero: doc y 100-300svh (começa no meio da loading, fica visível
 *   quando a cortina dissolve pelo fim da animação)
 */
/*
 * Disorder-hero: 100svh (tamanho normal). Margin-top -100svh sobrepõe
 * completamente a loading, então o hero começa em doc y 100svh —
 * exatamente onde ele entra por baixo do viewport no scroll 0.
 *
 * Conforme o usuário rola:
 * - Scroll 0: hero em viewport y 100 (abaixo do viewport)
 * - Scroll 50svh: hero em viewport y 50 (metade subindo)
 * - Scroll 100svh: hero em viewport y 0 (totalmente subiu)
 *
 * Enquanto isso a loading (z:5) fica sticky por cima, com strips e
 * cortina dissolvendo. Efeito: hero SOBE conforme loading SOME.
 */
/*
 * Disorder-hero: 100svh (tamanho normal). Margin-top -100svh sobrepõe
 * completamente a loading, então o hero começa em doc y 100svh —
 * exatamente onde ele entra por baixo do viewport no scroll 0.
 *
 * Conforme o usuário rola:
 * - Scroll 0: hero em viewport y 100 (abaixo do viewport)
 * - Scroll 50svh: hero em viewport y 50 (metade subindo)
 * - Scroll 100svh: hero em viewport y 0 (totalmente subiu)
 *
 * Enquanto isso a loading (z:5) fica sticky por cima, com strips e
 * cortina dissolvendo. Efeito: hero SOBE conforme loading SOME.
 */
/* Home-loading removido — disorder-hero é a primeira tela e mora em 100svh */
.page--stack .disorder-hero {
  min-height: 100svh;
  height: 100svh;
  z-index: 1;
  position: relative;
  opacity: 1 !important;
  transform: none !important;
}

/*
 * No home stack, o rodapé visível é só o do contato (última tela).
 * About vem sem rodapé pra fluir direto pro contato.
 */
.page--stack .about-hero__footer {
  display: none;
}

.page--stack .about-hero {
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
}

/* Home stack — remove padding-bottom (que era pra footer, agora escondido)
   pra ideia.png ficar dentro do viewport visível */
.page--stack .about-hero__stage {
  padding-bottom: 0;
  min-height: 100svh;
  height: 100svh;
}

/* ─── Section entry — Framer-style: pequeno slide-up com decaimento spring ─── */

.reveal-section {
  opacity: 0.001;
  transform: translateY(1rem);
  transition:
    opacity 460ms var(--ease-framer),
    transform 620ms var(--ease-framer);
}

.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-section.is-animating {
  will-change: opacity, transform;
}

/* ─── Framer-style child-level reveals (data-anim attribute) ────────────────────── */

/*
 * Framer signature: opacity + subtle blur → sharp, deixando o easing spring
 * fazer o trabalho pesado. Distâncias menores e durações snappier que Swiss —
 * transições de 320-620ms em vez de 1100ms+.
 *
 * IMPORTANT (mesma restrição): base [data-anim] não seta transform pra não
 * brigar com centralizações. Variants ("block", "media") usam translate/scale
 * longhand que compõem bem.
 */
[data-anim] {
  opacity: 0;
  filter: blur(4px);
  transition:
    opacity var(--duration-reveal) var(--ease-framer),
    filter var(--duration-reveal) var(--ease-framer),
    clip-path var(--duration-mask) var(--ease-framer);
  will-change: opacity, filter, clip-path;
}

.reveal-section.is-visible [data-anim] {
  opacity: 1;
  filter: blur(0);
}

/* Mask reveal — used on titles, images, and big media. Pure clip-path, no transform. */
[data-anim="mask"] {
  clip-path: inset(0 0 100% 0);
}

.reveal-section.is-visible [data-anim="mask"] {
  clip-path: inset(0 0 0 0);
}

/* Mask reveal from the bottom */
[data-anim="mask-up"] {
  clip-path: inset(100% 0 0 0);
}

.reveal-section.is-visible [data-anim="mask-up"] {
  clip-path: inset(0 0 0 0);
}

/* Mask reveal from the left (good for lines/dividers/marquees) */
[data-anim="line"] {
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 720ms var(--ease-framer),
    opacity 400ms var(--ease-framer);
}

.reveal-section.is-visible [data-anim="line"] {
  clip-path: inset(0 0 0 0);
}

/*
 * Block — Framer-signature slide-up com spring easing. Menor distância (0.75rem
 * em vez de 1.6rem) pra dar aquele "settle" bonito do Motion.
 */
[data-anim="block"] {
  translate: 0 0.75rem;
  transition:
    opacity var(--duration-reveal) var(--ease-framer),
    translate var(--duration-reveal) var(--ease-framer),
    filter var(--duration-reveal) var(--ease-framer);
}

.reveal-section.is-visible [data-anim="block"] {
  translate: 0 0;
}

/*
 * Media — Framer style: scale 1.03→1 com spring, sem clip-path mask agressivo.
 * O blur do base [data-anim] já dá o efeito de "focar" durante a entrada.
 */
[data-anim="media"] {
  scale: 1.03;
  transition:
    opacity var(--duration-reveal) var(--ease-framer),
    scale var(--duration-mask) var(--ease-framer),
    filter var(--duration-reveal) var(--ease-framer);
}

.reveal-section.is-visible [data-anim="media"] {
  scale: 1;
}

/* Stagger — auto-delay siblings based on --i index variable on the element */
[data-anim] {
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}

/* Convenience: any child of [data-stagger-children] gets auto staggered via :nth-child */
[data-stagger-children] > * {
  --i: 0;
}
[data-stagger-children] > *:nth-child(1)  { --i: 0; }
[data-stagger-children] > *:nth-child(2)  { --i: 1; }
[data-stagger-children] > *:nth-child(3)  { --i: 2; }
[data-stagger-children] > *:nth-child(4)  { --i: 3; }
[data-stagger-children] > *:nth-child(5)  { --i: 4; }
[data-stagger-children] > *:nth-child(6)  { --i: 5; }
[data-stagger-children] > *:nth-child(7)  { --i: 6; }
[data-stagger-children] > *:nth-child(8)  { --i: 7; }
[data-stagger-children] > *:nth-child(9)  { --i: 8; }
[data-stagger-children] > *:nth-child(10) { --i: 9; }

@media (prefers-reduced-motion: reduce) {
  .page--stack {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}

.page--disorder .site-main {
  min-height: 100vh;
}

.page--manifesto .site-main,
.page--works .site-main,
.page--about .site-main,
.page--servicos .site-main,
.page--contato .site-main {
  min-height: 100vh;
}

@media (prefers-reduced-motion: no-preference) {
  .home-loading__mark,
  .disorder-hero__layer,
  .works-hero__title,
  .works-hero__thumb,
  .servicos-hero__title,
  .servicos-hero__item,
  .manifesto-hero__title,
  .manifesto-hero__thumb,
  .about-hero__text,
  .contato-hero__form {
    transition:
      opacity var(--duration-base) var(--ease-premium),
      transform var(--duration-base) var(--ease-premium);
  }

  .home-loading__mark:hover {
    transform: scale(1.015) translateZ(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-section {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .footer-carousel__track {
    animation: none;
    transform: translate(-50%, -50%);
  }

  .works-hero__carousel-track {
    animation: none;
  }
}