/* ── Cave Entrance (KVS×Augen redesign 2026-05-08) ────────
Spec: wiki/spec/splash_cave_entrance.md
CRT bezel + monospace + bracket microcopy + single accent.
Tokens live in tokens.css. Don't hardcode colors here.
─────────────────────────────────────────────────────── */
.cave-entrance {
position: fixed; inset: 0; z-index: 9999;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-mono);
pointer-events: auto;
overflow: hidden;
}
.cave-entrance.hidden { display: none; }
/* Cave mouth — irregular hole that scales open. Same trick as before:
the box-shadow IS the surrounding rock; transparent center is the hole. */
.cave-entrance::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 200vmax; height: 200vmax;
transform: translate(-50%, -50%) scale(0);
transform-origin: center;
border-radius: 45% 52% 48% 55% / 50% 45% 55% 48%;
background: transparent;
box-shadow: 0 0 0 200vmax var(--color-bg);
transition: transform var(--motion-slow) var(--ease-cinematic);
z-index: 1;
}
/* (Removed) Old elliptical rim glow — replaced by a triangle-hugging
drop-shadow halo on .logo-img--splash so illumination follows the
new 2026-05-11 mark's silhouette instead of an oval mouth ring. */
/* CRT scanlines + grain + vignette layered above content via .cave-crt */
.cave-crt {
position: absolute; inset: 0;
pointer-events: none;
z-index: 3;
}
.cave-crt::before {
/* scanlines */
content: '';
position: absolute; inset: 0;
background-image: repeating-linear-gradient(
to bottom,
rgba(255,255,255, var(--scan-opacity)) 0 1px,
transparent 1px 3px
);
mix-blend-mode: overlay;
}
.cave-crt::after {
/* vignette */
content: '';
position: absolute; inset: 0;
background: radial-gradient(
ellipse at center,
transparent 50%,
rgba(0,0,0, var(--vignette-strength)) 100%
);
}
.cave-grain {
/* film grain — animated translate via JS for natural shimmer */
position: absolute; inset: -10%;
pointer-events: none;
opacity: var(--grain-opacity);
z-index: 4;
background-image: url("data:image/svg+xml;utf8,");
animation: grainShift 1.6s steps(6) infinite;
}
@keyframes grainShift {
0% { transform: translate(0, 0); }
20% { transform: translate(-3%, 2%); }
40% { transform: translate(2%, -2%); }
60% { transform: translate(-2%, -3%); }
80% { transform: translate(3%, 2%); }
100% { transform: translate(0, 0); }
}
/* Sound toggle in top-right corner — KVS-style {bracket} chip */
.cave-sound-toggle {
position: absolute;
top: var(--space-5); right: var(--space-5);
z-index: 6;
background: transparent;
border: 1px solid var(--color-faint);
color: var(--color-muted);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: var(--tracking-mono);
text-transform: uppercase;
padding: var(--space-2) var(--space-3);
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-soft),
color var(--motion-fast) var(--ease-soft);
}
.cave-sound-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }
.cave-sound-toggle.is-on { color: var(--color-accent); border-color: var(--color-accent); }
/* Persistent toggle in app shell header — shares .htab tall-pill base.
Just hugs the right edge and shows accent when sound is ON. */
.app-sound-toggle { margin-left: auto; }
.app-sound-toggle.is-on { color: var(--color-accent); border-color: var(--color-accent); }
/* Bottom-left location/version stamp */
.cave-stamp {
position: absolute;
bottom: var(--space-5); left: var(--space-5);
z-index: 6;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: var(--tracking-mono);
color: var(--color-faint);
text-transform: uppercase;
}
/* Persistent app-shell version stamp — the splash corner stamp carried
into the app on every page. Fixed bottom-left, faint, non-interactive.
Sits below modals/header but above page content; hidden behind the
splash overlay until entry. Desktop only (mobile.css hides it so it
never collides with the mobile bottom tab bar). */
.app-stamp {
position: fixed;
bottom: var(--space-5); left: var(--space-5);
z-index: 40;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: var(--tracking-mono);
color: var(--color-faint);
text-transform: uppercase;
pointer-events: none;
}
/* Logo block centered in mouth */
.cave-logo {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
text-align: center;
}
.cave-entrance:not(.entering) .cave-logo { animation: caveLogoIn 0.6s ease 0.2s backwards; }
/* New mark (2026-05-11): logo is a self-contained SVG on its own dark
ground. CRT scanlines + grain overlays sit on top of .cave-entrance,
so the grit is environmental — the mark itself stays crisp. */
.logo-img { display: block; image-rendering: -webkit-optimize-contrast; }
.logo-img--splash {
width: 200px; height: 200px;
max-width: 36vmin; height: auto;
}
/* Wrapper that hosts either the fallback ![]()
or the inlined