/* ===================================================
   CONTINUOUS ROTATING ORBITAL BACKGROUND
   Multiple circles always in motion
   =================================================== */

/* Large Outer Rings - Rotating */
.blob-container::before,
.blob-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 2px solid;
    animation: rotateCircle 20s linear infinite;
    z-index: 0;
}

.blob-container::before {
    width: 950px;
    height: 950px;
    border-color: rgba(255, 107, 107, 0.1);
    margin-top: -475px;
    margin-left: -475px;
    animation-duration: 35s;
}

.blob-container::after {
    width: 750px;
    height: 750px;
    border-color: rgba(78, 205, 196, 0.12);
    border-style: dashed;
    border-width: 3px;
    margin-top: -375px;
    margin-left: -375px;
    animation-duration: 45s;
    animation-direction: reverse;
}

@keyframes rotateCircle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Hero Container Rings */
.hero-unique::before,
.hero-unique::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid;
    opacity: 0.08;
    animation: rotateCircle 50s linear infinite;
    z-index: 0;
}

.hero-unique::before {
    width: 1200px;
    height: 1200px;
    border-color: var(--turquoise-500);
    margin-top: -600px;
    margin-left: -600px;
    animation-duration: 55s;
    border-style: dotted;
    border-width: 2px;
}

.hero-unique::after {
    width: 550px;
    height: 550px;
    border-color: var(--salmon-500);
    margin-top: -275px;
    margin-left: -275px;
    animation-duration: 40s;
    animation-direction: reverse;
}

/* Orbiting Dots - Move Along Circles */
.blob {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 25px currentColor;
}

.blob-1 {
    background: var(--coral-500);
    color: var(--coral-500);
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
    animation: orbit1 35s linear infinite;
}

.blob-2 {
    background: var(--lime-500);
    color: var(--lime-500);
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
    animation: orbit2 45s linear infinite reverse;
}

.blob-3 {
    background: var(--tangerine-500);
    color: var(--tangerine-500);
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
    animation: orbit3 40s linear infinite;
}

@keyframes orbit1 {
    from {
        transform: rotate(0deg) translateX(475px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(475px) rotate(-360deg);
    }
}

@keyframes orbit2 {
    from {
        transform: rotate(0deg) translateX(375px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(375px) rotate(-360deg);
    }
}

@keyframes orbit3 {
    from {
        transform: rotate(0deg) translateX(275px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(275px) rotate(-360deg);
    }
}

/* Pulsing Inner Ring */
.card-stack::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 450px;
    height: 450px;
    margin-top: -225px;
    margin-left: -225px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 107, 107, 0.15);
    animation: pulseRing 4s ease-in-out infinite;
    z-index: 0;
}

@keyframes pulseRing {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.25;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.4;
    }
}

/* Additional Decorative Rings */
.card-stack::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 630px;
    height: 630px;
    margin-top: -315px;
    margin-left: -315px;
    border-radius: 50%;
    border: 1px solid rgba(78, 205, 196, 0.1);
    animation: rotateCircle 50s linear infinite reverse;
    z-index: 0;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .blob-container::before {
        width: 750px;
        height: 750px;
        margin-top: -375px;
        margin-left: -375px;
    }

    .blob-container::after {
        width: 600px;
        height: 600px;
        margin-top: -300px;
        margin-left: -300px;
    }

    .hero-unique::before {
        width: 950px;
        height: 950px;
        margin-top: -475px;
        margin-left: -475px;
    }

    .hero-unique::after {
        width: 450px;
        height: 450px;
        margin-top: -225px;
        margin-left: -225px;
    }
}

@media (max-width: 768px) {

    /* Keep rings visible and prominent on mobile! */
    .blob-container::before {
        width: 500px;
        height: 500px;
        margin-top: -250px;
        margin-left: -250px;
        opacity: 0.8;
        border-color: rgba(255, 107, 107, 0.2);
    }

    .blob-container::after {
        width: 400px;
        height: 400px;
        margin-top: -200px;
        margin-left: -200px;
        opacity: 0.8;
        border-color: rgba(78, 205, 196, 0.2);
    }

    .hero-unique::before {
        width: 600px;
        height: 600px;
        margin-top: -300px;
        margin-left: -300px;
        opacity: 0.15;
    }

    .hero-unique::after {
        width: 350px;
        height: 350px;
        margin-top: -175px;
        margin-left: -175px;
        opacity: 0.15;
    }

    /* Keep orbiting dots visible */
    .blob {
        width: 14px;
        height: 14px;
        margin-top: -7px;
        margin-left: -7px;
    }

    /* Keep pulsing rings visible */
    .card-stack::before {
        width: 320px;
        height: 320px;
        margin-top: -160px;
        margin-left: -160px;
        opacity: 0.3;
    }

    .card-stack::after {
        width: 450px;
        height: 450px;
        margin-top: -225px;
        margin-left: -225px;
        opacity: 0.2;
    }
}

@media (max-width: 480px) {

    /* Smaller but still visible on tiny screens */
    .blob-container::before {
        width: 380px;
        height: 380px;
        margin-top: -190px;
        margin-left: -190px;
    }

    .blob-container::after {
        width: 300px;
        height: 300px;
        margin-top: -150px;
        margin-left: -150px;
    }

    .hero-unique::before {
        width: 450px;
        height: 450px;
        margin-top: -225px;
        margin-left: -225px;
    }

    .blob {
        width: 12px;
        height: 12px;
        box-shadow: 0 0 15px currentColor;
    }
}