/* ============================================================
   entreMultiversos — base do sistema
   "sol no inverno": grafite frio + uma luz quente rara
   Humano (quente, no centro) + Máquina (frio, na borda)
   ============================================================ */

:root {
  /* --- Campo / grafite frio levantado do preto (dia cinza de inverno) --- */
  --ground:        oklch(0.185 0.012 256);   /* fundo principal, frio, não-preto */
  --ground-deep:   oklch(0.155 0.013 258);   /* poços de profundidade */
  --ground-lift:   oklch(0.225 0.013 255);   /* painel levantado */
  --surface:       oklch(0.255 0.014 254);   /* superfície */
  --surface-hi:    oklch(0.300 0.015 252);   /* hover */

  /* --- Linhas: estrutura de arquivo --- */
  --line:          oklch(0.42 0.012 255 / 0.55);
  --line-soft:     oklch(0.80 0.02 250 / 0.10);
  --line-faint:    oklch(0.80 0.02 250 / 0.055);

  /* --- Tinta: papel levemente quente --- */
  --ink:           oklch(0.93 0.015 80);     /* texto principal, off-white quente */
  --ink-soft:      oklch(0.74 0.010 250);    /* secundário, frio */
  --ink-mute:      oklch(0.64 0.009 252);    /* secundário legível */
  --ink-faint:     oklch(0.61 0.008 254);    /* estrutura discreta, AA */

  /* --- Sol de inverno: a luz quente, alma rara --- */
  --sun:           oklch(0.83 0.135 72);     /* âmbar/ouro morno */
  --sun-soft:      oklch(0.83 0.135 72 / 0.55);
  --sun-glow:      oklch(0.86 0.15 75 / 0.22);
  --sun-deep:      oklch(0.66 0.13 58);

  /* --- Sinal de máquina: azul-gelo, frio --- */
  --ice:           oklch(0.82 0.065 232);
  --ice-soft:      oklch(0.82 0.065 232 / 0.5);

  /* --- Profundidade violeta (herdada, sutil) --- */
  --deep:          oklch(0.42 0.10 286);

  /* --- Tipografia --- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Escala --- */
  --max:    1320px;
  --prose:  64ch;
  --meta-size: 0.72rem;

  /* --- Movimento --- */
  --fast:   180ms;
  --base:   380ms;
  --slow:   720ms;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

::selection { background: var(--sun); color: oklch(0.18 0.02 60); }

a { color: inherit; text-decoration: none; }

/* ---- Voz do sistema: mono ---- */
.mono {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.label {
  font-family: var(--mono);
  font-size: var(--meta-size);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.label--sun { color: var(--sun-soft); }
.label--ice { color: var(--ice-soft); }

/* ---- Voz editorial: serifa ---- */
.serif-italic { font-style: italic; }

/* ---- Grão atmosférico + luz: overlays globais ---- */
.field-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle, oklch(0.95 0.02 90 / 0.30) 0 0.6px, transparent 1.4px);
  background-size: 3px 3px;
}
.field-scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.35;
  background-image: linear-gradient(
    oklch(0.8 0.02 250 / 0.025) 1px, transparent 1px);
  background-size: 100% 4px;
}

/* ---- Foco visível, sempre ---- */
:focus-visible {
  outline: 1px solid var(--sun);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--sun); color: oklch(0.18 0.02 60);
  padding: 0.6rem 1rem; font-family: var(--mono); font-size: 0.75rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---- util ---- */
.u-hidden { display: none !important; }

