/* Camada de movimento (skill criar-site-motion), por cima da Régua de cor.
   Só vale com a classe .mo no <html>, que o motion.js põe quando o visitante não pediu movimento reduzido. */

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Linha de progresso da página: a régua, em uma barra só */
.progresso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; display: none; }
.mo .progresso { display: block; }
.progresso i { display: block; height: 100%; background: var(--ouro); transform-origin: 0 50%; transform: scaleX(0); }

/* Títulos: cada palavra sobe de uma máscara */
.mo [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.mo [data-split] .w > span { display: inline-block; will-change: transform; }

/* Listas e grades que entram em sequência */
.mo [data-stagger] > * { will-change: transform, opacity; }

/* Passos que acendem conforme a rolagem */
.mo [data-passos] { position: relative; }
.mo [data-passos]::before,
.mo [data-passos] .trilho { display: none; }
.mo [data-passos] li {
  position: relative;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 16px;
  transition: all .35s var(--ease);
  opacity: .48;
}
.mo [data-passos] li.ativo {
  opacity: 1;
  border-color: rgba(199, 82, 44, 0.35);
  background: #FFFFFF;
  box-shadow: 0 4px 20px -4px rgba(17, 19, 23, 0.05);
}
.mo [data-passos] li::before {
  content: "0" counter(p);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--dentina, #EFEFEA);
  color: var(--tinta);
  border: 1px solid var(--linha) !important;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  transition: all .35s var(--ease);
}
.mo [data-passos] li.ativo::before {
  background: var(--ouro);
  color: #FFFFFF;
  border-color: var(--ouro) !important;
}

/* Blocos escuros: grão de filme, vinheta e poeira dourada, só aqui */
.mo-host { position: relative; isolation: isolate; overflow: clip; }
.mo-host > *:not(.mo-fx) { position: relative; z-index: 2; }
.mo-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mo-fx .grao { position: absolute; inset: -50%; width: 200%; height: 200%; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grao 8s steps(10) infinite; }
.mo-fx .vinheta { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 58%, rgba(17, 19, 23, .5) 100%); }
.mo-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes grao {
  0% { transform: translate(0, 0); } 10% { transform: translate(-5%, -10%); } 20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); } 40% { transform: translate(-5%, 25%); } 50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0); } 70% { transform: translate(0, 15%); } 80% { transform: translate(3%, 35%); } 90% { transform: translate(-10%, 10%); }
}
.final.mo-host { border-radius: 28px; }

@media (prefers-reduced-motion: reduce) {
  .mo-fx .grao { animation: none; }
}

