:root {
  --bg: #efeeea;
  --fg: #111110;
  --mute: #8a8984;
  --ph: #e3e1db;
  --pad: 20px;
  --font: Arial, Helvetica, sans-serif; /* única fonte do site */
  --size: 13px;                        /* único tamanho de texto */
  --stroke: 0.35px;                    /* contorno da letra; 0 = Arial sem contorno */
  --weight: 400;                       /* único peso; na Arial, 500 aparece como Regular e 600 como Bold */
  --glow: #FFE103;  /* amarelo do degradê no pé da tela */
  --glow-h: 18vh;   /* altura do degradê */
  --bio-bg: #FFE103; /* fundo da página Bio */
  --bio-fg: #111110;
  --retrato-w: 180px; /* largura do retrato na página Bio */
  --carta-bg: #111110; /* cor do verso das cartas no Image Dealer */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #111110; --fg: #ecebe6; --mute: #77766f; --ph: #1c1c1a; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #111110; --fg: #ecebe6; --mute: #77766f; --ph: #1c1c1a; color-scheme: dark; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); }
body { font: var(--weight) var(--size)/normal var(--font); -webkit-text-stroke: var(--stroke) currentColor; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, li, a, strong, em, nav, header { font: inherit; letter-spacing: inherit; }

#stage { background: var(--bg); }
/* degradê amarelo no pé da tela, por cima das imagens */
#stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--glow-h); pointer-events: none;
  background: linear-gradient(to top, var(--glow), color-mix(in srgb, var(--glow) 35%, transparent) 45%, transparent); }
#stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
/* cursor próprio: um desenho que segue o mouse (arquivo original em site/cursor.svg).
   Só em computador; no celular não existe cursor. */
#cursor { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; width: 102px; height: 87px; margin: -43px 0 0 -52px; opacity: 0; transition: opacity .15s; will-change: transform; }
#cursor svg { display: block; width: 100%; height: 100%; }
#cursor.on { opacity: 1; }
/* esconde a seta do sistema; o cursor transparente é um reforço para navegadores que ignoram "none" (ex.: Safari em alguns casos) */
html.has-cursor, html.has-cursor *, html.has-cursor *::before, html.has-cursor *::after {
  cursor: url("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==") 0 0, none !important;
}
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }

.it { position: absolute; left: 0; top: 0; perspective: 1400px; }
/* carta: frente = imagem, verso = desenho do Image Dealer */
.flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.7,.3,1); }
.it.virada .flip { transform: rotateY(180deg); }
.frente, .verso { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }
.frente { background: var(--ph); }
.verso { transform: rotateY(180deg); background: var(--carta-bg); display: grid; place-items: center; }
.verso svg { width: 58%; max-width: 70%; height: auto; display: block; }
.it.virada .cap { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .flip { transition: none; } }

/* Image Dealer (easter egg): parar o mouse ~1s sobre a frase do topo risca a frase e revela o botão */
#desc { pointer-events: auto; }
#desc .frase { background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0% 1px; transition: background-size .5s ease; }
#desc .dealer { background: none; border: 0; padding: 0; margin-left: .5em; font: inherit; color: inherit; -webkit-text-stroke: inherit; letter-spacing: inherit;
  display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; white-space: nowrap; opacity: 0; transition: max-width .4s ease, opacity .3s ease; }
#desc.riscado .frase { background-size: 100% 1px; }
/* sublinhado dos links: botão Image Dealer e links do texto da Bio/Clipping */
#desc .dealer, #bio-texto a, #bio-contatos a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
#desc.riscado .dealer { max-width: 12em; opacity: 1; transition-delay: .45s; }
body:not(.on-home) #desc .dealer { display: none; }
body:not(.on-home) #desc .frase { background-size: 0% 1px; }
.cap { position: absolute; left: 0; top: 100%; padding-top: 8px; white-space: nowrap; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
#world.near .cap { opacity: 1; }
.it img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; -webkit-user-drag: none; pointer-events: none; }
.it img.on { opacity: 1; }
#world.fade { transition: opacity .35s ease; }

