.soap-bubble {
    --soap-bubble-size: 4.8em;
    position: relative;
    isolation: isolate;
}

.soap-bubble::before,
.soap-bubble::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: var(--soap-bubble-size);
    aspect-ratio: 1;
    border-radius: 50% 46% 48% 44%;
    pointer-events: none;
    animation: soap-bubble-morph 8s ease-in-out infinite;
}

.soap-bubble::before {
    border: 1px solid rgba(255, 255, 255, 0.8);
    background:
        radial-gradient(ellipse at 46% 54%, transparent 50%, rgba(100, 210, 255, 0.36) 70%, transparent 100%),
        radial-gradient(ellipse at 28% 22%, rgba(255, 255, 255, 0.72), transparent 18%);
    box-shadow:
        inset 0 0 1.2rem rgba(255, 255, 255, 0.5),
        0 0 1rem rgba(150, 210, 255, 0.16);
    opacity: 0.9;
    transform: translate(-50%, -50%);
    animation:
        soap-bubble-wobble 6s ease-in-out infinite,
        soap-bubble-rim-shimmer 9s ease-in-out infinite,
        soap-bubble-morph 6s ease-in-out infinite;
}

.soap-bubble::after {
    background:
        radial-gradient(ellipse at 0% 100%, rgba(40, 160, 255, 0.52) 8%, rgba(255, 150, 205, 0.68) 24%, transparent 48%),
        radial-gradient(ellipse at 100% 0%, rgba(255, 240, 120, 0.56) 10%, rgba(120, 255, 170, 0.58) 26%, transparent 48%);
    filter: blur(0.8rem) hue-rotate(0deg);
    opacity: 0.85;
    transform: translate(-50%, -50%);
    transform-origin: center;
    animation:
        soap-bubble-iridescence 12s ease-in-out infinite var(--soap-bubble-iridescence-delay, 0s),
        soap-bubble-morph 7s ease-in-out -3s infinite;
}

.soap-bubble > a,
.soap-bubble > .main__detail {
    position: relative;
    z-index: 1;
}

@keyframes soap-bubble-wobble {
    0%,
    100% {
        transform: translate(-50%, -50%) rotate(-3deg) scale(0.98, 1.02);
    }

    25% {
        transform: translate(-50%, -50%) rotate(2deg) scale(1.02, 0.98);
    }

    50% {
        transform: translate(-50%, -50%) rotate(4deg) scale(0.99, 1.03);
    }

    75% {
        transform: translate(-50%, -50%) rotate(-2deg) scale(1.03, 0.99);
    }
}

@keyframes soap-bubble-morph {
    0%,
    100% {
        border-radius: 50% 46% 48% 44% / 46% 50% 44% 48%;
    }

    25% {
        border-radius: 40% 60% 44% 56% / 58% 42% 60% 40%;
    }

    50% {
        border-radius: 60% 40% 56% 44% / 40% 60% 42% 58%;
    }

    75% {
        border-radius: 44% 56% 40% 60% / 60% 44% 56% 40%;
    }
}

@keyframes soap-bubble-iridescence {
    0%,
    100% {
        filter: blur(0.8rem) hue-rotate(0deg);
        opacity: 0.82;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.96);
    }

    35% {
        filter: blur(0.9rem) hue-rotate(55deg);
        opacity: 0.96;
    }

    50% {
        filter: blur(0.75rem) hue-rotate(95deg);
        opacity: 0.9;
        transform: translate(-50%, -50%) rotate(160deg) scale(1.04);
    }

    78% {
        filter: blur(0.95rem) hue-rotate(35deg);
        opacity: 0.98;
    }
}

@keyframes soap-bubble-rim-shimmer {
    0%,
    100% {
        border-color: rgba(255, 255, 255, 0.8);
        box-shadow:
            inset 0 0 1.2rem rgba(255, 255, 255, 0.5),
            0 0 1rem rgba(150, 210, 255, 0.16);
    }

    50% {
        border-color: rgba(220, 245, 255, 0.92);
        box-shadow:
            inset 0 0 1.4rem rgba(255, 255, 255, 0.62),
            0 0 1.2rem rgba(205, 175, 255, 0.24);
    }
}