/* Independent particles: no shared opacity/scale animation on their parent. */
.ambient-host > .ambient-particles {
    position       : absolute;
    z-index        : 0;
    inset          : 0;
    overflow       : hidden;
    pointer-events : none;
    user-select    : none;
    contain        : layout paint;
}

.hero-screen > .ambient-particles { z-index : 1; }

.ambient-particle {
    position      : absolute;
    display       : block;
    width         : var(--particle-size);
    height        : var(--particle-size);
    opacity       : .2;
    border-radius : 50%;
    background    : #ffe0a1;
    box-shadow    : 0 0 6px 1px rgba(242, 187, 94, .5), 0 0 14px rgba(242, 187, 94, .24);
    animation     : particle-life var(--particle-duration) ease-in-out var(--particle-delay) infinite,
                    particle-drift var(--particle-duration) linear var(--particle-delay) infinite;
    animation-play-state : paused;
}

.ambient-particle--star {
    background : none;
    box-shadow : none;
    /* Stars twinkle in place; only the rare firefly-like dots are allowed to drift. */
    animation : star-life var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}

.ambient-particle--blink { animation-name : particle-glimmer; }
.ambient-particle--star.ambient-particle--blink {
    animation : star-life var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}

.ambient-particle--star::before,
.ambient-particle--star::after {
    position   : absolute;
    content    : "";
    background : linear-gradient(transparent, #ffe6b5 45%, #ffe6b5 55%, transparent);
}

.ambient-particle--star::before {
    inset      : -2px calc(50% - .5px);
    box-shadow : 0 0 7px rgba(247, 206, 132, .5);
}

.ambient-particle--star::after {
    inset      : calc(50% - .5px) 0;
    background : linear-gradient(90deg, transparent, #ffe6b5 45%, #ffe6b5 55%, transparent);
}

@keyframes particle-life {
    0%, 8% { opacity : 0; }
    28%, 46% { opacity : var(--particle-brightness); }
    68% { opacity : .24; }
    90%, 100% { opacity : 0; }
}

@keyframes star-life {
    0%, 12% { opacity : 0; }
    34% { opacity : var(--particle-brightness); }
    53% { opacity : .2; }
    65% { opacity : calc(var(--particle-brightness) * .65); }
    88%, 100% { opacity : 0; }
}

@keyframes particle-glimmer {
    0%, 10% { opacity : 0; }
    30% { opacity : var(--particle-brightness); }
    52% { opacity : .12; }
    66%, 100% { opacity : 0; }
}

/* Reset each path only while its light is fully extinguished. */
@keyframes particle-drift {
    from { transform : translate3d(0, 0, 0); }
    to { transform : translate3d(var(--particle-dx), var(--particle-dy), 0); }
}

.effects-in-view .ambient-particle { animation-play-state : running; }

.effects-paused .ambient-particle { animation-play-state : paused; }

@media (prefers-reduced-motion: reduce) {
    .ambient-particle { animation : none !important; opacity : .2; transform : none; }
}