:root{
  --sport-violet:#7568ff;
  --sport-cyan:#24d8ff;
  --sport-lime:#8cff4f;
  --sport-deep:#070913;
}

.login-page{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:28px 16px;
  background:
    radial-gradient(circle at 18% 15%,rgba(117,104,255,.25),transparent 32%),
    radial-gradient(circle at 82% 82%,rgba(36,216,255,.16),transparent 34%),
    linear-gradient(135deg,#070913 0%,#0d1020 48%,#080b15 100%);
}

.login-page::before{
  content:"";
  position:absolute;
  z-index:-3;
  inset:-30%;
  background:conic-gradient(from 110deg at 50% 50%,transparent 0 22%,rgba(117,104,255,.14) 28%,transparent 35% 61%,rgba(36,216,255,.1) 68%,transparent 75%);
  animation:sportAura 14s linear infinite;
}

.sport-scene{
  position:absolute;
  z-index:-2;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.sport-grid{
  position:absolute;
  width:150%;
  height:76%;
  left:-25%;
  bottom:-40%;
  opacity:.34;
  background-image:
    linear-gradient(rgba(36,216,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,216,255,.12) 1px,transparent 1px);
  background-size:54px 54px;
  transform:perspective(420px) rotateX(63deg);
  transform-origin:center top;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 32%,#000);
  mask-image:linear-gradient(to bottom,transparent,#000 32%,#000);
  animation:gridRush 2.4s linear infinite;
}

.sport-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(4px);
  opacity:.58;
}

.sport-orb::after{
  content:"";
  position:absolute;
  inset:8%;
  border:1px solid rgba(255,255,255,.2);
  border-radius:inherit;
}

.sport-orb-one{
  width:320px;
  height:320px;
  left:-130px;
  top:-90px;
  border:1px solid rgba(117,104,255,.38);
  box-shadow:inset 0 0 80px rgba(117,104,255,.11),0 0 90px rgba(117,104,255,.12);
  animation:orbFloat 8s ease-in-out infinite;
}

.sport-orb-two{
  width:250px;
  height:250px;
  right:-100px;
  bottom:-75px;
  border:1px solid rgba(36,216,255,.3);
  box-shadow:inset 0 0 70px rgba(36,216,255,.09),0 0 80px rgba(36,216,255,.1);
  animation:orbFloat 7s ease-in-out -3s infinite reverse;
}

.speed-lane{
  position:absolute;
  left:-35vw;
  width:48vw;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 20%,var(--lane-color) 72%,#fff);
  box-shadow:0 0 14px var(--lane-color);
  transform:skewX(-28deg) rotate(-7deg);
  opacity:0;
  animation:speedPass var(--lane-speed) cubic-bezier(.2,.7,.2,1) var(--lane-delay) infinite;
}

.speed-lane::after{
  content:"";
  position:absolute;
  top:-5px;
  right:2px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 18px 4px var(--lane-color);
}

.speed-lane-one{--lane-color:var(--sport-cyan);--lane-speed:3.8s;--lane-delay:0s;top:26%}
.speed-lane-two{--lane-color:var(--sport-violet);--lane-speed:4.6s;--lane-delay:-1.7s;top:58%;height:3px}
.speed-lane-three{--lane-color:var(--sport-lime);--lane-speed:5.2s;--lane-delay:-3.1s;top:79%;width:36vw}

.energy-ring{
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  border-top-color:var(--ring-color);
  border-right-color:var(--ring-color);
  box-shadow:0 0 20px rgba(117,104,255,.08);
  animation:ringSpin var(--ring-speed) linear infinite;
}

.energy-ring::after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  right:17px;
  top:17px;
  border-radius:50%;
  background:var(--ring-color);
  box-shadow:0 0 13px var(--ring-color);
}

.energy-ring-one{--ring-color:var(--sport-cyan);--ring-speed:7s;right:8%;top:9%}
.energy-ring-two{--ring-color:var(--sport-violet);--ring-speed:9s;left:7%;bottom:8%;width:110px;height:110px;animation-direction:reverse}

.login-box{
  position:relative;
  z-index:2;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(26,29,44,.94),rgba(17,20,33,.96));
  border:1px solid rgba(143,151,183,.22);
  box-shadow:0 28px 70px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.025),0 0 70px rgba(117,104,255,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.login-box::before{
  content:"";
  position:absolute;
  height:2px;
  left:-45%;
  top:0;
  width:42%;
  background:linear-gradient(90deg,transparent,var(--sport-cyan),#fff,transparent);
  box-shadow:0 0 16px rgba(36,216,255,.7);
  animation:boxScan 4.2s ease-in-out infinite;
}

.login-box::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:170px;
  height:170px;
  right:-95px;
  top:-85px;
  border-radius:50%;
  background:rgba(117,104,255,.12);
  filter:blur(8px);
}

.login-logo img{
  position:relative;
  border:1px solid rgba(255,255,255,.1);
  animation:logoPulse 3.4s ease-in-out infinite;
}

.login-logo h1{
  letter-spacing:-.02em;
  text-shadow:0 0 24px rgba(117,104,255,.28);
}

.sport-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:12px;
  padding:5px 9px;
  color:rgba(224,230,255,.62);
  border:1px solid rgba(117,104,255,.25);
  border-radius:999px;
  background:rgba(117,104,255,.07);
  font-family:"IBM Plex Mono",monospace;
  font-size:8px;
  font-weight:500;
  letter-spacing:.12em;
}

