/* ==========================================
   PASSWORD SCREEN
========================================== */

#password{

position:fixed;
inset:0;

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

overflow:hidden;

padding:24px;
box-sizing:border-box;

background:

radial-gradient(circle at 50% 18%,
rgba(255,223,140,.12) 0%,
transparent 40%),

linear-gradient(
180deg,
#050c17 0%,
#0d1d33 40%,
#16335c 75%,
#244b75 100%
);

animation:skyBreath 12s ease-in-out infinite;

}

/* ==========================================
   GOLDEN GLOW
========================================== */

.vault-glow{

position:absolute;

left:50%;
top:180px;

width:430px;
height:430px;

transform:translateX(-50%);
border-radius:50%;

background:

radial-gradient(circle,
rgba(255,223,140,.18),
transparent 72%);

filter:blur(45px);

animation:vaultGlow 8s ease-in-out infinite;

}

/* ==========================================
   MIST
========================================== */

.vault-mist{

position:absolute;

left:-15%;
bottom:-120px;

width:130%;
height:240px;

background:

radial-gradient(circle,
rgba(255,255,255,.07),
transparent 70%);

filter:blur(60px);

animation:mistMove 18s ease-in-out infinite;

}

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

.vault{

position:relative;

z-index:2;

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

display:flex;
flex-direction:column;
align-items:center;

text-align:center;

margin:auto;

padding:20px;

box-sizing:border-box;

}

.vault-icon{

font-size:46px;

margin-bottom:22px;

animation:lockFloat 4s ease-in-out infinite;

}

.vault-title{

font-size:30px;

font-weight:700;

line-height:1.2;

letter-spacing:-0.5px;

white-space:nowrap;

margin:16px 0 12px;

color:#fff;

text-shadow:
0 0 20px rgba(255,255,255,.12);

}

.vault-title span{

background:linear-gradient(
90deg,
#FFD76A,
#FFF2C4
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

background-clip:text;

}

.vault-divider{

margin:12px 0 18px;

font-size:18px;

color:#FFD76A;

opacity:.9;

}

.vault-text{

font-size:18px;

line-height:1.6;

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

margin:0 0 30px;

max-width:260px;

}

@keyframes vaultGlow{

0%,100%{

transform:
translateX(-50%)
scale(1);

opacity:.45;

}

50%{

transform:
translateX(-50%)
scale(1.12);

opacity:.8;

}

}

@keyframes lockFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

/* ===========================
   INPUT AREA
=========================== */

.input-wrap{

position:relative;

width:100%;

max-width:340px;

margin:0 auto 28px;

display:flex;
align-items:center;

}

.input-icon{

position:absolute;

left:18px;

top:50%;

transform:translateY(-50%);

width:20px;
height:20px;

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

font-size:0;

color:#FFD76A;

opacity:.75;

pointer-events:none;

z-index:2;

filter:
drop-shadow(0 0 6px rgba(255,215,106,.35));

}

.input-icon svg{

width:20px;
height:20px;

display:block;

}

#vaultPassword{

width:100%;

height:60px;

padding:0 58px 0 52px;

box-sizing:border-box;

border:none;

outline:none;

border-radius:20px;

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

backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

color:#fff;

font-size:17px;

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

box-shadow:
inset 0 0 1px rgba(255,255,255,.08);

transition:
background .35s ease,
box-shadow .35s ease,
transform .25s ease;

}

#vaultPassword:focus{

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

transform:translateY(-1px);

box-shadow:
0 0 0 2px rgba(255,215,106,.35),
0 0 24px rgba(255,215,106,.18);

}

#vaultPassword::placeholder{

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

}

#togglePassword{

position:absolute;

right:14px;

width:38px;
height:38px;

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

padding:0;

border:none;
outline:none;

background:transparent;

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

cursor:pointer;

border-radius:50%;

transition:
color .25s ease,
background .25s ease,
transform .25s ease;

}

#togglePassword:hover{

color:#FFD76A;

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

}

#togglePassword:active{

transform:scale(.92);

}

.eye-icon{

width:21px;
height:21px;

display:block;

}

/* ==========================================
   PREMIUM UNLOCK BUTTON
========================================== */

#unlockButton{

position:relative;

width:100%;
max-width:340px;
height:58px;

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

padding:0 24px;

border:none;
outline:none;

border-radius:19px;

cursor:pointer;

overflow:hidden;

background:
linear-gradient(
135deg,
#FFD76A 0%,
#FFE8A3 48%,
#FFD76A 100%
);

color:#1b1b1b;

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

letter-spacing:.2px;

box-shadow:
0 12px 28px rgba(255,215,106,.20),
0 0 24px rgba(255,215,106,.10);

transition:
transform .2s ease,
filter .3s ease,
box-shadow .3s ease;

}

#unlockButton::before{

content:"";

position:absolute;

top:0;
left:-80%;

width:55%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.55),
transparent
);

transform:skewX(-18deg);

animation:unlockShine 3.8s ease-in-out infinite;

pointer-events:none;

}

#unlockButton span{

position:relative;

z-index:2;

display:inline-block;

transition:transform .25s ease;

}

#unlockButton:hover{

filter:brightness(1.06);

box-shadow:
0 14px 32px rgba(255,215,106,.26),
0 0 30px rgba(255,215,106,.14);

}

#unlockButton:hover span{

transform:translateX(2px);

}

#unlockButton:active{

transform:scale(.975);

}

#unlockButton:disabled{

cursor:default;

opacity:.75;

}

@keyframes unlockShine{

0%,55%{

left:-80%;

}

75%{

left:130%;

}

100%{

left:130%;

}

}

#vaultMessage{

margin-top:22px;

min-height:26px;

font-size:16px;

font-weight:500;

