/* Authentication Page Animations */

/* Animated gradient background */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Floating geometric shapes */
@keyframes floatUp {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.1;
    }
    90% {
        opacity: 0.1;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes floatSide {
    0% {
        transform: translateX(-100px) translateY(50vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.05;
    }
    90% {
        opacity: 0.05;
    }
    100% {
        transform: translateX(100vw) translateY(30vh) rotate(180deg);
        opacity: 0;
    }
}

/* Subtle pulse animation for accent elements */
@keyframes pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

/* Main animated background container */
.auth-animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(-45deg, #0a0e27, #1a1f3a, #2a2f4a, #1a1f3a);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* Geometric floating elements */
.auth-animated-bg::before,
.auth-animated-bg::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(34, 197, 94, 0.3);
    border-radius: 50%;
}

.auth-animated-bg::before {
    animation: floatUp 20s linear infinite;
    animation-delay: -10s;
    left: 20%;
}

.auth-animated-bg::after {
    animation: floatUp 25s linear infinite;
    animation-delay: -15s;
    left: 80%;
}

/* Additional floating particles */
.floating-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.floating-particle:nth-child(1) {
    animation: floatUp 18s linear infinite;
    animation-delay: -5s;
    left: 10%;
}

.floating-particle:nth-child(2) {
    animation: floatSide 22s linear infinite;
    animation-delay: -8s;
    top: 20%;
}

.floating-particle:nth-child(3) {
    animation: floatUp 16s linear infinite;
    animation-delay: -12s;
    left: 60%;
}

.floating-particle:nth-child(4) {
    animation: floatSide 20s linear infinite;
    animation-delay: -3s;
    top: 70%;
}

.floating-particle:nth-child(5) {
    animation: floatUp 24s linear infinite;
    animation-delay: -18s;
    left: 90%;
}

/* Subtle accent glow elements */
.accent-glow {
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 8s ease-in-out infinite;
    pointer-events: none;
}

.accent-glow:nth-child(1) {
    top: 20%;
    left: 15%;
    animation-delay: -2s;
}

.accent-glow:nth-child(2) {
    top: 60%;
    right: 20%;
    animation-delay: -5s;
}

.accent-glow:nth-child(3) {
    bottom: 30%;
    left: 70%;
    animation-delay: -7s;
}

/* Hardware acceleration optimizations */
.auth-animated-bg,
.floating-particle,
.accent-glow {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .auth-animated-bg {
        animation: none;
        background: #0a0e27; /* Fallback to static dark background */
    }

    .auth-animated-bg::before,
    .auth-animated-bg::after,
    .floating-particle,
    .accent-glow {
        animation: none;
        opacity: 0; /* Hide animated elements */
    }
}

/* ===== Enhanced Responsive Animation System ===== */

/* Performance optimizations for mobile devices */
@media (max-width: 767.98px) {
    .auth-animated-bg {
        animation-duration: 25s; /* Slower animation on mobile for better performance */
        background-size: 300% 300%; /* Smaller background size for mobile */
    }

    /* Reduce particle count and complexity on mobile */
    .floating-particle:nth-child(n+4),
    .accent-glow:nth-child(n+3) {
        display: none;
    }

    /* Simpler animations for remaining particles */
    .floating-particle {
        width: 2px;
        height: 2px;
        animation-duration: 20s;
    }

    .accent-glow {
        width: 60px;
        height: 60px;
        animation-duration: 10s;
    }
}

/* Small mobile devices - minimal animations */
@media (max-width: 479.98px) {
    .auth-animated-bg {
        animation-duration: 30s;
        background-size: 250% 250%;
    }

    /* Further reduce particles on very small screens */
    .floating-particle:nth-child(n+3),
    .accent-glow:nth-child(n+2) {
        display: none;
    }

    .floating-particle {
        width: 1px;
        height: 1px;
    }

    .accent-glow {
        width: 40px;
        height: 40px;
        opacity: 0.3;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
    .auth-animated-bg {
        animation-duration: 18s;
        background-size: 350% 350%;
    }

    .floating-particle {
        width: 3px;
        height: 3px;
    }

    .accent-glow {
        width: 80px;
        height: 80px;
    }

    /* Show more particles on tablets */
    .floating-particle:nth-child(4) {
        display: block;
    }
}

/* Desktop optimizations */
@media (min-width: 1025px) {
    .auth-animated-bg {
        animation-duration: 15s;
        background-size: 400% 400%;
    }

    .floating-particle {
        width: 4px;
        height: 4px;
    }

    .accent-glow {
        width: 100px;
        height: 100px;
    }

    /* Full particle count on desktop */
    .floating-particle:nth-child(n),
    .accent-glow:nth-child(n) {
        display: block;
    }
}

/* Large desktop enhancements */
@media (min-width: 1400px) {
    .auth-animated-bg {
        animation-duration: 12s;
        background-size: 450% 450%;
    }

    .floating-particle {
        width: 5px;
        height: 5px;
    }

    .accent-glow {
        width: 120px;
        height: 120px;
    }
}

/* ===== Orientation-Based Animation Adjustments ===== */

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-width: 1024px) {
    .auth-animated-bg {
        animation-duration: 22s;
    }

    /* Adjust particle positions for landscape */
    .floating-particle:nth-child(2) {
        animation: floatSide 20s linear infinite;
        animation-delay: -6s;
        top: 30%;
    }

    .floating-particle:nth-child(4) {
        animation: floatSide 18s linear infinite;
        animation-delay: -2s;
        top: 60%;
    }

    .accent-glow:nth-child(1) {
        top: 15%;
        left: 10%;
    }

    .accent-glow:nth-child(2) {
        top: 50%;
        right: 15%;
    }
}

/* Portrait orientation on tablets */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
    .accent-glow:nth-child(3) {
        bottom: 20%;
        left: 60%;
    }
}

/* ===== Viewport Height Responsive Animations ===== */

/* Short viewport height adjustments */
@media (max-height: 600px) {
    .auth-animated-bg {
        animation-duration: 20s;
    }

    /* Reduce vertical movement for short screens */
    @keyframes floatUpShort {
        0% {
            transform: translateY(60vh) rotate(0deg);
            opacity: 0;
        }
        10% {
            opacity: 0.1;
        }
        90% {
            opacity: 0.1;
        }
        100% {
            transform: translateY(-50px) rotate(360deg);
            opacity: 0;
        }
    }

    .floating-particle:nth-child(1),
    .floating-particle:nth-child(3),
    .floating-particle:nth-child(5) {
        animation-name: floatUpShort;
    }

    /* Adjust glow positions for short screens */
    .accent-glow:nth-child(1) {
        top: 10%;
    }

    .accent-glow:nth-child(2) {
        top: 40%;
    }

    .accent-glow:nth-child(3) {
        bottom: 10%;
    }
}

/* Very short viewport height */
@media (max-height: 480px) {
    .auth-animated-bg {
        animation-duration: 25s;
        background-size: 300% 300%;
    }

    /* Minimal particles for very short screens */
    .floating-particle:nth-child(n+3) {
        display: none;
    }

    .accent-glow:nth-child(n+2) {
        display: none;
    }

    .accent-glow:nth-child(1) {
        top: 20%;
        left: 20%;
        width: 50px;
        height: 50px;
    }
}

/* ===== Touch Device Animation Optimizations ===== */

@media (pointer: coarse) {
    /* Reduce animation complexity on touch devices */
    .auth-animated-bg {
        animation-duration: 20s;
    }

    .floating-particle {
        animation-duration: 18s;
    }

    .accent-glow {
        animation-duration: 12s;
    }
}

/* ===== High Refresh Rate Display Optimizations ===== */

@media (min-resolution: 120dpi) and (min-width: 1200px) {
    .auth-animated-bg {
        animation-duration: 10s; /* Faster animations on high-refresh displays */
    }

    .floating-particle {
        animation-duration: 12s;
    }

    .accent-glow {
        animation-duration: 6s;
    }
}

/* ===== Battery and Performance Considerations ===== */

/* Reduce animations on devices with limited battery */
@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
    .auth-animated-bg {
        animation-play-state: running;
    }
}

