/* Abertura da tela inicial: nome, foto e bancada. Tudo preso a #abertura para não chocar com v3.css. */
#abertura { --tam: min(15.2vw, 27vh); position: relative; background: var(--ink); }
#abertura :focus-visible { outline: 2px solid var(--v); outline-offset: 3px; }

/* Barra enxuta enquanto a abertura está sob ela: sem vidro (blur sobre WebGL custa caro) nem pílulas, só símbolo, saída e pausa. */
.topo .m-nome, .topo .pilulas { transition: opacity .2s linear; }
html.na-abertura .topo { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; }
html.na-abertura .topo .m-nome { opacity: 0; }
html.na-abertura .topo .pilulas { opacity: 0; pointer-events: none; }
html.na-abertura .topo .pilulas:focus-within { opacity: 1; pointer-events: auto; }
.pula { display: none; flex: none; align-items: center; min-height: 44px; font: 500 14px/1.2 "Inter", sans-serif; color: var(--text); text-decoration: none; }
/* Passou da bancada: nome e áreas voltam, ainda sem vidro. */
html.na-abertura.pos-bancada .topo { background: rgba(11, 10, 16, .86); border-color: var(--line); }
html.na-abertura.pos-bancada .topo .m-nome { opacity: 1; }
html.na-abertura.pos-bancada .topo .pilulas { opacity: 1; pointer-events: auto; }
html.na-abertura .pula { display: inline-flex; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .28); transition: opacity .2s linear, box-shadow .1s linear; }
@media (hover: hover) and (pointer: fine) { .pula:hover { box-shadow: inset 0 -1px 0 var(--v); } }
html.na-abertura .pula.some { opacity: 0; visibility: hidden; }

/* Computador */
#abertura .trilho { height: 300vh; height: 300svh; position: relative; }
html:not(.anim) #abertura .trilho { height: 100svh; }
#abertura .ab-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); contain: strict; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
#gl.ok { opacity: 1; }
#abertura .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#abertura .texto-nome { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
#abertura .nome { margin: 0; font: 900 var(--tam)/.9 "Nunito", ui-rounded, sans-serif; letter-spacing: -.022em; white-space: nowrap; width: max-content; text-align: center; will-change: opacity; }
#abertura .nome span { display: block; }
#abertura .nome.sob { color: transparent; }
#abertura .linha { margin: clamp(26px, 4.4vh, 48px) 0 0; font-size: clamp(15px, 1.25vw, 22px); color: var(--text); text-align: center; will-change: opacity; }

/* Pontos sobre os objetos: links de verdade. A posição em % vale para o render parado (sem 3D ou antes de ele chegar); com 3D, vem da projeção da caixa. */
#abertura .pontos { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .28s linear, visibility 0s linear .28s; }
#abertura .pontos.liga { visibility: visible; opacity: 1; transition: opacity .28s linear; }
#abertura .pontos a { position: absolute; display: block; text-decoration: none; border-radius: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#abertura .pontos a:focus-visible { outline-offset: 0; }
#abertura .pontos a[data-area="motion"] { left: 71.3%; top: 46%; width: 22.7%; height: 22.6%; }
#abertura .pontos a[data-area="branding"] { left: 31.4%; top: 41.7%; width: 13.9%; height: 20.7%; }
#abertura .pontos a[data-area="roblox"] { left: 42.1%; top: 3%; width: 26.4%; height: 55.5%; }
#abertura .pontos a[data-area="tres"] { left: 5.7%; top: 59.9%; width: 49.5%; height: 17.6%; }
/* Rótulos sempre visíveis e iguais em peso; o ativo muda de forma e de cor, os outros não mudam nada */
#abertura .rot { position: absolute; left: 50%; bottom: -6px; transform: translate(-50%, 100%); font: 800 clamp(18px, 1.55vw, 28px)/1 "Nunito", sans-serif; letter-spacing: -.01em; color: var(--text); white-space: nowrap; padding: .26em .56em .3em .92em; border-radius: .34em; background: rgba(11, 10, 16, .62); }
#abertura .rot::before { content: ""; position: absolute; left: .42em; top: 50%; width: .34em; height: .34em; margin-top: -.17em; border-radius: 12%; background: var(--text); }
#abertura .pontos a.ativo .rot { background: var(--v); color: var(--ink); }
#abertura .pontos a.ativo .rot::before { background: var(--ink); }
#abertura .pontos a[data-area="tres"] .rot { left: 36%; }

