/* Orbit Animation Variables */
:root {
    /* Radii (radius = size / 2) */
    --orbit-ring-1-size: 350px;
    --orbit-ring-2-size: 500px;
    --orbit-ring-3-size: 650px;

    /* Mockup size reference */
    --mockup-width: 280px;
    --mockup-height: 576px;
}

/* Orbit Container */
.orbit-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--mockup-width);
    height: var(--mockup-height);
    /* No scaling on container itself to preserve mockup quality */
}

.orbit-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    /* Allow clicks to pass through */
    z-index: 0;
    /* Behind mockup */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    /* To center emojis relative to ring */
    justify-content: center;
    align-items: center;
}

/* Ring 1 - Innermost */
.ring-1 {
    width: var(--orbit-ring-1-size);
    height: var(--orbit-ring-1-size);
    border: 2px dashed rgba(43, 52, 103, 0.6);
    /* Reduced opacity */
}

/* Ring 2 - Middle */
.ring-2 {
    width: var(--orbit-ring-2-size);
    height: var(--orbit-ring-2-size);
    border: 2px dashed rgba(43, 52, 103, 0.4);
    /* Reduced opacity */
}

/* Ring 3 - Outermost */
.ring-3 {
    width: var(--orbit-ring-3-size);
    height: var(--orbit-ring-3-size);
    border: 2px dashed rgba(43, 52, 103, 0.2);
    /* Reduced opacity */
}

