/* Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, sans-serif; }

/* Video Background */
#bg-video{
    position: fixed; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-1;
}

/* Frames */
.frame {
    height:100vh;
    width:100%;
    position: relative;
}

/* Frame1 overlay (ORION + Explore) — now inside frame only */
.frame1 .overlay{
    position: absolute;
    top:50%; left:50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* Glow ORION text */
.glow-text{
    font-size:6rem;
    color:white;
    text-shadow: 0 0 20px rgba(0,0,0,0.9),0 0 40px rgba(0,0,0,0.7),0 0 60px rgba(0,0,0,0.5);
    animation: flicker 3s infinite alternate;
}
@keyframes flicker{
    0%{ opacity:1; text-shadow:0 0 20px rgba(0,0,0,0.9),0 0 40px rgba(0,0,0,0.7); }
    50%{ opacity:0.85; text-shadow:0 0 40px rgba(0,0,0,0.9),0 0 60px rgba(0,0,0,0.5); }
    100%{ opacity:1; text-shadow:0 0 20px rgba(0,0,0,0.9),0 0 40px rgba(0,0,0,0.7); }
}

/* Explore button */
.explore-btn{
    margin-top:40px;
    padding:15px 50px;
    border-radius:50px;
    border:2px solid rgba(0,0,0,0.9);
    background: rgba(0,0,0,0.3);
    color:white;
    font-size:1.5rem;
    cursor:pointer;
    box-shadow:0 0 20px rgba(0,0,0,0.9),0 0 40px rgba(0,0,0,0.7),0 0 60px rgba(0,0,0,0.5);
    transition:0.4s;
    position:relative;
}
.explore-btn::before{
    content:'';
    position:absolute;
    top:-20px; left:-20px; right:-20px; bottom:-20px;
    border-radius:50px;
    background: rgba(0,0,0,0.5);
    filter: blur(20px); opacity:0; transition:0.4s; z-index:-1;
}
.explore-btn:hover::before{ opacity:1; transform:scale(1.2); }
.explore-btn:hover{ transform:scale(1.1); box-shadow:0 0 40px rgba(0,0,0,0.9),0 0 80px rgba(0,0,0,0.7),0 0 120px rgba(0,0,0,0.5); }

/* Login card in frame7 */
.login-card{
    width:350px;
    margin:0 auto;
    text-align:center;
    perspective:1000px;
    position: relative;
}

/* Card inner for flip */
.card-inner{
    width:100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    border-radius: 20px;
}

/* Forms */
.form{
    background: rgba(0,0,0,0.6);
    padding:30px;
    border-radius:20px;
    box-shadow:0 0 40px #000000,0 0 80px rgba(0,0,0,0.5);
    backface-visibility:hidden;
    color:white;
    position:absolute;
    width:100%;
    top:0;
    left:0;
}
.signup-form{ transform: rotateY(180deg); }
.flipped{ transform: rotateY(180deg); }

/* Inputs */
input{ width:80%; padding:10px; margin:10px 0; border-radius:10px; border:none; outline:none; font-size:1rem; }

/* Buttons */
button{ padding:10px 20px; border-radius:10px; border:none; cursor:pointer; background:black; color:white; font-weight:bold; box-shadow:0 0 10px rgba(0,0,0,0.7); transition:0.3s; }
button:hover{ transform:scale(1.05); }

/* Links */
a{ color:rgba(255,255,255,0.8); cursor:pointer; text-decoration:none; }
a:hover{ text-decoration: underline; }

/* Responsive */
@media(max-width:480px){
    .glow-text{ font-size:4rem; }
    .explore-btn{ padding:12px 30px; font-size:1.2rem; }
    .login-card{ width:90%; }
}