.animated-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    /*z-index: 900;*/ /* sopra sfondi ma non blocca input (pointer-events:none) */
    overflow: hidden;
    mix-blend-mode: screen; /* glow più ricco */
    will-change: opacity, transform;
    transform: translateZ(0);
}

/* fire glow più evidente e distribuito su tutto il viewport */
.animated-bg .fire-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(50% 50% at 50% 60%, rgba(255,60,40,0.28), rgba(255,120,30,0.16) 18%, transparent 45%),
        radial-gradient(28% 18% at 18% 70%, rgba(255,90,30,0.12), transparent 40%),
        radial-gradient(22% 18% at 82% 68%, rgba(255,30,80,0.06), transparent 45%);
    filter: blur(28px) saturate(140%);
    animation: fireShift 14s ease-in-out infinite;
    opacity: 1;
    z-index: 900;
    pointer-events: none;
}

/* particelle: uso della variabile --pcolor per box-shadow / core */
.animated-bg .particle {
    position: absolute;
    border-radius: 50%;
    transform: translate3d(0,0,0);
    filter: blur(0.6px);
    will-change: transform, opacity;
    animation-name: particleRise, sway;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-fill-mode: both;
    z-index: 905; /* leggermente sopra il glow */
    background: radial-gradient(circle at 30% 30%, var(--pcolor) 0%, rgba(0,0,0,0) 55%);
    box-shadow:
        0 0 6px var(--pcolor),
        0 0 18px rgba(255,140,80,0.14),
        0 0 36px rgba(255,110,60,0.10);
    mix-blend-mode: screen;
    min-width: 6px;
    min-height: 6px;
}

/* salita lenta e dissolvenza */
@keyframes particleRise {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    65% {
        opacity: 0.5;
    }
    100% {
        transform: translate3d(0, -220vh, 0);
        opacity: 0;
    }
}

/* oscillazione orizzontale tenue */
@keyframes sway {
    0% { transform: translateX(0); }
    50% { transform: translateX(-12px); }
    100% { transform: translateX(0); }
}

/* movimento lento e morbido del glow generale */
@keyframes fireShift {
    0% { transform: scale(1) translateY(0); filter: blur(28px) saturate(120%); }
    50% { transform: scale(1.02) translateY(-2%); filter: blur(26px) saturate(150%); }
    100% { transform: scale(1) translateY(0); filter: blur(28px) saturate(120%); }
}

/* contenuto app deve avere z-index maggiore per rimanere interattivo ma sotto le particelle visive:
   se preferisci che le particelle NON si sovrappongano al contenuto, abbassa lo z-index dell'animated-bg */
.app-content {
    position: relative;
    z-index: 910;
}

/* preferenze reduce motion */
@media (prefers-reduced-motion: reduce) {
    .animated-bg .particle,
    .animated-bg .fire-glow {
        animation: none !important;
        transition: none !important;
    }
    .animated-bg .particle { opacity: 0.35; }
}

/* mobile: riduci impatto */
@media (max-width: 768px) {
    .animated-bg .fire-glow { filter: blur(24px) saturate(110%); opacity: 0.9; }
    .animated-bg .particle { filter: blur(0.4px); }
}