/* Emoji Styling */
.orbit-emoji {
    position: absolute;
    /* Position them on the ring border */
    top: 50%;
    left: 50%;

    /* Container Sizing */
    width: 4rem;
    height: 4rem;
    margin-left: -2rem;
    /* Center anchor */
    margin-top: -2rem;

    /* Content */
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Visuals */
    background-color: var(--bg-white, #ffffff);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Subtle border */
    z-index: 1;
}

.ring-1,
.ring-2,
.ring-3 {
    animation: none;
    /* Rings don't spin */
}

/* Emojis animate along the path */
/* Ring 1 Orbit (Radius 175px) */
@keyframes orbit-ring-1 {
    from {
        transform: rotate(0deg) translate(175px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translate(175px) rotate(-360deg);
    }
}

.ring-1 .orbit-emoji {
    animation: orbit-ring-1 50s linear infinite;
    /* 50s */
}

/* Ring 1: Irregular gaps (8, 10, 10, 14, 8) + Offset -5s */
.ring-1 .orbit-emoji:nth-child(1) {
    animation-delay: -5s;
}

.ring-1 .orbit-emoji:nth-child(2) {
    animation-delay: -13s;
}

.ring-1 .orbit-emoji:nth-child(3) {
    animation-delay: -23s;
}

.ring-1 .orbit-emoji:nth-child(4) {
    animation-delay: -33s;
}

.ring-1 .orbit-emoji:nth-child(5) {
    animation-delay: -47s;
}

/* Ring 2 Orbit (Radius 250px) */
@keyframes orbit-ring-2 {
    from {
        transform: rotate(0deg) translate(250px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translate(250px) rotate(-360deg);
    }
}

.ring-2 .orbit-emoji {
    animation: orbit-ring-2 50s linear infinite;
    /* Clockwise, 50s */
    opacity: 0.7;
    /* Slightly transparent */
}

/* Ring 2: Regular gaps (10, 10, 10, 10, 10) + Offset 0s (ANCHOR) */
.ring-2 .orbit-emoji:nth-child(1) {
    animation-delay: 0s;
}

.ring-2 .orbit-emoji:nth-child(2) {
    animation-delay: -10s;
}

.ring-2 .orbit-emoji:nth-child(3) {
    animation-delay: -20s;
}

.ring-2 .orbit-emoji:nth-child(4) {
    animation-delay: -30s;
}

.ring-2 .orbit-emoji:nth-child(5) {
    animation-delay: -40s;
}

/* Ring 3 Orbit (Radius 325px) */
@keyframes orbit-ring-3 {
    from {
        transform: rotate(0deg) translate(325px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translate(325px) rotate(-360deg);
    }
}

.ring-3 .orbit-emoji {
    animation: orbit-ring-3 50s linear infinite;
    /* 50s */
    opacity: 0.5;
    /* More transparent */
}

/* Ring 3: Irregular gaps (12, 10, 10, 6, 12) + Offset -3s */
.ring-3 .orbit-emoji:nth-child(1) {
    animation-delay: -3s;
}

.ring-3 .orbit-emoji:nth-child(2) {
    animation-delay: -15s;
}

.ring-3 .orbit-emoji:nth-child(3) {
    animation-delay: -25s;
}

.ring-3 .orbit-emoji:nth-child(4) {
    animation-delay: -35s;
}

.ring-3 .orbit-emoji:nth-child(5) {
    animation-delay: -41s;
}

/* Size Variations */
/* Small: 3.5rem box, 1.75rem font */
.ring-1 .orbit-emoji:nth-child(2),
.ring-2 .orbit-emoji:nth-child(3),
.ring-3 .orbit-emoji:nth-child(5) {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.75rem;
    margin-left: -1.75rem;
    margin-top: -1.75rem;
}

/* Large: 4.5rem box, 2.25rem font */
.ring-1 .orbit-emoji:nth-child(4),
.ring-2 .orbit-emoji:nth-child(1),
.ring-3 .orbit-emoji:nth-child(3) {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 2.25rem;
    margin-left: -2.25rem;
    margin-top: -2.25rem;
}


/* Phone Layout Fix */
.orbit-container .phone-mockup {
    position: relative;
    z-index: 10;
    /* Make sure phone is ABOVE rings */
    margin-bottom: 0 !important;
    width: 280px;
    height: 576px;
    transform: none;
    /* Remove scale */
    /* Stronger Highlight Shadow */
    box-shadow:
        0 40px 80px -15px rgba(0, 0, 0, 0.5),
        /* Deep shadow */
        0 0 50px rgba(43, 52, 103, 0.25),
        /* Primary color glow */
        0 0 0 1px rgba(255, 255, 255, 0.1);
    /* Subtle white border */
    background: #fff;
    /* Ensure solid background */
    border-radius: 40px;
    /* Match phone radius from CSS usually */
}

/* Responsive adjustments */
@media (max-width: 968px) {
    :root {
        --orbit-ring-1-size: 280px;
        /* Radius 140 */
        --orbit-ring-2-size: 400px;
        /* Radius 200 */
        --orbit-ring-3-size: 520px;
        /* Radius 260 */
    }

    /* Update animations for new radii */
    @keyframes orbit-ring-1 {
        from {
            transform: rotate(0deg) translate(140px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translate(140px) rotate(-360deg);
        }
    }

    @keyframes orbit-ring-2 {
        from {
            transform: rotate(0deg) translate(200px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translate(200px) rotate(-360deg);
        }
    }

    @keyframes orbit-ring-3 {
        from {
            transform: rotate(0deg) translate(260px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translate(260px) rotate(-360deg);
        }
    }
}

@media (max-width: 640px) {
    :root {
        --orbit-ring-1-size: 200px;
        /* Radius 100 */
        --orbit-ring-2-size: 300px;
        /* Radius 150 */
        --orbit-ring-3-size: 400px;
        /* Radius 200 */
    }

    .orbit-container {
        /* On mobile, stack is vertical. Width 100% helps center. */
        width: 280px;
        /* Keep strict width */
        height: 576px;
        transform: scale(0.6);
        /* Scale entire assembly down for mobile */
        transform-origin: center top;
        /* Pin to top */
        margin-bottom: -150px;
        /* Compensate for scale gap */
    }

    /* Adjust radii match new CSS vars */
    @keyframes orbit-ring-1 {
        from {
            transform: rotate(0deg) translate(100px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translate(100px) rotate(-360deg);
        }
    }

    @keyframes orbit-ring-2 {
        from {
            transform: rotate(0deg) translate(150px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translate(150px) rotate(-360deg);
        }
    }

    @keyframes orbit-ring-3 {
        from {
            transform: rotate(0deg) translate(200px) rotate(0deg);
        }

        to {
            transform: rotate(360deg) translate(200px) rotate(-360deg);
        }
    }

    .orbit-emoji {
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
        margin-left: -1.5rem;
        margin-top: -1.5rem;
    }

    /* Mobile Size Variations */
    /* Small */
    .ring-1 .orbit-emoji:nth-child(2),
    .ring-1 .orbit-emoji:nth-child(5),
    .ring-2 .orbit-emoji:nth-child(3),
    .ring-3 .orbit-emoji:nth-child(5) {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
        margin-left: -1.25rem;
        margin-top: -1.25rem;
    }

    /* Large */
    .ring-1 .orbit-emoji:nth-child(4),
    .ring-2 .orbit-emoji:nth-child(1),
    .ring-3 .orbit-emoji:nth-child(3) {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.75rem;
        margin-left: -1.75rem;
        margin-top: -1.75rem;
    }
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
    .ring-1 {
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    .ring-2 {
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .ring-3 {
        border-color: rgba(255, 255, 255, 0.05) !important;
    }
}