@font-face { font-family: 'Bodoni Moda'; src: url('../fontes/bodoni-moda-normal-400_700.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../fontes/bodoni-moda-italic-400_700.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Bodoni Ano'; src: url('../fontes/bodoni-ano.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fontes/ibm-plex-mono-normal-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fontes/ibm-plex-mono-normal-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --papel: #f1ece2;
  --papel-2: rgba(241, 236, 226, .66);
  --fundo: #0a0908;
  --af: #7dff9a;
  --serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --margem: clamp(16px, 3.4vw, 56px);
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--fundo); color: var(--papel); }
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--af); outline-offset: 3px; }

/* A abertura cobre a página até terminar */
html.com-abertura, html.com-abertura body { overflow: hidden; overscroll-behavior: none; }
#abertura { position: fixed; inset: 0; z-index: 10; background: #030303; touch-action: none; }
html.sem-abertura #abertura { display: none; }
#poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50.5% 55.9%; }
html.palco-pronto #poster { visibility: hidden; transition: visibility 0s .3s; }
#palco { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#carga { position: absolute; left: var(--margem); right: var(--margem); bottom: 18px; height: 1px; background: rgba(241, 236, 226, .14); }
#carga-linha { display: block; height: 100%; background: var(--papel); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
body.tudo-carregado #carga { opacity: 0; transition: opacity .6s; }

/* Pular a introdução fica sempre à mão, em letra pequena */
#pular {
  position: fixed; top: 14px; right: var(--margem); z-index: 12; min-height: 44px; padding: 0 2px;
  font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--papel); text-shadow: 0 1px 8px #000;
  text-decoration: underline; text-decoration-color: rgba(241, 236, 226, .4); text-underline-offset: 4px; -webkit-tap-highlight-color: transparent;
}
#pular:hover { color: var(--af); text-decoration-color: var(--af); }
html.sem-abertura #pular { display: none; }

