/* Base do site: estrutura, textura, cabeçalho, rodapé, lombada e glitch dosado. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; font-size: 16px; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-base)/1.75 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* backwards: depois de acender, não deixa filtro residual no body (que quebraria elementos fixos, como o visualizador). */
  animation: tube-on 360ms steps(4) backwards;
}
::selection { color: var(--bg); background: var(--accent); }
a { color: inherit; text-underline-offset: .3em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
img { max-width: 100%; }
h1, h2, h3 { font-weight: 400; overflow-wrap: anywhere; }
p { overflow-wrap: anywhere; }

/* ---- textura: scanlines, vinheta de tubo, acendimento ---- */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before {
  z-index: 50;
  background: repeating-linear-gradient(to bottom, var(--scanline) 0, var(--scanline) 1px, transparent 1px, transparent 3px);
}
body::after {
  z-index: 51;
  background: radial-gradient(ellipse at center, transparent 62%, var(--vignette) 100%);
}
@keyframes tube-on {
  0% { opacity: 0; filter: brightness(2.4); }
  100% { opacity: 1; filter: none; }
}
.ambient { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ---- estrutura ---- */
.skip-link { position: fixed; top: 10px; left: 16px; z-index: 60; padding: 12px 18px; background: var(--accent); color: var(--bg); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.shell { position: relative; z-index: 2; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
main { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- cabeçalho ---- */
.site-header { min-height: 84px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); border-bottom: 1px solid var(--rule); padding: var(--space-3) 0; font-size: var(--fs-m); }
.brand { font-weight: 500; color: var(--accent); text-decoration: none; white-space: nowrap; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); margin-left: auto; }
.site-nav a { padding: 6px 0; text-decoration: none; color: var(--ink-2); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--accent); }
.site-nav a:hover { color: var(--accent); }
.lang { display: flex; align-items: baseline; gap: 8px; color: var(--ink-soft); white-space: nowrap; }
.lang [aria-current] { color: var(--ink); }
.lang a { color: var(--ink-soft); text-decoration: none; }
.lang a:hover { color: var(--accent); }

/* ---- rodapé ---- */
.site-footer { margin-top: 96px; border-top: 1px solid var(--rule); padding: var(--space-4) 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); font-size: var(--fs-m); color: var(--ink-soft); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); }
.site-footer a { text-decoration: none; color: var(--ink-2); padding: 4px 0; }
.site-footer a:hover { color: var(--accent); }
.coords { font-weight: 300; }

/* ---- títulos e cabeça de página ---- */
.page-head { padding: var(--space-6) 0 var(--space-5); border-bottom: 1px solid var(--rule); }
.sigil { display: block; flex: none; color: var(--accent); }
/* sigilos: cada pixel varia de leve o brilho, com atraso conforme o desenho (ver --d no SVG) */
.sigil rect { animation: sigil-pulse 4.8s ease-in-out var(--d, 0s) infinite; }
@keyframes sigil-pulse { 0%, 100% { opacity: 1; } 35% { opacity: .42; } 60% { opacity: .9; } }
.title-row { display: flex; align-items: center; gap: var(--space-3); }
.title-row .sigil { width: clamp(44px, 6vw, 72px); height: auto; }
.page-head h1 { margin: 0; font: 400 var(--fs-title-page)/1.1 var(--font-title); color: var(--ink); letter-spacing: .01em; }
.kicker { margin: var(--space-3) 0 0; color: var(--ink-soft); font-size: var(--fs-m); }
.kicker em { font-style: normal; }
.kicker a { color: var(--accent); }
.lead { max-width: 68ch; margin: var(--space-4) 0 0; color: var(--ink-2); }
.lead p { margin: 0; }
.lead p + p { margin-top: 1.2em; }
.lead strong { color: var(--ink); font-weight: 500; }
.section { padding: var(--space-5) 0 0; }
.section-title { margin: 0 0 var(--space-3); font: 400 var(--fs-title-section)/1.2 var(--font-title); color: var(--ink); }
.section-title a { text-decoration: none; }
.label { margin: 0 0 var(--space-2); color: var(--ink-soft); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; }
.num { font-family: var(--font-num); font-weight: 900; }
.text-link { display: inline-flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--accent); color: var(--accent); text-decoration: none; }
.text-link:hover { color: var(--accent-2); }
.links-row { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-4); }

/* ---- home ---- */
.intro { padding: var(--space-6) 0 var(--space-5); }
.intro-lead { max-width: 62ch; margin: var(--space-4) 0 0; color: var(--ink-2); font-size: var(--fs-l); line-height: 1.75; }
.statement { max-width: 30ch; margin: var(--space-4) 0 0; font: 400 var(--fs-title-section)/1.3 var(--font-title); color: var(--ink-2); }
.phrase { max-width: 24ch; margin: 0; padding: 0; font: 400 var(--fs-phrase)/1.25 var(--font-title); color: var(--ink); }
.home-sections { border-top: 1px solid var(--rule); }
.home-section { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; }
.home-section .sigil { width: 78px; height: 78px; margin-top: 6px; }
.home-section .path { display: block; margin-bottom: 8px; color: var(--ink-soft); font-size: var(--fs-xs); letter-spacing: .12em; }
.home-section h2 { margin: 0; font: 400 var(--fs-title-section)/1.1 var(--font-title); }
.home-section .sub { margin: 10px 0 0; color: var(--ink-2); font-size: var(--fs-m); }
.home-section .sub::before { content: "> "; color: var(--accent); }

