/* Lava Lamp Styles */

/* Base styles for lava lamp background effect */
.lava-lamp {
    position: fixed;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s 0.6s;
    pointer-events: none;
    z-index: -1;
}

/* Active state for lava lamp visibility */
.lava-lamp.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, visibility 0s;
}

:root {
    --bubble-color: #666666;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bubble-color: #808080;
    }
}

/* Styling and animation for lava lamp bubbles */
.lava-lamp span {
    width: 48vmin;
    height: 48vmin;
    border-radius: 48vmin;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    -webkit-animation: move 25s ease infinite;
    animation: move 25s ease infinite;
    color: var(--bubble-color);
    -webkit-box-shadow: 96vmin 0 12.524968371988141vmin var(--bubble-color);
    box-shadow: 96vmin 0 12.524968371988141vmin var(--bubble-color);
    transition: color 0.3s ease, box-shadow 0.3s ease;
    will-change: transform, color, box-shadow;
}

/* Animation keyframes for bubble movement */
@-webkit-keyframes move {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(var(--random-x), var(--random-y), 1px) rotate(360deg);
        transform: translate3d(var(--random-x), var(--random-y), 1px) rotate(360deg);
    }
}

@keyframes move {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(var(--random-x), var(--random-y), 1px) rotate(360deg);
        transform: translate3d(var(--random-x), var(--random-y), 1px) rotate(360deg);
    }
}