color:#FFD76A;

opacity:.95;

transition:all .35s ease;

}

.vault{

transition:

opacity .8s ease,
transform .8s ease;

}

#password.fade{

opacity:0;

} 

/* ==========================================
   WELCOME LAYER
========================================== */

#welcomeLayer{

position:absolute;
inset:0;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

opacity:0;
visibility:hidden;
pointer-events:none;

transition:
opacity .8s ease,
transform .8s ease;

z-index:10;

}

.vault-lock{

font-size:42px;

margin-bottom:14px;

}

/* ==========================================
   PREMIUM VAULT LOCK
========================================== */

.vault-lock{

width:52px;
height:52px;

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

color:#FFD76A;

margin-bottom:14px;

filter:
drop-shadow(0 0 8px rgba(255,215,106,.45))
drop-shadow(0 0 18px rgba(255,215,106,.18));

animation:lockFloat 4s ease-in-out infinite;

}

.vault-lock svg{

width:100%;
height:100%;

}

/* ==========================================
   PASSWORD SCREEN — FINAL LAYOUT FIX
========================================== */

#password .vault{
    width:100%;
    max-width:390px;

    margin:0 auto;

    padding:20px;

    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
}

/* Keep title centered and controlled */

#password .vault-title{
    width:100%;

    margin:16px 0 12px;

    text-align:center;

    white-space:nowrap;
}

/* Subtitle */

#password .vault-text{
    width:100%;
    max-width:280px;

    margin:0 auto 30px;

    text-align:center;
}

/* Password field */

#password .input-wrap{

    position:relative;

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

    height:60px;

    margin:0 auto 28px;

    display:block;

    box-sizing:border-box;

}

/* Input */

#password #vaultPassword{

    display:block;

    width:100%;
    height:60px;

    box-sizing:border-box;

    padding:
        0 58px
        0 52px;

}

/* Left lock */

#password .input-icon{

    position:absolute;

    left:18px;
    top:50%;

    transform:translateY(-50%);

    width:20px;
    height:20px;

    z-index:3;

}

/* Eye button */

#password #togglePassword{

    position:absolute;

    right:12px;
    top:50%;

    transform:translateY(-50%);

    width:38px;
    height:38px;

    z-index:4;

}

/* Unlock button */

#password #unlockButton{

    position:relative;

    display:flex;

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

    height:58px;

    margin:0 auto;

    box-sizing:border-box;

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

    flex:none;

}

/* Prevent old button styles from affecting layout */

#password #unlockButton::after{

    display:none;

}

/* Message */

#password #vaultMessage{

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

    margin:20px auto 0;

    text-align:center;

}

/* Mobile safety */

@media (max-width:420px){

    #password{
        padding:18px;
    }

    #password .vault{
        max-width:100%;
        padding:14px;
    }

    #password .vault-title{
        font-size:30px;
    }

    #password .input-wrap,
    #password #unlockButton{
        max-width:100%;
    }

}

/* ==========================================
   WELCOME — FINAL CINEMATIC
========================================== */

#welcomeLayer{

position:absolute;
inset:0;

z-index:10;

display:flex;
flex-direction:column;

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

text-align:center;

padding:24px;

box-sizing:border-box;

opacity:0;
visibility:hidden;

transform:scale(.96);

pointer-events:none;

transition:
opacity 1.1s ease,
transform 1.3s cubic-bezier(.22,1,.36,1);

}

/* Ambient golden light */

#welcomeLayer::before{

content:"";

position:absolute;

left:50%;
top:50%;

width:420px;
height:420px;

transform:translate(-50%,-50%);

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,215,106,.16) 0%,
rgba(255,215,106,.07) 32%,
transparent 72%
);

filter:blur(34px);

animation:welcomeGlow 5s ease-in-out infinite;

}

/* Sparkle */

.welcomeSparkle{

position:relative;
z-index:2;

font-size:34px;

margin-bottom:24px;

opacity:0;

transform:
translateY(14px)
scale(.7);

transition:
opacity .9s ease .25s,
transform 1s cubic-bezier(.22,1,.36,1) .25s;

filter:
drop-shadow(0 0 10px rgba(255,215,106,.75))
drop-shadow(0 0 26px rgba(255,215,106,.3));

}

/* Welcome text */

#welcomeLayer h1{

position:relative;
z-index:2;

margin:0;

font-size:42px;

line-height:1.18;

font-weight:700;

letter-spacing:-.6px;

opacity:0;

transform:translateY(22px);

transition:
opacity 1s ease .5s,
transform 1.1s cubic-bezier(.22,1,.36,1) .5s;

background:
linear-gradient(
180deg,
#ffffff 0%,
#fff8df 48%,
#FFD76A 100%
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

background-clip:text;

text-shadow:
0 0 20px rgba(255,255,255,.12);

}

/* Active reveal */

#welcomeLayer[style*="opacity: 1"],
#welcomeLayer[style*="opacity:1"]{

visibility:visible;

}

#welcomeLayer[style*="opacity: 1"] .welcomeSparkle,
#welcomeLayer[style*="opacity:1"] .welcomeSparkle{

opacity:1;

transform:
translateY(0)
scale(1);

}

#welcomeLayer[style*="opacity: 1"] h1,
#welcomeLayer[style*="opacity:1"] h1{

opacity:1;

transform:translateY(0);

}

@keyframes welcomeGlow{

0%,100%{

transform:
translate(-50%,-50%)
scale(1);

opacity:.5;

}

50%{

transform:
translate(-50%,-50%)
scale(1.12);

opacity:.85;

}

}

/* Mobile */

@media (max-width:420px){

#welcomeLayer h1{

font-size:38px;

}

.welcomeSparkle{

font-size:31px;

margin-bottom:20px;

}

}