/* ---- transição entre páginas: varredura de luz ---- */
.page-sweep { position: fixed; inset: 0; z-index: 9990; pointer-events: none; overflow: hidden; }
.page-sweep__panel {
  position: absolute; inset: 0; transform: translateX(-110%); will-change: transform;
  background: linear-gradient(90deg,
    var(--ground-deep) 0%, var(--ground-deep) 84%,
    oklch(0.83 0.135 72 / 0.16) 94%, var(--sun-soft) 99%, var(--sun) 100%);
  box-shadow: 22px 0 60px -10px oklch(0.86 0.15 75 / 0.28);
}
.page-sweep__edge {
  position: absolute; top: -6%; bottom: -6%; left: 0; width: 30vw;
  transform: translateX(-140%); opacity: 0; mix-blend-mode: screen; will-change: transform, opacity;
  background: radial-gradient(58% 100% at 50% 50%, var(--sun-glow) 0%, oklch(0.86 0.15 75 / 0.06) 45%, transparent 72%);
}
.page-sweep.play-out .page-sweep__panel { animation: pgCover 560ms var(--ease) both; }
.page-sweep.play-in  .page-sweep__edge  { animation: pgSweep 880ms var(--ease) both; }
@keyframes pgCover { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes pgSweep {
  0%   { transform: translateX(-42vw); opacity: 0; }
  22%  { opacity: 0.9; }
  100% { transform: translateX(128vw); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-sweep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- ajustes responsivos globais ---- */
.obs-top {
  padding-top: calc(0.7rem + env(safe-area-inset-top)) !important;
  padding-right: calc(clamp(1.4rem, 3.5vw, 2.6rem) + env(safe-area-inset-right)) !important;
  padding-left: calc(clamp(1.4rem, 3.5vw, 2.6rem) + env(safe-area-inset-left)) !important;
}

.obs-nav {
  scroll-padding-inline: calc(clamp(1.4rem, 3.5vw, 2.6rem) + env(safe-area-inset-left));
}

.obs-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  /* sem encolher: com min-width explícito e flex-shrink padrão (1), o flex
     espremeria cada link a 44px e o texto nowrap transbordaria sobre o
     vizinho. flex-shrink:0 mantém a largura do conteúdo e o strip rola. */
  flex-shrink: 0;
  margin-block: -14px;
  padding-inline: 0.1rem;
  touch-action: manipulation;
}

/* estado do nav, global (vale na Entrada e após a travessia, quando o CSS do
   mundo pode não estar presente): sublinha o link em hover e o da página atual. */
.obs-nav__link:hover,
.obs-nav__link.active {
  color: var(--ink-soft);
  text-decoration: underline; text-decoration-color: var(--sun);
  text-underline-offset: 4px; text-decoration-thickness: 1px;
}

.obs-nav__lang {
  font-family: var(--mono);
  opacity: 0.55;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 0.9em;
}
.obs-nav__lang:hover, .obs-nav__lang:focus-visible { opacity: 1; }

/* marca do cabeçalho: ponto pulsante + wordmark mono, link para o início.
   consistente na Entrada e nas páginas internas; substitui o emblema/logo e
   o antigo wordmark serifado. */
.obs-top .dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--sun); box-shadow: 0 0 10px 1px var(--sun-glow);
  animation: obsBreathe 5.2s var(--ease-in-out) infinite;
}
@keyframes obsBreathe { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.12); } }
.obs-marca {
  font-family: var(--mono); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap;
}

.obs-status {
  padding-bottom: calc(0.9rem + env(safe-area-inset-bottom)) !important;
  padding-right: calc(clamp(1.6rem, 4vw, 3rem) + env(safe-area-inset-right)) !important;
  padding-left: calc(clamp(1.6rem, 4vw, 3rem) + env(safe-area-inset-left)) !important;
}

@media (max-width: 600px) {
  .obs-nav::after {
    content: "";
    flex: 0 0 max(1.5rem, calc(50vw - 2rem));
  }
}

/* ---- a abertura: o equilíbrio existiu por um instante ----
   o loader é o ato zero da física — os corpos desenham uma volta
   completa da coreografia no próprio canvas; o conteúdo espera. */
html.js:not(.aberto) main,
html.js:not(.aberto) .obs-top,
html.js:not(.aberto) .obs-status,
html.js:not(.aberto) .frame,
html.js:not(.aberto) .som-convite { opacity: 0; pointer-events: none; }
html.aberto main,
html.aberto .obs-top,
html.aberto .obs-status,
html.aberto .frame,
html.aberto .som-convite { transition: opacity 1.1s var(--ease); opacity: 1; }