/* Pause animations when page is not visible (performance) */
@media (prefers-reduced-motion: no-preference) {
    .auth-animated-bg,
    .floating-particle,
    .accent-glow {
        animation-play-state: running;
    }
}

/* ===== Network-Aware Animations (Future Enhancement) ===== */

/* Simplified animations for slow connections */
@media (prefers-reduced-data: reduce) {
    .auth-animated-bg {
        animation: none;
        background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
    }

    .floating-particle,
    .accent-glow {
        display: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .auth-animated-bg {
        background: #000000;
        animation: none;
    }

    .floating-particle,
    .accent-glow {
        display: none;
    }
}

/* Reduced transparency mode */
@media (prefers-reduced-transparency: reduce) {
    .floating-particle,
    .accent-glow {
        opacity: 0.8;
        background: solid rgba(34, 197, 94, 0.8);
    }
}
/* ===== Viewport Change Handling ===== */

/* Smooth transitions when viewport changes */
.auth-animated-bg,
.floating-particle,
.accent-glow {
    transition:
        width 0.3s ease-out,
        height 0.3s ease-out,
        opacity 0.3s ease-out,
        transform 0.3s ease-out;
}

/* Responsive particle positioning system */
.floating-particle-responsive {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Mobile particle system */
@media (max-width: 767.98px) {
    .floating-particle-responsive:nth-child(1) {
        width: 2px;
        height: 2px;
        background: rgba(34, 197, 94, 0.2);
        left: 15%;
        animation: floatUp 25s linear infinite;
        animation-delay: -5s;
    }

    .floating-particle-responsive:nth-child(2) {
        width: 1px;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
        left: 75%;
        animation: floatUp 30s linear infinite;
        animation-delay: -15s;
    }

    .floating-particle-responsive:nth-child(3) {
        width: 3px;
        height: 3px;
        background: rgba(34, 197, 94, 0.15);
        left: 45%;
        animation: floatUp 22s linear infinite;
        animation-delay: -10s;
    }
}

/* Tablet particle system */
@media (min-width: 768px) and (max-width: 1024px) {
    .floating-particle-responsive:nth-child(1) {
        width: 3px;
        height: 3px;
        background: rgba(34, 197, 94, 0.25);
        left: 10%;
        animation: floatUp 20s linear infinite;
        animation-delay: -3s;
    }

    .floating-particle-responsive:nth-child(2) {
        width: 2px;
        height: 2px;
        background: rgba(255, 255, 255, 0.12);
        left: 80%;
        animation: floatUp 24s linear infinite;
        animation-delay: -12s;
    }

    .floating-particle-responsive:nth-child(3) {
        width: 4px;
        height: 4px;
        background: rgba(34, 197, 94, 0.2);
        left: 50%;
        animation: floatUp 18s linear infinite;
        animation-delay: -8s;
    }

    .floating-particle-responsive:nth-child(4) {
        width: 2px;
        height: 2px;
        background: rgba(255, 255, 255, 0.08);
        left: 30%;
        animation: floatSide 22s linear infinite;
        animation-delay: -5s;
        top: 60%;
    }
}

/* Desktop particle system */
@media (min-width: 1025px) {
    .floating-particle-responsive:nth-child(1) {
        width: 4px;
        height: 4px;
        background: rgba(34, 197, 94, 0.3);
        left: 10%;
        animation: floatUp 18s linear infinite;
        animation-delay: -5s;
    }

    .floating-particle-responsive:nth-child(2) {
        width: 3px;
        height: 3px;
        background: rgba(255, 255, 255, 0.15);
        left: 85%;
        animation: floatUp 22s linear infinite;
        animation-delay: -12s;
    }

    .floating-particle-responsive:nth-child(3) {
        width: 5px;
        height: 5px;
        background: rgba(34, 197, 94, 0.25);
        left: 60%;
        animation: floatUp 16s linear infinite;
        animation-delay: -8s;
    }

    .floating-particle-responsive:nth-child(4) {
        width: 3px;
        height: 3px;
        background: rgba(255, 255, 255, 0.1);
        left: 25%;
        animation: floatSide 20s linear infinite;
        animation-delay: -3s;
        top: 70%;
    }

    .floating-particle-responsive:nth-child(5) {
        width: 4px;
        height: 4px;
        background: rgba(34, 197, 94, 0.2);
        left: 90%;
        animation: floatUp 24s linear infinite;
        animation-delay: -18s;
    }
}

/* ===== Responsive Glow System ===== */

.accent-glow-responsive {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%);
}

/* Mobile glow system */
@media (max-width: 767.98px) {
    .accent-glow-responsive:nth-child(1) {
        width: 50px;
        height: 50px;
        top: 25%;
        left: 20%;
        animation: pulse 12s ease-in-out infinite;
        animation-delay: -2s;
    }

    .accent-glow-responsive:nth-child(2) {
        width: 40px;
        height: 40px;
        top: 65%;
        right: 25%;
        animation: pulse 10s ease-in-out infinite;
        animation-delay: -6s;
    }
}

/* Tablet glow system */
@media (min-width: 768px) and (max-width: 1024px) {
    .accent-glow-responsive:nth-child(1) {
        width: 80px;
        height: 80px;
        top: 20%;
        left: 15%;
        animation: pulse 10s ease-in-out infinite;
        animation-delay: -2s;
    }

    .accent-glow-responsive:nth-child(2) {
        width: 70px;
        height: 70px;
        top: 60%;
        right: 20%;
        animation: pulse 8s ease-in-out infinite;
        animation-delay: -5s;
    }

    .accent-glow-responsive:nth-child(3) {
        width: 60px;
        height: 60px;
        bottom: 25%;
        left: 65%;
        animation: pulse 12s ease-in-out infinite;
        animation-delay: -8s;
    }
}

/* Desktop glow system */
@media (min-width: 1025px) {
    .accent-glow-responsive:nth-child(1) {
        width: 100px;
        height: 100px;
        top: 20%;
        left: 15%;
        animation: pulse 8s ease-in-out infinite;
        animation-delay: -2s;
    }

    .accent-glow-responsive:nth-child(2) {
        width: 90px;
        height: 90px;
        top: 60%;
        right: 20%;
        animation: pulse 6s ease-in-out infinite;
        animation-delay: -5s;
    }

    .accent-glow-responsive:nth-child(3) {
        width: 80px;
        height: 80px;
        bottom: 30%;
        left: 70%;
        animation: pulse 10s ease-in-out infinite;
        animation-delay: -7s;
    }
}

/* ===== Dynamic Animation Scaling ===== */

/* Scale animations based on device capabilities */
@media (min-width: 1200px) and (min-resolution: 120dpi) {
    .auth-animated-bg {
        animation-duration: 8s;
        background-size: 500% 500%;
    }

    .floating-particle-responsive {
        animation-duration: 10s;
    }

    .accent-glow-responsive {
        animation-duration: 4s;
    }
}

/* Reduce animation complexity on older devices */
@media (max-width: 480px) and (max-device-pixel-ratio: 1) {
    .auth-animated-bg {
        animation: none;
        background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
    }

    .floating-particle-responsive,
    .accent-glow-responsive {
        display: none;
    }
}

/* ===== Viewport Resize Handling ===== */

/* Smooth transitions during viewport changes */
@media (prefers-reduced-motion: no-preference) {
    .auth-animated-bg {
        transition: background-size 0.5s ease-out;
    }

    .floating-particle-responsive,
    .accent-glow-responsive {
        transition:
            width 0.3s ease-out,
            height 0.3s ease-out,
            left 0.3s ease-out,
            top 0.3s ease-out,
            right 0.3s ease-out,
            bottom 0.3s ease-out;
    }
}

/* ===== Animation Performance Monitoring ===== */

/* Pause animations if performance is poor */
@media (prefers-reduced-motion: no-preference) {
    .auth-animated-bg.performance-mode {
        animation-play-state: paused;
    }

    .floating-particle-responsive.performance-mode,
    .accent-glow-responsive.performance-mode {
        animation-play-state: paused;
        opacity: 0.3;
    }
}

/* ===== Responsive Animation Utilities ===== */

/* Animation control classes */
.auth-animation-slow {
    animation-duration: 30s !important;
}

.auth-animation-fast {
    animation-duration: 8s !important;
}

.auth-animation-pause {
    animation-play-state: paused !important;
}

.auth-animation-resume {
    animation-play-state: running !important;
}

/* Responsive animation visibility */
.auth-animation-mobile-only {
    display: none;
}

@media (max-width: 767.98px) {
    .auth-animation-mobile-only {
        display: block;
    }
}

.auth-animation-desktop-only {
    display: none;
}

@media (min-width: 1025px) {
    .auth-animation-desktop-only {
        display: block;
    }
}

/* ===== Advanced Performance Optimizations ===== */

/* Use transform3d for hardware acceleration */
@keyframes floatUpOptimized {
    0% {
        transform: translate3d(0, 100vh, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.1;
    }
    90% {
        opacity: 0.1;
    }
    100% {
        transform: translate3d(0, -100px, 0) rotate(360deg);
        opacity: 0;
    }
}

@keyframes floatSideOptimized {
    0% {
        transform: translate3d(-100px, 50vh, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.05;
    }
    90% {
        opacity: 0.05;
    }
    100% {
        transform: translate3d(100vw, 30vh, 0) rotate(180deg);
        opacity: 0;
    }
}

@keyframes pulseOptimized {
    0%, 100% {
        opacity: 0.3;
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate3d(0, 0, 0) scale(1.05);
    }
}

/* Apply optimized animations on capable devices */
@media (min-width: 768px) and (min-resolution: 96dpi) {
    .floating-particle-responsive {
        animation-name: floatUpOptimized, floatSideOptimized;
    }

    .accent-glow-responsive {
        animation-name: pulseOptimized;
    }
}

/* ===== Intersection Observer Support (Future Enhancement) ===== */

/* Animations that start when in viewport */
.auth-animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.auth-animate-on-scroll.in-viewport {
    opacity: 1;
    transform: translateY(0);
}

/* ===== CSS Custom Properties for Dynamic Control ===== */

:root {
    --auth-animation-speed: 1;
    --auth-particle-count: 5;
    --auth-glow-intensity: 0.1;
    --auth-animation-enabled: 1;
}

/* Responsive animation speed control */
@media (max-width: 767.98px) {
    :root {
        --auth-animation-speed: 0.7;
        --auth-particle-count: 3;
        --auth-glow-intensity: 0.05;
    }
}

@media (min-width: 1200px) {
    :root {
        --auth-animation-speed: 1.3;
        --auth-particle-count: 7;
        --auth-glow-intensity: 0.15;
    }
}

/* Apply dynamic properties */
.auth-animated-bg {
    animation-duration: calc(15s / var(--auth-animation-speed));
}

.floating-particle-responsive {
    opacity: calc(0.1 * var(--auth-glow-intensity) * 10);
}

.accent-glow-responsive {
    opacity: var(--auth-glow-intensity);
}