/* ============================================================ ATELIER — folha de estilos (registro claro do Digital Artisan) Uma sala 2D: quadros pousados num plano que se percorre; ao entrar num quadro, contemplação em tela cheia. Três camadas de estado no : (padrão) linear/à-prova-de-JS · .roam plano 2D navegável · .contempla-on trava o fundo durante a contemplação. ============================================================ */ @font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:swap;src:url("../assets/fonts/fraunces-var.woff2") format("woff2")} @font-face{font-family:"Fraunces";font-style:italic;font-weight:300 700;font-display:swap;src:url("../assets/fonts/fraunces-var-italic.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fonts/ibm-plex-mono-italic.woff2") format("woff2")} @font-face{font-family:"Archivo";src:url("../assets/fonts/archivo-variable.woff2") format("woff2-variations");font-weight:100 900;font-stretch:62% 125%;font-display:swap} :root{ /* paleta da marca em registro claro: mesma base da home e das páginas internas */ --bg:#F2EFE7; --bg-2:#E4DED1; --bone:#202025; --dim:#565A54; --faint:#68645E; --amber:#C05518; --accent:var(--amber); --accent-soft:color-mix(in oklch,var(--accent) 56%,var(--bone)); --accent-text:#A25408; --logo-ink:var(--bone); --logo-sun:var(--accent); --night:#070605; --night-text:#EDE8DC; --night-muted:#C9C0AF; --night-faint:#8E877A; --night-accent:#C05518; --line:color-mix(in oklch,var(--bone) 12%,transparent); --line-2:color-mix(in oklch,var(--bone) 22%,transparent); --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; --disp:"Fraunces",Georgia,serif; --ease-out:cubic-bezier(.16,1,.3,1); --fast:.18s; --cam:.62s; /* dimensões do quadro e passo da grade — fonte única lida pelo atelier.js. na ronda a obra corrente comanda a tela: pranchas grandes, passos largos. */ --plate-w:560px; --plate-h:408px; --col-pitch:880px; --row-pitch:780px; } *{margin:0;padding:0;box-sizing:border-box} /* o atributo [hidden] precisa vencer as regras de display dos componentes (.contempla/.hud usam display:grid/flex, que sobrepujariam o UA stylesheet) */ [hidden]{display:none!important} html,body{height:100%} body{background:var(--bg);color:var(--bone);font-family:var(--mono);font-size:14px;line-height:1.5; overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} ::selection{background:var(--accent-text);color:#FCFBF8} ::-moz-selection{background:var(--accent-text);color:#FCFBF8} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .skip-link{position:fixed;top:-60px;left:12px;z-index:300;background:var(--bone);color:var(--bg); padding:8px 14px;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:12px;transition:top var(--fast)} .skip-link:focus{top:12px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- atmosfera de fundo ---------- */ .field-paper{position:fixed;inset:0;z-index:-2;background:var(--bg)} .field-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.25; background-image:url("data:image/svg+xml;utf8,"); background-size:66px 66px} body::after{content:none} /* moldura de registro do recinto */ .frame{position:fixed;inset:14px;z-index:90;pointer-events:none} .corner{position:absolute;width:16px;height:16px} .corner::before,.corner::after{content:"";position:absolute;background:var(--line-2)} .corner::before{width:16px;height:1px;top:7px}.corner::after{height:16px;width:1px;left:7px} .corner.tl{top:0;left:0}.corner.tr{top:0;right:0}.corner.bl{bottom:0;left:0}.corner.br{bottom:0;right:0} /* logo no canto (brand.js preenche .js-da-logo) */ .da-corner{position:fixed;top:20px;left:24px;z-index:210;display:block;width:40px;height:40px;transition:transform var(--fast)} .da-corner svg{width:100%;height:100%;display:block} .da-corner:hover{transform:scale(1.06)} /* ---------- navegação superior (shared/topnav.js) ---------- */ .da-topnav{position:fixed;top:30px;left:78px;z-index:210;display:flex;gap:18px;align-items:center} .da-topnav .dt-link{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:clamp(11px,.765vw,12.75px);letter-spacing:.12em;text-transform:uppercase; color:var(--dim);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:3px 1px;position:relative;transition:color var(--fast)} .da-topnav .dt-link::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px; background:var(--accent-text);transition:right var(--fast) var(--ease-out)} .da-topnav .dt-link:hover{color:var(--bone)} .da-topnav .dt-link:hover::after{right:0} .da-topnav .dt-link[aria-current="page"]{color:var(--accent-text)} .da-topnav .dt-link[aria-current="page"]::after{right:0;background:var(--accent-text)} @media (max-width:560px){ .da-topnav{ top:60px;left:12px;right:12px;height:auto;max-width:none; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;overflow:hidden; border:1px solid var(--line);background:color-mix(in oklch,var(--bg) 94%,transparent); } .da-topnav .dt-link{ flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 4px; font-size:0;letter-spacing:.08em;line-height:1;white-space:nowrap;border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .da-topnav .dt-link:nth-child(3n){border-right:0} .da-topnav .dt-link:nth-last-child(-n+3){border-bottom:0} .da-topnav .dt-link::before{content:attr(data-short);font-size:11px} .da-topnav .dt-link::after{display:none} .campo-plano{padding-top:152px} } /* ============================================================ CAMPO — padrão: documento linear (fallback / sem JS). ============================================================ */ .campo{position:relative;z-index:1;min-height:100vh} .campo-plano{display:flex;flex-wrap:wrap;justify-content:center;gap:48px 56px; max-width:1180px;margin-inline:auto;padding:124px clamp(20px,5vw,64px) 120px} /* um quadro */ .obra{position:relative;width:min(86vw,440px)} .obra-frame{display:block;position:relative;width:100%;height:auto;aspect-ratio:360/262; background:var(--bg-2);border:1px solid var(--line);overflow:hidden; transition:border-color var(--fast),transform var(--fast) var(--ease-out),box-shadow var(--fast)} .obra-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block} /* cantos de registro do quadro */ .fc{position:absolute;width:10px;height:10px;pointer-events:none;opacity:.5;transition:opacity var(--fast)} .fc::before,.fc::after{content:"";position:absolute;background:var(--bone)} .fc::before{width:10px;height:1px}.fc::after{height:10px;width:1px} .fc.tl{top:6px;left:6px}.fc.tr{top:6px;right:6px}.fc.tr::before{right:0} .fc.bl{bottom:6px;left:6px}.fc.bl::after{bottom:0}.fc.br{bottom:6px;right:6px}.fc.br::before{right:0}.fc.br::after{bottom:0} .obra-frame::after{content:"contemplar →";position:absolute;left:0;right:0;bottom:0;padding:18px 12px 10px; font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bg); text-align:center;opacity:0;transform:translateY(6px);transition:opacity var(--fast),transform var(--fast) var(--ease-out); background:linear-gradient(to top,rgba(8,7,6,.82),transparent)} .obra-frame:hover,.obra-frame:focus-visible{border-color:var(--line-2);transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(0,0,0,.9)} .obra-frame:hover .fc,.obra-frame:focus-visible .fc{opacity:.95} .obra-frame:hover::after,.obra-frame:focus-visible::after{opacity:.92;transform:none} .obra-label{padding:14px 2px 0} .o-num{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.2em;color:var(--dim);font-variant-numeric:tabular-nums} .o-num::after{content:"";display:inline-block;vertical-align:middle;width:26px;height:1px;background:var(--faint);margin-left:10px} .o-name{font-family:var(--disp);font-style:italic;font-weight:450;font-size:clamp(20px,2.2vw,26px); line-height:1.12;color:var(--bone);margin:7px 0 5px} .o-q{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--accent-soft);max-width:34ch} /* ============================================================ CAMPO — modo .roam: plano 2D navegável (mouse/teclado). ============================================================ */ html.roam .campo{position:fixed;inset:0;min-height:0;overflow:hidden;cursor:grab;touch-action:none; user-select:none;-webkit-user-select:none} html.roam .campo.is-grab{cursor:grabbing} html.roam .campo-plano{position:absolute;top:0;left:0;display:block;max-width:none;margin:0;padding:0; width:1px;height:1px;will-change:transform;transition:transform var(--cam) var(--ease-out)} html.roam .campo-plano.is-drag{transition:none} html.roam .obra{position:absolute;top:0;left:0;width:var(--plate-w); transition:opacity var(--cam) var(--ease-out),filter var(--cam) var(--ease-out)} html.roam .obra-frame{aspect-ratio:auto;height:var(--plate-h)} /* rota costurada entre as obras (SVG injetado pelo atelier.js) */ .campo-rota{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;z-index:0} .campo-rota path{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 7;stroke-linecap:round} html.roam .obra{z-index:1} /* a obra selecionada ganha presença; as distantes recuam */ html.roam .obra.is-sel .obra-frame{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in oklch,var(--accent) 40%,transparent),0 26px 60px -30px #000} html.roam .obra.is-sel .o-num{color:var(--accent)} html.roam .obra.is-dim{opacity:.42;filter:saturate(.7)} /* ---------- HUD ---------- */ .hud{position:fixed;left:20px;bottom:18px;z-index:150;display:flex;gap:14px;align-items:baseline; font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase; background:color-mix(in oklch,var(--bg) 86%,transparent);backdrop-filter:blur(3px);border:1px solid var(--line);padding:9px 14px} .hud-idx{color:var(--accent);font-variant-numeric:tabular-nums} .hud-nome{color:var(--bone)} .hud-dica{color:var(--faint);letter-spacing:.1em;text-transform:none} @media (max-width:760px){ .hud-dica{display:none} } /* ---------- minimapa ---------- */ .minimapa{position:fixed;right:18px;bottom:18px;z-index:150;width:188px; background:color-mix(in oklch,var(--bg) 88%,transparent);backdrop-filter:blur(4px);border:1px solid var(--line);padding:12px 12px 10px} .minimapa-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px; font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)} .minimapa-tela{position:relative;width:100%;height:128px} .mm-view{position:absolute;border:1px solid color-mix(in oklch,var(--bone) 34%,transparent); background:color-mix(in oklch,var(--bone) 6%,transparent);pointer-events:none;transition:left var(--cam) var(--ease-out),top var(--cam) var(--ease-out),width var(--cam) var(--ease-out),height var(--cam) var(--ease-out)} .mm-dot{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;padding:0; background:transparent;border:0;transition:transform var(--fast)} .mm-dot::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%; background:var(--faint);border:1px solid transparent;transform:translate(-50%,-50%); transition:background var(--fast),transform var(--fast),border-color var(--fast),box-shadow var(--fast)} .mm-dot:hover::before{background:var(--bone);transform:translate(-50%,-50%) scale(1.25)} .mm-dot.is-sel::before{background:var(--accent);border-color:var(--accent-soft); box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 24%,transparent)} @media (max-width:760px){ .minimapa{display:none} } /* ============================================================ RECEPÇÃO — a entrada da sala ============================================================ */ .recepcao{position:fixed;inset:0;z-index:240;display:grid;place-items:center; background:var(--bg); transition:opacity .7s var(--ease-out),visibility .7s} .recepcao.is-gone{opacity:0;visibility:hidden;pointer-events:none} /* o ritual de entrada: a lâmpada da oficina PISCA e apaga (beat 1); só então a porta se abre para a sala noturna (beat 2 = .is-gone). */ @keyframes recApagar{ 0%{background:var(--bg)} 10%{background:color-mix(in oklch,var(--bg) 62%,var(--night))} 17%{background:var(--bg)} 26%{background:color-mix(in oklch,var(--bg) 80%,var(--night))} 100%{background:var(--night)} } .recepcao.is-apagando{animation:recApagar .82s var(--ease-out) forwards} .recepcao.is-apagando :is(.rec-titulo){color:var(--night-text);transition:color .55s var(--ease-out) .2s} .recepcao.is-apagando :is(.rec-kicker,.rec-dica){color:var(--night-faint);transition:color .55s var(--ease-out) .2s} .recepcao.is-apagando .rec-lede{color:var(--night-muted);transition:color .55s var(--ease-out) .2s} .recepcao.is-apagando .rec-entrar{color:var(--night-text);border-color:color-mix(in oklch,var(--night-text) 30%,transparent); background:transparent;transition:color .55s var(--ease-out) .2s,border-color .55s var(--ease-out) .2s} .recepcao.is-apagando .recepcao-fundo{opacity:.22;transition:opacity .8s var(--ease-out) .1s} .recepcao-fundo{position:absolute;inset:0;width:100%;height:100%;opacity:.1; -webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000 30%,transparent 78%); mask-image:radial-gradient(70% 70% at 50% 45%,#000 30%,transparent 78%)} .recepcao-corpo{position:relative;text-align:center;max-width:min(92vw,640px);padding:24px} .rec-kicker{display:block;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.34em;text-transform:uppercase; color:var(--dim);margin-bottom:26px;opacity:0;animation:rec-in .9s var(--ease-out) .15s forwards} .rec-titulo{font-family:var(--disp);font-weight:340;font-size:clamp(56px,12vw,128px);line-height:.92; letter-spacing:-.01em;color:var(--bone);opacity:0;animation:rec-in 1.1s var(--ease-out) .3s forwards} .rec-sub{font-family:var(--disp);font-style:italic;font-weight:360;font-size:clamp(18px,3vw,27px); color:var(--accent-soft);margin-top:10px;opacity:0;animation:rec-in 1s var(--ease-out) .5s forwards} .rec-sub em{font-style:italic;color:var(--accent)} .rec-lede{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--dim);max-width:46ch; margin:30px auto 0;text-wrap:pretty;opacity:0;animation:rec-in 1s var(--ease-out) .72s forwards} .rec-entrar{display:inline-flex;align-items:center;gap:12px;margin-top:40px; font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone); text-decoration:none;padding:14px 26px;border:1px solid var(--line-2); opacity:0;animation:rec-in 1s var(--ease-out) .92s forwards;transition:background var(--fast),border-color var(--fast),color var(--fast)} .rec-entrar .rec-seta{color:var(--accent);transition:transform var(--fast) var(--ease-out)} .rec-entrar:hover{background:var(--bone);color:var(--bg);border-color:var(--bone)} .rec-entrar:hover .rec-seta{color:var(--bg);transform:translateX(5px)} .rec-dica{display:block;margin-top:18px;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:10px;letter-spacing:.22em; text-transform:uppercase;color:var(--faint);opacity:0;animation:rec-in 1s var(--ease-out) 1.1s forwards} @keyframes rec-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* ============================================================ CONTEMPLAÇÃO — obra única. O GRANDE constrói no SCROLL (reveal on scroll, como a obra é de fato feita); o pequeno no canto roda em loop automático — o "vídeo" do efeito. ============================================================ */ html.contempla-on{overflow:hidden} .contempla{position:fixed;inset:0;z-index:250;background:var(--night);color:var(--night-text);overflow-y:auto;overflow-x:hidden; overscroll-behavior:contain;opacity:0;transition:opacity .5s var(--ease-out);scrollbar-width:none} .contempla::-webkit-scrollbar{width:0;height:0} .contempla.is-open{opacity:1} .contempla-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden} .contempla-scroll{height:240vh} /* vão que dá curso ao scroll → progresso da obra */ .contempla-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block} .contempla-vinheta{position:absolute;inset:0;pointer-events:none; background:radial-gradient(80% 80% at 50% 46%,transparent 52%,rgba(5,4,4,.82))} /* o "vídeo" em loop, no canto — tamanho/proporção definidos pelo JS (espelha o palco) */ .contempla-loop{position:absolute;right:clamp(14px,2.2vw,30px);bottom:clamp(44px,7.5vh,78px);z-index:4;margin:0; background:#0a0908;border:1px solid color-mix(in oklch,var(--night-text) 22%,transparent);box-shadow:0 20px 54px -26px #000;overflow:hidden} .contempla-loop canvas{position:absolute;inset:0;width:100%;height:100%;display:block} /* controles — somem na inatividade (.ui-hidden); loop, fio e a dica permanecem */ .contempla-x,.contempla-nav,.contempla-plaqueta{transition:opacity .4s var(--ease-out)} .contempla.ui-hidden .contempla-x,.contempla.ui-hidden .contempla-nav, .contempla.ui-hidden .contempla-plaqueta{opacity:0;pointer-events:none} .contempla-x{position:absolute;top:24px;right:26px;z-index:5;display:inline-flex;gap:9px;align-items:center;min-height:44px; font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--night-muted); padding:8px 14px;border:1px solid color-mix(in oklch,var(--night-text) 22%,transparent);transition:color var(--fast),border-color var(--fast),opacity .4s} .contempla-x:hover{color:var(--night-text);border-color:color-mix(in oklch,var(--night-text) 44%,transparent)} .contempla-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:54px;height:80px; display:grid;place-items:center;font-size:30px;color:var(--night-muted);transition:color var(--fast),opacity .4s} .contempla-nav:hover{color:var(--night-text)} .contempla-nav.prev{left:14px}.contempla-nav.next{right:14px} .contempla-plaqueta{position:absolute;left:clamp(24px,5vw,72px);bottom:clamp(58px,10vh,96px);z-index:5; max-width:min(440px,64vw)} .cp-num{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.22em;color:var(--night-accent);font-variant-numeric:tabular-nums} .cp-num::after{content:"";display:inline-block;vertical-align:middle;width:34px;height:1px;background:var(--night-faint);margin-left:12px} .cp-nome{font-family:var(--disp);font-style:italic;font-weight:440;font-size:clamp(26px,3.4vw,40px); line-height:1.06;color:var(--night-text);margin:9px 0 7px} .cp-q{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--night-accent);max-width:40ch} .cp-sobre-btn{margin-top:14px;min-height:32px;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--night-muted);border-bottom:1px solid color-mix(in oklch,var(--night-text) 28%,transparent);padding-bottom:3px;transition:color var(--fast),border-color var(--fast)} .cp-sobre-btn:hover{color:var(--night-text);border-color:color-mix(in oklch,var(--night-text) 44%,transparent)} .cp-sobre{margin-top:14px;max-width:46ch} .cp-conceito{font-family:var(--mono);font-size:12px;line-height:1.62;color:var(--night-muted);text-wrap:pretty} .cp-efeito{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--night-faint);margin-top:9px;text-wrap:pretty} .cp-efeito::before{content:"constrói · ";color:var(--night-accent)} /* dica — afastada da plaqueta textual para não disputar leitura */ .contempla-dica{position:absolute;left:auto;right:clamp(76px,8vw,132px);top:50%;transform:translateY(-50%);z-index:5; max-width:172px;font-family:var(--mono);font-size:12px;line-height:1.65;letter-spacing:.04em; color:var(--night-muted);pointer-events:none;transition:opacity .4s var(--ease-out)} .contempla:has(#cp-sobre:not([hidden])) .contempla-dica{opacity:0} .contempla-dica span{color:var(--night-accent);display:inline-block;margin-left:2px} @media (prefers-reduced-motion:no-preference){ .contempla-dica span{animation:dica-bob 1.9s var(--ease-out) infinite} @keyframes dica-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}} } .contempla-fio{position:absolute;left:0;right:0;bottom:0;z-index:5;height:2px;background:color-mix(in oklch,var(--night-text) 18%,transparent)} .cb-fio-fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--night-accent);transition:width .08s linear} @media (max-width:560px){ .contempla-loop{display:none} } /* ============================================================ ATLAS — identidade de "plano medido" (só no modo roam) ============================================================ */ /* grade de levantamento que corre rigidamente com a câmera */ .atlas-grid{display:none} html.roam .atlas-grid{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6; background-image:linear-gradient(color-mix(in oklch,var(--bone) 5.5%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in oklch,var(--bone) 5.5%,transparent) 1px,transparent 1px); background-size:96px 96px} /* nº de prancha — etiqueta arquitetônica de cada quadro */ html.roam .obra::before{content:attr(data-n);position:absolute;top:-58px;right:-2px;z-index:0; font-family:var(--disp);font-weight:300;font-size:76px;line-height:1;font-variant-numeric:tabular-nums; color:transparent;-webkit-text-stroke:1px var(--line);opacity:.7;pointer-events:none; transition:opacity var(--fast),-webkit-text-stroke-color var(--fast)} html.roam .obra.is-sel::before{opacity:1;-webkit-text-stroke-color:color-mix(in oklch,var(--accent) 62%,transparent)} /* nós do percurso (a "linha" do artesão ganha pontos medidos) */ .campo-rota circle{fill:var(--bg-2);stroke:var(--line-2);stroke-width:1;transition:fill var(--fast),stroke var(--fast)} .campo-rota circle.no-sel{fill:var(--accent);stroke:var(--accent-soft)} /* leitura de coordenadas no HUD */ .hud-xy{color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.14em} @media (max-width:900px){ .hud-xy{display:none} } /* ============================================================ A RONDA — o atelier à noite. Ao entrar, as luzes da sala se apagam para as obras acenderem: o campo herda o mundo noturno da contemplação (um só mundo, nenhuma quebra). A navegação é um FIO: rolar caminha; cada estação acorda a sua obra; as outras dormem como pranchas riscadas na penumbra. ============================================================ */ body{transition:background .95s var(--ease-out),color .95s var(--ease-out)} body.sala-noturna{background:var(--night);color:var(--night-text);--logo-ink:var(--night-text)} body.sala-noturna .field-paper{background:var(--night);transition:background .95s var(--ease-out)} body.sala-noturna .field-grid{opacity:.14;filter:invert(.88)} body.sala-noturna .corner::before,body.sala-noturna .corner::after{background:color-mix(in oklch,var(--night-text) 20%,transparent)} body.sala-noturna .da-topnav .dt-link{color:var(--night-faint)} body.sala-noturna .da-topnav .dt-link:hover{color:var(--night-text)} body.sala-noturna .da-topnav .dt-link[aria-current="page"]{color:var(--night-accent)} body.sala-noturna .skip-link{background:var(--night-text);color:var(--night)} /* grade de levantamento em giz */ body.sala-noturna .atlas-grid{opacity:.5; background-image:linear-gradient(color-mix(in oklch,var(--night-text) 6%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in oklch,var(--night-text) 6%,transparent) 1px,transparent 1px)} /* a poça de luz que você carrega pela sala */ .sala-luz{display:none} body.sala-noturna .sala-luz{display:block;position:fixed;inset:0;z-index:2;pointer-events:none; background:radial-gradient(56% 56% at 50% 47%,transparent 34%,rgba(4,3,3,.66) 82%); transition:opacity .9s var(--ease-out);will-change:transform,opacity} /* quadros: dormentes na penumbra · a obra corrente acesa */ body.sala-noturna .obra-frame{background:#0b0a09;border-color:color-mix(in oklch,var(--night-text) 14%,transparent)} body.sala-noturna .fc::before,body.sala-noturna .fc::after{background:var(--night-text)} body.sala-noturna .o-num{color:var(--night-faint)} body.sala-noturna .o-num::after{background:color-mix(in oklch,var(--night-text) 30%,transparent)} body.sala-noturna .o-name{color:var(--night-text)} body.sala-noturna .o-q{color:color-mix(in oklch,var(--night-accent) 72%,var(--night-text))} html.roam body.sala-noturna .obra{transition:opacity 1.1s var(--ease-out),filter 1.1s var(--ease-out),transform 1.1s var(--ease-out)} html.roam body.sala-noturna .obra.is-dorme{opacity:.30;filter:saturate(.35) brightness(.8)} html.roam body.sala-noturna .obra.is-dorme .o-name, html.roam body.sala-noturna .obra.is-dorme .o-q{opacity:0} html.roam body.sala-noturna .obra .o-name,html.roam body.sala-noturna .obra .o-q{transition:opacity .9s var(--ease-out)} html.roam body.sala-noturna .obra.is-live{opacity:1;filter:none;transform:scale(1.045)} html.roam body.sala-noturna .obra.is-live .obra-frame{border-color:color-mix(in oklch,var(--night-accent) 55%,transparent); box-shadow:0 0 0 1px color-mix(in oklch,var(--night-accent) 26%,transparent),0 34px 90px -38px #000,0 0 84px -30px color-mix(in oklch,var(--night-accent) 34%,transparent)} html.roam body.sala-noturna .obra.is-live .o-num{color:var(--night-accent)} html.roam body.sala-noturna .obra:not(.is-live) .obra-frame::after{display:none} html.roam body.sala-noturna .obra::before{-webkit-text-stroke-color:color-mix(in oklch,var(--night-text) 13%,transparent)} html.roam body.sala-noturna .obra.is-live::before{-webkit-text-stroke-color:color-mix(in oklch,var(--night-accent) 58%,transparent)} /* o fio: rota base em giz + o trecho JÁ COSTURADO em âmbar */ body.sala-noturna .campo-rota path{stroke:color-mix(in oklch,var(--night-text) 16%,transparent)} .campo-rota .fio-costura{fill:none;stroke:var(--night-accent);stroke-width:1.5;stroke-linecap:round; filter:drop-shadow(0 0 6px color-mix(in oklch,var(--night-accent) 55%,transparent))} body.sala-noturna .campo-rota circle{fill:#151311;stroke:color-mix(in oklch,var(--night-text) 26%,transparent)} body.sala-noturna .campo-rota circle.no-visitado{fill:var(--night-accent);stroke:color-mix(in oklch,var(--night-accent) 60%,transparent)} body.sala-noturna .campo-rota circle.no-sel{fill:var(--night-accent);stroke:var(--night-text)} /* HUD e minimapa em registro noturno */ body.sala-noturna .hud{background:color-mix(in oklch,var(--night) 82%,transparent);border-color:color-mix(in oklch,var(--night-text) 16%,transparent)} body.sala-noturna .hud-idx{color:var(--night-accent)} body.sala-noturna .hud-nome{color:var(--night-text)} body.sala-noturna .hud-xy{color:var(--night-faint)} body.sala-noturna .hud-dica{color:var(--night-faint)} /* estadia: o fio da obra corrente, dentro do HUD */ .hud-fio{position:relative;width:64px;height:2px;align-self:center;background:color-mix(in oklch,var(--night-text) 18%,transparent);display:none} body.sala-noturna .hud-fio{display:block} .hud-fio i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--night-accent)} body.sala-noturna .minimapa{background:color-mix(in oklch,var(--night) 84%,transparent);border-color:color-mix(in oklch,var(--night-text) 16%,transparent)} body.sala-noturna .minimapa-cab{color:var(--night-faint)} body.sala-noturna .mm-view{border-color:color-mix(in oklch,var(--night-text) 30%,transparent);background:color-mix(in oklch,var(--night-text) 5%,transparent)} body.sala-noturna .mm-dot::before{background:color-mix(in oklch,var(--night-text) 34%,transparent)} body.sala-noturna .mm-dot.is-visitado::before{background:color-mix(in oklch,var(--night-accent) 62%,#3a2c1c)} body.sala-noturna .mm-dot.is-sel::before{background:var(--night-accent);box-shadow:0 0 0 3px color-mix(in oklch,var(--night-accent) 26%,transparent)} /* a mesa inclina de leve enquanto você caminha (o 3D a serviço) — a perspectiva entra pela própria transform escrita pelo atelier.js */ html.roam .campo-plano{transform-style:flat} body.sala-noturna .mm-view{transition:none} @media (max-width:560px){ body.sala-noturna .da-topnav{background:color-mix(in oklch,var(--night) 94%,transparent);border-color:color-mix(in oklch,var(--night-text) 16%,transparent)} body.sala-noturna .da-topnav .dt-link{border-color:color-mix(in oklch,var(--night-text) 10%,transparent);color:var(--night-muted)} } /* ============================================================ FIO VERTICAL — a ronda no toque/tela estreita: cada obra é uma ESTAÇÃO de viewport inteiro (scroll-snap); a obra se constrói conforme chega ao centro e se desfaz ao partir (o dedo caminha o fio). Sem JS ou com reduced-motion, permanece a lista. ============================================================ */ html.fio-v{scroll-snap-type:y proximity} html.fio-v .campo-plano{display:block;max-width:none;padding:0 0 12vh} html.fio-v .obra{ width:min(92vw,520px);min-height:100svh;margin-inline:auto; display:grid;align-content:center;justify-items:stretch; scroll-snap-align:center;scroll-snap-stop:normal; } html.fio-v .obra::before{ /* o fio desce até cada estação */ content:"";justify-self:center;width:1.5px;height:52px;margin-bottom:16px; background:linear-gradient(to bottom,transparent,color-mix(in oklch,var(--night-accent) 70%,transparent)); opacity:0;transition:opacity .8s var(--ease-out); } html.fio-v body.sala-noturna .obra::before{opacity:1} html.fio-v .obra .o-name,html.fio-v .obra .o-q{transition:opacity .7s var(--ease-out)} html.fio-v .obra.is-dorme .o-name,html.fio-v .obra.is-dorme .o-q{opacity:.35} body.sala-noturna .obra.is-live .obra-frame{border-color:color-mix(in oklch,var(--night-accent) 55%,transparent); box-shadow:0 0 0 1px color-mix(in oklch,var(--night-accent) 24%,transparent),0 26px 70px -34px #000} .fio-v-idx{position:fixed;left:50%;bottom:14px;z-index:150;transform:translateX(-50%); display:none;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:10px; letter-spacing:.22em;color:var(--night-faint);font-variant-numeric:tabular-nums; padding:6px 12px;background:color-mix(in oklch,var(--night) 76%,transparent)} html.fio-v body.sala-noturna .fio-v-idx{display:block} @media (max-width:560px){ html.fio-v .campo-plano{padding-bottom:8vh} html.fio-v .obra{ min-height:auto;padding:168px 0 86px;align-content:start; scroll-snap-align:start;scroll-snap-stop:normal; } html.fio-v .obra::before{height:42px;margin-bottom:12px} html.fio-v .obra-frame::after{padding-top:32px} html.fio-v .o-name{font-size:clamp(19px,6vw,24px)} html.fio-v .o-q{max-width:31ch} } /* ============================================================ ACESSIBILIDADE / FALLBACKS ============================================================ */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .rec-kicker,.rec-titulo,.rec-sub,.rec-lede,.rec-entrar,.rec-dica{opacity:1;animation:none} } /* sem o modo roam (toque/estreito/sem-JS), o quadro mostra a dica fixa */ @media (max-width:760px){ .campo-plano{gap:40px;padding-top:108px} .obra-frame::after{opacity:.6;transform:none} }