/* A entrada: sem tocar no "Entrar", nada anda e nada toca. Ao tocar nele, o túnel e a trilha saem juntos. */
#entrada {
  position: fixed; inset: 0; z-index: 11; display: flex; align-items: flex-end; justify-content: center; pointer-events: none;
  padding: 0 var(--margem) clamp(60px, 12svh, 110px); background: linear-gradient(to top, rgba(3, 3, 3, .7), rgba(3, 3, 3, 0) 45%);
  opacity: 0; transition: opacity .35s;
}
#entrada[hidden] { display: none; }
html.na-entrada #entrada { opacity: 1; animation: aparece .6s ease-out both; }
html.sem-abertura #entrada { display: none; }
#entrar {
  position: relative; min-width: 172px; min-height: 54px; padding: 0 30px; font-weight: 500; font-size: clamp(21px, 1.8vw, 26px); line-height: 1; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background-color: rgba(10, 9, 8, .6); -webkit-backdrop-filter: blur(9px) saturate(1.15); backdrop-filter: blur(9px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(241, 236, 226, .2), 0 8px 26px rgba(0, 0, 0, .4); transition: background-color .3s, transform .15s;
}
#entrar .m-cantos { animation: visita-cantos 2.8s ease-out infinite; }
@media (hover: hover) { #entrar:hover { background-color: rgba(10, 9, 8, .78); } }
#entrar:active { transform: scale(.975); }
/* Tocou: a tecla trava verde e respira enquanto as primeiras fotos chegam */
#entrada.tocou #entrar { color: var(--af); pointer-events: none; animation: respira 1s ease-in-out infinite alternate; }
#entrada.tocou .m-cantos { animation: none; color: var(--af); filter: drop-shadow(0 0 4px rgba(125, 255, 154, .7)); }
@keyframes respira { from { opacity: 1; } to { opacity: .55; } }

/* O som: só um ícone pequeno, sempre à mão. Alto-falante com ondas quando está ligado, com um X quando está desligado. */
#som {
  position: fixed; z-index: 12; left: calc(var(--margem) - 12px); top: 14px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  color: var(--papel); filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .9)); -webkit-tap-highlight-color: transparent;
}
#som svg { display: block; width: 20px; height: 20px; }
.som-falante { fill: currentColor; }
.som-ondas, .som-risco { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
#som[aria-pressed="true"] .som-risco, #som[aria-pressed="false"] .som-ondas { display: none; }
@media (hover: hover) { #som:hover { color: var(--af); } }    /* no toque, o verde ficaria preso depois de tocar */
html.sem-abertura #som { left: 50%; top: auto; bottom: 6px; transform: translateX(-50%); z-index: 7; }

/* O ano e a legenda de cada foto */
#hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; }
#hud.ligado { opacity: 1; }
.hud-texto {
  position: absolute; right: var(--margem); bottom: clamp(70px, 13vh, 130px); width: 32vw; text-align: right;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .75);
}
#hud.a-esquerda .hud-texto { right: auto; left: var(--margem); text-align: left; }
#ano {
  display: block; font-family: 'Bodoni Ano', var(--serif); font-weight: 500;
  font-size: clamp(82px, 13.5vw, 250px); line-height: .92; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums;
}
#hud-titulo { margin-top: .5em; font-style: italic; font-size: clamp(21px, 2.3vw, 40px); line-height: 1.16; white-space: nowrap; }
#hud-credito { margin-top: .85em; min-height: 1.45em; font: 400 clamp(11px, .85vw, 13px)/1.45 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--papel-2); }
#hud-logo { position: absolute; right: 0; bottom: 100%; width: clamp(174px, 28.6vw, 530px); height: auto; margin-bottom: 1.5vw; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .8)); }
#hud.a-esquerda #hud-logo { right: auto; left: 0; }
#hud-fqv { display: none; position: relative; width: clamp(190px, 29vw, 530px); aspect-ratio: 1464 / 657; color: var(--papel); }
#hud-fqv svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#hud.com-fqv #hud-fqv { display: block; }
#hud.com-fqv #ano { display: none; }
#hud-clarao { position: absolute; inset: 0; background: #fff; opacity: 0; }

/* A frase depois da última foto */
#frase {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .32em;
  padding: 0 var(--margem); text-align: center; pointer-events: none; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .85);
  font-size: clamp(25px, 3.1vw, 54px); line-height: 1.12;
}
#frase span { display: block; opacity: 0; }
#frase-1 { font-style: italic; }
#frase-2 { font-size: 2.05em; font-weight: 500; font-optical-sizing: none; font-variation-settings: 'opsz' 16; letter-spacing: -.01em; line-height: 1.04; }

/* A régua: mostra onde estamos e que dá para voltar */
#regua-caixa { position: absolute; left: var(--margem); right: var(--margem); bottom: 34px; }
#regua { position: relative; height: 12px; border-bottom: 1px solid rgba(241, 236, 226, .3); }
#regua i { position: absolute; bottom: 0; width: 1px; height: 7px; background: rgba(241, 236, 226, .55); }
#regua-marca { position: absolute; bottom: -1px; width: 2px; height: 14px; margin-left: -1px; background: var(--af); box-shadow: 0 0 10px rgba(125, 255, 154, .7); }
#dica {
  position: absolute; left: var(--margem); bottom: 54px; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--papel-2); transition: opacity .5s;
}
#dica.sumiu { opacity: 0; }

@media (max-aspect-ratio: 11/10) {
  .hud-texto, #hud.a-esquerda .hud-texto { left: var(--margem); right: var(--margem); width: auto; text-align: left; bottom: 74px; }
  #ano { font-size: clamp(74px, 25vw, 150px); }
  #hud-titulo { font-size: 22px; white-space: normal; }
  #hud-logo, #hud.a-esquerda #hud-logo { right: auto; left: 0; width: 44vw; margin-bottom: 12px; }
  #hud-fqv { width: 62vw; }
  #hud-credito { font-size: 11px; }
  #dica { bottom: 56px; }
}

