/* Login screen: energy beams, pink MGMT letters, and a warp overlay that
   plays while the credentials are being checked. Login page only. */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

.login-shell{position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 110%,#3a0f25 0%,#1a1016 45%,#0d0d10 100%)}

/* --- beams streaking across the background ----------------------------- */
.beams{position:absolute;inset:-40%;transform:rotate(-18deg);pointer-events:none}
.beams i{position:absolute;left:0;top:var(--y);width:var(--w,38vw);height:var(--h,2px);
  border-radius:99px;opacity:0;
  background:linear-gradient(90deg,transparent,#E91E78 35%,#fff 50%,#ff7ab8 65%,transparent);
  filter:drop-shadow(0 0 6px #E91E78) drop-shadow(0 0 18px rgba(233,30,120,.6));
  animation:beam var(--d,4s) cubic-bezier(.3,0,.2,1) var(--t,0s) infinite}
@keyframes beam{
  0%{transform:translate3d(-45vw,0,0) scaleX(.4);opacity:0}
  12%{opacity:1}
  70%{opacity:1}
  100%{transform:translate3d(190vw,0,0) scaleX(1.5);opacity:0}}

/* soft pulsing core behind the card */
.core{position:absolute;left:50%;top:50%;width:min(720px,120vw);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(233,30,120,.38) 0%,rgba(233,30,120,.12) 35%,transparent 65%);
  animation:core 3.6s ease-in-out infinite}
@keyframes core{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.7}
  50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}

/* --- card: an energy arc orbits its border ------------------------------ */
.login-card{position:relative;z-index:2;border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from var(--ang),rgba(233,30,120,.25) 0 62%,#E91E78 78%,#fff 86%,#E91E78 92%,rgba(233,30,120,.25)) border-box;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 44px rgba(233,30,120,.28);
  animation:orbit 3.2s linear infinite,cardin .7s cubic-bezier(.2,.9,.3,1.2) both;
  transition:transform .5s cubic-bezier(.6,0,.8,.2),opacity .45s ease,filter .45s ease}
@keyframes orbit{to{--ang:360deg}}
@keyframes cardin{from{transform:translateY(22px) scale(.96);opacity:0}}

/* --- the letters -------------------------------------------------------- */
.mgmt{display:flex;justify-content:center;gap:.14em;margin:.25em 0 .1em;
  font-size:34px;font-weight:900;letter-spacing:.06em;line-height:1}
.mgmt span{display:inline-block;color:#E91E78;
  animation:rise .7s cubic-bezier(.2,.9,.3,1.4) both,glow 2.6s ease-in-out infinite;
  animation-delay:calc(var(--i)*.09s + .25s),calc(var(--i)*.22s + 1s)}
@keyframes rise{from{transform:translateY(18px) scale(.5) rotate(-12deg);opacity:0;filter:blur(6px)}}
@keyframes glow{
  0%,100%{text-shadow:0 0 0 rgba(233,30,120,0);color:#E91E78}
  50%{text-shadow:0 0 10px rgba(233,30,120,.75),0 0 26px rgba(233,30,120,.45);color:#ff3d94}}

/* --- warp overlay: plays from submit until the next page arrives -------- */
.warp{position:fixed;inset:0;z-index:10;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,#2a0a1b 0%,#0b0b0e 70%);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s .35s}
.go .warp{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s ease}
.go .login-card{transform:scale(.82);opacity:0;filter:blur(6px)}

.rays{position:absolute;left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;
  background:repeating-conic-gradient(from 0deg,transparent 0 5deg,rgba(233,30,120,.55) 5.6deg,
    rgba(255,255,255,.75) 6deg,rgba(233,30,120,.55) 6.4deg,transparent 7deg 14deg);
  -webkit-mask:radial-gradient(circle,transparent 0 9%,#000 26%,transparent 62%);
          mask:radial-gradient(circle,transparent 0 9%,#000 26%,transparent 62%);
  animation-play-state:paused}
.rays.b{background:repeating-conic-gradient(from 3deg,transparent 0 11deg,rgba(255,122,184,.5) 11.5deg,transparent 12.4deg 23deg);
  filter:blur(2px)}
.go .rays{animation:spin 7s linear infinite,surge 1.1s ease-in-out infinite alternate}
.go .rays.b{animation:spin 11s linear infinite reverse,surge 1.6s ease-in-out infinite alternate-reverse}
@keyframes spin{to{rotate:360deg}}
@keyframes surge{from{scale:.82;opacity:.55}to{scale:1.12;opacity:1}}

.ring{position:absolute;width:26vmin;aspect-ratio:1;border-radius:50%;border:2px solid #ff7ab8;opacity:0;
  box-shadow:0 0 24px #E91E78,inset 0 0 24px rgba(233,30,120,.6)}
.go .ring{animation:ring 1.5s cubic-bezier(.2,.6,.3,1) infinite}
.go .ring.r2{animation-delay:.5s}.go .ring.r3{animation-delay:1s}
@keyframes ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(7);opacity:0}}

.word{position:relative;display:flex;gap:.08em;font-weight:900;line-height:1;
  font-size:clamp(64px,19vw,210px);letter-spacing:.02em}
.word span{display:inline-block;color:#E91E78;opacity:0;
  text-shadow:0 0 12px #E91E78,0 0 44px rgba(233,30,120,.8),0 0 90px rgba(233,30,120,.5)}
.go .word span{animation:slam .55s cubic-bezier(.15,.9,.25,1.35) both,charge 1.1s ease-in-out infinite;
  animation-delay:calc(var(--i)*.1s + .12s),calc(var(--i)*.14s + .8s)}
@keyframes slam{from{transform:translateY(.5em) scale(2.6);opacity:0;filter:blur(18px)}
  to{transform:none;opacity:1;filter:blur(0)}}
@keyframes charge{0%,100%{color:#E91E78;transform:translateY(0)}
  50%{color:#ffd1e6;transform:translateY(-.04em)}}
/* a beam sweeps under the word while waiting */
.word::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-.16em;height:.045em;border-radius:99px;
  background:linear-gradient(90deg,transparent,#E91E78 30%,#fff 50%,#E91E78 70%,transparent);
  background-size:45% 100%;background-repeat:no-repeat;background-position:-80% 0;
  filter:drop-shadow(0 0 10px #E91E78)}
.go .word::after{animation:sweep 1s cubic-bezier(.5,0,.5,1) .5s infinite}
@keyframes sweep{to{background-position:180% 0}}

/* --- Hello Kitty mascot -------------------------------------------------- */
.kitty{position:fixed;z-index:3;width:120px;pointer-events:none;
  bottom:-140px;left:-140px;
  animation:kittyIn 1.2s cubic-bezier(.2,.8,.3,1) .6s forwards,
            kittyFloat 3s ease-in-out 1.8s infinite}
@keyframes kittyIn{
  to{bottom:6vh;left:5vw}}
@keyframes kittyFloat{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-14px) rotate(3deg)}}
.go .kitty{animation:kittyOut .7s cubic-bezier(.6,0,.9,.4) forwards;
  bottom:6vh;left:5vw}
@keyframes kittyOut{
  to{bottom:calc(100vh + 20px);left:calc(100vw + 20px);opacity:0;transform:rotate(25deg) scale(.4)}}

@media (prefers-reduced-motion:reduce){
  .beams,.rays,.ring{display:none}
  .core,.login-card,.mgmt span,.go .word span,.go .word::after{animation:none}
  .word span{opacity:1}
  .kitty{display:none}
}