/* estratos: textura do Workbench muda a cada camada; hover em vídeo invertido */
.stratum-label { display: inline-block; padding: 2px 10px 4px 0; color: var(--ink); text-decoration: none; text-transform: lowercase; transition: none; }
.l0 .stratum-label { font-variation-settings: 'BLED' 0, 'SCAN' 0; }
.l1 .stratum-label { font-variation-settings: 'BLED' 0, 'SCAN' 38; }
.l2 .stratum-label { font-variation-settings: 'BLED' 42, 'SCAN' 0; }
.l3 .stratum-label { font-variation-settings: 'BLED' 28, 'SCAN' -28; }
.stratum-label:hover, a.stratum-label:focus-visible { background: var(--ink); color: var(--bg); box-shadow: 8px 8px 0 var(--rule); }
.stratum-label.glitch:hover::before { background: var(--ink); }

/* itens como árvore de arquivos */
.items { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 4px; }
.items li { padding-left: 3ch; text-indent: -3ch; }
.items li::before { content: "├─ "; color: var(--rule); }
.items li:last-child::before { content: "└─ "; }
.items a { color: var(--ink-2); text-decoration: none; }
.items-sub { margin: 4px 0 0; }
.items-sub li::before { content: "├─ "; }
.items-sub li:last-child::before { content: "└─ "; }
.items a:hover { color: var(--accent); }
.items .note { color: var(--ink-soft); font-size: var(--fs-s); }

/* ---- lista de textos (pesquisa, literatura) ---- */
.entries { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.page-head + .section > .entries:first-child { margin-top: calc(-1 * var(--space-5)); border-top: 0; }
.entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.entry a, .entry .title { color: var(--ink); text-decoration: none; font-weight: 500; }
.entry a:hover { color: var(--accent); }
.entry a[target="_blank"]::after { content: " ↗"; color: var(--accent); }
.entry .meta { color: var(--ink-soft); font-size: var(--fs-s); }
.entry .num { color: var(--ink-soft); font-size: var(--fs-l); }
.status { color: var(--accent); font-size: var(--fs-s); }

/* ---- formulário de contato ---- */
.contact-form { position: relative; display: grid; gap: var(--space-1); max-width: 640px; }
.contact-form .sr-only { top: 0; left: 0; margin: 0; }
.contact-form label { margin-top: var(--space-2); color: var(--ink-soft); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 0; background: var(--surface); color: var(--ink); font: 400 var(--fs-base)/1.6 var(--font-text); }
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.button { justify-self: start; margin-top: var(--space-3); padding: 12px 20px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: 500 var(--fs-m) var(--font-text); cursor: pointer; }
.button:hover, .button:focus-visible { background: var(--accent); color: var(--bg); }
.button:disabled { opacity: .55; cursor: progress; }
.form-status { min-height: 1.6em; margin: var(--space-1) 0 0; color: var(--ink-2); font-size: var(--fs-m); }
.form-status[data-kind="ok"] { color: var(--accent); }
.form-status[data-kind="erro"] { color: var(--ink); }

/* ---- números ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 0; padding: var(--space-4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section > .stats:first-child { margin-top: 0; }
.stat .num { display: block; font-size: var(--fs-num); line-height: 1.1; color: var(--accent); }
.stat p { margin: var(--space-1) 0 0; color: var(--ink-2); font-size: var(--fs-m); }
.updated { margin: var(--space-2) 0 0; color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 300; }

.error-code { margin: 0 0 var(--space-2); font-size: var(--fs-num); line-height: 1; color: var(--accent); }

/* ---- lombada: componente único de lista expansível ---- */
.shelf { border-top: 1px solid var(--rule); }
.lombada { border-bottom: 1px solid var(--rule); }
.lombada > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(90px, auto) 32px; align-items: center; gap: var(--space-3); min-height: 96px; padding: var(--space-3) var(--space-2) var(--space-3) 0; transition: background .18s; }
.lombada > summary::-webkit-details-marker { display: none; }
.lombada > summary::marker { content: ""; }
.lombada > summary:hover { background: var(--surface); }
.lombada > summary:focus-visible { outline-offset: -3px; }
.lombada-num { align-self: stretch; display: grid; place-items: center; border-right: 1px solid var(--rule); color: var(--ink-soft); font: 900 var(--fs-l)/1 var(--font-num); }
.lombada-id { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lombada-titulo { color: var(--ink); font: 400 var(--fs-title-item)/1.15 var(--font-title); overflow-wrap: anywhere; }
.lombada-tipo { color: var(--ink-soft); font-size: var(--fs-m); }
.lombada-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-soft); font-size: var(--fs-s); }
.lombada-tags span + span::before { content: "/ "; color: var(--rule); }
.lombada-meta { color: var(--ink-2); font-size: var(--fs-s); text-align: right; white-space: nowrap; }
.lombada-toggle { justify-self: end; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--rule); color: var(--accent); font-size: 1.3rem; line-height: 1; }
.lombada-toggle::before { content: "+"; }
.lombada[open] { border-bottom-color: var(--accent); }
.lombada[open] > summary { background: var(--surface-2); box-shadow: inset 3px 0 var(--accent); }
.lombada[open] .lombada-toggle::before { content: "−"; }
.lombada[open] .lombada-titulo { color: var(--accent); }
.lombada-painel { padding: var(--space-1) var(--space-3) var(--space-4) 76px; background: var(--surface-2); }
.lombada[open] .lombada-painel { animation: unspool .24s ease-out; }
@keyframes unspool { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.lombada-painel > p { max-width: 76ch; margin: 0 0 var(--space-3); color: var(--ink-2); }
.lombada-painel .creditos { color: var(--ink-soft); font-size: var(--fs-m); }
.ficha { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-3); }
.ficha dt { color: var(--ink-soft); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; }
.ficha dd { margin: 4px 0 0; font-size: var(--fs-m); }
.episodios { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.episodios li { border-bottom: 1px solid var(--rule-soft); }
.episodios a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-2); align-items: baseline; padding: var(--space-2) 0; text-decoration: none; }
.episodios .num { color: var(--ink-soft); }
.episodios .ext { color: var(--accent); font-size: var(--fs-s); white-space: nowrap; }
.episodios a:hover .ep-titulo { color: var(--accent); }

