/* ============================================================
ARMAKUNI CANONICAL AMBIENT LAYER
Background ornaments that sit behind every page:
- dot grid
- continuity lines
- center line
- fog blobs (drifting accent clouds)
- mouse glow
- scroll progress bar
HTML (place right after ):
============================================================ */
.bg-dot-grid {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,0,0,0.5) 0%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,0,0,0.5) 0%, transparent 100%);
}
.bg-continuity-lines { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-continuity-lines::before,
.bg-continuity-lines::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 1px;
background: linear-gradient(180deg, transparent 0%, transparent 14%, rgba(255,255,255,0.06) 22%, rgba(255,255,255,0.06) 90%, transparent 100%);
}
.bg-continuity-lines::before { left: max(24px, calc((100vw - 1100px) / 2)); }
.bg-continuity-lines::after { right: max(24px, calc((100vw - 1100px) / 2)); }
.bg-line-center {
position: fixed; top: 0; bottom: 0; left: 50%; width: 1px; z-index: 0; pointer-events: none;
background: linear-gradient(180deg,
transparent 0%,
var(--accent-a08, color-mix(in srgb, var(--accent) 8%, transparent)) 15%,
rgba(255,255,255,0.05) 50%,
var(--accent-a08, color-mix(in srgb, var(--accent) 8%, transparent)) 85%,
transparent 100%);
}
.fog-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fog-blob { position: absolute; border-radius: 50%; filter: blur(92px); opacity: 0.5; }
.fog-blob-1 { width: 420px; height: 420px; background: var(--accent-a08); top: 10%; left: 8%; animation: fogDrift1 28s ease-in-out infinite; }
.fog-blob-2 { width: 360px; height: 360px; background: color-mix(in srgb, var(--accent-cyan) 6%, transparent); top: 30%; right: 12%; animation: fogDrift2 32s ease-in-out infinite; }
.fog-blob-3 { width: 300px; height: 300px; background: var(--accent-a06); bottom: 20%; left: 40%; animation: fogDrift3 26s ease-in-out infinite; }
@keyframes fogDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(60px,40px) scale(1.1); } 66% { transform: translate(-30px,70px) scale(0.95); } }
@keyframes fogDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-50px,-30px) scale(1.05); } 66% { transform: translate(40px,-60px) scale(0.9); } }
@keyframes fogDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(70px,-50px) scale(1.08); } 66% { transform: translate(-40px,30px) scale(0.92); } }
.mouse-glow {
position: fixed; width: 500px; height: 500px; border-radius: 50%; pointer-events: none; z-index: 1;
background: radial-gradient(circle, var(--accent-a06), transparent 70%);
transform: translate(-50%, -50%);
transition: left 0.3s var(--ease-default), top 0.3s var(--ease-default);
}
.scroll-progress {
position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 10000;
background: linear-gradient(90deg, var(--accent), var(--accent-cyan));
}
@media (prefers-reduced-motion: reduce) {
.fog-blob { animation: none; }
.mouse-glow { display: none; }
}
/* Touch devices have no cursor for the glow to track. Before JS sets the
first position, the element sits at 0,0 with translate(-50%,-50%) —
that paints a 350px-wide circle off-screen-left, briefly extending the
layout box past the viewport. Hide it entirely where hover is unavailable. */
@media (hover: none), (pointer: coarse) {
.mouse-glow { display: none; }
}