/* ==========================================================================
   EINSTELLUNGEN FÜR DIE BEWEGTEN BLÜTEN (ExhBB.html)
   Hier können Sie alle Parameter zum Ausprobieren anpassen:

   GESPEICHERTES PRESET "Standard0":
   --blossom-color-light: #38bdf8;
   --blossom-color-mid: #1d4ed8;
   --blossom-color-dark: #172554;
   --blossom-glow-color: rgba(56, 189, 248, 0.4);
   --blossom-glow-size: 15px;
   --blossom-global-opacity: 1.0;
   --blossom-brightness: 2.5;
   --blur-back: 3px;
   --blur-mid: 1px;
   --blur-front: 0px;

   GESPEICHERTES PRESET "Standard1":
   --blossom-color-light: #38bdf8;
   --blossom-color-mid: #1d4ed8;
   --blossom-color-dark: #172554;
   --blossom-glow-color: rgba(56, 189, 248, 0.4);
   --blossom-glow-size: 15px;
   --blossom-global-opacity: 2.0;
   --blossom-brightness: 4.5;
   --blur-back: 3px;
   --blur-mid: 1px;
   --blur-front: 0px;
   ========================================================================== */

:root {
    /* 1. FARBEN DER BLÜTENKÖRPER & BLÄTTER (Ursprüngliche blaue Variante) */
    --blossom-color-light: #38bdf8;
    /* Hellere Akzente, Ränder & Staubgefäße */
    --blossom-color-mid: #1d4ed8;
    /* Hauptkörper der Blütenblätter */
    --blossom-color-dark: #172554;
    /* Tieferer Kelch & Schattierungen */

    /* 2. LEUCHTEFFEKT / GLOW */
    --blossom-glow-color: rgba(56, 189, 248, 0.4);
    /* Dezent blauer Schein */
    --blossom-glow-size: 15px;
    /* Schein-Radius */

    /* 3. GLOBALE SICHTBARKEIT / HELLIGKEIT */
    --blossom-global-opacity: 2.0;
    /* Standard: 1.0 */
    --blossom-brightness: 4.5;
    /* Standard: 2.5 */

    /* 4. TIEFE & UNSCHÄRFE (Blur-Werte der 3 Ebenen) */
    --blur-back: 3px;
    /* Hintergrund-Ebene */
    --blur-mid: 1px;
    /* Mittlere Ebene */
    --blur-front: 0px;
    /* Vordergrund-Ebene */
}


/* ==========================================================================
   ANIMATION & SZENE (RADIALE BEWEGUNG VOM ZENTRUM NACH AUSSEN)
   ========================================================================== */

/* Container für die Blüten */
.blossom-scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    /* Liegt hinter dem Text (z-index: 10) */
    contain: strict;
    filter: brightness(var(--blossom-brightness));
}

/* Einzelnes Element (Startet im Seitenmittelpunkt und fliegt nach außen) */
.blossom-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    animation: floatRadialOut linear infinite;
    pointer-events: none;
    user-select: none;
}

/* Blüten-Container (3D-Drehung & Taumeln) */
.blossom-inner {
    display: block;
    width: 100%;
    height: 100%;
    animation: tumbleSway ease-in-out infinite alternate;
    transform-origin: center center;
}

.blossom-inner svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 var(--blossom-glow-size) var(--blossom-glow-color));
}

/* Radiale Ausdehnungs-Animation vom Mittelpunkt nach außen */
@keyframes floatRadialOut {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(0.25);
        opacity: 0;
    }

    15% {
        opacity: calc(var(--target-opacity, 0.2) * var(--blossom-global-opacity));
    }

    50% {
        transform: translate(-50%, -50%) translate(var(--mid-x, 0vmin), var(--mid-y, 0vmin)) scale(0.85);
    }

    80% {
        opacity: calc(var(--target-opacity, 0.2) * var(--blossom-global-opacity));
    }

    100% {
        transform: translate(-50%, -50%) translate(var(--dest-x, 60vmin), var(--dest-y, 60vmin)) scale(1.15);
        opacity: 0;
    }
}

/* 3D-Taumel-Bewegung */
@keyframes tumbleSway {
    0% {
        transform: rotate(0deg) rotateX(0deg) rotateY(0deg) scale(0.95);
    }

    50% {
        transform: rotate(var(--rot-mid, 90deg)) rotateX(25deg) rotateY(20deg) scale(1.05);
    }

    100% {
        transform: rotate(var(--rot-end, 180deg)) rotateX(-20deg) rotateY(-15deg) scale(0.98);
    }
}

/* Tiefenebenen */
.depth-back {
    filter: blur(var(--blur-back));
    z-index: 1;
}

.depth-mid {
    filter: blur(var(--blur-mid));
    z-index: 2;
}

.depth-front {
    filter: blur(var(--blur-front));
    z-index: 3;
}