/* =========================================
   FULL-PAGE AMBIENT PARTICLES
   Nav-inspired gold lights for Atlas pages.
========================================= */

.archive-directory-page #app,
.history-directory-page #app {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.archive-directory-page #app > :not(.atlas-page-particles),
.history-directory-page #app > :not(.atlas-page-particles) {
    position: relative;
    z-index: 1;
}

.passport-page {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: max(28px, calc((100vw - 1164px) / 2));
    padding-right: max(28px, calc((100vw - 1164px) / 2));
    overflow: hidden;
}

/*
 * The Passport now owns the full-width background/particle canvas while its
 * readable content keeps the same 1164px inner width produced by the original
 * 1220px container with 28px side padding. Disable the older repeating
 * pseudo-element particle sheet so only the irregular generated field remains.
 */
.passport-page::after {
    content: none;
}

.passport-page > :not(.passport-page-particles) {
    position: relative;
    z-index: 1;
}

.atlas-page-particles,
.character-page-particles,
.locations-particles,
.passport-page-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.atlas-page-particles span,
.character-page-particles span,
.locations-particles span,
.passport-page-particles span {
    position: absolute;
    bottom: -48px;
    border-radius: 50%;
    background: #f4d47c;
    opacity: 0;
    box-shadow:
        0 0 10px rgba(244,212,124,.92),
        0 0 24px rgba(244,212,124,.52),
        0 0 38px rgba(244,212,124,.18);
    animation-name: lcdPageParticleFloat;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: bottom, transform, opacity;
}

/*
 * The navbar particles are the visual reference: bright gold dots which grow
 * slightly as they rise. Page particles use the same idea at a much slower
 * pace. Negative animation delays supplied by particles.js place them at
 * different heights immediately instead of waiting for a bottom-up first pass.
 */
@keyframes lcdPageParticleFloat {
    0% {
        bottom: -48px;
        transform: translate3d(0, 0, 0) scale(.58);
        opacity: 0;
    }

    4% {
        opacity: var(--particle-opacity, .52);
    }

    46% {
        transform: translate3d(var(--particle-mid-drift, 10px), 0, 0) scale(.88);
        opacity: var(--particle-opacity, .52);
    }

    93% {
        opacity: var(--particle-opacity, .52);
    }

    98% {
        opacity: calc(var(--particle-opacity, .52) * .72);
    }

    100% {
        bottom: calc(100% + 48px);
        transform: translate3d(var(--particle-drift, -12px), 0, 0) scale(1.16);
        opacity: 0;
    }
}

@media (max-width: 620px) {
    .passport-page {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .atlas-page-particles,
    .character-page-particles,
    .locations-particles,
    .passport-page-particles {
        display: none;
    }
}