/* Sokio v5: a frase com o S dentro. O S do símbolo mora na frase e se abre para o site inteiro. */
:root {
  --grafite: #050506;
  --chapado: #141518;
  --prata: #C9CCD1;
  --texto: #EDEEF0;
  --texto-2: #A3A7AE;
  --f-titulo: "Manrope", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, sans-serif;
  --ease-saida: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-meio: cubic-bezier(0.77, 0, 0.175, 1);
  --lateral: clamp(20px, 4vw, 64px);
  /* O símbolo em máscara (só as duas peças, sem o fundo do ícone) */
  --simbolo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cmask id='m'%3E%3Crect width='256' height='256' fill='white'/%3E%3Cpath d='M196 0C120 24 76 76 128 128S136 232 60 256' stroke='black' stroke-width='24' fill='none'/%3E%3C/mask%3E%3Crect x='16' y='16' width='224' height='224' rx='56' mask='url(%23m)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { background: var(--grafite); color-scheme: dark; scrollbar-color: #2a2d32 var(--grafite); }
body { margin: 0; background: var(--grafite); color: var(--texto); font: 400 1rem/1.55 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--prata); color: #0B0D10; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
img, svg { display: block; }
a { color: inherit; }
h1, h2 { font-family: var(--f-titulo); font-weight: 600; margin: 0; letter-spacing: -0.03em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--prata); outline-offset: 4px; border-radius: 6px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Camadas fixas */
#cena { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; opacity: 0; pointer-events: none; }
.com-3d #cena { opacity: 1; transition: opacity 400ms var(--ease-saida); }
.grao { position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.movimento .grao { animation: grao 0.9s steps(6) infinite; }
@keyframes grao { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-4%); } 75% { transform: translate(-4%,-1%); } }
.topo, main { position: relative; z-index: 3; }

/* ---------- Carregamento ---------- */
.carga { display: none; }
.movimento .carga { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.movimento.antes .carga { pointer-events: auto; }
.cortina { position: absolute; inset: 0; background: var(--grafite); will-change: transform; }
.c-esq { margin-right: -1px; }
.rasgo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.rasgo path { fill: none; stroke: #F2F3F5; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(242,243,245,0.9)) drop-shadow(0 0 22px rgba(201,204,209,0.6)); } /* taste-skill-ignore: luz e metal da marca Sokio (regra da marca) */
.carga-simbolo { position: absolute; left: 50%; top: 50%; width: min(34vmin, 240px); aspect-ratio: 1; translate: -50% -50%; transform-origin: 50% 50%; }
.carga-pecas, .carga-prata { position: absolute; inset: 0; width: 100%; height: 100%; }
.carga-pecas { fill: #F2F3F5; opacity: 0; animation: surgir 1200ms var(--ease-saida) 200ms forwards; }
.carga-prata { opacity: 0; }
@keyframes surgir { to { opacity: 0.09; } }
.pontos { position: absolute; inset: 0; }
/* Cada ponto acende das pontas para o meio (os dois lados ao mesmo tempo) e depois respira em onda */
.pontos i {
  position: absolute; width: 3.4%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  background: #F2F3F5; box-shadow: 0 0 10px 2px rgba(242,243,245,0.75), 0 0 26px 6px rgba(201,204,209,0.35); /* taste-skill-ignore: luz e metal da marca Sokio (regra da marca) */
  opacity: 0; transform: scale(0.4);
  animation: acende 700ms var(--ease-saida) calc(250ms + var(--d) * 650ms) forwards,
             onda 1800ms ease-in-out calc(1100ms + var(--d) * 600ms) infinite;
}
@keyframes acende { to { opacity: 0.55; transform: scale(1); } }
@keyframes onda { 0%, 100% { opacity: 0.55; transform: scale(1); } 45% { opacity: 1; transform: scale(1.35); } }
/* Duas luzes chegam ao mesmo tempo, uma de cada lado da tela, e acendem as duas pontas do S */
.carga-simbolo::before { content: ""; position: absolute; inset: -60%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(201,204,209,0.16), transparent); /* taste-skill-ignore: luz e metal da marca Sokio (regra da marca) */
  animation: surgir-halo 1400ms ease 600ms forwards, respira 3600ms ease-in-out 2000ms infinite; }
@keyframes surgir-halo { to { opacity: 1; } }
@keyframes respira { 50% { opacity: 0.55; } }
.cometa { position: absolute; width: 50vw; height: 2px; border-radius: 2px; opacity: 0; }
.c-baixo { right: 76.6%; top: 100%; transform-origin: 100% 50%;
  background: linear-gradient(90deg, transparent, rgba(242,243,245,0.9)); animation: vem-esq 650ms cubic-bezier(0.5, 0, 0.75, 0) forwards; } /* taste-skill-ignore: luz e metal da marca Sokio (regra da marca) */
.c-cima { left: 76.6%; top: 0; transform-origin: 0 50%;
  background: linear-gradient(270deg, transparent, rgba(242,243,245,0.9)); animation: vem-dir 650ms cubic-bezier(0.5, 0, 0.75, 0) forwards; } /* taste-skill-ignore: luz e metal da marca Sokio (regra da marca) */
@keyframes vem-esq { 0% { opacity: 0; transform: translateX(-60vw) scaleX(0.4); } 30% { opacity: 1; } 85% { opacity: 1; transform: translateX(0) scaleX(1); } 100% { opacity: 0; transform: translateX(0) scaleX(0.1); } }
@keyframes vem-dir { 0% { opacity: 0; transform: translateX(60vw) scaleX(0.4); } 30% { opacity: 1; } 85% { opacity: 1; transform: translateX(0) scaleX(1); } 100% { opacity: 0; transform: translateX(0) scaleX(0.1); } }
.carga-numero { position: absolute; left: 50%; bottom: clamp(28px, 7vh, 64px); translate: -50% 0; font: 500 clamp(15px, 1.1vw, 17px)/1 var(--f-texto); color: var(--texto-2); font-variant-numeric: tabular-nums; opacity: 0; animation: surgir-num 600ms var(--ease-saida) 400ms forwards; }
.carga-numero span::after { content: "%"; margin-left: 0.15em; }
@keyframes surgir-num { to { opacity: 1; } }
.carga-fora .carga { opacity: 0; transition: opacity 500ms ease; }

/* ---------- Topo ---------- */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--lateral); }
.topo { transition: transform 320ms var(--ease-saida); }
.topo.escondido { transform: translateY(-110%); }
.marca img { height: 26px; width: auto; transition: filter 200ms ease; }
/* Sobre o convite (fundo claro) o topo fica escuro */
.topo.sobre-claro .marca img { filter: invert(1); }
.topo.sobre-claro .elo { color: #3A3D43; }
.menu { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); font-size: 0.9375rem; }
@media (max-width: 767.98px) { .menu .elo { display: none; } }
.elo { text-decoration: none; color: var(--texto-2); padding: 10px 0; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .elo:hover { color: var(--texto); } }
.elo:focus-visible { color: var(--texto); }

