@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Rajdhani:wght@500;600;700&display=swap');

#intro-overlay{
  position:fixed; inset:0; z-index:50; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  font-family:'Rajdhani',system-ui,sans-serif; color:#e8eaed;
  opacity:1; transition:opacity .6s ease;
  background:#070708;
}
#intro-overlay.hide{ opacity:0; pointer-events:none; }

/* battlefield background + cinematic darkening */
#intro-overlay .bg{
  position:absolute; inset:0; z-index:0;
  background:url('intro-bg.png') center center/cover no-repeat;
  filter:saturate(1) brightness(.82);
}
#intro-overlay .bg2{
  position:absolute; inset:0; z-index:0;
  background:url('intro-bg2.png') center center/cover no-repeat;
  filter:saturate(1) brightness(.82);
  opacity:0; transition:opacity .8s ease;
}
#intro-overlay.bg-loading .bg2{ opacity:1; }
#intro-overlay .scrim{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 85% at 50% 30%, rgba(0,0,0,0) 0%, rgba(6,6,8,.30) 65%, rgba(6,6,8,.80) 100%),
    linear-gradient(180deg, rgba(6,6,8,.35) 0%, rgba(6,6,8,.05) 30%, rgba(6,6,8,.45) 100%);
}
#intro-overlay .vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 240px 60px rgba(0,0,0,.9);
}

#intro-overlay .wrap{ position:relative; z-index:3; width:460px; max-width:92vw; text-align:center; }

/* title logo */
#intro-overlay .logo{
  width:460px; max-width:90vw; height:auto; display:block; margin:0 auto 4px;
  filter:drop-shadow(0 5px 18px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(255,150,40,.16));
}
#intro-overlay .tagline{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:12px 0 30px; color:#e7a13e; font-weight:600;
  font-size:12.5px; letter-spacing:5px;
}
#intro-overlay .tagline::before,
#intro-overlay .tagline::after{ content:""; height:1px; width:26px; background:linear-gradient(90deg,transparent,#e7a13e); }
#intro-overlay .tagline::after{ background:linear-gradient(90deg,#e7a13e,transparent); }

/* card */
#intro-overlay .card{
  max-width:340px; margin:0 auto;
  background:rgba(15,17,21,.82); border:1px solid rgba(255,255,255,.07);
  border-radius:12px; padding:22px 22px 20px; backdrop-filter:blur(6px);
  box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
}
#intro-overlay .card-label{
  color:#aeb4bc; font-size:11px; font-weight:600; letter-spacing:3px; margin-bottom:14px;
}

/* login / register tabs */
#intro-overlay .auth-tabs{
  display:flex; margin:-4px -4px 16px; gap:4px;
  background:#0c0e12; border:1px solid rgba(255,255,255,.07); border-radius:8px; padding:4px;
}
#intro-overlay .auth-tab{
  flex:1; text-align:center; padding:9px 0; cursor:pointer; border-radius:6px;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12px; letter-spacing:2px; color:#7d838b;
  transition:background .15s ease, color .15s ease;
}
#intro-overlay .auth-tab:hover{ color:#cdd2d8; }
#intro-overlay .auth-tab.on{ color:#1c1304; background:linear-gradient(180deg,#f4b34c,#e08f25); }

#intro-overlay .field{
  display:flex; align-items:center; gap:10px; height:46px; padding:0 14px;
  background:#0c0e12; border:1px solid rgba(255,255,255,.08); border-radius:8px;
}
#intro-overlay .field svg{ flex:0 0 auto; opacity:.6; }
#intro-overlay .field input{
  flex:1; background:transparent; border:0; outline:0; color:#e8eaed;
  font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:600; letter-spacing:1px;
}
#intro-overlay .field input::placeholder{ color:#6b7178; letter-spacing:2px; }

#intro-overlay .btn{
  margin-top:14px; width:100%; height:50px; border:0; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:16px; letter-spacing:2px;
  color:#1c1304; background:linear-gradient(180deg,#f4b34c 0%,#e08f25 100%);
  box-shadow:0 8px 22px rgba(224,143,37,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
#intro-overlay .btn:hover{ filter:brightness(1.06); box-shadow:0 10px 28px rgba(224,143,37,.5); }
#intro-overlay .btn:active{ transform:translateY(1px); }
#intro-overlay .btn.ready{ background:linear-gradient(180deg,#5fcf6a 0%,#2f9e3c 100%); color:#06210b; box-shadow:0 8px 22px rgba(47,158,60,.4); }

#intro-overlay .req{
  margin-top:14px; color:#d6912f; font-size:10.5px; font-weight:600; letter-spacing:1.5px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}

#intro-overlay .footer{
  position:relative; z-index:3; margin-top:30px;
  color:#6b7178; font-size:10px; font-weight:600; letter-spacing:3px;
}

/* ---------- loading view (after DEPLOY) ---------- */
#intro-overlay #login-view{ transition:opacity .45s ease; }
#intro-overlay #login-view.fade-out{ opacity:0; pointer-events:none; }
#intro-overlay .loading-view{ display:none; }
#intro-overlay.loading #login-view{ display:none; }
#intro-overlay.loading .loading-view{ display:block; animation:introIn .6s ease both; }

#intro-overlay .load-callsign{
  margin-top:8px; color:#e8eaed; font-weight:700; font-size:18px; letter-spacing:4px;
}
#intro-overlay .load-status{
  margin-top:26px; color:#e7a13e; font-weight:600; font-size:13px; letter-spacing:4px;
  min-height:18px;
}
#intro-overlay .load-status::after{ content:"_"; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

#intro-overlay .load-bar{
  margin:14px auto 0; width:340px; max-width:80vw; height:6px; border-radius:3px;
  background:rgba(255,255,255,.08); overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
#intro-overlay .load-bar-fill{
  width:0%; height:100%; border-radius:3px;
  background:linear-gradient(90deg,#e08f25,#f4b34c);
  box-shadow:0 0 14px rgba(244,179,76,.6); transition:width .35s ease;
}
#intro-overlay .load-pct{
  margin-top:8px; color:#aeb4bc; font-weight:700; font-size:12px; letter-spacing:2px;
}
#intro-overlay .load-tip{
  margin-top:30px; color:#8b9098; font-size:11px; font-weight:600; letter-spacing:1.5px;
  display:flex; align-items:center; justify-content:center; gap:8px; max-width:420px; margin-left:auto; margin-right:auto;
}
#intro-overlay .load-tip-key{
  color:#1c1304; background:#e7a13e; padding:2px 7px; border-radius:3px;
  font-size:9.5px; letter-spacing:2px;
}

/* entrance motion */
#intro-overlay .anim{ opacity:0; transform:translateY(14px); animation:introIn .6s ease forwards; }
#intro-overlay .title.anim{ animation-delay:.05s; }
#intro-overlay .tagline.anim{ animation-delay:.16s; }
#intro-overlay .card.anim{ animation-delay:.26s; }
#intro-overlay .footer.anim{ animation-delay:.4s; }
@keyframes introIn{ to{ opacity:1; transform:none; } }