/* ============ Ambient background layers ============ */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center calc(var(--grid-shift, 0px));
  opacity: .6;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 20%, transparent 55%, var(--vignette) 100%);
}

/* ============ Scroll progress bar ============ */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 150; pointer-events: none; background: var(--line); }
.scroll-progress-bar { display: block; width: 100%; height: 100%; background: var(--amber); transform: scaleX(0); transform-origin: 0 0; box-shadow: 0 0 10px var(--amber-dim); }

/* ============ Sheet-index rail nav ============ */
.section-rail { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; align-items: center; }
.section-rail::before { content: ''; position: absolute; left: 50%; top: -14px; bottom: -14px; width: 1px; background: var(--line); transform: translateX(-50%); z-index: -1; }
.rail-dot { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; position: relative; }
.rail-dot::after { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg); transition: all .3s ease; }
.rail-dot:hover::after { border-color: var(--amber); }
.rail-dot.active::after { background: var(--amber); border-color: var(--amber); transform: scale(1.4); }
.rail-num {
  position: absolute; right: 32px; top: 50%; transform: translate(6px, -50%);
  font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .04em; color: var(--text-mute);
  white-space: nowrap; opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.rail-dot:hover .rail-num { opacity: 1; transform: translate(0, -50%); }
.rail-dot.active .rail-num { color: var(--amber); }

/* ============ Cinematic section parallax ============ */
main section { transform: translateY(var(--sy, 0)) scale(var(--ss, 1)); opacity: var(--so, 1); }
.hero-visual { will-change: transform; }

/* ============ Hero scroll cue ============ */
.scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: .75; transition: opacity .4s ease; }
.scroll-cue.is-hidden { opacity: 0; }
.scroll-cue-line { position: relative; width: 1px; height: 34px; overflow: hidden; background: var(--line-strong); }
.scroll-cue-line::after { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--amber); animation: cue-drop 1.8s ease-in-out infinite; }
.scroll-cue-text { font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); }
@keyframes cue-drop { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }

/* ============ Animated hero stat counters ============ */
.stat-num { color: var(--amber); font-weight: 700; }

/* ============ Card tilt ============ */
.tilt-el { transform-style: preserve-3d; }

/* ============ Custom cursor reticle ============ */
html.custom-cursor, html.custom-cursor a, html.custom-cursor button, html.custom-cursor .chip, html.custom-cursor .node,
html.custom-cursor .stack-tab, html.custom-cursor .service-card, html.custom-cursor .rail-dot { cursor: none; }
html.custom-cursor input, html.custom-cursor textarea { cursor: text; }

.cursor-dot, .cursor-ring {
  position: fixed; left: 0; top: 0; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .25s ease, scale .3s ease;
}
.cursor-dot.is-visible, .cursor-ring.is-visible { opacity: 1; }
.cursor-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.cursor-ring { width: 34px; height: 34px; scale: 1; }
.cursor-ring.is-active { scale: 1.7; }
.cursor-corner { position: absolute; width: 8px; height: 8px; }
.cursor-corner-tl { top: 0; left: 0; border-top: 1.5px solid var(--amber); border-left: 1.5px solid var(--amber); }
.cursor-corner-tr { top: 0; right: 0; border-top: 1.5px solid var(--amber); border-right: 1.5px solid var(--amber); }
.cursor-corner-bl { bottom: 0; left: 0; border-bottom: 1.5px solid var(--amber); border-left: 1.5px solid var(--amber); }
.cursor-corner-br { bottom: 0; right: 0; border-bottom: 1.5px solid var(--amber); border-right: 1.5px solid var(--amber); }
.cursor-coords {
  position: fixed; left: 0; top: 0; transform: translate(14px, 18px);
  pointer-events: none; z-index: 9999; white-space: nowrap;
  font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .03em;
  color: var(--text-mute); opacity: 0; transition: opacity .25s ease;
}
.cursor-coords.is-active { opacity: .85; }