/* Botões em metal (a cor da marca) */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px;
  font: 500 1rem/1 var(--f-texto); text-decoration: none; white-space: nowrap; transition: transform 160ms var(--ease-saida), filter 200ms ease; }
.botao:active { transform: scale(0.97); }
.botao-p { min-height: 40px; padding: 0 18px; font-size: 0.9375rem; }
.botao-metal { color: #0B0D10; background: linear-gradient(180deg, #F2F3F5 0%, #C9CCD1 48%, #9DA1A8 52%, #D9DBDF 100%); } /* taste-skill-ignore: luz e metal da marca Sokio (regra da marca) */
@media (hover: hover) and (pointer: fine) { .botao-metal:hover { filter: brightness(1.08); } }

/* ---------- Abertura: a frase com o S dentro ---------- */
.abertura { position: relative; height: 290svh; }
.palco { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; padding: 0 var(--lateral); }
.eco { position: absolute; top: 50%; height: 132vh; width: auto; aspect-ratio: 1; translate: 0 -50%; pointer-events: none; will-change: transform; }
/* O centro de cada caixa fica a ~30vw do meio: o corte em S de cada peça olha para a frase */
.eco-esq { left: calc(50% - 30vw - 66vh); }
.eco-dir { left: calc(50% + 30vw - 66vh); }
@media (max-width: 767.98px) { .eco { height: 92vh; } .eco-esq { left: calc(50% - 40vw - 46vh); } .eco-dir { left: calc(50% + 40vw - 46vh); } }
.antes .eco { opacity: 0; }
.heroi { position: relative; text-align: center; translate: 0 -2vh; }
.frase { font-size: clamp(34px, 7.4vw, 124px); line-height: 1.02; letter-spacing: -0.045em; }
@media (max-width: 767.98px) { .frase { font-size: min(11.2vw, 56px); } }
.linha { display: block; white-space: nowrap; will-change: transform; }
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.02em 0.1em; margin: -0.04em -0.02em -0.1em; }
.pal > span { display: inline-block; }
/* O farol: o símbolo em pé sobre a frase, grande o bastante para o metal aparecer nítido */
.vao { position: relative; width: clamp(110px, 19vh, 200px); aspect-ratio: 1; margin: 0 auto clamp(24px, 4.5vh, 44px); }
.heroi { padding-top: 4vh; }
@media (max-width: 767.98px) { .vao { width: min(34vw, 150px); } }
.vao svg { width: 100%; height: 100%; transition: opacity 300ms ease; }
.com-3d .vao svg { opacity: 0; }
.apoio { max-width: 34ch; margin: 32px auto 0; font-size: clamp(17px, 1.35vw, 20px); color: var(--texto-2); }
.acoes { margin-top: 32px; display: flex; justify-content: center; gap: 16px; }