/* O estúdio */
#estudio { position: relative; height: 100svh; min-height: 340px; overflow: hidden; background: #0d0c0b; }
/* A cena é do tamanho da imagem de fundo, para o telão ficar sempre sobre o fundo infinito */
#cena { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100svh * 1.7918)); aspect-ratio: 2048 / 1143; transform: translate(-50%, -50%); }
#estudio-fundo { position: absolute; inset: 0; width: 100%; height: 100%; transition: filter .7s ease; }
#davi {
  position: absolute; left: 50%; bottom: 0; height: 88svh; width: auto; transform: translateX(-50%);
  filter: drop-shadow(0 14px 44px rgba(0, 0, 0, .5)); user-select: none; -webkit-user-drag: none;
}
#assinatura {
  position: absolute; z-index: 3; left: calc(50% + 21svh); bottom: 12.5svh; width: min(25svh, 21vw); color: var(--papel);
  transform: rotate(-11deg); transform-origin: 0 100%; pointer-events: none; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .75));
}
#assinatura svg { display: block; width: 100%; height: auto; overflow: visible; }
/* O título fica para o Google e para quem usa leitor de tela. Embaixo, na tela, só o botão de som. */
#estudio h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#menu { list-style: none; padding: 0; }
#menu a { color: inherit; text-decoration: none; }
.m-num { font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--papel-2); }
.m-nome { display: block; }
.m-sub { display: block; font: 400 clamp(10.5px, .82vw, 12px)/1.35 var(--mono); letter-spacing: .03em; color: var(--papel); }

/* O flash do clique */
#flash { position: fixed; inset: 0; z-index: 30; background: #fff; opacity: 0; pointer-events: none; }
#obturador { position: fixed; inset: 0; z-index: 29; pointer-events: none; }
#obturador i { position: absolute; left: 0; right: 0; height: 50.5%; background: #050505; transform: scaleY(0); }
#obturador i:first-child { top: 0; transform-origin: 50% 0; }
#obturador i:last-child { bottom: 0; transform-origin: 50% 100%; }

