/* motion.css — camada de animação "leve e premium".
 * Carregada por último: refina os reveals, encena os cabeçalhos, dá vida ao
 * hero e adiciona micro-interações. Tudo respeita prefers-reduced-motion. */

/* ---------- Barra de progresso de leitura ---------- */
.scroll-progresso {
  position: fixed; top: 0; left: 0; z-index: 300;
  height: 3px; width: 100%; transform: scaleX(0); transform-origin: left;
  background: var(--gold);
  transition: transform .12s linear;
  pointer-events: none;
}

/* ---------- Reveal base (rise + blur suave) ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(30px); filter: blur(6px);
  transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Variantes direcionais (use data-reveal="left|right|zoom") */
[data-reveal="left"]  { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="zoom"]  { transform: scale(.93); filter: blur(8px); }
[data-reveal="left"].is-in,
[data-reveal="right"].is-in,
[data-reveal="zoom"].is-in { transform: none; filter: none; }

/* ---------- Stagger de filhos (cascata) ---------- */
[data-reveal-stagger] > * {
  opacity: 0; transform: translateY(32px); filter: blur(5px);
  transition: opacity .72s var(--ease), transform .72s var(--ease), filter .72s var(--ease);
}
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; filter: none; }
[data-reveal-stagger].is-in > *:nth-child(1)  { transition-delay: .00s; }
[data-reveal-stagger].is-in > *:nth-child(2)  { transition-delay: .08s; }
[data-reveal-stagger].is-in > *:nth-child(3)  { transition-delay: .16s; }
[data-reveal-stagger].is-in > *:nth-child(4)  { transition-delay: .24s; }
[data-reveal-stagger].is-in > *:nth-child(5)  { transition-delay: .32s; }
[data-reveal-stagger].is-in > *:nth-child(6)  { transition-delay: .40s; }
[data-reveal-stagger].is-in > *:nth-child(7)  { transition-delay: .48s; }
[data-reveal-stagger].is-in > *:nth-child(8)  { transition-delay: .56s; }

/* ---------- Cabeçalho de seção encenado (eyebrow → título → subtítulo) ---------- */
.secao-head[data-reveal] { opacity: 1; transform: none; filter: none; }
.secao-head[data-reveal] > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.secao-head[data-reveal].is-in > * { opacity: 1; transform: none; }
.secao-head[data-reveal].is-in .eyebrow        { transition-delay: .02s; }
.secao-head[data-reveal].is-in .titulo-secao   { transition-delay: .12s; }
.secao-head[data-reveal].is-in .subtitulo-secao{ transition-delay: .26s; }

/* eyebrow: a linha cresce sozinha ao entrar */
.eyebrow .ln { transform-origin: left; transition: transform .9s var(--ease) .3s; }
[data-reveal]:not(.is-in) .eyebrow .ln { transform: scaleX(0); }

/* ---------- Hero: entrada em cascata + brisa no fundo ---------- */
.hero__text[data-reveal] { opacity: 1; transform: none; filter: none; }
.hero__text[data-reveal] > * {
  opacity: 0; transform: translateY(34px); filter: blur(7px);
  transition: opacity .95s var(--ease), transform .95s var(--ease), filter .95s var(--ease);
}
.hero__text[data-reveal].is-in > * { opacity: 1; transform: none; filter: none; }
.hero__text[data-reveal].is-in .hero__mote      { transition-delay: .05s; }
.hero__text[data-reveal].is-in .hero__tag       { transition-delay: .12s; }
.hero__text[data-reveal].is-in .hero__kicker    { transition-delay: .18s; }
.hero__text[data-reveal].is-in h1               { transition-delay: .30s; }
.hero__text[data-reveal].is-in .hero__sub       { transition-delay: .42s; }
.hero__text[data-reveal].is-in .hero__destaques { transition-delay: .50s; }
.hero__text[data-reveal].is-in .hero__ctas      { transition-delay: .58s; }

/* Folga vertical para o parallax não expor bordas */
.hero__media > #heroBg { top: -7%; bottom: -7%; height: 114%; will-change: transform; }

