/* Construção da home: o código-fonte do hero vira a página.
   Tudo aqui é camada opcional. Sem a classe .build (sem JS, sem GSAP ou com
   prefers-reduced-motion) a home fica como sempre foi. */

:root{--code:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;--code-fs:clamp(10.5px,2.7vw,15px);--syn-p:#9a9a90;--syn-k:#111110;--syn-c:#2f5a8a;--syn-t:#8a4b1c;--syn-a:#62625d;--syn-s:#3d7a1f;--syn-x:#111110;--src-dim:#b9b9ae;--wire-edge:#8d8d84;--wire-cross:#c9c9bf}
@supports (color:light-dark(#000,#fff)){:root{--syn-p:light-dark(#9a9a90,#6f6e66);--syn-k:light-dark(#111110,#ecebe5);--syn-c:light-dark(#2f5a8a,#86b6ec);--syn-t:light-dark(#8a4b1c,#e6a66e);--syn-a:light-dark(#62625d,#a09f97);--syn-s:light-dark(#3d7a1f,#93d86c);--syn-x:light-dark(#111110,#ecebe5);--src-dim:light-dark(#b9b9ae,#4a4a43);--wire-edge:light-dark(#8d8d84,#6c6b63);--wire-cross:light-dark(#c9c9bf,#36362f)}}

/* Ações do campo: rever a construção e pausar o movimento. */
.field-actions{display:flex;gap:8px}
@media(max-width:480px){.field-meta>span{display:none}.field-meta{justify-content:flex-end}}

/* Réguas das grades: a borda vira um elemento que pode ser desenhado. */
.capability-grid,.process-grid{position:relative;border-top-color:transparent}
#field{color:var(--ink)}
.rule{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);transform-origin:0 50%}
.capability-grid .rule{background:#383832}
.capability-grid .capability:nth-last-child(2){padding-right:0}
.process-grid article::before{transform:scale(var(--d,1))}

/* Painel de código-fonte */
.src{display:none;position:absolute;z-index:3;top:62px;left:50%;translate:-50% 0;width:max-content;max-width:100%;text-align:left;font-family:var(--code);font-size:var(--code-fs);line-height:1.75;color:var(--syn-p);pointer-events:none}
.build .src{display:block}
.src-bar,.src-status{display:flex;align-items:center;justify-content:space-between;gap:24px;font:12px/1 var(--code);letter-spacing:.04em;color:var(--muted)}
.src-bar{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.src-skip{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:6px 0;color:var(--muted);font:inherit;letter-spacing:inherit}
.src-skip:hover{color:var(--ink)}
.src-skip kbd{font:inherit;font-size:11px;border:1px solid var(--line);border-radius:3px;padding:2px 5px}
.src-body{position:relative;display:flex;gap:2.2ch}
.src pre{margin:0;font:inherit;white-space:pre;font-variant-ligatures:none}
.src-gutter{color:var(--src-dim);text-align:right;user-select:none}
.src-gutter span,.src .tk{opacity:0}
.src .tk{display:inline-block;will-change:auto}
.src-line{position:absolute;left:-10px;right:-10px;top:0;height:1.75em;background:color-mix(in srgb,var(--accent) 22%,transparent);border-left:2px solid var(--syn-s);opacity:0;pointer-events:none}
.src-caret{display:inline-block;width:.55ch;height:1.15em;margin-left:2px;vertical-align:-.2em;background:var(--ink);opacity:0;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{visibility:hidden}}
.src-status{margin-top:14px;padding-top:12px;justify-content:flex-start;gap:10px}
.src-dot{width:6px;height:6px;border-radius:50%;background:var(--src-dim);transition:background .3s}
.src-status.ok .src-dot{background:var(--syn-s)}
.src .k{color:var(--syn-k);font-weight:600}.src .c{color:var(--syn-c)}.src .t{color:var(--syn-t)}.src .a{color:var(--syn-a)}.src .s,.src .n{color:var(--syn-s)}.src .x,.src .f{color:var(--syn-x)}.src .p{color:var(--syn-p)}
@media(hover:none){.src-skip kbd{display:none}}
@media(max-width:760px){.src{top:48px}.src-status{display:none}.src-body{gap:1.4ch}.src-bar{margin-bottom:10px}}
@media(max-width:400px){.src-gutter{display:none}}

/* Estado inicial durante a construção. O header nunca some. */
.build .hero [data-t],.build .field-meta,.build .hero-foot{opacity:0}
.hero h1 [data-t],.hero-intro [data-t]{display:inline-block}
.build .hero-links a{transition:none}
.is-building,.is-building *{transition:none!important}

/* Wireframe dos cards de projeto */
.wire{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.wire rect{x:.5px;y:.5px;width:calc(100% - 1px);height:calc(100% - 1px);fill:none;stroke:var(--wire-edge);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
.wire line{fill:none;stroke:var(--wire-cross);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
.wire-cover{position:absolute;inset:0;background:var(--paper);z-index:1}
.wire-label{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;background:var(--paper);padding:3px 10px;font:12px var(--code);color:var(--muted);white-space:nowrap}
.project-visual img{position:relative;z-index:2}
.project-index,.project-open{z-index:3}

/* Recursos nativos de 2024–2026: linha de leitura e deriva das imagens
   atreladas ao scroll, no compositor, sem JavaScript. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .scroll-progress{position:fixed;inset:0 0 auto;height:2px;z-index:60;background:var(--ink);transform-origin:0 50%;scale:0 1;animation:read linear both;animation-timeline:scroll(root)}
    @keyframes read{to{scale:1 1}}
    .project-visual img{animation:drift linear both;animation-timeline:view();animation-range:cover}
    @keyframes drift{from{translate:0 16px}to{translate:0 -16px}}
  }
}

@media print{.src,.scroll-progress{display:none!important}.build .hero [data-t],.build .field-meta,.build .hero-foot{opacity:1!important}}