/* Lock screen look (gate-glow.js): drifting light, glass card with a gold edge, live Strippi, staggered arrival, clearer form. */
#vault-gate{position:relative;overflow:hidden;isolation:isolate}
.gg-aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.gg-aurora i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.gg-aurora i:nth-child(1){background:radial-gradient(circle,rgba(217,164,65,.45),transparent 65%);top:-25vmax;right:-15vmax;animation:gg-drift1 22s ease-in-out infinite alternate}
.gg-aurora i:nth-child(2){background:radial-gradient(circle,rgba(31,140,140,.5),transparent 65%);bottom:-30vmax;left:-20vmax;animation:gg-drift2 26s ease-in-out infinite alternate}
.gg-aurora i:nth-child(3){background:radial-gradient(circle,rgba(217,164,65,.18),transparent 60%);top:30%;left:35%;width:40vmax;height:40vmax;animation:gg-drift3 18s ease-in-out infinite alternate}
.gg-aurora::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%)}
@keyframes gg-drift1{to{transform:translate(-12vmax,10vmax) scale(1.15)}}
@keyframes gg-drift2{to{transform:translate(14vmax,-8vmax) scale(1.1)}}
@keyframes gg-drift3{to{transform:translate(-10vmax,-12vmax) scale(.85)}}

/* glass card with a soft gold-to-teal edge */
#vault-gate .gate-card.gg-card{position:relative;border-radius:26px;padding:36px 34px 30px;
 background:linear-gradient(160deg,rgba(16,58,62,.78),rgba(8,35,38,.82));backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
 border:1px solid transparent;box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06)}
#vault-gate .gate-card.gg-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(140deg,rgba(217,164,65,.7),rgba(217,164,65,.08) 35%,rgba(31,140,140,.1) 65%,rgba(31,140,140,.6));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.gg-card>*{animation:gg-rise .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--gg,0)*60ms + 80ms)}
@keyframes gg-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* live Strippi with a halo */
.gg-bot{position:relative;width:96px;height:96px;margin:-6px auto 4px}
.gg-bot::before{content:"";position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,rgba(217,164,65,.28),transparent 68%);animation:gg-pulse 3.6s ease-in-out infinite;z-index:-1}
.gg-bot .strippi-bot-slot{display:block;width:96px;height:96px}
@keyframes gg-pulse{50%{transform:scale(1.12);opacity:.6}}

/* title and text */
.gg-card h1{text-align:center;margin:10px 0 2px;font-size:clamp(30px,5vw,38px);letter-spacing:-.5px;
 background:linear-gradient(100deg,#f6eddc 30%,#e6bb63 70%,#d9a441);-webkit-background-clip:text;background-clip:text;color:transparent}
.gg-card>h1+p{text-align:center;opacity:.75;margin:0 0 18px;letter-spacing:.3px}
.gg-card>p.muted:empty{display:none}

/* form */
.gg-card label{font-weight:600}
.gg-card input[type=password]{height:48px;border-radius:14px;padding:0 16px;font-size:16px;background:rgba(3,22,24,.65);border:1px solid rgba(217,164,65,.18);transition:border-color .2s,box-shadow .2s}
.gg-card input[type=password]:focus{outline:none;border-color:rgba(217,164,65,.75);box-shadow:0 0 0 4px rgba(217,164,65,.16)}
.gg-card .check-label{font-weight:500;margin:16px 0 4px}
.gg-card .check-label+.footnote{font-size:12px;opacity:.6;margin:0 0 16px 28px;line-height:1.45}
.gg-card button.primary{position:relative;overflow:hidden;height:50px;border-radius:14px;font-weight:700;font-size:15px;
 background:linear-gradient(180deg,#e7b75a,#d39a33);color:#1b1405;border:0;box-shadow:0 10px 26px rgba(217,164,65,.28),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .15s,box-shadow .2s}
.gg-card button.primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s ease}
.gg-card button.primary:hover{box-shadow:0 14px 34px rgba(217,164,65,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.gg-card button.primary:hover::after{left:130%}
.gg-card button.primary:active{transform:scale(.98)}
.gg-card .actions{gap:10px;margin-top:18px}
.gg-card .actions button,.gg-card>button{border-radius:999px;padding:9px 16px;min-height:40px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:background .2s,border-color .2s}
.gg-card .actions button:hover,.gg-card>button:hover{background:rgba(217,164,65,.1);border-color:rgba(217,164,65,.4)}
.gg-card>.footnote:last-of-type{font-size:12px;opacity:.6;text-align:center;margin:18px auto 10px;max-width:420px}
.gg-card>button{display:block;margin:0 auto}

/* light mode */
html:not(.night) #vault-gate{background:#f3ece0}
html:not(.night) .gg-aurora i{opacity:.35}
html:not(.night) .gg-aurora::after{background-image:radial-gradient(rgba(19,86,90,.12) 1px,transparent 1px)}
html:not(.night) #vault-gate .gate-card.gg-card{background:linear-gradient(160deg,rgba(255,253,248,.85),rgba(250,244,233,.8));box-shadow:0 30px 80px rgba(19,86,90,.18),inset 0 1px 0 #fff}
html:not(.night) .gg-card h1{background:linear-gradient(100deg,#0f4448 35%,#b98425);-webkit-background-clip:text;background-clip:text}
html:not(.night) .gg-card input[type=password]{background:#fff;border-color:rgba(19,86,90,.2)}
html:not(.night) .gg-card .actions button,html:not(.night) .gg-card>button{background:rgba(19,86,90,.04);border-color:rgba(19,86,90,.15)}

@media(max-width:760px){#vault-gate .gate-card.gg-card{padding:28px 20px 24px;border-radius:22px}}
@media(prefers-reduced-motion:reduce){.gg-aurora i,.gg-bot::before,.gg-card>*{animation:none!important}}
body.simple-mode .gg-aurora i,html.lite .gg-aurora i{animation:none}
html.lite #vault-gate .gate-card.gg-card{backdrop-filter:none;-webkit-backdrop-filter:none}