/* Números do kit: contam ao entrar na tela (sem JS ficam escritos) */
.numeros { border-block: 1px solid var(--linha); background: var(--papel); }
.numeros__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding-block: clamp(28px, 4vw, 52px); }
.numeros__item { margin: 0; padding: 0 clamp(12px, 2vw, 28px); border-left: 1px solid var(--linha); display: flex; flex-direction: column; gap: 6px; }
.numeros__item:first-child { border-left: 0; padding-left: 0; }
.numeros__item b { font-family: var(--serif); font-weight: 800; font-size: clamp(44px, 7vw, 96px); line-height: 1; letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.numeros__item span { font-size: clamp(13px, 1.2vw, 16px); color: var(--tinta-2); }
@media (max-width: 640px) {
  .numeros__grade { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; padding-block: 14px !important; overflow-x: auto; scrollbar-width: none; }
  .numeros__item { padding: 0 8px !important; border-left: 1px solid var(--linha) !important; text-align: center; }
  .numeros__item:first-child { border-left: 0 !important; }
  .numeros__item b { font-size: 24px !important; }
  .numeros__item span { font-size: 11px !important; line-height: 1.2; }
}

[data-hero-cartas] { position: relative; }

/* Três frases: cada bloco ocupa a tela em cor cheia. Sem movimento, ficam empilhados */
.frases__p { margin: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 0 .28em; padding: clamp(40px, 9vw, 96px) var(--gutter, 24px); min-height: 46vh; text-align: center; font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 4.6vw, 68px); line-height: 1.08; letter-spacing: -.035em; }
.frases__p em { font-style: normal; display: contents; }
.frases__p--1 { background: var(--tinta); color: var(--papel); }
.frases__p--2 { background: var(--ouro); color: #fff; }
.frases__p--1 em { color: var(--ouro); }
.mo .frases { margin-top: 0; background: var(--tinta); }
.frases .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.frases .w > span { display: inline-block; }
.mo .frases__pin { position: relative; height: 100dvh; min-height: 520px; overflow: clip; }
.mo .frases__p { position: absolute; inset: 0; min-height: 0; }

/* Faixa de tipografia gigante em duas cores */
.letreiro { overflow: hidden; padding-block: clamp(18px, 3vw, 40px); background: var(--esmalte); border-block: 1px solid var(--linha); }
.letreiro__trilho { display: flex; width: max-content; will-change: transform; }
.letreiro__trilho span { font-family: var(--serif); font-weight: 800; font-size: clamp(56px, 11vw, 168px); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; white-space: pre; color: var(--tinta); }
.letreiro__trilho i { font-style: normal; color: var(--ouro); }
.letreiro:not(.on) .letreiro__trilho { transform: none; }

/* Cena do anel: foto em tela cheia. Sem movimento fica o quadro parado (poster) */
.cena { position: relative; background: var(--esmalte); border-block: 1px solid var(--linha); }
.cena__pin { position: relative; height: min(78vh, 720px); min-height: 460px; overflow: clip; }
.cena__poster, .cena__canvas, .cena__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cena__canvas, .cena__video { display: none; }
.cena__veu { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246,246,243,.94) 0%, rgba(246,246,243,.72) 34%, rgba(246,246,243,0) 62%), linear-gradient(180deg, rgba(246,246,243,.55) 0%, rgba(246,246,243,0) 22%, rgba(246,246,243,0) 78%, rgba(246,246,243,.7) 100%); }
.cena__texto { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; max-width: 1200px; margin: 0 auto; left: 0; right: 0; }
.cena__texto .h2 { max-width: 13ch; font-size: clamp(34px, 4.6vw, 62px); }
.cena__texto .h2 em { color: var(--ouro-g); }
.cena__legendas { position: relative; height: 2.2em; margin-top: 28px; font-family: var(--serif); font-size: clamp(22px, 2.6vw, 32px); color: var(--ouro-p); }
.cena__legendas p { position: absolute; inset: 0 auto auto 0; margin: 0; opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); transform: translateY(8px); }
.cena__legendas p.on { opacity: 1; transform: none; }
.cena__legendas p:first-child { opacity: 1; transform: none; }
.mo .cena__legendas p:first-child:not(.on) { opacity: 0; transform: translateY(-8px); }
@media (min-width: 769px) { .mo .cena__canvas.pronto { display: block; } .mo .cena__pin { height: 100dvh; min-height: 560px; } }
@media (max-width: 768px) {
  /* Celular: sem pin e sem 100vh rígido que cause layout shift */
  .mo .frases__pin { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .mo .frases__p { position: relative !important; inset: auto !important; min-height: auto !important; padding: 24px var(--gutter, 20px) !important; font-size: clamp(22px, 5.5vw, 32px) !important; }
  .mo-fx { display: none !important; }
  .mo .cena__video { display: block; }
  .cena__pin { position: relative; height: min(48dvh, 360px); min-height: 260px; }
  .cena__veu { background: linear-gradient(180deg, rgba(246,246,243,.9) 0%, rgba(246,246,243,.35) 45%, rgba(246,246,243,.2) 60%, rgba(246,246,243,.9) 100%); }
  .cena__texto { justify-content: space-between; padding-block: 24px; }
  .cena__legendas { margin-top: 0; }
}
@media (max-width: 1000px) and (min-width: 769px) { .cena__texto .h2 { max-width: 16ch; } }