/* =================================================
   GOD MODE NEON LOGIN UI
   Eye-Burning • Alive • Legendary
================================================= */

:root{
  --neon1:#00f7ff;
  --neon2:#ff2aff;
  --neon3:#00ff9c;
  --neon4:#ffd84d;
}

/* ================= COSMIC BACKGROUND ================= */

#intro_top{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background:#000;
}

/* 🌌 COSMIC AURORA */
#intro_top::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    conic-gradient(from 0deg,
      rgba(0,247,255,.25),
      rgba(255,42,255,.25),
      rgba(0,255,156,.25),
      rgba(255,216,77,.25),
      rgba(0,247,255,.25)
    );
  filter:blur(140px);
  animation:cosmicSpin 35s linear infinite;
  z-index:0;
}

@keyframes cosmicSpin{
  to{transform:rotate(360deg);}
}

/* ✨ STAR ENERGY PARTICLES */
#intro_top::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(2px 2px at 10% 20%, var(--neon1), transparent),
    radial-gradient(2px 2px at 80% 30%, var(--neon2), transparent),
    radial-gradient(2px 2px at 60% 70%, var(--neon3), transparent),
    radial-gradient(1.5px 1.5px at 30% 80%, var(--neon4), transparent),
    radial-gradient(1px 1px at 50% 50%, #fff, transparent);
  animation:starsRise 18s linear infinite;
  z-index:0;
}

@keyframes starsRise{
  from{transform:translateY(0);}
  to{transform:translateY(-200px);}
}

/* ================= SIDE TEXT – EYE BLINDING ================= */

.neon_side{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:22px;
  font-size:30px;
  font-weight:900;
  letter-spacing:6px;
  z-index:1;
  animation:sideLevitate 10s ease-in-out infinite;
}

.neon_left{left:30px;}
.neon_right{right:30px;text-align:right;}

.neon_side span{
  animation:textInferno 5s infinite;
  text-shadow:
    0 0 12px currentColor,
    0 0 30px currentColor,
    0 0 60px currentColor,
    0 0 120px currentColor;
}

.neon_side span:nth-child(1){animation-delay:0s;}
.neon_side span:nth-child(2){animation-delay:1.2s;}
.neon_side span:nth-child(3){animation-delay:2.4s;}
.neon_side span:nth-child(4){animation-delay:3.6s;}

@keyframes textInferno{
  0%{color:var(--neon1);}
  25%{color:var(--neon2);}
  50%{color:var(--neon3);}
  75%{color:var(--neon4);}
  100%{color:var(--neon1);}
}

@keyframes sideLevitate{
  0%,100%{transform:translateY(-50%) translateX(0);}
  50%{transform:translateY(-65%) translateX(20px);}
}

/* ================= LOGIN CARD – CORE ================= */

#login_all{
  position:relative;
  z-index:2;
  width:440px;
  max-width:92%;
  padding:44px;
  text-align:center;
  border-radius:34px;
  background:rgba(5,5,5,.65);
  backdrop-filter:blur(30px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 120px rgba(0,247,255,.45),
    0 100px 200px rgba(0,0,0,1);
  animation:cardAscend 1.8s cubic-bezier(.22,1,.36,1);
}

/* 🔮 ORBITING ENERGY HALO */
#login_all::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  background:conic-gradient(
    var(--neon1),
    var(--neon2),
    var(--neon3),
    var(--neon4),
    var(--neon1)
  );
  filter:blur(28px);
  opacity:.45;
  animation:haloSpin 8s linear infinite;
  z-index:-1;
}

@keyframes haloSpin{
  to{transform:rotate(360deg);}
}

@keyframes cardAscend{
  from{opacity:0;transform:scale(.65) rotateX(45deg);}
  to{opacity:1;transform:none;}
}

#login_all:hover{
  transform:translateY(-12px) scale(1.05);
}

/* ================= LOGO – DIVINE FLOAT ================= */

#login_logo{
  animation:logoGod 6s ease-in-out infinite;
  filter:
    drop-shadow(0 0 25px var(--neon1))
    drop-shadow(0 0 60px var(--neon2));
}

@keyframes logoGod{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-20px) scale(1.08);}
}

/* ================= CENTER TEXT – EYE MELTING ================= */

.neon_title{
  font-size:28px;
  font-weight:900;
  animation:titleBlaze 4s infinite alternate;
  text-shadow:
    0 0 20px var(--neon1),
    0 0 50px var(--neon2),
    0 0 100px var(--neon3);
}

@keyframes titleBlaze{
  from{filter:brightness(1);}
  to{filter:brightness(1.6);}
}

.neon_sub{
  opacity:.9;
  text-shadow:
    0 0 12px rgba(255,255,255,.6),
    0 0 30px var(--neon1);
}

/* ================= BUTTONS – GOD ENERGY ================= */

.login_actions{margin-top:30px;}

.fx_btn{
  position:relative;
  width:100%;
  margin:20px 0;
  padding:20px;
  font-size:16px;
  font-weight:800;
  letter-spacing:3px;
  background:rgba(255,255,255,.05);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  cursor:pointer;
  overflow:hidden;
  backdrop-filter:blur(16px);
  transition:all .5s cubic-bezier(.22,1,.36,1);
  animation:btnGodPulse 3.5s infinite;
}

@keyframes btnGodPulse{
  0%,100%{box-shadow:0 0 25px var(--neon1);}
  50%{box-shadow:0 0 80px var(--neon2);}
}

/* ⚡ ENERGY SCAN */
.fx_btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
  );
  transform:translateX(-120%);
  animation:energyScan 2.8s infinite;
}

@keyframes energyScan{
  to{transform:translateX(120%);}
}

/* Borders */
.fx_btn span{
  position:absolute;
  background:linear-gradient(90deg,transparent,var(--neon1));
}

.fx_btn span:nth-child(1){top:0;left:-100%;width:100%;height:2px;animation:line1 3.5s infinite;}
.fx_btn span:nth-child(2){right:0;top:-100%;width:2px;height:100%;animation:line2 3.5s infinite;}
.fx_btn span:nth-child(3){bottom:0;right:-100%;width:100%;height:2px;animation:line3 3.5s infinite;}
.fx_btn span:nth-child(4){left:0;bottom:-100%;width:2px;height:100%;animation:line4 3.5s infinite;}

@keyframes line1{to{left:100%;}}
@keyframes line2{to{top:100%;}}
@keyframes line3{to{right:100%;}}
@keyframes line4{to{bottom:100%;}}

.fx_btn:hover{
  transform:translateY(-8px) scale(1.08);
  letter-spacing:5px;
}

.fx_btn.clicked{
  background:linear-gradient(135deg,var(--neon1),var(--neon3));
  color:#000;
  transform:scale(.9);
  box-shadow:0 0 120px var(--neon3);
}

/* ================= REGISTER ================= */

.neon_link{
  cursor:pointer;
  font-weight:800;
  animation:textInferno 4s infinite;
}

/* ================= LANGUAGE ================= */

#intro_lang{
  position:absolute;
  top:20px;
  right:20px;
  animation:logoGod 6s infinite;
}

/* ================= MOBILE ================= */

@media(max-width:600px){
  .neon_side{display:none;}
  #login_all{padding:32px;}
}