/* ---------- O menu: o visor da câmera. Um menu em cada canto, com o foco automático. ---------- */
#estudio.com-mouse, #estudio.com-mouse a { cursor: none; }
#estudio::after {
  content: ''; position: absolute; inset: clamp(10px, 1.6vw, 22px); pointer-events: none; z-index: 2; opacity: .55; --t: clamp(22px, 3vw, 44px);
  background:
    linear-gradient(var(--papel), var(--papel)) 0 0 / var(--t) 1px no-repeat, linear-gradient(var(--papel), var(--papel)) 0 0 / 1px var(--t) no-repeat,
    linear-gradient(var(--papel), var(--papel)) 100% 0 / var(--t) 1px no-repeat, linear-gradient(var(--papel), var(--papel)) 100% 0 / 1px var(--t) no-repeat,
    linear-gradient(var(--papel), var(--papel)) 0 100% / var(--t) 1px no-repeat, linear-gradient(var(--papel), var(--papel)) 0 100% / 1px var(--t) no-repeat,
    linear-gradient(var(--papel), var(--papel)) 100% 100% / var(--t) 1px no-repeat, linear-gradient(var(--papel), var(--papel)) 100% 100% / 1px var(--t) no-repeat;
}
/* Cada menu é uma tecla da tela da câmera: vidro escuro, cantos de foco, ícone, luz de foco e seta */
/* As fotos de licença livre da abertura exigem crédito: um link bem discreto, só no estúdio */
#creditos-link { position: absolute; z-index: 6; right: calc(clamp(10px, 1.6vw, 22px) + clamp(22px, 3vw, 44px) + 8px); bottom: 4px; padding: 7px 0; font: 400 10px/1 var(--mono); letter-spacing: .06em; color: rgba(241, 236, 226, .55); text-decoration: none; }
#creditos-link:hover { color: var(--af); }
#menu li { position: absolute; z-index: 5; --dentro: clamp(26px, 3.2vw, 50px); width: clamp(236px, 22.5vw, 368px); }
#menu li:nth-child(1) { left: var(--dentro); top: clamp(24px, 4vh, 40px); }
#menu li:nth-child(2) { right: var(--dentro); top: clamp(24px, 4vh, 40px); }
#menu li:nth-child(3) { left: var(--dentro); bottom: clamp(30px, 4.6vh, 44px); }
#menu li:nth-child(4) { right: var(--dentro); bottom: clamp(30px, 4.6vh, 44px); }
#menu a {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(9px, .9vw, 14px); min-height: 44px;
  padding: clamp(8px, .75vw, 12px) clamp(11px, 1vw, 15px); color: var(--papel); background-color: rgba(10, 9, 8, .48);
  -webkit-backdrop-filter: blur(9px) saturate(1.15); backdrop-filter: blur(9px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(241, 236, 226, .16), 0 8px 26px rgba(0, 0, 0, .3); transition: background-color .3s, transform .15s;
}
#menu a:active { transform: scale(.975); }
#menu a::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .17) 50%, transparent 58%) 130% 0 / 260% 100% no-repeat; }
.m-cantos {
  position: absolute; inset: 0; pointer-events: none; color: var(--papel); transition: inset .25s cubic-bezier(.16, 1, .3, 1), color .2s;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) 0 0 / 1.5px 10px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 1.5px 10px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 1.5px 10px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) 100% 100% / 1.5px 10px no-repeat;
}
.m-ico { display: block; transition: color .2s; }
.m-ico svg { display: block; width: clamp(21px, 1.95vw, 29px); height: clamp(21px, 1.95vw, 29px); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.m-texto { min-width: 0; }
.m-num { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: clamp(9px, .68vw, 10.5px); letter-spacing: .15em; text-transform: uppercase; transition: color .2s; }
.m-ponto { width: 5px; height: 5px; border-radius: 50%; background: rgba(241, 236, 226, .38); transition: background-color .2s, box-shadow .2s; }
.m-nome { font-weight: 500; font-size: clamp(15px, 1.42vw, 23px); line-height: 1.12; }
.m-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.16, 1, .3, 1), margin-top .4s; }
.m-sub > span { min-height: 0; overflow: hidden; }
.m-seta { display: block; transition: color .2s, transform .3s cubic-bezier(.16, 1, .3, 1); }
.m-seta svg { display: block; width: 8px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: seta 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.65s); }

/* Com o foco em cima: tudo fica verde e a descrição aparece como texto na tela da câmera */
#menu a.travado { background-color: rgba(10, 9, 8, .7); }
#menu a.travado .m-cantos { color: var(--af); filter: drop-shadow(0 0 4px rgba(125, 255, 154, .7)); }
#menu a.travado :is(.m-ico, .m-num, .m-seta) { color: var(--af); }
#menu a.travado .m-ponto { background: var(--af); box-shadow: 0 0 8px var(--af); }
#menu a.travado .m-seta { transform: translateX(3px); }
#menu a.travado .m-sub { grid-template-rows: 1fr; margin-top: 5px; }
#menu a.travado .m-sub > span { animation: datilografa .6s steps(24) both; }
#menu a.chegando .m-cantos { inset: 3px; }

/* A entrada: as teclas acendem uma de cada vez, como a tela da câmera ligando */
#menu.preparando a { opacity: 0; }
#menu.ligando a { --d: calc(var(--i) * 140ms + 120ms); animation: tecla-liga .55s var(--d) linear both; }
#menu.ligando .m-cantos { animation: cantos-entram .65s var(--d) cubic-bezier(.16, 1, .3, 1) both; }
#menu.ligando .m-nome { animation: datilografa .7s calc(var(--d) + 160ms) steps(20) both; }
#menu.ligando :is(.m-ico, .m-num, .m-seta) { animation: aparece .4s calc(var(--d) + 220ms) ease-out both; }

