/* ==========================================================================
   Gonçalo Baptista — Open Studio
   base.css · tokens, papel, tipografia, utilitários e animações base
   Referências: relatório de arquivo, CV manuscrito, créditos de cinema
   com moldura art nouveau, capa de banda sonora com caligrafia ornamental.
   ========================================================================== */

:root {
    /* papel & tinta */
    --paper: #ebe6da;
    --paper-2: #e2dccd;
    --paper-3: #f4f1e9;
    --ink: #151412;
    --ink-2: #3a3833;
    --ink-3: #77726a;
    --rule: rgba(21, 20, 18, .3);
    --rule-soft: rgba(21, 20, 18, .13);
    --grid: rgba(21, 20, 18, .055);
    --hl: rgba(21, 20, 18, .15);

    /* caneta vermelha (tom da estrela HOKEN™) */
    --red: #b3261e;
    --red-deep: #8e2424;

    /* cinema */
    --night: #0d0c0b;
    --night-2: #181613;
    --bone: #dcd2bc;
    --bone-2: #a79e8a;

    /* tipos */
    --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --f-mono: "Courier Prime", "Courier New", Courier, monospace;
    --f-serif: "IM Fell English", Georgia, "Times New Roman", serif;
    --f-sc: "IM Fell English SC", "IM Fell English", Georgia, serif;
    --f-hand: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
    --f-script: "Monsieur La Doulaise", "Snell Roundhand", "Apple Chancery", cursive;
    --f-scrawl: "Nothing You Could Do", "Bradley Hand", cursive;

    /* ritmo */
    --wrap: 1440px;
    --gutter: clamp(18px, 4vw, 56px);
    --sec-pad: clamp(72px, 11vw, 160px);
    --ease: cubic-bezier(.2, .7, .1, 1);
    --ease-io: cubic-bezier(.7, 0, .2, 1);

    /* texturas (SVG gerado — sem pedidos extra) */
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .05 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    --noise-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .9 0 0 0 .7 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --stain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .28 0 0 0 0 .17 0 0 0 1.5 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='.22'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--paper);
    background-image: var(--noise), var(--stain);
    color: var(--ink);
    font-family: var(--f-mono);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--red); color: var(--paper-3); }
