/* _espiral/v3.css — as direcções S (horizonte) e T (capa) (2026-09-21).
   Folha nova, sem herdar o espiral.css: menos coisas, melhor feitas. Paleta `bop` + o laranja do ponto. */
:root{
  --paper:#0E0F14; --ink:#E2EAE3; --accent:#04BACE; --dot:#E8813C;
  --soft:color-mix(in oklab,var(--ink) 62%,var(--paper));
  --faint:color-mix(in oklab,var(--ink) 34%,var(--paper));
  --rule:color-mix(in oklab,var(--ink) 14%,var(--paper));
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --gut:clamp(20px,5.2vw,84px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 90% at 60% 40%,#14151b 0%,var(--paper) 55%,#0a0b0e 100%) fixed}
a{color:inherit}
.track{position:relative;height:760vh}
.track.still{height:100vh;height:100svh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---- barra de cima: marca + navegação ---- */
.v3-top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);pointer-events:none}
.v3-top > *{pointer-events:auto}
.v3-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-size:1.12rem;letter-spacing:-.005em}
.v3-brand em{font-style:italic}
.v3-brand svg{width:22px;height:22px;color:var(--accent)}
.v3-brand .wm-dot{fill:var(--dot)}
.v3-nav{display:flex;gap:clamp(16px,2.6vw,34px);font-size:.9rem}
.v3-nav a{text-decoration:none;color:var(--soft);transition:color .2s}
.v3-nav a:hover{color:var(--ink)}