/* frame de filme dentro da lombada */
.film-frame { position: relative; display: block; color: var(--ink); text-decoration: none; background: var(--bg); overflow: hidden; border: 1px solid var(--rule); }
.film-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg); }
.film-watch { display: flex; justify-content: space-between; gap: var(--space-3); padding: 14px 18px; background: var(--surface); color: var(--accent); font-size: var(--fs-m); border-top: 1px solid var(--rule); }
a.film-frame:hover .film-watch { background: var(--accent); color: var(--bg); }
.film-frame.image-unavailable .film-watch { min-height: 160px; }
.shelf-message { margin: 0; padding: var(--space-4) 0; color: var(--ink-soft); }

/* ---- glitch dosado: 3 fatias, 3–4px, ~0,24s, mais uma fatia azul defasada ---- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; white-space: inherit; }
.glitch::before { color: inherit; background: var(--bg); }
.glitch::after { color: var(--accent); }
.glitch.is-glitching::before { animation: glitch-slices .24s both; }
.glitch.is-glitching::after { animation: glitch-slices-accent .24s .04s both; }
@keyframes glitch-slices {
  0%      { opacity: 1; clip-path: inset(12% 0 62% 0); transform: translateX(-4px); animation-timing-function: step-end; }
  33.33%  { opacity: 1; clip-path: inset(46% 0 32% 0); transform: translateX(3px); animation-timing-function: step-end; }
  66.67%  { opacity: 1; clip-path: inset(74% 0 6% 0); transform: translateX(-3px); animation-timing-function: step-end; }
  100%    { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
}
@keyframes glitch-slices-accent {
  0%      { opacity: .85; clip-path: inset(30% 0 56% 0); transform: translateX(4px); animation-timing-function: step-end; }
  50%     { opacity: .85; clip-path: inset(60% 0 26% 0); transform: translateX(-3px); animation-timing-function: step-end; }
  100%    { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
}

/* ---- responsivo ---- */
@media (max-width: 850px) {
  .lombada > summary { grid-template-columns: 44px minmax(0, 1fr) 30px; gap: var(--space-2); }
  .lombada-meta { grid-column: 2; grid-row: 2; text-align: left; }
  .lombada-num { grid-row: 1 / 3; }
  .lombada-toggle { grid-column: 3; grid-row: 1 / 3; }
  .lombada-painel { padding: var(--space-1) var(--space-2) var(--space-3) 56px; }
}
@media (max-width: 600px) {
  .site-header { gap: var(--space-1) var(--space-3); }
  .site-nav { margin-left: 0; width: 100%; order: 3; gap: 2px var(--space-3); }
  .lang { margin-left: auto; }
  .home-section { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-2); }
  .home-section .sigil { width: 52px; height: 52px; margin-top: 2px; }
  .lombada > summary { grid-template-columns: 32px minmax(0, 1fr) 28px; }
  .lombada-num { font-size: var(--fs-m); }
  .lombada-painel { padding: var(--space-1) 0 var(--space-3); }
  .lombada-painel > p, .lombada-painel .ficha, .episodios { padding-inline: var(--space-2); }
  .entry { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; }
}
@media (max-width: 400px) {
  :root { --fs-phrase: 1.45rem; --fs-title-page: 2rem; }
}

/* ---- movimento reduzido: todos os efeitos desligados ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ambient { display: none; }
}