/* Antes do carregamento terminar: as palavras esperam embaixo da linha (a cortina cobre tudo) */
.antes .pal > span { transform: translateY(108%); }
.antes .apoio, .antes .acoes, .antes .topo { opacity: 0; }

.luz { position: absolute; left: 0; right: 0; top: clamp(88px, 15vh, 150px); padding: 0 var(--lateral); text-align: center; pointer-events: none; }
.luz-1 { font-size: clamp(26px, 3.2vw, 50px); line-height: 1.1; }
.luz-2 { margin-top: 14px; font-size: clamp(17px, 1.35vw, 20px); color: var(--texto-2); }
.luz .w { display: inline-block; opacity: 0; }
.luz-2 { opacity: 0; }

/* Versão calma e sem 3D: tudo legível, sem rolagem presa */
.luz-calma { display: none; }
.calmo .abertura, .sem-3d .abertura { height: auto; }
.calmo .palco, .sem-3d .palco { position: relative; height: 100svh; }
.calmo .luz, .sem-3d .luz { display: none; }
.calmo .luz-calma, .sem-3d .luz-calma { display: block; padding: 12vh var(--lateral) 16vh; text-align: center; }
.simbolo-grande { width: min(56vw, 360px); height: auto; margin: 0 auto 48px; }
.luz-calma h2 { font-size: clamp(26px, 3.2vw, 50px); line-height: 1.1; }
.luz-calma p { margin-top: 14px; font-size: clamp(17px, 1.35vw, 20px); color: var(--texto-2); }
.calmo .heroi { animation: calmo-entra 900ms ease both; }
@keyframes calmo-entra { from { opacity: 0; } }

/* ---------- Seções seguintes ---------- */
.titulo-secao { font-size: clamp(36px, 5vw, 80px); line-height: 1; letter-spacing: -0.04em; }
.declaracao { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.35; letter-spacing: -0.015em; max-width: 40ch; }
figure { margin: 0; }
img { max-width: 100%; height: auto; }

