/* ======================================================================
   COBRA XS — Premium Verification Portal v5
   Animated rings, glossy sheen, floating panel, hover micro-interactions
   ====================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,sans-serif;
  color:#e9e3ff;
  background:#080510;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
a{color:inherit;text-decoration:none}

/* ---------- Background layers ---------- */
.bg-layer{
  position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(60% 50% at 25% 25%, rgba(166,77,255,.18), transparent 60%),
    radial-gradient(50% 45% at 80% 75%, rgba(255,77,196,.14), transparent 65%),
    radial-gradient(80% 60% at 50% 100%, rgba(60,30,120,.35), transparent 70%),
    linear-gradient(180deg,#080510 0%,#0c0719 60%,#070310 100%);
}
.grid-layer{
  position:fixed;inset:0;z-index:-2;opacity:.35;
  background-image:
    linear-gradient(rgba(180,120,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,120,255,.05) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  animation:grid-drift 30s linear infinite;
}
@keyframes grid-drift{
  0%{background-position:0 0,0 0}
  100%{background-position:60px 60px,60px 60px}
}
.lightning{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(186,104,255,.08), transparent 25%),
    radial-gradient(circle at 75% 65%, rgba(255,104,200,.06), transparent 28%);
  animation:pulse-glow 8s ease-in-out infinite alternate;
}
@keyframes pulse-glow{
  0%{opacity:.6;transform:scale(1)}
  100%{opacity:1;transform:scale(1.05)}
}

/* ---------- Floating particles ---------- */
.particles{position:fixed;inset:0;z-index:-1;pointer-events:none}
.particle{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,#d6b4ff,transparent);
  opacity:.7;animation:float-up linear infinite;
}
@keyframes float-up{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.8}
  90%{opacity:.6}
  100%{transform:translateY(-110vh) translateX(40px);opacity:0}
}

/* ---------- Cursor glow ---------- */
.cursor-glow{
  position:fixed;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle, rgba(190,110,255,.16), rgba(190,110,255,.05) 40%, transparent 70%);
  pointer-events:none;z-index:0;transform:translate(-50%,-50%);
  transition:opacity .3s ease;mix-blend-mode:screen;
}

/* ---------- Stage ---------- */
.stage{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:48px 20px 96px;gap:36px;
}