:focus-visible { outline: 2px dashed var(--red); outline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

.skip-link {
    position: fixed; left: 12px; top: -60px; z-index: 1000;
    background: var(--ink); color: var(--paper); padding: 10px 14px;
    font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
    transition: top .2s;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Estrutura
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.grid-paper {
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: -1px -1px;
}

.is-night {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--night);
    color: var(--bone);
    --rule: rgba(220, 210, 188, .28);
    --rule-soft: rgba(220, 210, 188, .12);
    --hl: rgba(220, 210, 188, .2);
}
/* grão de película animado (só transform → corre no compositor) */
.is-night::after {
    content: "";
    position: absolute; inset: -90px;
    background-image: var(--noise-light);
    opacity: .14;
    pointer-events: none;
    z-index: 3;
    will-change: transform;
    animation: grain 1s steps(6) infinite;
}
@keyframes grain {
    0% { transform: translate3d(0, 0, 0); }
    20% { transform: translate3d(-40px, 30px, 0); }
    40% { transform: translate3d(30px, -50px, 0); }
    60% { transform: translate3d(-60px, -10px, 0); }
    80% { transform: translate3d(50px, 40px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
.t-label {
    font-family: var(--f-mono);
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.is-night .t-label { color: var(--bone-2); }
.t-hand { font-family: var(--f-hand); font-weight: 400; }
.t-script { font-family: var(--f-script); font-weight: 400; }
.t-sc { font-family: var(--f-sc); letter-spacing: .05em; }
.t-serif { font-family: var(--f-serif); }
.t-mono { font-family: var(--f-mono); }
.t-scrawl { font-family: var(--f-scrawl); color: var(--red); }
.t-red { color: var(--red); }

.link-u {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
    transition: background-size .45s var(--ease);
    padding-bottom: 1px;
}
.link-u:hover { background-size: 0 1px; background-position: 100% 100%; }

/* Conteúdo em markdown (projetos e notas) */
.prose { font-size: 16px; line-height: 1.7; max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4, .prose h5 {
    font-family: var(--f-sans);
    font-weight: 800;
    font-stretch: 80%;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.1;
    margin-top: 2em;
}
.prose h2 { font-size: clamp(20px, 2vw, 26px); }
.prose h3 { font-size: 19px; }
.prose h4, .prose h5 { font-size: 15px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.4em; }
.prose ul li::before { content: "—"; position: absolute; left: 0; color: var(--ink-3); }
.prose ol li::marker { font-weight: 700; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--red); }
.prose blockquote {
    border-left: 2px solid var(--red);
    padding: .2em 0 .2em 1.2em;
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 1.2em;
    line-height: 1.5;
}
.prose code {
    font-family: var(--f-mono);
    background: var(--hl);
    padding: .05em .35em;
    font-size: .92em;
}
.prose hr { border-top: 1px dashed var(--rule); }
.prose strong { font-weight: 700; }
.prose del { text-decoration-color: var(--red); text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   Marcas do arquivo: marcador, rasura, caneta
   -------------------------------------------------------------------------- */
mark.hl {
    color: inherit;
    padding: 0 .12em;
    background: linear-gradient(transparent 10%, var(--hl) 10%, var(--hl) 90%, transparent 90%) no-repeat 0 0 / 100% 100%;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.js mark.hl { background-size: 0 100%; transition: background-size 1.1s var(--ease) .15s; }
.js mark.hl.is-in { background-size: 100% 100%; }

.redacted {
    background: var(--ink);
    color: transparent;
    padding: 0 .2em;
    border-radius: 1px;
    cursor: help;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    user-select: none;
    transition: background-color .35s var(--ease), color .35s var(--ease);
}
.redacted:hover, .redacted:focus { background-color: var(--hl); color: inherit; user-select: text; outline: none; }
.is-night .redacted { background: var(--bone); }
.is-night .redacted:hover, .is-night .redacted:focus { background: var(--hl); color: inherit; }

.pen-ring { position: relative; display: inline-block; white-space: nowrap; padding: 0 .12em; }
.pen-ring__svg {
    position: absolute;
    left: -14%; top: -34%;
    width: 128%; height: 168%;
    color: var(--red);
    overflow: visible;
    pointer-events: none;
}
.pen-ring__svg path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .pen-ring__svg path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease-io) .35s; }
.js .pen-ring.is-in .pen-ring__svg path { stroke-dashoffset: 0; }

/* Desenho de traços SVG (molduras, floreados, setas) */
.draw path, .draw circle, .draw line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .draw path, .js .draw circle, .js .draw line { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-io); }
.js .draw.is-in path, .js .draw.is-in circle, .js .draw.is-in line { stroke-dashoffset: 0; }
.js .draw.is-in :nth-child(2) { transition-delay: .12s; }
.js .draw.is-in :nth-child(3) { transition-delay: .24s; }
.js .draw.is-in :nth-child(4) { transition-delay: .36s; }
.js .draw.is-in :nth-child(5) { transition-delay: .48s; }
.js .draw.is-in :nth-child(6) { transition-delay: .6s; }
.js .draw.is-in :nth-child(7) { transition-delay: .72s; }
.js .draw.is-in :nth-child(8) { transition-delay: .84s; }
.js .draw.is-in :nth-child(9) { transition-delay: .96s; }
.js .draw.is-in :nth-child(n+10) { transition-delay: 1.08s; }

/* --------------------------------------------------------------------------
   Aparecimento ao scroll
   -------------------------------------------------------------------------- */
.js .reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0) rotate(var(--tilt, 0deg));
    transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg)); }

/* texto que se "desclassifica": barra preta que recolhe */
.declassify { position: relative; display: inline-block; }
.js .declassify::after {
    content: "";
    position: absolute; inset: .08em -.08em;
    background: currentColor;
    transform-origin: 100% 50%;
    transition: transform 1s var(--ease-io) var(--d, .1s);
}
.js .declassify.is-in::after { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
    .js .reveal { opacity: 1; transform: none; }
}