.carga {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: clamp(1.4rem, 4vw, 3rem);
}
.carga__rotulo {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--ink-faint);
}
.carga__pct {
  font-family: var(--mono); font-weight: 400; font-size: clamp(1.6rem, 4vw, 3rem);
  letter-spacing: 0.06em; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.carga--fecha { transition: opacity 0.9s var(--ease); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.aberto main, html.aberto .obs-top, html.aberto .obs-status,
  html.aberto .frame, html.aberto .som-convite { transition: none; }
  .carga--fecha { transition: none; }
}

/* ---- eixo (nav lateral de seção, todas as páginas) ----
   bloco compartilhado, antes copiado em 4 folhas de página. Cada página
   mantém só o @media do seu breakpoint (que difere por layout). Manter o
   display:grid incondicional AQUI (uma folha, carregada uma vez, antes de
   todas) evita o vazamento de cascata: com o PJAX empilhando folhas de
   página no head, um `.eixo{display:grid}` duplicado numa folha
   reaparecia por cima do @media de outra entre os breakpoints.
   O padding-block com margem negativa dá alvo de toque ~28px (>= AA 24px)
   sem mover o pip nem sobrepor os vizinhos. */
.eixo { position: fixed; right: clamp(1rem, 3vw, 2.4rem); top: 50%; transform: translateY(-50%); z-index: 33; display: grid; gap: 0.85rem; }
.eixo a { display: flex; align-items: center; gap: 0.65rem; justify-content: flex-end; color: var(--ink-faint); transition: color var(--base); padding-block: 0.4rem; margin-block: -0.4rem; }
.eixo a .n { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; opacity: 0; transform: translateX(6px); transition: opacity var(--base), transform var(--base), color var(--base); white-space: nowrap; }
.eixo a .pip { width: 22px; height: 1px; background: currentColor; transition: width var(--base), background var(--base); }
.eixo a:hover .n, .eixo a.active .n { opacity: 1; transform: translateX(0); }
.eixo a:hover { color: var(--ink-soft); }
.eixo a.active { color: var(--sun); }
.eixo a.active .pip { width: 34px; background: var(--sun); box-shadow: 0 0 8px var(--sun-glow); }

/* ---- som: o convite discreto no canto ---- */
.som-convite {
  position: fixed;
  right: calc(1.1rem + env(safe-area-inset-right));
  bottom: calc(3.4rem + env(safe-area-inset-bottom));
  z-index: 40;
  min-height: 44px; min-width: 44px;
  padding: 0.4rem 1rem;
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint);
  background: oklch(0.16 0.012 258 / 0.5);
  border: 1px solid var(--line-faint); border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color var(--base), border-color var(--base);
}
.som-convite:hover { color: var(--sun-soft); border-color: var(--line-soft); }
.som-convite--aceso { color: var(--sun-soft); border-color: oklch(0.83 0.135 72 / 0.3); }
@media (max-width: 700px) {
  .som-convite { bottom: calc(3.8rem + env(safe-area-inset-bottom)); }
}

/* ---- transver: segurar re-lê a matéria ----
   o ponto âmbar marca o que aceita o gesto; a releitura chega em
   caligrafia de luz enquanto o olho comum desfoca */
[data-transver] {
  position: relative; cursor: pointer;
  /* toque: segurar não pode virar seleção de texto nem zoom de duplo-toque */
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.transver__ponto {
  position: absolute; top: 0.55rem; right: 0.55rem; z-index: 7;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sun); box-shadow: 0 0 10px 2px var(--sun-glow);
  opacity: 0.7; pointer-events: none;
  animation: transverPulso 4.6s var(--ease-in-out) infinite;
}
@keyframes transverPulso {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 0.95; transform: scale(1.15); }
}
.transver__reler {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.7rem; padding: clamp(0.8rem, 6%, 1.6rem); text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(0.82rem, 1.4vw, 1rem); line-height: 1.55;
  color: var(--ink); text-wrap: balance;
  background: oklch(0.14 0.012 258 / 0.9);
  opacity: 0; visibility: hidden;
  transition: opacity var(--slow) var(--ease), visibility 0s linear var(--slow);
  pointer-events: none;
}
.transver__reler .assina {
  font-family: var(--mono); font-style: normal; font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sun-soft);
}
.transver--ativo .transver__reler {
  opacity: 1; visibility: visible;
  transition-delay: 0s, 0s;
}
.transver__olho { transition: filter var(--slow) var(--ease); }
.transver--ativo .transver__olho { filter: brightness(0.5) saturate(0.55); }
.transver--ativo .transver__ponto { opacity: 1; animation: none; transform: scale(1.2); }
@media (prefers-reduced-motion: reduce) {
  .transver__ponto { animation: none; }
  .transver__reler, .transver__olho { transition: none; }
}

/* ---- travessia entre mundos: partida e chegada focais ----
   (nos filhos do main, nunca no main: filter criaria containing
   block e derrubaria os planos com position: fixed) */
html.em-travessia main > * {
  opacity: 0 !important;
  transition: opacity 0.45s var(--ease) !important;
  pointer-events: none !important;
}
html.travessia-chega main > * {
  animation: lenteChega 0.85s var(--ease) both;
}
@keyframes lenteChega {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html.em-travessia main > * { transition: none !important; }
  html.travessia-chega main > * { animation: none; }
}

/* ---- sem WebGL2: o campo vira luz parada — a composição sobrevive ---- */
.sem-webgl #field { display: none; }
.sem-webgl body {
  background:
    radial-gradient(58% 44% at 50% 40%, oklch(0.83 0.135 72 / 0.07) 0%, transparent 70%),
    var(--ground);
}