/* ---------- Stepper ---------- */
.stepper{
  display:flex;align-items:center;gap:14px;
  margin-bottom:8px;
  animation:fade-down .8s ease both;
}
@keyframes fade-down{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.s-item{display:flex;flex-direction:column;align-items:center;gap:8px}
.s-circle{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(40,20,70,.6);
  border:1.5px solid rgba(160,100,230,.35);
  font-size:14px;font-weight:600;color:#a892d4;
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  position:relative;
}
.s-item.active .s-circle{
  background:radial-gradient(circle,#c977ff 0%,#7b3fe4 70%);
  border-color:#d99dff;color:#fff;
  box-shadow:0 0 0 6px rgba(190,110,255,.18),0 0 24px rgba(190,110,255,.5);
  animation:pulse-active 2s ease-in-out infinite;
}
.s-item.done .s-circle{
  background:linear-gradient(135deg,#9b5cff,#d275ff);
  border-color:#e0b3ff;color:#fff;
  box-shadow:0 0 18px rgba(190,110,255,.45);
}
.s-item.error .s-circle{
  background:linear-gradient(135deg,#ff4060,#ff5c7a);
  border-color:#ff8aa3;color:#fff;
  box-shadow:0 0 18px rgba(255,80,110,.55);
}
@keyframes pulse-active{
  0%,100%{box-shadow:0 0 0 6px rgba(190,110,255,.18),0 0 24px rgba(190,110,255,.5)}
  50%{box-shadow:0 0 0 10px rgba(190,110,255,.05),0 0 36px rgba(190,110,255,.7)}
}
.s-label{
  font-size:10px;font-weight:600;letter-spacing:3px;
  color:#7e6c9e;text-transform:uppercase;
}
.s-item.active .s-label,.s-item.done .s-label{color:#e0c8ff}
.s-line{
  width:80px;height:2px;background:rgba(160,100,230,.18);
  position:relative;overflow:hidden;border-radius:2px;
}
.s-line.fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#9b5cff,#d275ff);
  animation:line-fill .8s ease forwards;
}
@keyframes line-fill{from{transform:translateX(-100%)}to{transform:translateX(0)}}

/* ---------- Panel (floating, glassy) ---------- */
.panel{
  position:relative;width:100%;max-width:440px;
  padding:44px 38px 36px;
  background:linear-gradient(180deg, rgba(28,15,50,.78) 0%, rgba(20,10,38,.85) 100%);
  border:1px solid rgba(170,110,240,.22);
  border-radius:22px;
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 1px 0 rgba(255,255,255,.06) inset;
  text-align:center;
  animation:panel-in .9s cubic-bezier(.2,.8,.2,1) both, float-y 6s ease-in-out 1s infinite;
  overflow:hidden;
}
@keyframes panel-in{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* glossy diagonal sheen sweep */
.panel::before{
  content:'';position:absolute;top:-150%;left:-50%;
  width:60%;height:300%;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, rgba(220,170,255,.18) 50%, rgba(255,255,255,.07) 55%, transparent 70%);
  transform:rotate(20deg);
  animation:sheen 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sheen{
  0%{left:-80%}
  60%{left:140%}
  100%{left:140%}
}

/* glow border highlight on hover */
.panel::after{
  content:'';position:absolute;inset:-1px;border-radius:22px;
  padding:1px;
  background:linear-gradient(135deg, rgba(186,104,255,.5), rgba(255,104,200,.3) 40%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.4;transition:opacity .5s ease;pointer-events:none;
}
.panel:hover::after{opacity:1}

/* ---------- Logo with rotating rings ---------- */
.logo-ring{
  position:relative;width:140px;height:140px;margin:0 auto 26px;
  display:flex;align-items:center;justify-content:center;
}
.ring{
  position:absolute;border-radius:50%;
  pointer-events:none;
}
.ring-outer{
  inset:-8px;
  border:1.5px dashed rgba(190,110,255,.55);
  animation:spin-cw 14s linear infinite;
  box-shadow:0 0 30px rgba(190,110,255,.2);
}
.ring-mid{
  inset:6px;
  border:1px solid transparent;
  background:conic-gradient(from 0deg, rgba(190,110,255,.7), rgba(255,110,200,.6), rgba(120,80,255,.7), rgba(190,110,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1px;
  animation:spin-ccw 9s linear infinite;
  filter:drop-shadow(0 0 8px rgba(190,110,255,.5));
}
.ring-inner{
  inset:18px;
  border:1px solid rgba(220,170,255,.35);
  animation:spin-cw 6s linear infinite, ring-pulse 3s ease-in-out infinite;
}
.ring-dot{
  position:absolute;inset:-8px;
  animation:spin-cw 14s linear infinite;
  pointer-events:none;
}
.ring-dot::before,.ring-dot::after{
  content:'';position:absolute;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle,#fff,#d99dff 40%,transparent 70%);
  box-shadow:0 0 14px rgba(220,170,255,.9);
  top:-5px;left:50%;transform:translateX(-50%);
}
.ring-dot::after{top:auto;bottom:-5px;background:radial-gradient(circle,#fff,#ff9dd9 40%,transparent 70%);box-shadow:0 0 14px rgba(255,170,220,.9)}

@keyframes spin-cw{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes spin-ccw{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@keyframes ring-pulse{0%,100%{opacity:.4}50%{opacity:1}}

.logo{
  width:96px;height:96px;border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 30px rgba(190,110,255,.6),0 0 0 2px rgba(220,170,255,.3);
  background:#1a0d2e;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.logo-ring:hover .logo{transform:scale(1.05)}
.logo-ring:hover .ring-outer{animation-duration:6s}
.logo-ring:hover .ring-mid{animation-duration:4s}

/* ---------- Typography ---------- */
.brand{
  font-family:'Cinzel',serif;
  font-size:32px;font-weight:700;letter-spacing:8px;
  background:linear-gradient(180deg,#fff 0%,#d99dff 70%,#a36bff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(190,110,255,.4);
  margin-bottom:8px;
  animation:brand-glow 3s ease-in-out infinite alternate;
}
@keyframes brand-glow{
  0%{filter:drop-shadow(0 0 6px rgba(190,110,255,.3))}
  100%{filter:drop-shadow(0 0 16px rgba(190,110,255,.7))}
}
.tagline{
  font-size:11px;font-weight:600;letter-spacing:5px;
  color:#9b87c4;text-transform:uppercase;margin-bottom:22px;
}
.copy{
  font-size:14px;line-height:1.65;color:#bcaad6;
  margin-bottom:28px;padding:0 4px;
}

/* ---------- Checklist ---------- */
.checklist{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.check-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;border-radius:12px;
  background:rgba(40,22,70,.4);
  border:1px solid rgba(160,100,230,.15);
  font-size:13.5px;color:#a89bc8;
  transition:all .3s ease;
}
.check-item:hover{
  background:rgba(60,32,100,.5);
  border-color:rgba(190,110,255,.35);
  transform:translateX(4px);
}
.check-item.active{
  background:linear-gradient(90deg,rgba(123,63,228,.25),rgba(190,110,255,.1));
  border-color:rgba(190,110,255,.5);
  color:#f0e4ff;
  box-shadow:0 0 20px rgba(190,110,255,.15) inset;
}
.check-item.done{
  background:rgba(80,40,140,.25);
  border-color:rgba(190,110,255,.3);
  color:#d4c2f0;
}
.check-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:rgba(50,28,90,.8);color:#b598df;
  font-size:11px;font-weight:700;flex-shrink:0;
  border:1px solid rgba(160,100,230,.3);
  transition:all .3s ease;
}
.check-item.active .check-num{
  background:radial-gradient(circle,#d275ff,#7b3fe4);
  color:#fff;border-color:#e0b3ff;
  box-shadow:0 0 12px rgba(190,110,255,.6);
}
.check-item.done .check-num{
  background:linear-gradient(135deg,#9b5cff,#d275ff);
  color:#fff;border-color:#e0b3ff;
}
.check-spinner{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  border:2px solid rgba(190,110,255,.25);
  border-top-color:#d99dff;
  animation:spin-cw .9s linear infinite;
}

/* ---------- CTA Button ---------- */
.cta{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:16px 24px;
  background:linear-gradient(135deg,#5865F2 0%,#7b3fe4 50%,#c977ff 100%);
  background-size:200% 100%;
  border-radius:14px;border:none;cursor:pointer;
  color:#fff;font-size:15px;font-weight:700;letter-spacing:.4px;
  box-shadow:
    0 14px 32px rgba(123,63,228,.45),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 1px 0 rgba(255,255,255,.18) inset;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, background-position .6s ease;
  animation:cta-bg 4s ease-in-out infinite alternate;
}
@keyframes cta-bg{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.cta:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(190,110,255,.55),
    0 0 0 1px rgba(255,255,255,.15) inset,
    0 1px 0 rgba(255,255,255,.25) inset;
}
.cta:active{transform:translateY(0) scale(.99)}
.cta-glow{
  position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:skewX(-20deg);
  animation:cta-sheen 3.5s ease-in-out infinite;
}
@keyframes cta-sheen{
  0%{left:-100%}50%{left:140%}100%{left:140%}
}

/* ---------- Meta footer ---------- */
.meta{
  display:flex;justify-content:center;gap:22px;margin-top:22px;
  font-size:11px;color:#8576a8;letter-spacing:.5px;
}
.meta-item{display:inline-flex;align-items:center;gap:6px;transition:color .3s ease}
.meta-item:hover{color:#d99dff}
.meta-item svg{opacity:.7}

/* ---------- Verifying / Done states ---------- */
.status-icon{
  width:88px;height:88px;border-radius:50%;
  margin:0 auto 22px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle, rgba(190,110,255,.3), transparent 70%);
  color:#d99dff;
  animation:status-pulse 2s ease-in-out infinite;
}
.status-icon.loading svg{animation:spin-cw 1.4s linear infinite}
@keyframes status-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(190,110,255,.3)}
  50%{box-shadow:0 0 0 18px rgba(190,110,255,0)}
}

.avatar-wrap{
  position:relative;width:120px;height:120px;margin:0 auto 18px;
  animation:scale-in .5s cubic-bezier(.2,.8,.2,1) both;
}
.avatar-wrap::before{
  content:'';position:absolute;inset:-10px;border-radius:50%;
  background:conic-gradient(from 0deg, #c977ff, #ff77d2, #7b3fe4, #c977ff);
  filter:blur(12px);opacity:.6;
  animation:spin-cw 5s linear infinite;
}
.avatar-img{
  position:relative;width:120px;height:120px;border-radius:50%;
  border:3px solid rgba(220,170,255,.6);
  box-shadow:0 0 30px rgba(190,110,255,.5);
  background:#1a0d2e;
  object-fit:cover;
}
@keyframes scale-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.verified-badge{
  position:absolute;bottom:4px;right:4px;
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#22c97e,#0fa563);
  color:#fff;display:flex;align-items:center;justify-content:center;
  border:3px solid #14082a;
  box-shadow:0 4px 14px rgba(34,201,126,.55);
  animation:badge-pop .5s cubic-bezier(.34,1.56,.64,1) .25s both;
}
@keyframes badge-pop{from{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0)}}
.verified-tag{
  display:inline-block;padding:5px 14px;border-radius:999px;
  background:linear-gradient(135deg,rgba(34,201,126,.2),rgba(34,201,126,.08));
  border:1px solid rgba(34,201,126,.5);
  color:#5be3a4;font-size:10px;font-weight:700;letter-spacing:3px;
  margin-bottom:14px;
}
.status-title{
  font-family:'Cinzel',serif;font-size:24px;font-weight:700;letter-spacing:3px;
  color:#fff;margin-bottom:8px;
}
.status-title.success{
  background:linear-gradient(180deg,#fff,#5be3a4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.status-title.error{color:#ff8aa3}
.status-username{color:#a89bc8;font-size:14px;margin-bottom:22px}
.status-msg{color:#bcaad6;font-size:14px;line-height:1.6;margin-bottom:22px}
.error-code{
  display:inline-block;padding:4px 12px;border-radius:6px;
  background:rgba(255,80,120,.12);border:1px solid rgba(255,80,120,.4);
  color:#ff9aae;font-size:10px;letter-spacing:2px;font-weight:600;margin-bottom:14px;
}
.success-card{
  padding:14px 16px;border-radius:12px;
  background:linear-gradient(135deg,rgba(34,201,126,.12),rgba(123,63,228,.1));
  border:1px solid rgba(34,201,126,.3);
  color:#cfe7d8;font-size:13.5px;line-height:1.6;margin-bottom:22px;
}
.btn-discord{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:14px 20px;border-radius:12px;
  background:linear-gradient(135deg,#5865F2,#7b3fe4);
  color:#fff;font-weight:700;font-size:14px;letter-spacing:.5px;
  box-shadow:0 10px 24px rgba(88,101,242,.45);
  transition:transform .25s ease,box-shadow .25s ease;
}
.btn-discord:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(190,110,255,.5)}
.btn-secondary{
  display:inline-block;padding:12px 28px;border-radius:10px;
  background:rgba(60,32,100,.5);border:1px solid rgba(190,110,255,.4);
  color:#e0c8ff;font-size:12px;font-weight:700;letter-spacing:2px;
  transition:all .25s ease;
}
.btn-secondary:hover{background:rgba(123,63,228,.4);transform:translateY(-2px)}

/* ---------- Legal footer ---------- */
.legal{
  position:relative;z-index:2;text-align:center;
  font-size:11px;color:#6b5b8a;letter-spacing:1px;
  padding:18px 12px 28px;
}
.legal a{color:#a892d4;transition:color .3s ease}
.legal a:hover{color:#d99dff}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Mobile ---------- */
@media (max-width:520px){
  .panel{padding:34px 22px 28px;border-radius:18px}
  .brand{font-size:26px;letter-spacing:6px}
  .logo-ring{width:120px;height:120px}
  .logo{width:80px;height:80px}
  .s-line{width:46px}
  .stepper{gap:8px}
  .s-circle{width:36px;height:36px;font-size:13px}
  .s-label{font-size:9px;letter-spacing:2px}
}