.ui { position: fixed; z-index: 5; }
.chrome, #proj-info, #hint, #zoom { color: var(--fg); }
/* menu do topo: texto branco em "difference", inverte a cor do que passa por baixo */
.chrome { color: #fff; mix-blend-mode: difference; }
/* navegação no topo: nome à esquerda, descrição no centro, Bio à direita */
.chrome { top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 20px; padding: var(--pad); pointer-events: none; white-space: nowrap; }
.chrome a { pointer-events: auto; }
.chrome nav { justify-self: end; }

#tip { left: 0; top: 0; pointer-events: none; padding: 4px 7px; background: var(--fg); color: var(--bg); white-space: nowrap; opacity: 0; transition: opacity .15s; }
#tip.on { opacity: 1; }

#hint { display: none; left: var(--pad); bottom: var(--pad); transition: opacity .6s; pointer-events: none; }
#hint.vazio { display: block; }
#hint.off, .on-bio #hint, .on-bio #zoom { opacity: 0; }
/* dica de gesto no celular: aparece no primeiro acesso e some no primeiro toque */
#gesto { display: none; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  color: #fff; mix-blend-mode: difference; } /* mesmo blend do menu */
#gesto.on { display: block; }
#gesto.vis { opacity: 1; }
body:not(.on-home) #gesto { opacity: 0; }
#zoom { display: none; right: var(--pad); bottom: var(--pad); opacity: .55; font-variant-numeric: tabular-nums; pointer-events: none; }

#proj-info { left: var(--pad); top: calc(var(--pad) + 34px); max-width: 300px; pointer-events: none; }
#proj-info a { pointer-events: auto; display: inline-block; margin-bottom: 18px; }
#proj-info h1 { font: inherit; }
/* textos e botão Back do projeto com o mesmo blend do menu */
#proj-info { color: #fff; mix-blend-mode: difference; }
#proj-texto { margin-top: 12px; white-space: pre-line; }
#proj-texto:empty { display: none; }

/* Bio: fundo amarelo, mesma tipografia e posição do texto de um projeto */
#bio { position: fixed; inset: 0; z-index: 4; background: var(--bio-bg); color: var(--bio-fg); overflow-y: auto; animation: in .35s ease; }
/* grade: coluna de texto à esquerda, retrato à direita alinhado com o começo do texto */
.bio-in { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--pad) + 34px); padding-bottom: 80px;
  display: grid; grid-template-columns: minmax(0, 340px); align-items: start; }
.bio-in .voltar { grid-column: 1 / -1; justify-self: start; display: inline-block; margin-bottom: 18px; }
#bio-texto, #bio-contatos { grid-column: 1; }
/* retrato solto na tela (Bio e Clipping), andando em diagonal (posição controlada pelo app.js).
   Fica por cima de tudo com "difference" na cor do fundo: sobre o amarelo ele aparece preto,
   e onde passa por cima de texto preto, o texto vira amarelo (mesmo efeito do menu da home). */
.bio-retrato { position: fixed; left: 0; top: 0; z-index: 7; width: var(--retrato-w); display: none; mix-blend-mode: difference; will-change: transform; user-select: none; -webkit-user-select: none; pointer-events: none; }
.on-bio .bio-retrato { display: block; }
.bio-retrato svg { display: block; width: 100%; height: auto; }
.bio-retrato svg path { fill: var(--bio-bg); }
.on-clipping .bio-in { grid-template-columns: minmax(0, 440px); } /* coluna do Clipping um pouco mais larga */
#bio-texto > * + * { margin-top: 1em; }
#bio-texto h2, #bio-texto h3, #bio-texto h4 { font: inherit; }
#bio-texto h2 + p, #bio-texto h3 + p, #bio-texto h4 + p { margin-top: 0; }
#bio-contatos { list-style: none; margin-top: 2em; }
#bio-contatos:empty { display: none; }
#bio-contatos span { margin-right: .5em; }
.on-bio .chrome { mix-blend-mode: normal; color: var(--bio-fg); z-index: 6; }

@keyframes in { from { opacity: 0; } }
@media (max-width: 640px) {
  :root { --pad: 16px; }
  .bio-in { grid-template-columns: minmax(0, 1fr); }
  .on-clipping .bio-in { grid-template-columns: minmax(0, 1fr); }
  .bio-retrato { width: 110px; }
  #proj-info { max-width: calc(100vw - 32px); }
  #desc { display: none; }
  .chrome { grid-template-columns: 1fr auto; }
  #proj-texto { display: none; }
  #zoom { display: none; }
}