/* ================================================================
   NAMELESS — Ambient effects (sober, GPU-light)
   Replaces the SAO particles / scanline / hex background on the
   landing. Pure CSS, no images, respects reduced-motion.
   ================================================================ */

.nm-fx {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* Slow steel-blue + gold mist that drifts across the deep background */
.nm-fx-aurora {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(40% 50% at 20% 30%, rgba(91,127,166,0.10), transparent 60%),
        radial-gradient(35% 45% at 80% 25%, rgba(194,163,103,0.06), transparent 60%),
        radial-gradient(45% 55% at 60% 80%, rgba(91,127,166,0.07), transparent 60%);
    filter: blur(30px);
    animation: nm-aurora-drift 44s ease-in-out infinite alternate;
    will-change: transform;
}

/* A single faint gold hairline sweeping very slowly (a "guard's blade") */
.nm-fx-line {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(194,163,103,0.28), transparent);
    opacity: 0.5;
    animation: nm-line-sweep 26s linear infinite;
}

/* Subtle vignette to focus the center */
.nm-fx-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

@keyframes nm-aurora-drift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
    50%  { transform: translate3d(3%, 2%, 0) scale(1.1); }
    100% { transform: translate3d(-2%, 3%, 0) scale(1.05); }
}

@keyframes nm-line-sweep {
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: 0.5; }
    90%  { opacity: 0.5; }
    100% { transform: translateY(100vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .nm-fx-aurora, .nm-fx-line { animation: none; }
    .nm-fx-line { display: none; }
}