/* ============================================
   TJVYBEZ BLUEPRINT — login.css
   Loading screen + Login page styles
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;700;800&family=DM+Sans:wght@300;400;500&family=Space+Mono:wght@400;700&display=swap');

:root {
  --orange: #FF4D00; --pink: #FF2D78; --purple: #7B2FFF;
  --cyan: #00E5FF; --lime: #B8FF00; --gold: #FFB800;
  --white: #F5F0FF; --bg: #060608; --bg2: #0C0C14; --bg3: #12121E;
  --muted: #4A4A6A; --text2: #9090B0; --danger: #FF3B3B;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  overflow: hidden;
  cursor: none;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9990;
}

/* ---- CURSOR ---- */
#tjv-cursor { width:10px;height:10px;background:var(--cyan);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;mix-blend-mode:difference; }
#tjv-cursor-ring { width:38px;height:38px;border:1px solid rgba(0,229,255,0.35);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%); }

/* ---- LOADING SCREEN ---- */
.loading-body { overflow: hidden; }

#loader {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: opacity .5s ease;
}
#loader.fade-out { opacity: 0; }

.loader-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.loader-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: orbFloat 9s ease-in-out infinite;
}
.o1 { width:500px;height:500px;background:rgba(255,77,0,.12);top:-150px;right:-150px;animation-delay:0s; }
.o2 { width:400px;height:400px;background:rgba(123,47,255,.15);bottom:-100px;left:-100px;animation-delay:-3s; }
.o3 { width:300px;height:300px;background:rgba(0,229,255,.08);top:40%;right:20%;animation-delay:-5s; }
@keyframes orbFloat {
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(20px,-28px) scale(1.04);}
  66%{transform:translate(-14px,18px) scale(0.97);}
}

.loader-content {
  text-align: center;
  position: relative;
  z-index: 1;
}

.loader-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(72px, 14vw, 160px);
  line-height: .9;
  letter-spacing: .04em;
  margin-bottom: 16px;
  animation: logoReveal 1s cubic-bezier(.22,1,.36,1) both;
}
@keyframes logoReveal {
  from { opacity:0; transform: translateY(40px) scale(.95); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.ll-tj {
  background: linear-gradient(90deg, var(--orange), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ll-vybez {
  background: linear-gradient(90deg, var(--pink), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.loader-sub {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 48px;
  animation: fadeUp .8s .3s both;
}

.loader-bar-wrap {
  width: 280px;
  height: 2px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 auto 12px;
  animation: fadeUp .8s .4s both;
}
.loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--pink), var(--purple));
  border-radius: 2px;
  transition: width .15s ease;
}

.loader-pct {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .1em;
  animation: fadeUp .8s .4s both;
}

.loader-bottom {
  position: absolute;
  bottom: 32px;
  animation: fadeUp .8s .6s both;
}
.loader-tag {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---- LOGIN PAGE ---- */
.login-body {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position: relative;
}

.login-bg {
  position: fixed; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: orbFloat 9s ease-in-out infinite;
}
.lb1 { width:500px;height:500px;background:rgba(255,77,0,.1);top:-150px;right:-100px;animation-delay:0s; }
.lb2 { width:400px;height:400px;background:rgba(123,47,255,.14);bottom:-100px;left:-80px;animation-delay:-3s; }
.lb3 { width:300px;height:300px;background:rgba(0,229,255,.07);top:30%;left:30%;animation-delay:-6s; }

/* grid lines */
.login-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(123,47,255,.04) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(123,47,255,.04) 80px);
}

.login-card {
  position: relative; z-index: 10;
  width: 100%;
  max-width: 420px;
  padding: 48px 44px;
  background: rgba(12,12,20,.85);
  border: 1px solid rgba(123,47,255,.2);
  backdrop-filter: blur(20px);
  animation: cardReveal .8s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardReveal {
  from { opacity:0; transform: translateY(32px) scale(.98); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.login-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--pink), var(--purple));
}

.login-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  line-height: .9;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.login-logo .ll-tj {
  background: linear-gradient(90deg, var(--orange), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.login-logo .ll-vybez {
  background: linear-gradient(90deg, var(--pink), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.login-tagline {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 40px;
}

.login-form { display: flex; flex-direction: column; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-label {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text2);
}
.form-input {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--white);
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
  transition: border-color .2s, background .2s;
  font-family: 'DM Sans', sans-serif;
  width: 100%;
}
.form-input:focus {
  border-color: rgba(123,47,255,.5);
  background: rgba(123,47,255,.05);
}
.form-input::placeholder { color: var(--muted); }

.login-error {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--danger);
  letter-spacing: .06em;
  min-height: 16px;
  text-align: center;
}

.btn-login {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 15px;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  color: #fff;
  border: none;
  width: 100%;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
  transition: filter .2s, transform .2s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-login::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2), transparent);
  transform: translateX(-100%);
  transition: transform .4s;
}
.btn-login:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-login:hover::after { transform: translateX(100%); }
.btn-login.loading { opacity: .6; pointer-events: none; }

.login-footer {
  margin-top: 28px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .1em;
  text-align: center;
  line-height: 1.8;
}

@keyframes fadeUp {
  from { opacity:0; transform: translateY(16px); }
  to   { opacity:1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .login-card { padding: 36px 28px; max-width: 100%; margin: 20px; }
}