/* =========================================================
   QMEDIA FX
   Rauch: ROT / WEISS
   Partikel: ROT
   Funken: ROT
   keinerlei Interaktion blockieren
   ========================================================= */

.qmedia-fx,
.qmedia-fog-bottom,
.qmedia-particles,
.qmedia-sparks {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* =========================================================
   RAUCH
   ========================================================= */

.qmedia-fog-bottom {
    position: fixed;
    left: -8%;
    bottom: -105px;

    width: 116%;
    height: 390px;

    overflow: visible;
    opacity: .62;

    z-index: 2;
    pointer-events: none;

    background:
        radial-gradient(ellipse 13% 24% at 5% 82%,
            rgba(213,31,69,.38) 0%,
            rgba(213,31,69,.20) 25%,
            rgba(213,31,69,.07) 48%,
            transparent 70%),

        radial-gradient(ellipse 18% 31% at 19% 73%,
            rgba(213,31,69,.30) 0%,
            rgba(150,18,45,.15) 30%,
            rgba(110,10,30,.05) 53%,
            transparent 72%),

        radial-gradient(ellipse 14% 27% at 34% 84%,
            rgba(255,255,255,.16) 0%,
            rgba(255,255,255,.07) 32%,
            transparent 68%),

        radial-gradient(ellipse 20% 35% at 49% 70%,
            rgba(213,31,69,.25) 0%,
            rgba(125,12,39,.13) 32%,
            rgba(255,255,255,.035) 55%,
            transparent 74%),

        radial-gradient(ellipse 15% 25% at 62% 84%,
            rgba(255,255,255,.14) 0%,
            rgba(255,255,255,.055) 31%,
            transparent 69%),

        radial-gradient(ellipse 19% 32% at 77% 72%,
            rgba(213,31,69,.29) 0%,
            rgba(213,31,69,.14) 30%,
            rgba(125,12,39,.05) 53%,
            transparent 73%),

        radial-gradient(ellipse 14% 26% at 94% 82%,
            rgba(213,31,69,.38) 0%,
            rgba(213,31,69,.19) 28%,
            rgba(213,31,69,.06) 50%,
            transparent 70%);

    filter: blur(20px);

    animation:
        qmediaRealSmoke 14s
        ease-in-out infinite alternate;

    will-change: transform, filter;
}

.qmedia-fog-bottom::before {
    content: "";
    position: absolute;

    left: -8%;
    bottom: 20px;

    width: 116%;
    height: 100%;

    background:
        radial-gradient(ellipse 11% 22% at 13% 80%,
            rgba(213,31,69,.23) 0%,
            rgba(213,31,69,.08) 42%,
            transparent 70%),

        radial-gradient(ellipse 15% 29% at 31% 68%,
            rgba(255,255,255,.13) 0%,
            rgba(255,255,255,.045) 43%,
            transparent 72%),

        radial-gradient(ellipse 13% 25% at 52% 78%,
            rgba(213,31,69,.18) 0%,
            rgba(125,12,39,.06) 44%,
            transparent 72%),

        radial-gradient(ellipse 16% 30% at 70% 66%,
            rgba(255,255,255,.13) 0%,
            rgba(255,255,255,.045) 43%,
            transparent 72%),

        radial-gradient(ellipse 11% 23% at 89% 80%,
            rgba(213,31,69,.23) 0%,
            rgba(213,31,69,.08) 42%,
            transparent 70%);

    filter: blur(25px);

    animation:
        qmediaSmokeLayer 18s
        ease-in-out infinite alternate;
}

@keyframes qmediaRealSmoke {
    0% {
        transform: translate3d(-3%,35px,0) scale(1.02,.95);
        filter: blur(21px);
    }

    35% {
        transform: translate3d(1%,-3px,0) scale(1.07,1.08);
        filter: blur(24px);
    }

    70% {
        transform: translate3d(-1%,-18px,0) scale(1.04,1.14);
        filter: blur(21px);
    }

    100% {
        transform: translate3d(3%,-32px,0) scale(1.08,1.18);
        filter: blur(26px);
    }
}

@keyframes qmediaSmokeLayer {
    0% {
        transform: translate3d(4%,25px,0) scale(.98,1);
        opacity: .65;
    }

    50% {
        transform: translate3d(-2%,-18px,0) scale(1.07,1.13);
        opacity: .9;
    }

    100% {
        transform: translate3d(3%,-30px,0) scale(1.04,1.16);
        opacity: .72;
    }
}


/* =========================================================
   PARTIKEL – NUR ROT
   ========================================================= */

.qmedia-particles {
    position: fixed;
    inset: 0;

    overflow: hidden;
    z-index: 3;

    pointer-events: none;
}

.qmedia-particle {
    position: absolute;

    bottom: -10px;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background: #d51f45;

    box-shadow:
        0 0 3px rgba(213,31,69,.90),
        0 0 7px rgba(213,31,69,.35);

    animation:
        qmediaParticleFloat var(--speed)
        ease-in-out var(--delay)
        infinite alternate;

    will-change: transform, opacity;
}

@keyframes qmediaParticleFloat {
    0% {
        transform:
            translate3d(0,0,0)
            scale(.65);

        opacity: .15;
    }

    20% {
        opacity: .60;
    }

    55% {
        transform:
            translate3d(var(--drift),-48vh,0)
            scale(1);

        opacity: .85;
    }

    100% {
        transform:
            translate3d(calc(var(--drift) * -.55),-105vh,0)
            scale(.55);

        opacity: 0;
    }
}


/* =========================================================
   FUNKEN – NUR ROT
   ========================================================= */

.qmedia-sparks {
    position: fixed;
    inset: 0;

    overflow: hidden;
    z-index: 4;

    pointer-events: none;
}

.qmedia-spark {
    position: absolute;

    bottom: -15px;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background: #d51f45;

    box-shadow:
        0 0 4px rgba(213,31,69,.85),
        0 0 8px rgba(213,31,69,.35);

    animation:
        qmediaSparkRise var(--spark-speed)
        linear var(--spark-delay)
        infinite;

    will-change: transform, opacity;
}

@keyframes qmediaSparkRise {
    0% {
        transform:
            translate3d(0,25px,0)
            scale(.55);

        opacity: 0;
    }

    10% {
        opacity: .85;
    }

    55% {
        opacity: .65;
    }

    100% {
        transform:
            translate3d(var(--spark-drift),-110vh,0)
            scale(.20);

        opacity: 0;
    }
}


/* auf Mobile etwas ruhiger */
@media (max-width:800px) {
    .qmedia-fog-bottom {
        opacity: .40;
    }

    .qmedia-particles,
    .qmedia-sparks {
        opacity: .75;
    }
}

/* Accessibility */
@media (prefers-reduced-motion:reduce) {
    .qmedia-fog-bottom,
    .qmedia-fog-bottom::before,
    .qmedia-particle,
    .qmedia-spark {
        animation: none !important;
    }
}