/* ---- blocos de texto (um activo de cada vez) ---- */
.v3-block{position:absolute;z-index:10;left:var(--gut);width:min(520px,calc(100vw - 2 * var(--gut)));
  opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.v3-block.on{opacity:1;transform:none;pointer-events:auto}
.v3-k{margin:0 0 18px;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.v3-h{margin:0 0 20px;font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4.2vw,3.6rem);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.v3-h em{font-style:italic}
.v3-p{margin:0 0 22px;max-width:30em;font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.65;color:var(--soft)}
.v3-tags{margin:0;font:12px/1.8 var(--mono);letter-spacing:.04em;color:var(--faint)}
.v3-cue{margin:34px 0 0;font:11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.v3-btns{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0}
.v3-btns a{font:500 .95rem/1 var(--sans);text-decoration:none;border:1px solid color-mix(in oklab,var(--ink) 28%,var(--paper));
  border-radius:999px;padding:13px 20px;transition:border-color .2s,background .2s}
.v3-btns a:first-child{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.v3-btns a:hover{border-color:var(--accent)}

/* ---- tracklist em baixo: onde estou, e saltar ---- */
.v3-tracks{position:fixed;z-index:20;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;
  padding:6px;border-radius:999px;background:color-mix(in oklab,var(--paper) 70%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--rule)}
.v3-tracks button{font:11px/1 var(--mono);letter-spacing:.06em;color:var(--faint);background:none;border:0;cursor:pointer;
  padding:8px 12px;border-radius:999px;white-space:nowrap;transition:color .25s,background .25s}
.v3-tracks button:hover{color:var(--ink)}
.v3-tracks button.on{color:var(--paper);background:var(--accent)}
@media (max-width:760px){ .v3-tracks button{padding:8px 7px;font-size:10px} .v3-tracks .long{display:none} }

/* ---- o disco ---- */
.v3-grooves{fill:none;stroke:rgba(255,255,255,.026);stroke-width:.55}
.v3-gap{fill:none;stroke:rgba(255,255,255,.05);stroke-width:3.2}
.v3-rim{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.1}
.v3-runout{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.v3-spiral{fill:none;stroke:rgba(255,255,255,.045);stroke-width:.5}
.v3-line{font-family:var(--mono);fill:rgba(226,234,227,.22);transition:fill .5s ease}
.v3-line.on{fill:var(--ink)}
.v3-lab-ring{fill:none;stroke:rgba(10,12,16,.16);stroke-width:1}
.v3-lab-mark{color:#0E0F14;overflow:visible}
.v3-lab-mark .wm-dot{fill:var(--dot)}
.v3-lab-brand{font-family:var(--serif);fill:#0E0F14;letter-spacing:-.01em}
.v3-lab-small{font-family:var(--mono);fill:rgba(10,12,16,.7);letter-spacing:.6px}
.v3-lab-cat{font-family:var(--mono);font-weight:500;fill:#0E0F14;letter-spacing:2px}
.v3-lab-legal{font-family:var(--mono);fill:rgba(10,12,16,.5);letter-spacing:.3px}
.v3-hole{fill:#0a0a0c;stroke:rgba(255,255,255,.3);stroke-width:1.2}
.v3-sheen{position:absolute;left:0;top:0;z-index:2;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 24deg,transparent 0 7%,rgba(255,255,255,.07) 12%,transparent 19% 51%,rgba(255,255,255,.05) 61%,transparent 68%);
  -webkit-mask:radial-gradient(circle,transparent 0 30%,#000 34%);mask:radial-gradient(circle,transparent 0 30%,#000 34%)}

/* ---- o braço ---- */
.v3-arm-plinth{fill:#16171b;stroke:rgba(255,255,255,.07);stroke-width:1}
.v3-arm-ring{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1}
.v3-arm-cw{stroke:#2b2d33;stroke-linecap:round}
.v3-arm-cw-hi{stroke:rgba(255,255,255,.14);stroke-linecap:round}
.v3-arm-shadow{stroke:rgba(0,0,0,.42);stroke-linecap:round}
.v3-arm-tube-d{stroke:#878b92;stroke-linecap:round}
.v3-arm-tube{stroke:#eceef1;stroke-linecap:round}
.v3-arm-shell{fill:#1d1e23;stroke:rgba(255,255,255,.22);stroke-width:1;stroke-linejoin:round}
.v3-arm-cart{fill:var(--accent)}
.v3-arm-lift{stroke:#a9adb3;stroke-linecap:round}
.v3-arm-pivot{stroke:rgba(0,0,0,.45);stroke-width:1}
.v3-arm-pivot-in{fill:#2b2d33}

/* ---- versões: um botão pequeno, que abre ao passar ---- */
.vers{position:fixed;z-index:30;right:14px;bottom:14px;display:flex;gap:2px;max-width:34px;overflow:hidden;
  padding:3px;border-radius:999px;background:color-mix(in oklab,var(--paper) 88%,transparent);border:1px solid var(--rule);
  transition:max-width .45s ease}
.vers:hover,.vers:focus-within{max-width:92vw;overflow-x:auto}
.vers a{flex:none;font:10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--faint);padding:7px 10px;border-radius:999px}
.vers a[aria-current]{order:-1;color:var(--paper);background:var(--accent)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:25;opacity:.045;mix-blend-mode:screen}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){ .v3-block{transition:none} }

/* linhas com o nome da secção no acento; no fim da S4 todas acesas */
.v3-line .k{fill:color-mix(in oklab,var(--accent) 40%,transparent)}
.v3-line.on .k{fill:var(--accent)}
.all-on .v3-line{fill:var(--ink)}
.all-on .v3-line .k{fill:var(--accent)}

/* o rótulo como navegação (S5/S6) */
.v3-lab-pill{fill:rgba(10,12,16,.08);stroke:rgba(10,12,16,.35);stroke-width:1;transition:fill .2s}
.v3-lab-linkt{font-family:var(--mono);font-weight:500;fill:#0E0F14;letter-spacing:.5px;pointer-events:none}
.v3-lab-link{cursor:pointer}
.v3-lab-link:hover .v3-lab-pill,.v3-lab-link:focus .v3-lab-pill{fill:#0E0F14}
.v3-lab-link:hover .v3-lab-linkt,.v3-lab-link:focus .v3-lab-linkt{fill:var(--accent)}
@media (max-width:760px){ .vers{bottom:68px} }   /* no telemóvel o botão das versões tapava o fim da tracklist */

/* rótulo com navegação em linha; linhas do sulco em serifa */
.v3-lab-rule{stroke:rgba(10,12,16,.28);stroke-width:1}
.v3-lab-hit{fill:transparent}
.v3-lab-link:hover .v3-lab-linkt,.v3-lab-link:focus .v3-lab-linkt{fill:#fff;text-decoration:underline}
.v3-line.serif{font-family:var(--serif);font-style:italic;letter-spacing:0}
.v3-line.serif.on,.all-on .v3-line.serif{fill:var(--ink)}
.v3-line.acc,.all-on .v3-line.acc{fill:var(--accent)}