/* Em repouso o foco visita uma tecla de cada vez: caça, trava verde e a luz passa pelo vidro */
#menu a.visita .m-cantos { animation: visita-cantos 1.5s ease-out both; }
#menu a.visita .m-nome { animation: visita-nome .8s ease-out both; }
#menu a.visita :is(.m-ico, .m-num, .m-seta) { animation: visita-verde 1.5s linear both; }
#menu a.visita .m-ponto { animation: visita-ponto 1.5s linear both; }
#menu a.visita::after { animation: visita-brilho 1.5s linear both; }

@keyframes seta { 0%, 100% { transform: translateX(0); opacity: .75; } 50% { transform: translateX(3px); opacity: 1; } }
@keyframes datilografa { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tecla-liga { 0% { opacity: 0; } 18% { opacity: .85; } 30% { opacity: .12; } 48% { opacity: 1; } 58% { opacity: .4; } 72%, 100% { opacity: 1; } }
@keyframes cantos-entram { from { inset: -13px; opacity: 0; } to { inset: 0; opacity: 1; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes visita-cantos { 0% { inset: -7px; } 20% { inset: 3px; } 34% { inset: -3px; } 50% { inset: 0; color: var(--papel); } 54%, 84% { inset: 0; color: var(--af); } 100% { inset: 0; color: var(--papel); } }
@keyframes visita-nome { 0%, 100% { filter: blur(0); } 22% { filter: blur(2.4px); } 46% { filter: blur(.4px); } 62% { filter: blur(1.2px); } 82% { filter: blur(0); } }
@keyframes visita-verde { 0%, 50% { color: var(--papel); } 54%, 84% { color: var(--af); } 100% { color: var(--papel); } }
@keyframes visita-ponto { 0%, 50% { background: rgba(241, 236, 226, .38); box-shadow: none; } 54%, 84% { background: var(--af); box-shadow: 0 0 8px var(--af); } 100% { background: rgba(241, 236, 226, .38); box-shadow: none; } }
@keyframes visita-brilho { 0%, 50% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) {
  #menu a, #menu a *, #menu a::after { animation: none !important; transition: none !important; }
}
#af {
  --c: var(--papel); position: fixed; z-index: 6; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 13px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px 13px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 13px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px 13px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 13px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px 13px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 13px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px 13px no-repeat;
}
#af.ligado { opacity: 1; }
#af.travado { --c: var(--af); filter: drop-shadow(0 0 5px rgba(125, 255, 154, .75)); }

/* O telão: as luzes do estúdio baixam e a foto surge entre o fundo infinito e ele, com as quatro bordas sumindo no escuro */
#telao, #chao-brilho { position: absolute; left: 17%; width: 66%; pointer-events: none; opacity: 0; }
#telao {
  --some-x: linear-gradient(to right, transparent 1%, rgba(0, 0, 0, .3) 7%, rgba(0, 0, 0, .8) 14%, #000 21%, #000 79%, rgba(0, 0, 0, .8) 86%, rgba(0, 0, 0, .3) 93%, transparent 99%);
  --some-y: linear-gradient(to bottom, transparent 1%, rgba(0, 0, 0, .3) 5%, rgba(0, 0, 0, .8) 10%, #000 16%, #000 72%, rgba(0, 0, 0, .8) 82%, rgba(0, 0, 0, .3) 91%, transparent 99%);
  top: 4.6%; aspect-ratio: 16 / 9; overflow: hidden; scale: .94; transition: opacity .45s ease, scale 1.2s cubic-bezier(.16, 1, .3, 1);
  -webkit-mask-image: var(--some-x), var(--some-y); -webkit-mask-composite: source-in;
  mask-image: var(--some-x), var(--some-y); mask-composite: intersect;
}
/* Atrás do telão, um escuro um pouco maior que ele: a foto some no preto, e nada do estúdio (softbox, rebatedor) passa através dela */
#telao-fundo {
  --some-x: linear-gradient(to right, transparent, rgba(0, 0, 0, .35) 6%, rgba(0, 0, 0, .8) 11%, #000 15%, #000 85%, rgba(0, 0, 0, .8) 89%, rgba(0, 0, 0, .35) 94%, transparent);
  --some-y: linear-gradient(to bottom, #000 88%, transparent);
  position: absolute; left: 3%; width: 94%; top: 0; height: 80%; background: #070605; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  -webkit-mask-image: var(--some-x), var(--some-y); -webkit-mask-composite: source-in;
  mask-image: var(--some-x), var(--some-y); mask-composite: intersect;
}
#estudio.projetando #telao-fundo { opacity: 1; }
/* Na foto do Conheça, o Davi com a câmera é um recorte à parte, fora do telão: nenhuma borda apaga o braço dele, e o zoom não o empurra para fora.
   As medidas seguem a altura da tela, como o Davi de terno, para a cabeça manter a proporção com a dele em qualquer monitor. */
#telao-davi { position: absolute; left: calc(50% + 5.6svh); top: 19.4svh; width: 72.2svh; height: auto; pointer-events: none; opacity: 0; transform-origin: 50% 40%; transition: opacity .55s ease; animation: aproxima-leve 16s ease-in-out infinite alternate; }
#estudio.projetando.foto-conheca #telao-davi { opacity: 1; }
@keyframes aproxima-leve { from { transform: scale(1); } to { transform: scale(1.06); } }
/* A foto só aproxima e afasta devagar, a partir do centro. Nunca anda para os lados. */
#telao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s ease; animation: aproxima 16s ease-in-out infinite alternate; }
#telao img:nth-child(even) { animation-direction: alternate-reverse; }
#telao img.ativa { opacity: 1; }
@keyframes aproxima { from { transform: scale(1.02); } to { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
  #telao { scale: 1; transition: opacity .45s ease; }
  #telao img, #telao-davi { animation: none; }
}
#chao-brilho { top: 73%; height: 27%; background: linear-gradient(to bottom, rgba(255, 244, 225, .2), transparent 80%); filter: blur(14px); transition: opacity .6s ease; }
#estudio.projetando #estudio-fundo { filter: brightness(.3) saturate(.7); }
#estudio.projetando #telao { opacity: 1; scale: 1; animation: lampada .55s steps(1); }
#estudio.projetando #chao-brilho { opacity: 1; }
#estudio.projetando #davi { filter: drop-shadow(0 14px 60px rgba(0, 0, 0, .85)); }
@keyframes lampada { 0% { opacity: 0; } 18% { opacity: .75; } 30% { opacity: .2; } 48% { opacity: .9; } 60% { opacity: .55; } 100% { opacity: 1; } }

@media (max-aspect-ratio: 11/10) {
  #assinatura { left: 62%; bottom: 130px; width: 27vw; }
  #menu li { --dentro: 18px; width: calc(50vw - 24px); }
  #menu li:nth-child(-n + 2) { top: 22px; }
  #menu li:nth-child(n + 3) { bottom: 62px; }
  #creditos-link { right: 18px; bottom: 15px; }
  #menu a { gap: 7px; padding: 8px 9px; min-height: 60px; }
  .m-ico svg { width: 18px; height: 18px; }
  .m-num { font-size: 8.5px; letter-spacing: .12em; }
  .m-nome { font-size: clamp(13.5px, 3.75vw, 19px); }
  #telao { left: 27%; width: 46%; top: 1%; aspect-ratio: 4 / 3; }
  #telao-fundo { left: 23%; width: 54%; height: 72%; }
  #telao-davi { display: none; }
}