/* ==========================================
   MYDUKAAN PREMIUM SIGNUP BACKGROUND
========================================== */

.signup-page {
    position: relative !important;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #071629 !important;
}

/* Background container */
.signup-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;

    background: linear-gradient(
        135deg,
        #061225 0%,
        #0b2850 48%,
        #07182d 100%
    );
}

/* Animated grid */
.signup-grid {
    position: absolute;
    inset: -50%;

    background-image:
        linear-gradient(
            rgba(117, 186, 255, 0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(117, 186, 255, 0.07) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    transform: rotate(-12deg);

    animation: signupGridMove 35s linear infinite;
}

@keyframes signupGridMove {
    from {
        transform: rotate(-12deg) translateY(0);
    }
    to {
        transform: rotate(-12deg) translateY(55px);
    }
}

/* Floating glowing orbs */
.signup-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(65px);
    opacity: 0.55;
    will-change: transform;
}

.signup-orb-1 {
    width: 460px;
    height: 460px;
    top: -170px;
    left: -130px;
    background: #246bdb;
    animation: signupFloat1 15s ease-in-out infinite alternate;
}

.signup-orb-2 {
    width: 400px;
    height: 400px;
    right: -140px;
    bottom: -140px;
    background: #00b6d4;
    animation: signupFloat2 18s ease-in-out infinite alternate;
}

.signup-orb-3 {
    width: 300px;
    height: 300px;
    top: 35%;
    left: 55%;
    background: #5753c9;
    opacity: 0.25;
    animation: signupFloat3 20s ease-in-out infinite alternate;
}

@keyframes signupFloat1 {
    to {
        transform: translate(110px, 100px) scale(1.15);
    }
}

@keyframes signupFloat2 {
    to {
        transform: translate(-100px, -90px) scale(1.2);
    }
}

@keyframes signupFloat3 {
    to {
        transform: translate(-110px, 65px) scale(0.85);
    }
}

/* Mouse-following soft glow */
.signup-mouse-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);

    transform: translate(-50%, -50%);

    background: radial-gradient(
        circle,
        rgba(52, 151, 255, 0.17) 0%,
        transparent 70%
    );

    pointer-events: none;
}

/* Floating particles */
.signup-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.signup-particle {
    position: absolute;
    bottom: -20px;

    width: var(--size);
    height: var(--size);

    border-radius: 50%;

    background: rgba(153, 215, 255, 0.8);

    box-shadow: 0 0 12px rgba(65, 169, 255, 0.5);

    animation: signupParticleRise
        var(--duration) linear infinite;

    animation-delay: var(--delay);
}

@keyframes signupParticleRise {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 0;
    }

    15% {
        opacity: 0.8;
    }

    85% {
        opacity: 0.5;
    }

    100% {
        transform: translate3d(
            var(--drift),
            -110vh,
            0
        );
        opacity: 0;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .signup-page {
        padding: 25px 12px;
    }

    .signup-orb-1,
    .signup-orb-2 {
        width: 260px;
        height: 260px;
    }

    .signup-orb-3 {
        width: 180px;
        height: 180px;
    }

    .signup-page .login_box {
        max-width: 100%;
    }
}

/* Accessibility and performance */
@media (prefers-reduced-motion: reduce) {
    .signup-page *,
    .signup-page *::before,
    .signup-page *::after {
        animation: none !important;
        transition: none !important;
    }
}