/* Ken Burns lento na mídia do hero (uma vez, sem custo de layout) */
.hero__media #heroBg img,
.hero__media #heroBg video {
  transform: scale(1.14);
  transition: transform 2.4s var(--ease);
}
.hero.is-ready .hero__media #heroBg img,
.hero.is-ready .hero__media #heroBg video { transform: scale(1.06); }

/* Selo do hero surge por último */
.hero__selo { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease) .7s, transform .8s var(--ease) .7s; }
.hero.is-ready .hero__selo { opacity: 1; transform: none; }

/* ---------- Micro-interações (leves) ---------- */
.btn { will-change: transform; }
.btn--primario, .btn--escuro, .btn--contorno { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease); }
.btn--primario:hover, .btn--escuro:hover { transform: translateY(-2px); box-shadow: 0 12px 26px #16332e2e; }
.btn--primario:active, .btn--escuro:active { transform: translateY(0); }

/* Cartões de prova/entregas ganham leve elevação */
.entregue-card, .depo { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.entregue-card:hover, .depo:hover { transform: translateY(-4px); box-shadow: 0 18px 40px #16332e16; }

/* Faixa MCMV: leve realce ao passar o mouse */
.mcmv__card { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.mcmv__card:hover { transform: translateY(-3px); box-shadow: 0 20px 46px #16332e14; }

/* Marca no topo: emblema com respiro sutil ao hover */
.marca-topo .emblema { transition: transform .5s var(--ease); }
.marca-topo:hover .emblema { transform: rotate(-4deg) scale(1.04); }

/* ============================================================= *
 * TÍTULOS: reveal por máscara, linha a linha (assinatura)
 * ============================================================= */
.split-linhas { opacity: 1 !important; }
[data-reveal].split-linhas { transform: none !important; filter: none !important; }
.secao-head[data-reveal] .titulo-secao.split-linhas,
.hero__text[data-reveal] h1.split-linhas { opacity: 1 !important; transform: none !important; filter: none !important; }
.split-linhas .linha { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.split-linhas .linha__i { display: block; transform: translateY(120%); transition: transform 1.05s var(--ease); will-change: transform; }
.is-in .split-linhas .linha__i,
.is-ready .split-linhas .linha__i,
.split-linhas.is-in .linha__i { transform: translateY(0); }

/* ============================================================= *
 * GRÃO DE FILME (textura sutil sobre toda a página)
 * ============================================================= */
.grao {
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}

/* ============================================================= *
 * CURSOR CUSTOMIZADO (desktop)
 * ============================================================= */
html.tem-cursor, html.tem-cursor a, html.tem-cursor button,
html.tem-cursor input, html.tem-cursor textarea, html.tem-cursor select,
html.tem-cursor label, html.tem-cursor [role="tab"], html.tem-cursor .viz-row { cursor: none; }
.cursor { position: fixed; top: 0; left: 0; z-index: 999; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.cursor.is-on { opacity: 1; }
.cursor__dot, .cursor__ring { position: absolute; top: 0; left: 0; border-radius: 50%; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold); }
.cursor__ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 1px solid var(--gold); background: transparent;
  transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.cursor.is-hover .cursor__ring { width: 68px; height: 68px; margin: -34px 0 0 -34px; background: #c08a4318; border-color: var(--gold); }
.cursor.is-hover .cursor__dot { opacity: 0; }
.cursor.is-press .cursor__ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ============================================================= *
 * ÍNDICE DE SEÇÕES (navegação editorial fixa)
 * ============================================================= */
.indice {
  position: fixed; right: clamp(14px, 1.6vw, 28px); top: 50%; transform: translateY(-50%);
  z-index: 80; opacity: 0; pointer-events: none;
  mix-blend-mode: difference; color: #fff;
  transition: opacity .5s var(--ease);
}
.indice.is-on { opacity: 1; pointer-events: auto; }
.indice ul { display: grid; gap: .05rem; }
.indice__item { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; padding: .32rem 0; color: #fff; }
.indice__num { font-family: var(--mono); font-size: .58rem; font-weight: 600; letter-spacing: .1em; opacity: .4; transition: opacity .3s var(--ease); font-variant-numeric: tabular-nums; }
.indice__rot { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .45s var(--ease), opacity .35s var(--ease); order: -1; }
.indice__traco { width: 16px; height: 1px; background: #fff; opacity: .35; transition: width .4s var(--ease), opacity .3s var(--ease); }
.indice__item:hover .indice__rot, .indice__item.is-atual .indice__rot { max-width: 220px; opacity: .85; }
.indice__item:hover .indice__num, .indice__item.is-atual .indice__num { opacity: 1; }
.indice__item:hover .indice__traco { width: 26px; opacity: .8; }
.indice__item.is-atual .indice__traco { width: 36px; opacity: 1; }
@media (max-width: 1099px) { .indice { display: none; } }

/* ============================================================= *
 * REVEAL DE IMAGEM EM CORTINA (clip-path)
 * ============================================================= */
.ganhos__feature img,
.ambientes__main img,
.estilo-galeria .ph img,
.entregue-fig img,
.impacto__media img, .impacto__media video {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.15s var(--ease), transform .9s var(--ease);
}
[data-reveal]:not(.is-in) .ganhos__feature img,
[data-reveal]:not(.is-in) .ambientes__main img,
[data-reveal-stagger]:not(.is-in) .estilo-galeria .ph img,
[data-reveal-stagger]:not(.is-in) .entregue-fig img,
.impacto__media:not(.is-in) img,
.impacto__media:not(.is-in) video {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.14);
}

/* ============================================================= *
 * HERO: indicador de rolagem
 * ============================================================= */
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(16px, 3vh, 30px); transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: .8rem;
  color: var(--txt-inv-suave); font-family: var(--mono); font-size: .58rem; letter-spacing: .28em; text-transform: uppercase;
  opacity: 0; transition: opacity .8s var(--ease) 1s, color .3s var(--ease);
}
.hero.is-ready .hero__scroll { opacity: .8; }
.hero__scroll:hover { color: var(--gold); }
.hero__scroll-linha { position: relative; width: 1px; height: 48px; background: currentColor; opacity: .35; overflow: hidden; }
.hero__scroll-linha::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 45%; background: var(--gold); animation: scrollCue 1.9s var(--ease) infinite; }
@keyframes scrollCue { 0% { transform: translateY(-120%); } 60%, 100% { transform: translateY(340%); } }
@media (max-width: 900px) { .hero__scroll { display: none; } }

/* ============================================================= *
 * MARQUEE CINÉTICO (a inclinação vem do JS via skewX)
 * ============================================================= */
.marquee { position: relative; }
.marquee__track { will-change: transform; }

/* ============================================================= *
 * BENEFÍCIOS: painel-âncora fixo (sticky) enquanto a lista rola
 * ============================================================= */
@media (min-width: 981px) {
  .ganhos { align-items: start; }
  .ganhos__feature { position: sticky; top: clamp(96px, 14vh, 150px); }
}

/* ============================================================= *
 * SEÇÃO FIXADA HORIZONTAL (Estilo de vida = filme que percorre)
 * ============================================================= */
.secao--pin { background: var(--areia); position: relative; }
.pin-espaco { position: relative; }
.pin-palco {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column;
}
.pin-head { flex: 0 0 auto; margin: 0; max-width: 52ch; padding: clamp(88px, 13vh, 140px) var(--margem) clamp(16px, 2.2vh, 28px); }
.pin-viewport { flex: 1 1 auto; display: flex; align-items: center; overflow: hidden; }
.pin-track { display: flex; gap: clamp(18px, 2.4vw, 44px); padding-inline: var(--margem); align-items: stretch; will-change: transform; }
.pin-track .estilo-galeria { display: contents; }
.estilo-intro { flex: 0 0 min(82vw, 500px); margin: 0; display: flex; flex-direction: column; justify-content: center; padding-right: clamp(16px, 2.5vw, 44px); }
.estilo-intro .subtitulo-secao { max-width: 42ch; }
.pin-track figure { flex: 0 0 clamp(260px, 32vw, 460px); margin: 0; display: flex; flex-direction: column; }
.pin-track .ph { flex: 1 1 auto; min-height: clamp(300px, 52vh, 560px); border-radius: var(--raio-md); overflow: hidden; background: var(--verde); }
.pin-track .ph img { width: 112%; height: 100%; margin-left: -6%; object-fit: cover; transition: none; will-change: transform; }
.pin-track figcaption { font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--txt-suave); padding-top: .9rem; margin-top: .9rem; border-top: 1px solid var(--linha); }
.pin-track .estilo-quote { flex: 0 0 clamp(280px, 30vw, 440px); align-self: stretch; margin: 0; }

.pin-rodape { flex: 0 0 auto; display: flex; align-items: center; gap: 1.6rem; padding: clamp(12px, 1.8vh, 22px) var(--margem) clamp(24px, 4vh, 44px); }
.pin-dica { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); white-space: nowrap; }
.pin-dica svg { width: 16px; height: 16px; }
.pin-progresso { position: relative; flex: 1; height: 2px; background: var(--linha-forte); border-radius: 2px; overflow: hidden; }
.pin-progresso i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--verde); transition: width .1s linear; }

/* Fallback sem pin (mobile, reduced-motion e ?noanim): rolagem horizontal simples */
@media (max-width: 899px) {
  .pin-espaco { height: auto !important; }
  .pin-palco {
    position: static; height: auto; overflow: visible;
    padding-top: clamp(88px, 14vh, 116px);
  }
  .pin-viewport {
    overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding-block: clamp(28px, 5.5vw, 48px);
  }
  .pin-track {
    padding-right: 20px;
    padding-bottom: clamp(20px, 4vw, 32px);
    gap: clamp(24px, 5vw, 40px);
  }
  .pin-track::before {
    content: "";
    flex: 0 0 20px;
    scroll-snap-align: start;
  }
  .pin-track > .estilo-intro,
  .pin-track > figure,
  .pin-track .estilo-quote { scroll-snap-align: start; }
  .pin-track figure, .pin-track .estilo-quote { flex-basis: 78vw; }
  .estilo-intro {
    flex-basis: min(86vw, 500px);
    padding-right: clamp(20px, 4vw, 32px);
  }
  .estilo-intro .eyebrow { margin-bottom: clamp(22px, 4vw, 32px); }
  .estilo-intro .subtitulo-secao { margin-top: clamp(1.3rem, 3vw, 1.8rem); }
  .pin-track .ph img { width: 100%; margin-left: 0; }
  .pin-head { padding-top: var(--secao-y); }
  .pin-rodape { display: none; }
}
.sem-pin .pin-espaco { height: auto !important; }
.sem-pin .pin-palco { position: static; height: auto; overflow: visible; }
.sem-pin .pin-viewport { overflow-x: auto; }
.sem-pin .pin-track .ph img { width: 100%; margin-left: 0; }

/* ---------- Acessibilidade: sem movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progresso, .cursor, .hero__scroll { display: none; }
  .pin-espaco { height: auto !important; }
  .pin-palco { position: static; height: auto; overflow: visible; }
  .pin-viewport { overflow-x: auto; }
  .pin-track .ph img { width: 100%; margin-left: 0; transform: none !important; }
  html.tem-cursor, html.tem-cursor * { cursor: auto; }
  [data-reveal], [data-reveal] > *,
  [data-reveal-stagger] > *,
  .secao-head[data-reveal] > *,
  .hero__text[data-reveal] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .split-linhas .linha__i { transform: none !important; }
  .eyebrow .ln { transform: scaleX(1) !important; }
  .hero__media #heroBg img, .hero__media #heroBg video { transform: scale(1.03) !important; }
  .hero__selo { opacity: 1 !important; transform: none !important; }
  .ganhos__feature img, .ambientes__main img, .estilo-galeria .ph img,
  .entregue-fig img, .impacto__media img, .impacto__media video { clip-path: none !important; transform: none !important; }
}