:root{
    --primary:#00E5C3;
    --secondary:#00D4FF;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
}

body{
    overflow:hidden;
    font-family:'Poppins',sans-serif;
    color:white;
}

/* ==========================
BACKGROUND
========================== */

.background{

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            rgba(0,20,25,.35),
            rgba(0,20,25,.55)
        ),
        url('../assets/images/bg.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.background::before{

    content:"";

    position:absolute;
    inset:0;

    background:

    radial-gradient(
        circle at center,
        rgba(0,255,255,.18),
        transparent 35%
    ),

    radial-gradient(
        circle at center,
        rgba(0,255,255,.08),
        transparent 60%
    );
}

/* ==========================
INTRO FLASH
========================== */

.intro-flash{

    position:absolute;
    inset:0;

    background:white;

    z-index:999;

    animation:intro 1.5s forwards;
}

@keyframes intro{

    from{
        opacity:1;
    }

    to{
        opacity:0;
        visibility:hidden;
    }
}

/* ==========================
CONTENT
========================== */

.center-content{

    position:absolute;
    inset:0;

    z-index:10;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:60px;

    text-align:center;
}

/* ==========================
LOGO
========================== */

.hero-logo{

    animation:
        logoFade 1.2s ease,
        floating 6s ease-in-out infinite;
}

.hero-logo img{

    width:850px;

    max-width:85vw;

    user-select:none;

    filter:
        drop-shadow(0 0 20px rgba(0,255,255,.45))
        drop-shadow(0 0 60px rgba(0,255,255,.30))
        drop-shadow(0 0 120px rgba(0,255,255,.15));
}

@keyframes logoFade{

    from{
        opacity:0;

        transform:
            scale(.8)
            translateY(30px);
    }

    to{
        opacity:1;

        transform:
            scale(1)
            translateY(0);
    }
}

@keyframes floating{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }
}

/* ==========================
BUTTON
========================== */

.start-btn{

    width:260px;
    height:70px;

    border:none;
    border-radius:50px;

    cursor:pointer;

    font-size:20px;
    font-weight:700;

    letter-spacing:1px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:#012326;

    transition:.3s;

    box-shadow:
        0 0 25px rgba(0,255,255,.25);
}

.start-btn:hover{

    transform:
        translateY(-5px)
        scale(1.05);

    box-shadow:
        0 0 50px rgba(0,255,255,.45);
}

.start-btn:active{

    transform:scale(.98);
}

/* ==========================
RESPONSIVE
========================== */

@media(max-width:992px){

    .hero-logo img{
        width:500px;
    }
}

@media(max-width:768px){

    .hero-logo img{
        width:320px;
    }

    .start-btn{

        width:220px;
        height:60px;

        font-size:18px;
    }
}

/* ===================================
DEVICE BLOCKER
=================================== */

#deviceBlocker{

    position:fixed;
    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

    padding:30px;

    background:
    linear-gradient(
        rgba(0,20,25,.55),
        rgba(0,20,25,.70)
    );

    backdrop-filter:blur(14px);

    z-index:999999;
}

.device-card{

    position:relative;

    width:100%;
    max-width:650px;

    overflow:hidden;

    padding:45px;

    border-radius:32px;

    text-align:center;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.04)
    );

    border:
    1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(25px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.25),
        0 0 40px rgba(0,229,255,.12);
}

.device-glow{

    position:absolute;

    width:300px;
    height:300px;

    top:-150px;
    right:-150px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,229,255,.25),
        transparent 70%
    );

    pointer-events:none;
}

.device-icon{

    font-size:90px;

    margin-bottom:15px;

    animation:
    floating 3s ease-in-out infinite;
}

.device-badge{

    display:inline-block;

    padding:
        8px
        18px;

    margin-bottom:20px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

    color:#00e5ff;

    background:
    rgba(0,229,255,.12);

    border:
    1px solid rgba(0,229,255,.2);
}

.device-card h2{

    font-size:32px;

    margin-bottom:15px;

    color:white;
}

