/* Reusable NGIS particle layer. The layer is decorative and never captures input. */
[data-ngis-particles] { position: relative; isolation: isolate; }
[data-ngis-particles]::before { position: absolute; inset: 0; z-index: 1; content: ''; pointer-events: none; opacity: .45; background: radial-gradient(circle at 18% 28%, rgba(213,174,99,.95) 0 2px, transparent 3px), radial-gradient(circle at 72% 22%, rgba(255,255,255,.8) 0 2px, transparent 3px), radial-gradient(circle at 88% 68%, rgba(143,178,210,.8) 0 2px, transparent 3px), radial-gradient(circle at 42% 78%, rgba(213,174,99,.75) 0 2px, transparent 3px); animation: ngis-particle-spark 9s ease-in-out infinite alternate; }
.ngis-particle-layer { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.ngis-particle-layer::before, .ngis-particle-layer::after { position: absolute; inset: 0; content: ''; pointer-events: none; opacity: .32; background-repeat: no-repeat; }
.ngis-particle-layer::before { background-image: radial-gradient(circle at 18% 28%, rgba(213,174,99,.75) 0 1px, transparent 2px), radial-gradient(circle at 72% 22%, rgba(255,255,255,.65) 0 1px, transparent 2px), radial-gradient(circle at 88% 68%, rgba(143,178,210,.6) 0 1px, transparent 2px), radial-gradient(circle at 42% 78%, rgba(213,174,99,.55) 0 1px, transparent 2px); animation: ngis-particle-spark 9s ease-in-out infinite alternate; }
.ngis-particle-layer::after { background-image: radial-gradient(circle at 31% 64%, rgba(255,255,255,.55) 0 1px, transparent 2px), radial-gradient(circle at 61% 42%, rgba(213,174,99,.65) 0 1px, transparent 2px), radial-gradient(circle at 94% 34%, rgba(143,178,210,.6) 0 1px, transparent 2px); animation: ngis-particle-spark 12s ease-in-out -4s infinite alternate-reverse; }
.ngis-particle { position: absolute; display: grid; place-items: center; width: var(--particle-size, 1rem); height: var(--particle-size, 1rem); color: var(--particle-color, #d5ae63); font-size: var(--particle-size, 1rem); opacity: var(--particle-opacity, .24); filter: drop-shadow(0 0 .35rem rgba(213,174,99,.12)); animation: ngis-particle-float var(--particle-duration, 14s) ease-in-out infinite; animation-delay: var(--particle-delay, 0s); will-change: transform, opacity; }
.ngis-particle i { display: block; font-style: normal; }
.ngis-particle-glyph { display: block; font-family: "Segoe UI Symbol", "Segoe UI Emoji", sans-serif; font-size: 1.08em; font-style: normal; line-height: 1; }
.ngis-particle:nth-child(4n) { filter: drop-shadow(0 0 .6rem rgba(213,174,99,.32)); }
.ngis-particle-layer + .container, [data-ngis-particles] > .container { position: relative; z-index: 3; }
[data-ngis-particles] > .ngis-footer-main, [data-ngis-particles] > .ngis-footer-bottom { position: relative; z-index: 3; }
@keyframes ngis-particle-float {
    0%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(.82); }
    15%, 80% { opacity: var(--particle-opacity, .28); }
    50% { opacity: calc(var(--particle-opacity, .28) + .08); transform: translate3d(var(--particle-drift-x, 16px), var(--particle-drift-y, -22px), 0) rotate(var(--particle-rotation, 24deg)) scale(1); }
}
@keyframes ngis-particle-spark { from { opacity: .18; transform: translate3d(0, 5px, 0); } to { opacity: .58; transform: translate3d(0, -8px, 0); } }
@media (max-width: 767.98px) { .ngis-particle { font-size: calc(var(--particle-size, 1rem) * .82); } }
@media (prefers-reduced-motion: reduce) { .ngis-particle, .ngis-particle-layer::before, .ngis-particle-layer::after { opacity: var(--particle-opacity, .2); animation: none; } }
