/* ========== GATE – PASSWORD ENTRY ========== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --navy:#0a0e1a;
    --charcoal:#1a1f2e;
    --surface:#141824;
    --gold:#c9a84c;
    --teal:#2ec4b6;
    --silver:#8892a4;
    --text:#e2e6ee;
    --text-dim:#7a8499;
    --font-body:'Inter',sans-serif;
    --font-heading:'Outfit',sans-serif;
}

html,body{height:100%;font-family:var(--font-body);background:var(--navy);color:var(--text);overflow:hidden}

/* ---------- BACKGROUND ---------- */
.gate-bg{position:fixed;inset:0;z-index:0}

.grid-overlay{
    position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);
    background-size:60px 60px;
    animation:gridDrift 20s linear infinite;
}
@keyframes gridDrift{to{background-position:60px 60px}}

.radial-glow{
    position:absolute;inset:0;
    background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(46,196,182,.06),transparent 70%),
               radial-gradient(ellipse 40% 40% at 70% 30%,rgba(201,168,76,.05),transparent 60%);
}

.floating-lines{position:absolute;inset:0;overflow:hidden}
.floating-lines span{
    position:absolute;display:block;
    width:1px;background:linear-gradient(180deg,transparent,rgba(201,168,76,.15),transparent);
    animation:floatUp var(--dur) linear infinite;opacity:0;
}
.floating-lines span:nth-child(1){left:10%;height:120px;--dur:7s;animation-delay:0s}
.floating-lines span:nth-child(2){left:30%;height:80px;--dur:9s;animation-delay:2s}
.floating-lines span:nth-child(3){left:55%;height:150px;--dur:6s;animation-delay:4s}
.floating-lines span:nth-child(4){left:75%;height:100px;--dur:11s;animation-delay:1s}
.floating-lines span:nth-child(5){left:90%;height:90px;--dur:8s;animation-delay:3s}

@keyframes floatUp{
    0%{transform:translateY(100vh);opacity:0}
    10%{opacity:1}
    90%{opacity:1}
    100%{transform:translateY(-150px);opacity:0}
}

/* ---------- CONTAINER ---------- */
.gate-container{
    position:relative;z-index:1;
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;padding:24px;
}

.gate-card{
    width:100%;max-width:440px;
    background:rgba(20,24,36,.65);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid rgba(201,168,76,.12);
    border-radius:24px;
    padding:48px 40px 40px;
    text-align:center;
    box-shadow:0 32px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);
    animation:cardIn .8s cubic-bezier(.22,1,.36,1) forwards;
    opacity:0;transform:translateY(30px) scale(.97);
}
@keyframes cardIn{to{opacity:1;transform:translateY(0) scale(1)}}

/* ---------- EMBLEM ---------- */
.gate-emblem{margin-bottom:28px}
.gate-emblem svg{width:72px;height:72px;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- TITLE ---------- */
.gate-title{margin-bottom:32px}
.gate-label{
    display:inline-block;
    font-family:var(--font-body);font-size:.65rem;font-weight:600;
    letter-spacing:3px;text-transform:uppercase;
    color:var(--gold);
    margin-bottom:12px;
}
.gate-title h1{
    font-family:var(--font-heading);font-size:2rem;font-weight:700;
    color:#fff;letter-spacing:-.5px;line-height:1.15;
    margin-bottom:8px;
}
.gate-subtitle{
    font-size:.85rem;font-weight:400;color:var(--silver);letter-spacing:.5px;
}

/* ---------- FORM ---------- */
.gate-form{margin-bottom:28px}

.input-wrapper{
    position:relative;display:flex;align-items:center;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(201,168,76,.15);
    border-radius:14px;
    transition:border-color .3s,box-shadow .3s;
    overflow:hidden;
}
.input-wrapper:focus-within{
    border-color:rgba(201,168,76,.4);
    box-shadow:0 0 0 3px rgba(201,168,76,.08);
}
.input-wrapper.error{
    border-color:rgba(220,80,80,.5);
    box-shadow:0 0 0 3px rgba(220,80,80,.08);
    animation:shake .45s ease;
}
@keyframes shake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-6px)}
    40%{transform:translateX(6px)}
    60%{transform:translateX(-4px)}
    80%{transform:translateX(4px)}
}

.input-icon{
    display:flex;align-items:center;justify-content:center;
    width:48px;flex-shrink:0;color:var(--text-dim);
}

#passcode{
    flex:1;background:transparent;border:none;outline:none;
    font-family:var(--font-body);font-size:.9rem;
    color:var(--text);padding:16px 0;
    letter-spacing:1px;
}
#passcode::placeholder{color:var(--text-dim);letter-spacing:.5px;font-size:.85rem}

#submitBtn{
    display:flex;align-items:center;justify-content:center;
    width:52px;height:100%;flex-shrink:0;
    background:linear-gradient(135deg,var(--gold),#d4b85c);
    border:none;cursor:pointer;color:var(--navy);
    transition:background .3s,transform .2s;
}
#submitBtn:hover{background:linear-gradient(135deg,#d4b85c,var(--gold));transform:scale(1.05)}
#submitBtn:active{transform:scale(.95)}

.error-msg{
    font-size:.78rem;color:#dc5050;margin-top:10px;
    opacity:0;transform:translateY(-4px);
    transition:opacity .3s,transform .3s;
}
.error-msg.visible{opacity:1;transform:translateY(0)}

/* ---------- FOOTER TEXT ---------- */
.gate-footer-text p{
    font-size:.7rem;color:var(--text-dim);letter-spacing:1.5px;text-transform:uppercase;
}

/* ---------- SUCCESS OVERLAY ---------- */
.gate-success-overlay{
    position:fixed;inset:0;z-index:100;
    background:var(--navy);
    display:flex;align-items:center;justify-content:center;
    animation:successIn .5s ease forwards;
}
@keyframes successIn{from{opacity:0}to{opacity:1}}

.gate-success-overlay .check{
    width:60px;height:60px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--teal));
    display:flex;align-items:center;justify-content:center;
    animation:popIn .4s .2s cubic-bezier(.22,1,.36,1) forwards;
    opacity:0;transform:scale(.5);
}
@keyframes popIn{to{opacity:1;transform:scale(1)}}

.gate-success-overlay .check svg{width:28px;height:28px;color:var(--navy)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:480px){
    .gate-card{padding:36px 24px 28px;border-radius:18px}
    .gate-title h1{font-size:1.6rem}
    .gate-emblem svg{width:56px;height:56px}
}