/* ═══════════════════════════════════════════════════════════════════════════
   Camada de MOTION — do handoff design_handoff_lp_motion (2026-09-05)

   Principio do designer, e vale repetir porque decide todo caso duvidoso:
   "O movimento tem que parecer conducao de orquestra: entradas medidas, nada
   elastico, nada que salte. Sem bounce, sem spring, sem overshoot. Uma unica
   curva para tudo. Se um efeito chama atencao para si mesmo, esta errado."

   Duracoes, atrasos e curvas sao FINAIS. Os valores longos (42s do ken burns,
   11s do brilho) sao deliberados: encurta-los quebra a intencao.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes slRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes slKen {
  from { transform: scale(1.05) translate3d(.6%, .5%, 0); }
  to   { transform: scale(1.16) translate3d(-1.4%, -1.2%, 0); }
}
@keyframes slCue {
  0%   { transform: scaleY(0); transform-origin: top;    opacity: 0; }
  18%  { opacity: 1; }
  48%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
  52%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  88%  { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
@keyframes slSheenText {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes slFadeIn { from { opacity: 0; } to { opacity: 1; } }

html { scroll-behavior: smooth; }
/* Sem isto a barra fixa cobre o titulo da secao quando alguem clica no menu. */
section[id] { scroll-margin-top: 88px; }

/* ── Revelacao no scroll ─────────────────────────────────────────────────── */
/* REGRA CRITICA DE DEGRADACAO, palavras do handoff: o conteudo tem que estar
   VISIVEL por padrao. O `opacity: 0` so entra depois que o JS marca o
   documento com [data-motion]. Se o JS falhar, ou o visitante pedir movimento
   reduzido, a pagina aparece inteira. NAO INVERTA ISSO.
   (E a mesma falha aberta que ja me mordeu uma vez nesta pagina.) */
html[data-motion] [data-reveal],
html[data-motion] [data-reveal-group] > *:not([data-reveal-skip]) {
  opacity: 0;
  transform: translateY(26px);
}
html[data-motion] [data-reveal][data-in],
html[data-motion] [data-reveal-group][data-in] > *:not([data-reveal-skip]),
html[data-motion] [data-hero-stagger] > *:not([data-reveal-skip]) {
  animation: slRise 950ms cubic-bezier(.2, .7, .3, 1) both;
}
html[data-motion] [data-reveal-group][data-in] > *:nth-child(2)    { animation-delay:  90ms; }
html[data-motion] [data-reveal-group][data-in] > *:nth-child(3)    { animation-delay: 180ms; }
html[data-motion] [data-reveal-group][data-in] > *:nth-child(4)    { animation-delay: 270ms; }
html[data-motion] [data-reveal-group][data-in] > *:nth-child(5)    { animation-delay: 360ms; }
html[data-motion] [data-reveal-group][data-in] > *:nth-child(6)    { animation-delay: 450ms; }
html[data-motion] [data-reveal-group][data-in] > *:nth-child(7)    { animation-delay: 540ms; }
html[data-motion] [data-reveal-group][data-in] > *:nth-child(n+8)  { animation-delay: 620ms; }
html[data-motion] [data-hero-stagger] > *:nth-child(2) { animation-delay: 160ms; }
html[data-motion] [data-hero-stagger] > *:nth-child(3) { animation-delay: 320ms; }
html[data-motion] [data-hero-stagger] > *:nth-child(4) { animation-delay: 480ms; }
html[data-motion] [data-hero-stagger] > *:nth-child(5) { animation-delay: 640ms; }

/* ── Barra fixa do topo ──────────────────────────────────────────────────── */
/* Hoje o menu so existe dentro do heroi: depois de rolar, ninguem chega no
   orcamento sem voltar ao topo. -101% e nao -100% para a borda de 1px nao
   vazar no alto. */
.sl-barra {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 48px;
  background: rgba(11, 10, 9, .88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #1A1714;
  transform: translateY(-101%);
  pointer-events: none;
  transition: transform 460ms cubic-bezier(.2, .7, .3, 1);
}
.sl-barra[data-visivel] { transform: translateY(0); pointer-events: auto; }

.sl-barra__emblema { display: block; flex: none; }
.sl-barra__emblema img { width: 40px; height: 40px; border-radius: 999px; display: block; }
.sl-barra nav { display: flex; align-items: center; gap: 26px; }
.sl-barra__link {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #A8A096; text-decoration: none; transition: color 200ms;
}
.sl-barra__link:hover,
.sl-barra__link[data-ativo] { color: #F0DFA8; }
.sl-barra__cta {
  font-family: inherit; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 500;
  padding: 10px 20px; border: 1px solid rgba(212, 175, 55, .55);
  border-radius: 999px; color: #F0DFA8; text-decoration: none;
  transition: background 200ms, border-color 200ms;
}
.sl-barra__cta:hover { background: rgba(212, 175, 55, .14); border-color: #D4AF37; }
/* A pagina e longa — 232 musicas, 7 momentos, 4 formacoes. Esta linha e a
   unica pista de profundidade, e le como um playhead, o que combina. */
.sl-barra__progresso {
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 0%;
  background: linear-gradient(90deg, #A6801F, #E3C55E);
  transition: width 100ms linear;
}

/* ── Heroi ───────────────────────────────────────────────────────────────── */
/* 42s e deliberado: lento o bastante para nao ser percebido como animacao, so
   como a imagem nao estando morta. Quando o mp4 do heroi entrar, REMOVER —
   video e ken burns juntos ficam nauseantes. */
html[data-motion] .sl-heroi-foto {
  will-change: transform;
  animation: slKen 42s ease-in-out infinite alternate;
}

/* Brilho no titulo. 11s linear, sem easing: mais rapido vira anuncio. */
html[data-motion] .sl-brilho {
  background: linear-gradient(120deg, #FBF4DA 0%, #E3C55E 42%, #C9A227 86%, #FBF4DA 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: slSheenText 11s linear infinite;
}

/* Convite para rolar. O traco desenha de cima para baixo e recolhe pela base —
   nao e um laco que reinicia, e um gesto que vai e volta. */
.sl-role {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
html[data-motion] .sl-role { animation: slFadeIn 1200ms ease-out 1500ms both; }
.sl-role__rotulo {
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: #8F887D;
}
.sl-role__traco {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, rgba(212, 175, 55, .85), rgba(212, 175, 55, 0));
}
html[data-motion] .sl-role__traco { animation: slCue 2800ms ease-in-out 1900ms infinite; }

/* ── Capas dos reels ─────────────────────────────────────────────────────── */
/* O container ja tem overflow: hidden, e a borda do link ja muda no hover. */
.sl-reel img { transition: transform 800ms cubic-bezier(.2, .7, .3, 1); }
@media (hover: hover) and (pointer: fine) {
  .sl-reel:hover img { transform: scale(1.06); }
}

/* ── Movimento reduzido — obrigatorio ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
}