/**
 * Nomo Motion — شاشات الدخول والتسجيل
 */

@keyframes nomo-auth-orb {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(-18px, 12px) scale(1.06);
    }
    66% {
        transform: translate(14px, -10px) scale(0.96);
    }
}

@keyframes nomo-auth-card-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes nomo-auth-brand-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
}

@keyframes nomo-auth-hero-glow {
    0%, 100% {
        opacity: 0.35;
    }
    50% {
        opacity: 0.55;
    }
}

/* خلفية متحركة */
html.nomo-motion-on .auth-bg::before,
html.nomo-motion-on .auth-bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    pointer-events: none;
    animation: nomo-auth-orb 14s ease-in-out infinite;
}

html.nomo-motion-on .auth-bg::before {
    width: min(42vw, 360px);
    height: min(42vw, 360px);
    top: 8%;
    right: 6%;
    background: rgba(13, 122, 85, 0.28);
}

html.nomo-motion-on .auth-bg::after {
    width: min(38vw, 300px);
    height: min(38vw, 300px);
    bottom: 12%;
    left: 8%;
    background: rgba(15, 118, 110, 0.22);
    animation-delay: -5s;
    animation-duration: 18s;
}

/* بطاقة الدخول */
html.nomo-motion-on .auth-card {
    opacity: 0;
    animation: nomo-auth-card-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}

html.nomo-motion-on .auth-topbar {
    opacity: 0;
    animation: nomo-auth-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

html.nomo-motion-on .auth-brand-mark svg {
    animation: nomo-auth-brand-pulse 3s ease-in-out infinite;
}

html.nomo-motion-on .auth-submit {
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.22s ease;
}

html.nomo-motion-on .auth-submit::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
}

html.nomo-motion-on .auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(13, 122, 85, 0.28);
}

html.nomo-motion-on .auth-submit:hover::after {
    transform: translateX(120%);
}

html.nomo-motion-on .auth-submit:active {
    transform: scale(0.98);
}

html.nomo-motion-on .auth-card input:focus {
    box-shadow: 0 0 0 3px rgba(13, 122, 85, 0.15);
}

/* بطاقة الهيرو */
html.nomo-motion-on .auth-hero::before {
    animation: nomo-auth-orb 16s ease-in-out infinite;
}

html.nomo-motion-on .auth-hero::after {
    animation: nomo-auth-orb 20s ease-in-out infinite reverse;
    animation-delay: -3s;
}

html.nomo-motion-on .auth-hero .hero-point {
    opacity: 0;
    animation: nomo-auth-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

html.nomo-motion-on .auth-hero .hero-point:nth-child(1) { animation-delay: 0.15s; }
html.nomo-motion-on .auth-hero .hero-point:nth-child(2) { animation-delay: 0.25s; }
html.nomo-motion-on .auth-hero .hero-point:nth-child(3) { animation-delay: 0.35s; }

/* تسجيل — خطوات */
html.nomo-motion-on .register-card .step {
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

html.nomo-motion-on .register-card .step.active {
    transform: scale(1.03);
}

html.nomo-motion-on .register-card .step-progress-fill {
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    html.nomo-motion-on .auth-bg::before,
    html.nomo-motion-on .auth-bg::after,
    html.nomo-motion-on .auth-card,
    html.nomo-motion-on .auth-topbar,
    html.nomo-motion-on .auth-brand-mark svg,
    html.nomo-motion-on .auth-hero .hero-point,
    html.nomo-motion-on .auth-hero::before,
    html.nomo-motion-on .auth-hero::after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}