/* Depois da bancada, só o contato: encosta nela, sem um vão que pareça seção faltando. */
#abertura + .fim { margin-top: 0; padding-top: clamp(48px, 9svh, 96px); min-height: 0; background: var(--ink); border-top: 1px solid var(--line); }

/* Sem JavaScript: o nome e as áreas em texto, no primeiro quadro. */
html:not(.anim) #gl { display: none; }
html:not(.anim) #abertura .pontos { visibility: visible; opacity: 1; inset: auto 0 9% 0; display: flex; justify-content: center; gap: 12px; }
html:not(.anim) #abertura .pontos a { position: static; width: auto; height: auto; }
html:not(.anim) #abertura .pontos .rot { position: relative; left: 0; bottom: 0; display: block; transform: none; }

/* Celular: outra solução, sem cena 3D. A foto recua sobre o quadro vertical da bancada. */
#abertura .cel { display: none; }
@media (hover: none), (pointer: coarse), (max-width: 820px) {
  #abertura .trilho { display: none; }
  html.na-abertura .pula { display: none; }
  #abertura .cel { display: block; }
  .cel-trilho { height: 240vh; height: 240svh; position: relative; }
  html.reduz .cel-trilho { height: 170vh; height: 170svh; }
  html:not(.anim) .cel-trilho { height: auto; }
  .cel-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #24212E; contain: strict; }
  /* Quadro em "cover": as duas imagens têm a mesma proporção (780 x 1688), logo as contas valem nas duas. */
  .cel-quadro { pointer-events: none; position: absolute; left: 50%; top: 50%; width: max(100%, calc(100svh * .46209)); aspect-ratio: 780 / 1688; transform: translate(-50%, -50%); }
  .cel-cam { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
  .cel-cam video, .cel-bancada { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
  /* Foto com a moldura, no lugar exato dela no último quadro do vídeo (780 x 1688): x 31-748, y 405-1282. */
  .cel-retrato { position: absolute; left: 3.97%; top: 23.99%; width: 91.92%; height: 51.96%; padding: 4.68%; box-sizing: border-box; background: #CAC6D2; }
  html.reduz .cel-retrato { display: none; }
  .cel-retrato img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .cel-h1 { position: absolute; left: var(--m); right: var(--m); bottom: 96px; margin: 0; font: 900 clamp(46px, 19.5vw, 104px)/.9 "Nunito", sans-serif; letter-spacing: -.022em; text-align: center; color: transparent; pointer-events: none; }
  .cel-linha { position: absolute; left: var(--m); right: var(--m); bottom: max(28px, env(safe-area-inset-bottom)); margin: 0; font-size: 17px; line-height: 1.32; text-align: center; text-wrap: balance; color: var(--text); pointer-events: none; }
  html:not(.anim) .cel-cam video, html:not(.anim) .cel-retrato { display: none; }
  html:not(.anim) .cel-h1 { color: var(--text); }
  .cel-ponto { pointer-events: auto; position: absolute; display: block; text-decoration: none; -webkit-tap-highlight-color: transparent; visibility: hidden; opacity: 0; transition: opacity .25s linear, visibility 0s linear .25s; }
  .cel-palco.liga .cel-ponto { visibility: visible; opacity: 1; transition: opacity .25s linear; }
  .cel-ponto .rot { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); font: 800 16px/1 "Nunito", sans-serif; letter-spacing: -.01em; color: var(--text); white-space: nowrap; padding: .34em .62em .38em 1em; border-radius: .34em; background: rgba(11, 10, 16, .72); }
  .cel-ponto .rot::before { content: ""; position: absolute; left: .44em; top: 50%; width: .34em; height: .34em; margin-top: -.17em; border-radius: 12%; background: var(--text); }
  .cel-objs { display: block; }
  .cel-obj { display: block; position: relative; margin: clamp(40px, 8svh, 72px) 0 0; padding: 0 var(--m); text-decoration: none; }
  .cel-obj video { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--s1); }
  .cel-obj span { display: block; padding: 14px 0 6px; font: 800 28px/1 "Nunito", sans-serif; }
  #abertura + .fim { margin-top: clamp(40px, 8svh, 72px); }
}

/* Gravação dos vídeos do celular (fonte/abertura/grava-cel.mjs) */
html.grava .topo, html.grava #fundo, html.grava .pontos, html.grava .linha, html.grava #abertura ~ * { display: none !important; }