/* Effekte: Boot, Korn, Cursor, Rail, HUD */
.grain { position: fixed; inset: -50%; z-index: 40; width: 200%; height: 200%; pointer-events: none; opacity: 0.06; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 0.9s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-4%, -3%); } 80% { transform: translate(7%, 5%); } 100% { transform: translate(0, 0); } }

.boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--paper); transition: opacity 0.4s, visibility 0.4s; }
.boot.is-done { opacity: 0; visibility: hidden; }
.boot-in { font-size: 14px; line-height: 2; color: var(--hi); }
.boot-in p { opacity: 0; animation: bootln 0.01s forwards; }
.boot-in p:nth-child(1) { animation-delay: 0.03s; } .boot-in p:nth-child(2) { animation-delay: 0.16s; } .boot-in p:nth-child(3) { animation-delay: 0.3s; } .boot-in p:nth-child(4) { animation-delay: 0.44s; color: var(--ink); font-weight: 600; }
@keyframes bootln { to { opacity: 1; } }

.rail { position: fixed; right: clamp(10px, 2vw, 28px); top: 50%; z-index: 1; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; }
.rail-line { position: relative; width: 2px; height: 34vh; background: var(--line); border-radius: 2px; overflow: hidden; }
.rail-line i { position: absolute; inset: 0 0 auto 0; height: 100%; transform-origin: top; transform: scaleY(0); background: linear-gradient(var(--a1), var(--a2), var(--a3)); }
.rail-dots { position: absolute; right: 14px; top: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; pointer-events: auto; }
.rail-dots li { width: 7px; height: 7px; border-radius: 50%; background: rgba(10, 20, 22, 0.22); transition: background 0.3s, transform 0.3s; }
.rail-dots li.on { background: var(--hi); transform: scale(1.7); }
@media (max-width: 760px) { .rail { display: none; } }

.hud { display: none !important; position: fixed; left: 50%; transform: translateX(-50%); bottom: 8px; z-index: 30; display: flex; gap: 18px; font-size: 10px; letter-spacing: 0.18em; color: var(--muted); opacity: 0.8; }
.hud b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .hud { display: none; } }

.js [data-reveal] { opacity: 0; }
html:not(.js) .boot { display: none; }
.vh { clip-path: inset(50%); }

@media (prefers-reduced-motion: reduce) {
  .grain, .scrollhint i, .grad .c, .caret { animation: none; }
  .boot { display: none; }
  .js [data-reveal] { opacity: 1; }
}