/* Voidsurfer — shared stylesheet (vanilla, no build step). */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #050B0C; font-family: 'Spectral', serif; color: #D8D3C5; }
::selection { background: #C7973F; color: #050B0B; }
a { color: #D0A653; text-decoration: none; }
a:hover { color: #E8C169; }
input, textarea { font-family: 'IBM Plex Mono', monospace; }
input::placeholder, textarea::placeholder { color: rgba(216,211,197,.3); }
input:focus, textarea:focus { outline: none; }

/* ---- reveal on scroll ---- */
.reveal-sec { opacity: 0; transform: translateY(24px); transition: opacity 1.1s ease, transform 1.1s ease; }
.reveal-sec.is-in { opacity: 1; transform: translateY(0); }

/* ---- top scroll progress ---- */
.vs-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: rgba(199,151,63,.12); z-index: 50; }
.vs-progress-fill { height: 100%; background: #C7973F; transition: width .15s linear; width: 0%; }

/* ---- rail ---- */
.vs-rail { position: fixed; top: 0; left: 0; bottom: 0; width: 250px; display: flex; flex-direction: column; background: #081517; border-right: 1px solid rgba(199,151,63,.2); z-index: 20; overflow: hidden; }
.vs-rail-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 15px; border-bottom: 1px solid rgba(199,151,63,.2); flex-shrink: 0; }
.vs-rail-title { font: 600 13px/1 'IBM Plex Mono', monospace; letter-spacing: .16em; color: #D8D3C5; }
.vs-rail-tag { margin-top: 6px; font: 500 8px/1 'IBM Plex Mono', monospace; letter-spacing: .2em; color: rgba(199,151,63,.55); }
.vs-rail-toggle { display: none; background: none; border: 1px solid rgba(199,151,63,.4); color: #C7973F; font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: .1em; padding: 6px 10px; cursor: pointer; }
.vs-rail-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.vs-rail-label { padding: 16px 18px 7px; font: 600 9px/1 'IBM Plex Mono', monospace; letter-spacing: .24em; color: rgba(199,151,63,.6); }
.vs-lang-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1px; row-gap: 0; border-bottom: 1px solid rgba(199,151,63,.15); }
.vs-coord-list { display: flex; flex-direction: column; }

.vs-rail-row { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; color: inherit; border-left: 2px solid transparent; transition: background .35s ease; }
.vs-rail-row:hover { background: rgba(199,151,63,.05); }
.vs-rail-row.is-active { border-left-color: #C7973F; background: rgba(199,151,63,.08); }
.vs-lang-grid .vs-rail-row { padding: 6px 12px; min-width: 0; }
.vs-coord-list .vs-rail-row { padding: 8px 18px; gap: 11px; }
.vs-rail-row:hover .vs-rail-name { color: #D8D3C5; transform: translateX(3px); }
.vs-rail-name { transition: color .35s ease, transform .35s ease; }
.vs-rail-row:hover .vs-rail-scan { transform: translateX(240%); }
.vs-rail-scan { position: absolute; top: 0; left: 0; width: 38%; height: 100%; background: linear-gradient(90deg, rgba(199,151,63,0), rgba(199,151,63,.14), rgba(199,151,63,0)); transform: translateX(-120%); transition: transform 1.4s ease; pointer-events: none; }

.vs-lang-code { font: 600 10px 'IBM Plex Mono', monospace; color: #C7973F; width: 19px; flex-shrink: 0; }
.vs-rail-row.is-active .vs-lang-code { color: #E8C169; }
.vs-lang-name { font: 400 11.5px 'Spectral', serif; color: rgba(216,211,197,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-rail-row.is-active .vs-lang-name { color: #E4DECF; }

.vs-nav-mark { width: 5px; height: 1px; background: rgba(199,151,63,.5); flex-shrink: 0; }
.vs-rail-row.is-active .vs-nav-mark { background: #E8C169; }
.vs-nav-label { font: 500 10.5px 'IBM Plex Mono', monospace; letter-spacing: .08em; color: rgba(216,211,197,.5); }
.vs-rail-row.is-active .vs-nav-label { color: #E4DECF; }

.vs-depth { padding: 14px 18px 18px; border-top: 1px solid rgba(199,151,63,.15); margin-top: auto; }
.vs-depth-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.vs-depth-tag { font: 600 8.5px/1 'IBM Plex Mono', monospace; letter-spacing: .24em; color: rgba(199,151,63,.5); }
.vs-depth-value { font: 500 17px/1 'IBM Plex Mono', monospace; color: #D8D3C5; font-variant-numeric: tabular-nums; }
.vs-depth-track { height: 1px; background: rgba(199,151,63,.2); position: relative; }
.vs-depth-fill { height: 1px; background: #C7973F; width: 0%; }

/* ==================================================================== */
/* ---- NETWORK STATUS — diagnostic module (slow-reveal) ---- */
/* Reads as another rail label (LANGUAGE / NAVIGATION / DEPTH) while      */
/* closed. Reveals on hover (desktop) or tap (mobile, CSS checkbox — no   */
/* JS). The motion is a deliberate materialisation, NOT a dropdown:       */
/*   1. ~130ms intent delay  — a stray pass-over never triggers it.       */
/*   2. the panel opens its OWN vertical space over ~600ms, using         */
/*      grid-template-rows 0fr→1fr so the easing curve is felt across the  */
/*      whole travel (a max-height overshoot finishes early and snaps).    */
/*   3. VISITORS / TOTAL / TODAY then fade up in sequence, never at once.  */
/*   4. Close is an equally quiet ~460ms retreat.                          */
/* Custom easing cubic-bezier(.62,.03,.2,1): slow start, gentle mid        */
/* acceleration, very soft landing. Data spans are filled later by         */
/* visitor-counter.php via their ids. Reserved groups live in the DOM      */
/* inside .vs-net-reserved[hidden] and can be un-hidden with NO layout     */
/* change. No card, no popup, no shadow — it opens inside the rail.        */
/* ==================================================================== */
.vs-net { border-top: 1px solid rgba(199,151,63,.15); }

/* hidden checkbox → tap toggle on touch devices that have no :hover */
.vs-net-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* the head is styled purely by .vs-rail-label — identical to the others */
.vs-net-head { display: block; margin: 0; cursor: pointer; -webkit-user-select: none; user-select: none; }

/* CLOSED: the panel occupies zero rows; grid animates to the real
   content height, so the reveal decelerates smoothly the whole way. */
.vs-net-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 460ms cubic-bezier(.62,.03,.2,1);
  transition-delay: 0ms;
}
.vs-net-panel > .vs-net-inner { min-height: 0; overflow: hidden; }

/* OPEN: hover (desktop) or checked (tap). 130ms intent delay, then the
   slow 600ms space-opening. */
.vs-net:hover .vs-net-panel,
.vs-net-toggle:checked ~ .vs-net-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows 600ms cubic-bezier(.62,.03,.2,1);
  transition-delay: 130ms;
}

.vs-net-inner { display: flex; flex-direction: column; gap: 16px; padding: 2px 18px 20px; }
.vs-net-group { display: flex; flex-direction: column; gap: 7px; }
.vs-net-glabel { font: 600 8px/1 'IBM Plex Mono', monospace; letter-spacing: .22em; color: rgba(199,151,63,.42); }
.vs-net-row { display: flex; align-items: center; gap: 9px; }
.vs-net-name { flex: 1; min-width: 0; font: 500 10px/1.25 'IBM Plex Mono', monospace; letter-spacing: .06em; color: rgba(216,211,197,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-net-value { flex-shrink: 0; text-align: right; font: 500 11px/1 'IBM Plex Mono', monospace; color: rgba(216,211,197,.82); font-variant-numeric: tabular-nums; }
.vs-net-value:empty::before { content: '\2014'; color: rgba(216,211,197,.22); }
.vs-net-primary .vs-net-value { font-size: 15px; color: #D8D3C5; }

/* CONTENT STAGGER — the live group's lines start withdrawn and settle in
   sequence only after the space has begun to open (never simultaneously). */
.vs-net-primary > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 380ms ease, transform 620ms cubic-bezier(.62,.03,.2,1);
  transition-delay: 0ms;
}
.vs-net:hover .vs-net-primary > *,
.vs-net-toggle:checked ~ .vs-net-panel .vs-net-primary > * { opacity: 1; transform: none; }
/* VISITORS → TOTAL → TODAY, ~120ms apart, riding the tail of the opening */
.vs-net:hover .vs-net-primary > :nth-child(1),
.vs-net-toggle:checked ~ .vs-net-panel .vs-net-primary > :nth-child(1) { transition-delay: 300ms; }
.vs-net:hover .vs-net-primary > :nth-child(2),
.vs-net-toggle:checked ~ .vs-net-panel .vs-net-primary > :nth-child(2) { transition-delay: 420ms; }
.vs-net:hover .vs-net-primary > :nth-child(3),
.vs-net-toggle:checked ~ .vs-net-panel .vs-net-primary > :nth-child(3) { transition-delay: 540ms; }

/* RESERVED — future diagnostic groups, prepared in the DOM but not shown.
   Claude Code unhides a group by removing its [hidden]; no layout changes. */
.vs-net-reserved[hidden] { display: none; }

/* Respect reduced-motion: reveal instantly, no travel. */
@media (prefers-reduced-motion: reduce) {
  .vs-net-panel,
  .vs-net-primary > * { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* ---- main content ---- */
.vs-main { margin-left: 250px; }
.vs-ring-top, .vs-ring-bottom { position: absolute; left: 50%; width: 900px; height: 900px; transform: translateX(-50%); preserve-aspect-ratio: xMidYMid meet; }
.vs-ring-top { top: -160px; opacity: .06; }
.vs-ring-bottom { bottom: -220px; opacity: .05; }

.vs-kicker { font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: .28em; color: rgba(199,151,63,.6); text-transform: uppercase; }
.vs-body-stack { display: flex; flex-direction: column; gap: 22px; }
.vs-body-text { font: 400 18px/1.82 'Spectral', serif; color: rgba(216,211,197,.82); margin: 0; }

.vs-landing { position: relative; background: #0A1C1E; padding: 118px 30px 108px; display: flex; justify-content: center; overflow: hidden; }
.vs-landing-content { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 38px; position: relative; }
.vs-hook { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(25px,3.4vw,34px); line-height: 1.4; color: #E4DECF; margin: 0 0 30px 0; letter-spacing: .005em; }

.vs-cta-row { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin-top: 6px; }
.vs-cta-tag { font: 500 9.5px 'IBM Plex Mono', monospace; letter-spacing: .2em; color: rgba(216,211,197,.4); text-transform: uppercase; }
.vs-cta { position: relative; display: inline-block; background: none; border: none; color: #C7973F; padding: 6px 0; font: 500 15px 'IBM Plex Mono', monospace; letter-spacing: .06em; cursor: pointer; text-decoration: none; }
.vs-cta-txt { transition: color .3s; }
.vs-cta-line { display: block; height: 1px; width: 0%; background: #C7973F; transition: width .35s ease; margin-top: 4px; }
.vs-cta:hover .vs-cta-line { width: 100% !important; }
.vs-cta:hover .vs-cta-txt { color: #F0CE86 !important; }

.vs-footer-row { display: flex; flex-wrap: wrap; border-top: 1px solid rgba(199,151,63,.2); padding-top: 20px; font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: .1em; color: rgba(216,211,197,.4); }
.vs-footer-item { padding-right: 24px; border-right: 1px solid rgba(199,151,63,.2); margin-right: 24px; }
.vs-footer-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }

.vs-void { position: relative; background: #050B0C; padding: 132px 30px 118px; display: flex; justify-content: center; overflow: hidden; }
.vs-void-wash { position: absolute; inset: 0; opacity: .4; background: radial-gradient(circle at 85% 10%, rgba(76,114,103,.1), transparent 40%), radial-gradient(circle at 10% 90%, rgba(122,83,34,.1), transparent 40%); }
.vs-void-content { width: 100%; max-width: 620px; position: relative; }
.vs-void-rule { position: absolute; left: -1px; top: 8px; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(199,151,63,.4), rgba(199,151,63,0) 90%); }
.vs-void-inner { padding-left: 38px; }
.vs-void-title { font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(28px,5vw,42px); color: #D8C9A3; margin-bottom: 14px; letter-spacing: .02em; }
.vs-note-box { border-left: 2px solid rgba(199,151,63,.4); background: rgba(199,151,63,.04); padding: 14px 16px; margin-bottom: 38px; }
.vs-note-box p { font: 400 13px/1.65 'Spectral', serif; color: rgba(216,211,197,.62); margin: 0; }

.vs-notes { position: relative; background: #0A1C1E; padding: 126px 30px 126px; display: flex; justify-content: center; border-top: 1px solid rgba(199,151,63,.15); overflow: hidden; }
.vs-notes-content { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 36px; position: relative; }
.vs-notes-title { font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(22px,3.6vw,30px); color: #D8C9A3; }
.vs-form { display: flex; flex-direction: column; gap: 18px; }
.vs-field-group { display: flex; flex-direction: column; gap: 8px; }
.vs-field-label { font: 500 9.5px 'IBM Plex Mono', monospace; letter-spacing: .16em; color: rgba(216,211,197,.5); text-transform: uppercase; }
.vs-input, .vs-textarea { background: rgba(0,0,0,.3); border: none; border-left: 2px solid rgba(199,151,63,.4); padding: 12px; color: #D8D3C5; font-size: 14px; }
.vs-textarea { resize: vertical; }
.vs-input:focus, .vs-textarea:focus { border-left-color: #E8C169; background: rgba(0,0,0,.4); }
.vs-notes-list { display: flex; flex-direction: column; border-top: 1px solid rgba(199,151,63,.2); }
.vs-note-item { padding: 20px 0; border-bottom: 1px solid rgba(199,151,63,.13); }
.vs-note-meta { font: 500 9.5px 'IBM Plex Mono', monospace; letter-spacing: .1em; color: rgba(216,211,197,.4); text-transform: uppercase; margin-bottom: 8px; }
.vs-note-text { font: italic 500 16px/1.6 'Cormorant Garamond', serif; color: rgba(216,211,197,.85); }

.vs-site-footer { position: relative; background: #050B0C; padding: 32px 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 500 9.5px 'IBM Plex Mono', monospace; letter-spacing: .2em; color: rgba(216,211,197,.3); text-transform: uppercase; }

@media (max-width: 880px) {
  .vs-rail { position: relative; width: 100%; bottom: auto; }
  .vs-rail-toggle { display: block; }
  .vs-rail-body { display: none; }
  .vs-rail-body.is-open { display: flex; }
  .vs-main { margin-left: 0; }
}

/* ==================================================================== */
/* ---- SPLASH (index.html only) ---- */
/* ==================================================================== */
.vs-splash { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9999; background: #050B0C; overflow: hidden; transition: opacity .65s ease; cursor: default; }
.vs-splash-ready { cursor: pointer; }
.vs-splash-hidden { opacity: 0; pointer-events: none; }
.vs-splash-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; opacity: 0; filter: brightness(.12) contrast(1.25) blur(20px); transform: scale(1.05); transition: opacity 5.4s cubic-bezier(.16,.4,.2,1) .2s, filter 5.6s cubic-bezier(.16,.4,.2,1) .2s, transform 6s cubic-bezier(.16,.4,.2,1) .2s; }
.vs-splash-img-in { opacity: 1; filter: brightness(1) contrast(1) blur(0); transform: scale(1); }
.vs-splash-img2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; opacity: 0; transition: opacity 5s cubic-bezier(.4,0,.2,1); }
.vs-splash-img2-in { opacity: 1; }

.vs-layer { position: absolute; inset: 0; }
.vs-phrase { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 720px; padding: 0 32px; box-sizing: border-box; text-align: center; opacity: 0; filter: blur(7px); transition: opacity 1.25s ease, filter 1.25s ease; pointer-events: none; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(23px,3.3vw,36px); line-height: 1.42; color: #E4DECF; letter-spacing: .005em; }
.vs-phrase-in { opacity: 1; filter: blur(0); }

.vs-inst { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(84vw,1060px); display: flex; flex-direction: column; gap: 18px; opacity: 0; transition: opacity 1.3s ease; }
.vs-inst-in { opacity: 1; }
.vs-inst-out { opacity: 0; transform: translate(-50%,-46%); transition: opacity 1.7s ease, transform 1.7s ease; }
.vs-inst-header { display: flex; align-items: center; width: 100%; gap: 14px; padding: 0 2px; }
.vs-inst-label { font: 600 9px/1 'IBM Plex Mono', monospace; letter-spacing: .24em; color: rgba(199,151,63,.7); text-transform: uppercase; }
.vs-inst-status { font: 500 8.5px/1 'IBM Plex Mono', monospace; letter-spacing: .2em; color: rgba(199,151,63,.45); text-transform: uppercase; }
.vs-inst-range { margin-left: auto; font: 500 8.5px/1 'IBM Plex Mono', monospace; letter-spacing: .16em; color: rgba(199,151,63,.4); }
.vs-inst-figure { position: relative; width: 100%; aspect-ratio: 1000 / 300; }
.vs-inst-figure svg, .vs-inst-figure canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vs-line { stroke: #C7973F; stroke-width: 1.1; stroke-dasharray: 440; stroke-dashoffset: 440; }
.vs-inst.is-building .vs-line { animation: vs-draw 2.6s cubic-bezier(.22,.61,.36,1) forwards; }
.vs-field { opacity: 0; }
.vs-inst.is-building .vs-field { animation: vs-fieldin 3.2s ease .3s forwards; }
.vs-marker-g { opacity: 0; }
.vs-inst.is-building .vs-marker-g { animation: vs-fadeg 1.1s ease 1s forwards; }
@keyframes vs-draw { to { stroke-dashoffset: 0; } }
@keyframes vs-fieldin { to { opacity: 1; } }
@keyframes vs-fadeg { to { opacity: 1; } }

.vs-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; opacity: 0; filter: blur(9px); transition: opacity 3.4s cubic-bezier(.22,1,.36,1), filter 3.4s cubic-bezier(.22,1,.36,1); pointer-events: none; padding: 0 24px; }
.vs-word-in { opacity: 1; filter: blur(0); }
.vs-word-out { opacity: 0; filter: blur(0); transition: opacity 1.9s ease, filter 1.9s ease; }
.vs-word-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 20px; }
.vs-word-rule span { width: 56px; height: 1px; background: rgba(199,151,63,.4); }
.vs-word-dot { width: 4px !important; height: 4px !important; border-radius: 50%; background: rgba(199,151,63,.6); }
.vs-word-title { font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(30px,5.4vw,58px); letter-spacing: .1em; color: #E8C169; }
.vs-word-sub { margin-top: 15px; font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: clamp(10px,1.3vw,13px); letter-spacing: .24em; color: rgba(216,211,197,.6); text-transform: uppercase; }

.vs-enter { position: absolute; left: 0; right: 0; bottom: 46px; display: flex; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.vs-enter-in { opacity: 1; }
.vs-enter-mark { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #F0CE86; box-shadow: 0 0 0 1px rgba(240,206,134,.3), 0 0 10px 2px rgba(240,206,134,.35); animation: vs-enter-breathe 3.6s ease-in-out infinite; }
.vs-enter-mark::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 1px solid rgba(240,206,134,.35); animation: vs-enter-ring 3.6s ease-in-out infinite; }
@keyframes vs-enter-breathe { 0%,100% { opacity: .6; box-shadow: 0 0 0 1px rgba(240,206,134,.3), 0 0 10px 2px rgba(240,206,134,.35); } 50% { opacity: 1; box-shadow: 0 0 0 1px rgba(240,206,134,.45), 0 0 18px 5px rgba(240,206,134,.6); } }
@keyframes vs-enter-ring { 0%,100% { transform: scale(.85); opacity: .35; } 50% { transform: scale(1.08); opacity: .65; } }

.vs-skip { position: absolute; right: 22px; bottom: 20px; background: none; border: none; color: rgba(216,211,197,.4); font: 500 9.5px 'IBM Plex Mono', monospace; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; padding: 8px; opacity: 0; animation: vs-fade-in 1s ease 3.5s forwards; transition: color .3s; z-index: 5; }
.vs-skip:hover { color: #C7973F; }
@keyframes vs-fade-in { to { opacity: 1; } }

@media (max-width: 640px) {
  .vs-inst { width: 92vw; }
  .vs-inst-figure { aspect-ratio: 1000 / 360; }
  .vs-splash-img { transition: opacity 4.6s cubic-bezier(.16,.4,.2,1), filter 4.6s cubic-bezier(.16,.4,.2,1), transform 5s cubic-bezier(.16,.4,.2,1); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-sec { opacity: 1 !important; transform: none !important; transition: none !important; }
  .vs-splash { transition-duration: .25s !important; }
  .vs-splash-img, .vs-splash-img2 { transition: opacity .3s ease !important; filter: none !important; transform: none !important; }
  .vs-phrase, .vs-inst, .vs-word { transition-duration: .25s !important; filter: none !important; }
  .vs-enter-mark, .vs-enter-mark::before { animation: none !important; opacity: .85 !important; }
  .vs-inst.is-building .vs-line, .vs-inst.is-building .vs-field, .vs-inst.is-building .vs-marker-g { animation: none !important; }
  .vs-line { stroke-dashoffset: 0 !important; }
  .vs-field { opacity: 1 !important; }
  .vs-marker-g { opacity: 1 !important; }
  .vs-skip { animation: none !important; opacity: 1 !important; }
}