/* Perseidas Studio · base compartilhada (página inicial + painel) */
@font-face { font-family: "Instrument Serif"; src: url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Ubuntu Mono"; src: url(fonts/ubuntu-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ubuntu Mono"; src: url(fonts/ubuntu-mono-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(fonts/silkscreen-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(fonts/silkscreen-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #121212; --ink-2: #1a1a19; --ink-3: #222221; --ink-4: #2c2c2a;
  --cream: #e9e0d1; --cream-2: #d9cfbd; --paper: #e9e0d1; --paper-2: #ddd3c2; --paper-3: #cbc0ad;
  --stone: #868077; --stone-2: #5f5a53; --grey: #8f8f8f;
  --line: rgba(233, 224, 209, .14); --line-2: rgba(233, 224, 209, .28);
  --pline: rgba(18, 18, 18, .16); --pline-2: rgba(18, 18, 18, .38);
  --signal: #3b4cff; --signal-2: #2433c9; --signal-l: #9aa5ff;
  --ok: #3f6b45; --warn: #9a6512; --bad: #b2412e;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "Ubuntu Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pixel: "Silkscreen", "Ubuntu Mono", monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--cream); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg, canvas, video { display: block; max-width: 100%; }
::selection { background: var(--signal); color: #fff; }
.mono { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pixel { font-family: var(--pixel); letter-spacing: .04em; text-transform: uppercase; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Marca: a estrela cadente num quadrado de disquete */
.mark { width: 24px; height: 24px; background: var(--cream); color: var(--ink); display: grid; place-items: center; flex: none; position: relative; }
.mark::after { content: ""; position: absolute; right: 3px; top: 3px; width: 5px; height: 3px; background: var(--signal); }
.mark svg { width: 15px; height: 15px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: italic 400 24px/1 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.brand small { font: 400 10px var(--pixel); letter-spacing: .08em; text-transform: uppercase; font-style: normal; opacity: .7; margin-left: 2px; transform: translateY(-6px); }

/* Botões: teclas de plástico */
.btn { --bg: transparent; --fg: currentColor; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid currentColor; background: var(--bg); color: var(--fg); padding: 10px 16px; font: 700 12.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; position: relative; box-shadow: 3px 3px 0 currentColor; transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .2s, color .2s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 currentColor; }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 currentColor; }
.btn.cream { --bg: var(--cream); --fg: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn.ink { --bg: var(--ink); --fg: var(--cream); border-color: var(--ink); box-shadow: 3px 3px 0 var(--signal); }
.btn.ember { --bg: var(--signal); --fg: #f4f1ff; border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn.line { --bg: transparent; }
.btn.ghost { border-color: transparent; box-shadow: none; padding: 8px 10px; opacity: .75; }
.btn.ghost:hover { opacity: 1; transform: none; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
.btn.sm { padding: 7px 11px; font-size: 11.5px; box-shadow: 2px 2px 0 currentColor; }
.btn.xs { padding: 5px 8px; font-size: 10.5px; box-shadow: 2px 2px 0 currentColor; }
.btn.danger { color: var(--bad); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Grão de filme */
.grain { position: fixed; inset: -60%; pointer-events: none; z-index: 400; opacity: .14; mix-blend-mode: overlay; background-image: var(--noise); animation: grain .9s steps(5) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)} 60%{transform:translate(-5%,-2%)} 80%{transform:translate(4%,5%)} 100%{transform:translate(0,0)} }
.scan { position: fixed; inset: 0; pointer-events: none; z-index: 399; background: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px); }

/* Fotos: monocromáticas, cinzentas, granuladas */
.photo { position: relative; overflow: hidden; background: #6f6f6f; }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.photo::after { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .22; mix-blend-mode: overlay; pointer-events: none; }

/* Títulos em pixel "decodificando" (o texto real fica por baixo) */
.px { position: relative; }
.px canvas.pxc { position: absolute; left: 0; top: 0; pointer-events: none; }
.px.ready { color: transparent !important; }

/* Cursor piscando */
.caret::after { content: "▌"; animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}