/* Manifesto: texto à esquerda, foto à direita (mesma grade); embaixo, as faixas do dia a dia */
.manifesto { position: relative; padding: 24vh 0 20vh; overflow: hidden; }
.mf-grade { display: grid; grid-template-columns: 6fr 5fr; gap: 6vw; align-items: center; padding: 0 var(--lateral); }
.mf-texto .declaracao { margin-top: 36px; }
.mf-foto { overflow: hidden; aspect-ratio: 4 / 3; will-change: transform; }
.mf-foto img { width: 100%; height: 118%; object-fit: cover; filter: brightness(0.62); }
/* Duas faixas, uma para a vida e outra para o negócio, correndo em sentidos opostos com a rolagem */
.faixas { margin-top: 16vh; display: grid; gap: 2vh; }
.faixa { display: flex; align-items: center; gap: 0.7em; white-space: nowrap; width: max-content; will-change: transform;
  font: 600 clamp(34px, 5vw, 88px)/1.1 var(--f-titulo); letter-spacing: -0.04em; color: #63676E; }
.faixa-negocio { margin-left: -24vw; }
.faixa .forte { color: var(--texto); }
/* O separador é o próprio símbolo, pequeno e apagado */
.faixa i { flex: none; width: 0.42em; aspect-ratio: 1; background: #3A3D43;
  -webkit-mask: var(--simbolo) center / contain no-repeat; mask: var(--simbolo) center / contain no-repeat; }
@media (max-width: 767.98px) {
  .manifesto { padding: 16vh 0 14vh; }
  .mf-grade { grid-template-columns: 1fr; gap: 48px; padding: 0 20px; }
  .mf-foto { width: 82%; margin-left: auto; }
  .faixas { margin-top: 10vh; }
}
/* Virada: tudo some, só as duas frases */
.virada { position: relative; height: 210svh; }
.virada-palco { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding: 0 var(--lateral); text-align: center; }
.virada-frase { font-size: clamp(34px, 5.6vw, 92px); line-height: 1.04; letter-spacing: -0.04em; }
.vf { display: block; margin: 0; }
.vf-1 { font: 600 clamp(28px, 3.6vw, 60px)/1.1 var(--f-titulo); letter-spacing: -0.035em; color: var(--texto-2); margin-bottom: 0.3em; }
.vf-2 { font-size: clamp(36px, 5.6vw, 92px); line-height: 1.02; }
.vf-2 { color: #FFFFFF; }
.movimento .vf { opacity: 0.08; }

/* Método: as telas se empilham. Cada passo fica parado inteiro (foto, verbo e frase juntos)
   e o seguinte sobe por cima dele, como uma página nova; nada desliza sobre o texto do outro */
.metodo { position: relative; }
/* O último passo pausa com um espaço depois dele (com margem ele não teria onde ficar preso) */
.passo:last-of-type { margin-bottom: 0; }
.metodo::after { content: ""; display: block; height: 45svh; }
/* Cada passo fica parado um pouco (a margem é a pausa) antes do seguinte subir */
.passo { position: sticky; top: 0; height: 100svh; margin-bottom: 45svh; overflow: clip; display: grid; place-items: center; background: var(--grafite); }
.passo-foto { position: absolute; inset: -10% 0; will-change: transform; }
.passo-foto img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.42) contrast(1.05); }
.passo-veu { position: absolute; inset: 0; z-index: 3; background: #050506; opacity: 0; pointer-events: none; }
.verbo { position: relative; z-index: 2; text-align: center; translate: 0 -4svh;
  font-size: clamp(64px, 15vw, 260px); line-height: 0.9; letter-spacing: -0.05em; }
.passo-texto { position: absolute; left: var(--lateral); bottom: clamp(32px, 7vh, 72px); z-index: 1; max-width: 34ch; font-size: clamp(17px, 1.35vw, 20px); color: var(--texto); }

/* Vida | Negócio */
.lados { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: center; min-height: 100svh; padding: 18vh var(--lateral);
  background: var(--grafite); transition: background-color 400ms ease; overflow: hidden; }
.lados[data-lado="negocio"] { background: var(--chapado); }
.lados-texto { position: relative; z-index: 2; }
.lados-palavra { display: inline-block; }
.lados-desc { margin-top: 28px; max-width: 36ch; font-size: clamp(17px, 1.35vw, 20px); color: var(--texto); }
.lados-nota { margin-top: 28px; color: var(--texto-2); font-size: 17px; }
.chave { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 40px; padding: 6px; border-radius: 999px; background: #1c1e22; isolation: isolate; }
.chave-op { position: relative; z-index: 1; min-width: clamp(120px, 11vw, 168px); min-height: 56px; padding: 0 24px; border: 0; border-radius: 999px; background: none;
  font: 500 clamp(17px, 1.3vw, 20px)/1 var(--f-texto); color: var(--texto-2); cursor: pointer; transition: color 200ms ease; }
.chave-op[aria-pressed="true"] { color: #0B0D10; }
.chave-op:active { transform: scale(0.97); }
.chave-marca { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: 999px;
  background: linear-gradient(180deg, #F2F3F5 0%, #C9CCD1 48%, #9DA1A8 52%, #D9DBDF 100%); transition: transform 320ms var(--ease-saida); } /* taste-skill-ignore: luz e metal da marca Sokio (regra da marca) */
.lados[data-lado="negocio"] .chave-marca { transform: translateX(100%); }
.lados-objeto { position: relative; aspect-ratio: 1; width: min(42vw, 620px); justify-self: center; }
.peca { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 600ms var(--ease-saida); }
.peca .acesa { opacity: 0; transition: opacity 400ms ease; }
.lados[data-lado="vida"] .peca-esq .acesa, .lados[data-lado="negocio"] .peca-dir .acesa { opacity: 1; }
.lados[data-lado="vida"] .peca-esq { transform: translateX(-3%) scale(1.02); }
.lados[data-lado="negocio"] .peca-dir { transform: translateX(3%) scale(1.02); }
@media (max-width: 767.98px) {
  .lados { grid-template-columns: 1fr; padding: 14vh 20px; }
  .lados-objeto { width: 72vw; grid-row: 1; }
  .chave { display: grid; width: 100%; }
}

/* Caminhos: título largo, lista empurrada para a direita, farol à esquerda */
.caminhos { padding: 22vh var(--lateral) 20vh; }
.caminhos-titulo { font-size: clamp(40px, 6vw, 100px); line-height: 0.98; letter-spacing: -0.045em; max-width: 12ch; }
.caminhos-corpo { display: grid; grid-template-columns: 5fr 7fr; gap: 6vw; align-items: end; margin-top: 10vh; }
.caminhos-foto { overflow: hidden; aspect-ratio: 4 / 5; }
.caminhos-foto img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); }
.caminhos-intro { font-size: clamp(18px, 1.5vw, 22px); max-width: 38ch; margin-bottom: 48px; }
.caminho { display: grid; grid-template-columns: 1.2fr 1.4fr auto; gap: 20px; align-items: baseline; padding: 28px 24px; margin: 0 -24px; border-radius: 20px;
  text-decoration: none; transition: background-color 200ms ease; }
.caminho + .caminho { margin-top: 8px; }
.caminho-nome { font: 600 clamp(22px, 2vw, 32px)/1.1 var(--f-titulo); letter-spacing: -0.02em; }
.caminho-desc { color: var(--texto-2); font-size: 17px; }
.caminho-estado { font-size: 16px; color: var(--texto-2); white-space: nowrap; }
.caminho-on .caminho-estado { color: #6FD3A0; }
.caminho:not(.caminho-on) .caminho-nome { color: var(--texto-2); }
@media (hover: hover) and (pointer: fine) { .caminho:hover { background: #121316; } }
@media (max-width: 767.98px) {
  .caminhos { padding: 16vh 20px; }
  .caminhos-corpo { grid-template-columns: 1fr; }
  .caminhos-foto { width: 60%; margin-left: auto; grid-row: 2; }
  .caminho { grid-template-columns: 1fr auto; }
  .caminho-desc { grid-column: 1 / -1; grid-row: 2; }
}

/* Convite: cores invertidas */
.convite { position: relative; min-height: 100svh; padding: 18vh var(--lateral) 40px; background: #EDEEF0; color: #0B0D10; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.convite-simbolo { position: relative; width: clamp(90px, 11vw, 170px); aspect-ratio: 1; margin-bottom: 6vh; }
.encaixe { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.convite-antes { font: 600 clamp(24px, 2.6vw, 40px)/1.1 var(--f-titulo); letter-spacing: -0.03em; margin-bottom: 0.4em; }
.convite-titulo { font-size: clamp(48px, 9vw, 150px); line-height: 0.95; letter-spacing: -0.05em; }
.convite-base { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 10vh; }
.convite-base p { font-size: clamp(18px, 1.5vw, 22px); max-width: 32ch; }
.botao-escuro { color: #EDEEF0; background: #0B0D10; }
@media (hover: hover) and (pointer: fine) { .botao-escuro:hover { background: #24262b; } }
.convite :focus-visible { outline-color: #0B0D10; }

/* Rodapé: o contato é a linha grande */
.rodape { position: relative; z-index: 3; padding: 40px var(--lateral) 30px; min-height: 80svh; display: grid; grid-template-rows: auto 1fr auto; gap: 40px; }
.rodape-topo { display: flex; justify-content: space-between; color: var(--texto-2); font-size: 15px; }
.rodape-contato { align-self: end; font: 600 clamp(48px, 9vw, 150px)/0.95 var(--f-titulo); letter-spacing: -0.05em; text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .rodape-contato:hover { color: #FFFFFF; } }
.rodape-linha { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; align-items: baseline; font-size: 14px; color: var(--texto-2); }
.rodape-linha > :last-child { justify-self: end; }
.rodape-links { display: flex; gap: 24px; }
.rodape-links .elo { color: var(--texto); padding: 4px 0; }
.creditos { max-width: 70ch; text-align: center; font-size: 13px; }
@media (max-width: 767.98px) {
  .rodape-linha { grid-template-columns: 1fr; }
  .rodape-linha > :last-child { justify-self: start; }
  .creditos { text-align: left; }
}

/* Entradas (só com movimento; sem script tudo já aparece) */
.movimento .entra { opacity: 0; transform: translateY(24px); }
.movimento .entra.dentro { opacity: 1; transform: none; transition: opacity 800ms var(--ease-saida), transform 900ms var(--ease-saida); }

/* Versão calma: nada preso, tudo visível */
.calmo .virada { height: auto; }
.calmo .virada-palco { position: relative; height: auto; padding: 22vh var(--lateral); }
.calmo .passo-foto { inset: 0; }
.sem-3d .entra { opacity: 1; transform: none; }
.sem-3d .vf { opacity: 1; }

.chave-movimento { position: fixed; right: 16px; bottom: 16px; z-index: 60; min-height: 44px; padding: 0 16px; border-radius: 999px;
  font: 500 0.875rem/1 var(--f-texto); color: var(--texto); background: #1C1E22; border: 0; cursor: pointer; }