.device-description{

    color:
    rgba(255,255,255,.85);

    line-height:1.8;

    margin-bottom:30px;
}

.device-requirements{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:30px;
}

.requirement-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 20px;

    border-radius:16px;

    background:
    rgba(255,255,255,.06);

    border:
    1px solid rgba(255,255,255,.08);

    text-align:left;
}

.requirement-item span:first-child{

    font-size:24px;
}

.device-footer{

    padding-top:20px;

    border-top:
    1px solid rgba(255,255,255,.08);

    color:
    rgba(255,255,255,.7);

    font-size:14px;
}

@keyframes floating{

    0%,100%{

        transform:translateY(0);
    }

    50%{

        transform:translateY(-8px);
    }
}

/* ==========================
COPYRIGHT
========================== */

.app-copyright{

    position:fixed;

    bottom:20px;
    left:50%;

    transform:translateX(-50%);

    z-index:50;

    font-size:14px;

    font-weight:500;

    letter-spacing:.5px;

    color:rgba(255,255,255,.65);

    text-shadow:
        0 0 10px rgba(0,0,0,.3);
}

@media (max-width: 768px){

    .start-btn{

        display:none !important;
    }

}


/* ==========================
LOADING SCREEN
========================== */

#loadingScreen{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;
    align-items:center;

    background:
        linear-gradient(
            rgba(0,20,25,.85),
            rgba(0,20,25,.95)
        ),
        url('../assets/images/bg.jpg');

    background-size:cover;
    background-position:center;

    z-index:9999999;

    transition:
        opacity .5s ease,
        visibility .5s ease;
}

#loadingScreen.hidden{

    opacity:0;

    visibility:hidden;
}

.loading-container{

    text-align:center;
}

.loading-logo img{

    width:180px;

    margin-bottom:25px;

    animation:
        pulseLogo 2s infinite;
}

.loading-spinner{

    width:60px;
    height:60px;

    margin:0 auto 20px;

    border:
        4px solid rgba(255,255,255,.15);

    border-top:
        4px solid #00E5FF;

    border-radius:50%;

    animation:
        spin 1s linear infinite;
}

.loading-text{

    color:white;

    font-size:18px;

    font-weight:500;

    letter-spacing:.5px;
}

@keyframes spin{

    from{

        transform:rotate(0deg);
    }

    to{

        transform:rotate(360deg);
    }
}

@keyframes pulseLogo{

    0%,100%{

        transform:scale(1);
    }

    50%{

        transform:scale(1.05);
    }
}

.access-modal{

    position:fixed;
    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(8px);

    z-index:999999;
}

.access-card{

    width:100%;
    max-width:450px;

    padding:35px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.15),
            rgba(255,255,255,.05)
        );

    border:
        1px solid rgba(255,255,255,.15);

    text-align:center;

    backdrop-filter:blur(20px);
}

.access-card h2{

    margin-bottom:10px;
}

.access-card p{

    margin-bottom:25px;

    color:
    rgba(255,255,255,.75);
}

.access-card input{

    width:100%;

    height:55px;

    padding:0 18px;

    border:none;

    border-radius:14px;

    font-size:16px;

    margin-bottom:15px;
}

.access-btn{

    width:100%;
    height:55px;

    border:none;

    border-radius:14px;

    font-weight:700;

    cursor:pointer;

    background:
        linear-gradient(
            135deg,
            #00E5C3,
            #00D4FF
        );

    color:#012326;
}

.access-error{

    margin-bottom:15px;

    color:#ffb3b3;

    font-size:14px;
}

.access-card{
    position:relative;
}

.access-close{

    position:absolute;

    top:15px;
    right:15px;

    width:36px;
    height:36px;

    border:none;
    border-radius:50%;

    cursor:pointer;

    font-size:18px;
    font-weight:700;

    color:white;

    background:
        rgba(255,255,255,.08);

    transition:.3s;
}

.access-close:hover{

    background:
        rgba(255,255,255,.18);

    transform:rotate(90deg);
}