*{user-select: none;margin: 0;padding: 0;}
a{outline:none;border:0;-webkit-tap-highlight-color:rgba(0,0,0,0); }
html, body {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }
        html{
            background: #0d1117;
        }
        html::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            background: linear-gradient(135deg, 
                rgba(1, 65, 255, 0.1) 0%, 
                rgba(1, 255, 190, 0.1) 50%, 
                rgba(255, 50, 50, 0.1) 100%);
            background-size: 200% 200%;
            animation: gradientBG 8s ease infinite;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Arial', sans-serif;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 0%; }
            50% { background-position: 100% 100%; }
            100% { background-position: 0% 0%; }
        }

        .logo {
            width: 200px;opacity: 0;cursor:pointer;position:relative;
            transform: translateY(0);
            transition: all .5s ease, transform 0.3s ease;outline:none;-webkit-tap-highlight-color: transparent;
        }

        .logo img  { width: 100%; }
        .logo.loaded {
            opacity: 1;width:400px;
            animation: floatAnimation 2s ease-in-out infinite;
        }

        /* Stop animation on hover */
        .logo.loaded:hover {
            animation-play-state: paused;
            transform: scale(1.1); /* Optional: add scale effect on hover */
            width:300px;height:300px;
            padding:30px;
        }
        .logo.loaded::before {
            transition: all 1s ease;opacity:0;
        }
        
        .logo.loaded:hover::before {
            display:block;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#0d1117;opacity:.5;z-index:-1;
            border: 10px solid transparent;
            border-image: linear-gradient(45deg, 
                #d46363, 
                #4ecdc4, 
                #45b7d1, 
                #96ceb4
            ) 1;
            border-image-slice: 1;animation: floatAnimation 2s ease-in-out infinite;
        }

        footer { position:fixed;left:0;right:0;bottom:15px;text-align:center;color:#fff; }
        footer h1 { font-size:14px;font-weight:normal;opacity:.3; }
        footer a { color:#fff;font-size:12px;opacity:.05;text-decoration:none; }
        footer a:hover { opacity:.3; }

        /* Particle styles */
        .code-particle {
            position: absolute;
            font-family: monospace;
            color: rgba(255, 255, 255, 0.15);
            opacity: 0;
            pointer-events: none;
            z-index: 1;
            white-space: nowrap;
            will-change: transform, opacity;
        }

        /* Animation types */
        .float-up {
            animation: floatUp 6s ease-in-out infinite;
        }

        .scale-up {
            animation: scaleUp 6s ease-in-out infinite;
        }

        .combo {
            animation: comboEffect 6s ease-in-out infinite;
        }

        .rain-drop {
            animation: rainDrop 3s cubic-bezier(0.1, 0.8, 0.9, 1) infinite;
            top: -30px !important;
        }
        .spiral {
            animation: spiralAnimation 8s ease-in-out infinite;
        }

        .lift-off {
            animation: liftOff 8s ease-in infinite;
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        /* Floating animation */
        @keyframes floatAnimation {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        @keyframes floatUp {
            0% { transform: translateY(0); opacity: 0; }
            20% { transform: translateY(-20px); opacity: 0.3; }
            80% { transform: translateY(-40px); opacity: 0.3; }
            100% { transform: translateY(-60px); opacity: 0; }
        }

        @keyframes scaleUp {
            0% { transform: scale(0.5); opacity: 0; }
            20% { transform: scale(1); opacity: 0.3; }
            80% { transform: scale(1); opacity: 0.3; }
            100% { transform: scale(0.5); opacity: 0; }
        }

        @keyframes comboEffect {
            0% { transform: translateY(0) scale(0.5); opacity: 0; }
            20% { transform: translateY(-20px) scale(1); opacity: 0.3; }
            80% { transform: translateY(-40px) scale(1); opacity: 0.3; }
            100% { transform: translateY(-60px) scale(0.5); opacity: 0; }
        }

        @keyframes rainDrop {
            0% { transform: translateY(0); opacity: 0; }
            10% { transform: translateY(0); opacity: 0.3; }
            90% { transform: translateY(calc(100vh - 1px)); opacity: 0.3; }
            100% { transform: translateY(calc(100vh - 40px)); opacity: 0; }
        }

        @keyframes liftOff {
            0% { 
                transform: translateY(0) translateZ(0) scale(1);
                opacity: 0;
                filter: blur(0px);
            }
            10% { 
                transform: translateY(0) translateZ(0) scale(1);
                opacity: 0.4;
                filter: blur(0px);
            }
            100% { 
                transform: translateY(-100vh) translateZ(300px) scale(0.5);
                opacity: 0;
                filter: blur(2px);
            }
        }
        @keyframes spiralAnimation {
            0% {
                transform: translate(-50%, -50%) rotate(0deg) translateX(0px) rotate(0deg);
                opacity: 0;
            }
            20% {
                transform: translate(-50%, -50%) rotate(90deg) translateX(150px) rotate(-90deg);
                opacity: 0.3;
            }
            80% {
                transform: translate(-50%, -50%) rotate(270deg) translateX(150px) rotate(-270deg);
                opacity: 0.3;
            }
            100% {
                transform: translate(-50%, -50%) rotate(360deg) translateX(0px) rotate(-360deg);
                opacity: 0;
            }
        }
        @media (max-width: 500px) {
html::before {
            background: linear-gradient(135deg, 
                rgba(1, 65, 255, 0.25) 0%, 
                rgba(1, 255, 190, 0.3) 50%, 
                rgba(255, 50, 50, 0.15) 100%);
            background-size: 200% 200%;
        }
            .logo {
                width:40%;
            }
            .logo.loaded {
                width:60%;
            }
        }
        /* CSS-only height detection */
        @media (max-height: 600px) {
            html {
                /* align-items: flex-start; */
                overflow-y:auto;
            }
html::before {
            background: linear-gradient(135deg, 
                rgba(1, 65, 255, 0.2) 0%, 
                rgba(1, 255, 190, 0.2) 50%, 
                rgba(255, 50, 50, 0.15) 100%);
            background-size: 200% 200%;
        }
            .login-container { margin:50px 0;overflow:hidden; }
.logo {
                width:5%;
            }
            .logo.loaded {
                width:300px;
            }
footer a {display:none;}
        }
        /* Adjust breakpoint based on your login form height */
        @media (max-height: 500px) {
            .login-container {
                padding: 30px;
            }
.logo.loaded {
                width:200px;
            }
        }