.sport-kicker span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--sport-lime);
  box-shadow:0 0 9px var(--sport-lime);
  animation:statusBlink 1.3s ease-in-out infinite;
}

.login-box .form-control{
  transition:border-color .18s,box-shadow .18s,transform .18s;
}

.login-box .form-control:focus{
  border-color:rgba(36,216,255,.6);
  box-shadow:0 0 0 3px rgba(36,216,255,.08),0 8px 24px rgba(0,0,0,.18);
  transform:translateY(-1px);
}

.login-box .btn-primary{
  position:relative;
  overflow:hidden;
  border:0;
  background:linear-gradient(100deg,#625df1,#7b67ff 46%,#397df6);
  box-shadow:0 12px 28px rgba(92,86,238,.3);
}

.login-box .btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.32) 45%,transparent 65%);
  transform:translateX(-130%);
  animation:buttonSweep 3.2s ease-in-out infinite;
}

@keyframes sportAura{to{transform:rotate(360deg)}}
@keyframes gridRush{to{background-position:0 54px,54px 54px}}
@keyframes orbFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(24px,18px,0) scale(1.05)}}
@keyframes speedPass{0%{transform:translateX(0) skewX(-28deg) rotate(-7deg);opacity:0}12%{opacity:.82}58%,100%{transform:translateX(175vw) skewX(-28deg) rotate(-7deg);opacity:0}}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes boxScan{0%,15%{transform:translateX(0);opacity:0}30%{opacity:1}70%{opacity:1}85%,100%{transform:translateX(345%);opacity:0}}
@keyframes logoPulse{0%,100%{transform:translateY(0);box-shadow:0 8px 24px rgba(0,0,0,.4)}50%{transform:translateY(-3px);box-shadow:0 13px 30px rgba(117,104,255,.22)}}
@keyframes statusBlink{0%,100%{opacity:.38;transform:scale(.8)}50%{opacity:1;transform:scale(1.12)}}
@keyframes buttonSweep{0%,48%{transform:translateX(-130%)}75%,100%{transform:translateX(130%)}}

@media(max-width:600px){
  .login-page{align-items:flex-start;padding-top:22px;padding-bottom:22px}
  .login-box{padding:28px 23px;border-radius:20px}
  .energy-ring-one{right:-55px;top:3%}
  .energy-ring-two{left:-52px;bottom:5%}
  .speed-lane{width:70vw}
}

@media(prefers-reduced-motion:reduce){
  .login-page::before,.sport-grid,.sport-orb,.speed-lane,.energy-ring,.login-box::before,.login-logo img,.sport-kicker span,.login-box .btn-primary::after{animation:none!important}
}