/* ============================================================
   Cosmic split login — inspired by a cosmic portfolio login
   ============================================================ */
.login-gate.cosmic-login {
  display: grid;
  place-items: center;
  padding: 24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 16% 0%, rgba(74, 54, 154, .52), transparent 32rem),
    radial-gradient(ellipse at 84% 12%, rgba(24, 122, 126, .38), transparent 30rem),
    radial-gradient(ellipse at 50% 108%, rgba(12, 61, 55, .52), transparent 28rem),
    linear-gradient(160deg, #040512 0%, #081528 46%, #041110 100%) !important;
}
.login-gate.cosmic-login::before {
  content: "";
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: .8;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.9), transparent 2px),
    radial-gradient(1px 1px at 28% 42%, rgba(192,224,255,.8), transparent 2px),
    radial-gradient(1.5px 1.5px at 72% 16%, rgba(255,255,255,.8), transparent 2px),
    radial-gradient(1px 1px at 88% 62%, rgba(210,235,255,.8), transparent 2px),
    radial-gradient(1px 1px at 44% 84%, rgba(255,255,255,.7), transparent 2px),
    radial-gradient(1px 1px at 62% 36%, rgba(255,232,184,.6), transparent 2px);
  background-size: 340px 340px, 420px 420px, 380px 380px, 460px 460px, 300px 300px, 390px 390px;
}
.login-gate.cosmic-login::after {
  content: "";
  position: fixed;
  top: -30vh;
  left: 30%;
  width: 70vw;
  height: 60vh;
  border-radius: 50%;
  background: linear-gradient(100deg, transparent, rgba(94, 197, 173, .1), rgba(159, 117, 222, .1), transparent);
  filter: blur(45px);
  transform: rotate(-22deg);
  pointer-events: none;
}
.has-campus-login .login-gate.cosmic-login { display: none; }

.cosmic-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  width: min(100%, 880px);
  overflow: hidden;
  background: #f8f4e9;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 25px;
  box-shadow: 0 36px 100px rgba(0, 0, 0, .52);
  animation: cosmic-card-in .8s cubic-bezier(.2,.7,.2,1) 1.82s both;
}
@keyframes cosmic-card-in {
  from { opacity: 0; transform: translateY(18px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cosmic-scene {
  position: relative;
  min-height: 558px;
  overflow: hidden;
  padding: 25px 24px;
  color: #f2ecdf;
  background:
    radial-gradient(circle at 74% 14%, rgba(95, 164, 198, .25), transparent 14rem),
    radial-gradient(circle at 22% 76%, rgba(34, 107, 78, .22), transparent 16rem),
    linear-gradient(165deg, #07152e 0%, #092838 52%, #051612 100%);
}
.cosmic-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.9), transparent 2px),
    radial-gradient(1px 1px at 42% 12%, rgba(216,235,255,.7), transparent 2px),
    radial-gradient(1.5px 1.5px at 68% 34%, rgba(255,255,255,.7), transparent 2px),
    radial-gradient(1px 1px at 84% 16%, rgba(216,235,255,.8), transparent 2px),
    radial-gradient(1px 1px at 30% 56%, rgba(255,255,255,.55), transparent 2px);
  background-size: 260px 260px, 320px 320px, 300px 300px, 350px 350px, 280px 280px;
  opacity: .75;
}
.cosmic-scene::after {
  content: "";
  position: absolute;
  left: -15%;
  right: -15%;
  bottom: -22%;
  height: 62%;
  background: radial-gradient(ellipse at 50% 100%, rgba(35, 120, 83, .35), transparent 62%);
  filter: blur(18px);
}
.cosmic-scene-copy { position: relative; z-index: 4; }
.cosmic-scene-kicker {
  margin: 0 0 6px;
  color: rgba(215, 184, 120, .7);
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: .24em;
  line-height: 1.5;
  text-transform: uppercase;
}
.cosmic-scene h1 {
  margin: 0;
  color: #f2ecdf;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(30px, 4vw, 43px);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: .015em;
}
.cosmic-scene h1 em { color: #e8ce97; font-style: normal; }
.cosmic-scene-copy > p:last-child {
  max-width: 18em;
  margin: 12px 0 0;
  color: rgba(206, 222, 211, .65);
  font-size: 9px;
  line-height: 1.8;
}
.cosmic-moon {
  position: absolute;
  top: 34px;
  right: 38px;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff7df, #e5cf9f 58%, #c7a96e);
  box-shadow: 0 0 24px rgba(248, 224, 165, .28), 0 0 70px rgba(248, 224, 165, .13);
}
.cosmic-moon::after {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px solid rgba(242, 222, 170, .12);
}
.cosmic-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cosmic-stars i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #f8edcb;
  opacity: .55;
  animation: cosmic-twinkle 4s ease-in-out infinite;
}
.cosmic-stars i:nth-child(2) { left: 18%; top: 29%; animation-delay: -1.2s; width: 3px; height: 3px; }
.cosmic-stars i:nth-child(3) { left: 63%; top: 18%; animation-delay: -2.3s; }
.cosmic-stars i:nth-child(4) { left: 82%; top: 42%; animation-delay: -.7s; }
.cosmic-stars i:nth-child(5) { left: 36%; top: 47%; animation-delay: -1.8s; }
.cosmic-stars i:nth-child(6) { left: 74%; top: 62%; animation-delay: -3.1s; width: 3px; height: 3px; }
@keyframes cosmic-twinkle {
  0%, 100% { opacity: .22; transform: scale(.8); }
  50% { opacity: .85; transform: scale(1.1); }
}
.cosmic-hills {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  z-index: 2;
  height: 48%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 100%, rgba(20, 80, 57, .8), transparent 48%),
    radial-gradient(ellipse at 76% 100%, rgba(12, 55, 41, .9), transparent 55%),
    linear-gradient(180deg, transparent 20%, rgba(3, 24, 18, .9) 100%);
}
.cosmic-forest { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 45%; pointer-events: none; }
.cosmic-pine {
  position: absolute;
  bottom: 8%;
  width: 0;
  height: 0;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  border-bottom: 100px solid rgba(5, 31, 23, .94);
  filter: drop-shadow(0 0 10px rgba(0,0,0,.25));
}
.cosmic-pine::after {
  content: "";
  position: absolute;
  left: -18px;
  bottom: -100px;
  width: 36px;
  height: 50px;
  background: rgba(5, 31, 23, .94);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cosmic-pine.p1 { left: 4%; transform: scale(.8); }
.cosmic-pine.p2 { left: 17%; transform: scale(1.15); }
.cosmic-pine.p3 { right: 14%; transform: scale(.95); }
.cosmic-pine.p4 { right: 2%; transform: scale(1.3); }
.cosmic-cabin {
  position: absolute;
  right: 17%;
  bottom: 13%;
  z-index: 3;
  width: 104px;
  height: 78px;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.4));
}
.cosmic-cabin .body {
  position: absolute;
  left: 14px;
  bottom: 0;
  width: 76px;
  height: 48px;
  background: linear-gradient(145deg, #4d3825, #2d2015);
  border: 1px solid rgba(228, 204, 159, .1);
}
.cosmic-cabin .roof {
  position: absolute;
  left: 2px;
  bottom: 41px;
  width: 100px;
  height: 30px;
  background: #171814;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cosmic-cabin .window {
  position: absolute;
  left: 26px;
  bottom: 15px;
  width: 22px;
  height: 17px;
  background: #ffc168;
  box-shadow: 0 0 15px rgba(255, 174, 90, .55);
}
.cosmic-cabin .window::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(83, 49, 20, .55);
}
.cosmic-cabin .chimney {
  position: absolute;
  right: 16px;
  bottom: 49px;
  width: 8px;
  height: 21px;
  background: #2a2822;
}
.cosmic-cabin .light {
  position: absolute;
  left: 32px;
  bottom: 6px;
  width: 34px;
  height: 24px;
  background: radial-gradient(ellipse, rgba(255, 177, 94, .22), transparent 70%);
  filter: blur(4px);
}
.cosmic-critters {
  position: absolute;
  left: 24px;
  bottom: 26px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.cosmic-critter {
  position: relative;
  display: block;
  width: 37px;
  height: 46px;
  border-radius: 15px 15px 11px 11px;
  box-shadow: 0 8px 14px rgba(0,0,0,.24);
  animation: cosmic-float 5s ease-in-out infinite;
}
.cosmic-critter::before,
.cosmic-critter::after {
  content: "";
  position: absolute;
  top: 17px;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  background: #171b19;
}
.cosmic-critter::before { left: 10px; }
.cosmic-critter::after { right: 10px; }
.cosmic-critter.c1 { background: linear-gradient(160deg, #f18b63, #c85b3f); transform: rotate(-4deg); }
.cosmic-critter.c2 { width: 31px; height: 39px; background: linear-gradient(160deg, #8e7bd8, #5d4aa4); animation-delay: -1.6s; }
.cosmic-critter.c3 { width: 29px; height: 49px; background: linear-gradient(160deg, #f0c95a, #d4a731); animation-delay: -2.8s; transform: rotate(4deg); }
.cosmic-critter .mouth {
  position: absolute;
  left: 50%;
  top: 27px;
  width: 13px;
  height: 7px;
  border-bottom: 2px solid rgba(22, 24, 20, .7);
  border-radius: 0 0 10px 10px;
  transform: translateX(-50%);
}
@keyframes cosmic-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

.cosmic-panel {
  position: relative;
  z-index: 3;
  padding: 25px 28px 22px;
  color: #1d2b2c;
  background:
    radial-gradient(circle at 100% 0%, rgba(226, 207, 160, .2), transparent 16rem),
    #f8f4e9;
}
.cosmic-brand { display: flex; align-items: center; gap: 9px; }
.cosmic-brand img { width: 31px; height: 31px; object-fit: contain; }
.cosmic-brand span { display: flex; flex-direction: column; min-width: 0; }
.cosmic-brand strong { color: #243535; font-size: 10.5px; font-weight: 700; line-height: 1.3; }
.cosmic-brand small { margin-top: 1px; color: #9b9b89; font-size: 6px; font-weight: 600; letter-spacing: .16em; line-height: 1.3; }
.cosmic-kicker {
  margin: 20px 0 4px;
  color: #a37c3e;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .23em;
  line-height: 1.5;
  text-transform: uppercase;
}
.cosmic-panel h2 {
  margin: 0;
  color: #1b2b2d;
  font-family: var(--serif, Georgia, serif);
  font-size: 31px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
}
.cosmic-lead {
  margin: 5px 0 13px;
  color: #7b837b;
  font-size: 8.5px;
  line-height: 1.7;
}
.cosmic-avatar-picker { display: flex; align-items: center; gap: 11px; }
.cosmic-avatar-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  flex: none;
  overflow: hidden;
  padding: 0;
  color: #f8f4e9;
  background: linear-gradient(145deg, #426e63, #183e35);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 7px 18px rgba(21, 48, 43, .2);
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.cosmic-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cosmic-avatar-preview img[hidden] { display: none !important; }
.cosmic-avatar-preview span[hidden] { display: none !important; }
.cosmic-avatar-side { min-width: 0; flex: 1; }
.cosmic-avatar-title { display: block; margin-bottom: 5px; color: #8b8f82; font-size: 7px; font-weight: 600; letter-spacing: .08em; }
.cosmic-avatar-options { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.cosmic-avatar-option {
  width: 30px;
  height: 30px;
  flex: none;
  overflow: hidden;
  padding: 2px;
  background: #fff;
  border: 1px solid #e4ddcb;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cosmic-avatar-option img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cosmic-avatar-option:hover { transform: translateY(-2px); }
.cosmic-avatar-option.is-selected { border-color: #b58d4d; box-shadow: 0 0 0 2px rgba(181, 141, 77, .22); }
.cosmic-avatar-option.cosmic-avatar-add {
  display: grid;
  place-items: center;
  color: #9b8c6f;
  background: #f5efe2;
  border-style: dashed;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}
.cosmic-upload {
  margin-top: 5px;
  padding: 0;
  color: #a37c3e;
  background: transparent;
  border: 0;
  font-size: 7px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cosmic-profile-name { margin: 9px 0 0; color: #6e7d70; font-size: 8px; line-height: 1.4; }
.cosmic-form { margin-top: 12px; }
.cosmic-field + .cosmic-field { margin-top: 8px; }
.cosmic-field label { display: block; margin-bottom: 4px; color: #667267; font-size: 7.5px; font-weight: 600; }
.cosmic-field input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  color: #213332;
  background: #fffdf7;
  border: 1px solid #ded8c8;
  border-radius: 9px;
  outline: none;
  font: inherit;
  font-size: 10.5px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cosmic-field input::placeholder { color: #b4b2a5; }
.cosmic-field input:focus { border-color: #b58d4d; box-shadow: 0 0 0 3px rgba(181, 141, 77, .1); }
.cosmic-error { margin: 8px 0 0; color: #a34e43; font-size: 8px; line-height: 1.6; }
.cosmic-error[hidden] { display: none !important; }
.cosmic-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 41px;
  margin-top: 11px;
  color: #f8f4e9;
  background: linear-gradient(145deg, #0e3b31, #0a2823);
  border: 1px solid #0b2f28;
  border-radius: 9px;
  box-shadow: 0 8px 20px rgba(10, 43, 35, .2);
  font-size: 9.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cosmic-submit .icon { width: 12px; height: 12px; }
.cosmic-submit:active { transform: translateY(1px); }
.cosmic-note {
  margin: 10px 0 0;
  padding-top: 9px;
  color: #9a9a8c;
  border-top: 1px dashed #e4ddce;
  font-size: 7px;
  line-height: 1.7;
}
.cosmic-visitor {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 0;
  color: #a3a294;
  font-size: 7px;
  line-height: 1.5;
}
.cosmic-visitor .visitor-beacon { background: #b58d4d; box-shadow: 0 0 0 3px rgba(181, 141, 77, .1); }
.cosmic-visitor strong { color: #735a32; font-size: 8.5px; }
.cosmic-footer { margin: 6px 0 0; color: #b3b1a3; font-size: 6.5px; letter-spacing: .04em; line-height: 1.5; }

@media (max-width: 760px) {
  .login-gate.cosmic-login { display: block; padding: 12px max(10px, env(safe-area-inset-right)) 20px max(10px, env(safe-area-inset-left)); }
  .cosmic-card { grid-template-columns: 1fr; width: 100%; border-radius: 21px; }
  .cosmic-scene { min-height: 160px; padding: 16px; }
  .cosmic-scene h1 { font-size: 25px; }
  .cosmic-scene-copy > p:last-child { display: none; }
  .cosmic-scene-kicker { font-size: 6px; margin-bottom: 4px; }
  .cosmic-moon { top: 16px; right: 18px; width: 34px; height: 34px; }
  .cosmic-forest { height: 48%; opacity: .85; }
  .cosmic-pine { border-bottom-width: 72px; border-left-width: 20px; border-right-width: 20px; }
  .cosmic-pine::after { bottom: -72px; height: 36px; }
  .cosmic-cabin { right: 13%; bottom: 15%; transform: scale(.72); transform-origin: bottom right; }
  .cosmic-critters { left: 15px; bottom: 16px; transform: scale(.76); transform-origin: bottom left; }
  .cosmic-panel { padding: 18px 16px 17px; }
  .cosmic-kicker { margin-top: 14px; }
  .cosmic-panel h2 { font-size: 27px; }
  .cosmic-lead { margin-bottom: 10px; }
  .cosmic-avatar-preview { width: 59px; height: 59px; font-size: 19px; }
  .cosmic-avatar-option { width: 27px; height: 27px; }
  .cosmic-avatar-options { gap: 4px; }
  .cosmic-field input { height: 37px; }
  .cosmic-submit { min-height: 40px; }
}
@media (max-width: 360px) {
  .cosmic-scene { min-height: 138px; }
  .cosmic-scene h1 { font-size: 22px; }
  .cosmic-critters { transform: scale(.64); }
  .cosmic-panel { padding-inline: 13px; }
  .cosmic-avatar-preview { width: 54px; height: 54px; }
  .cosmic-avatar-option { width: 25px; height: 25px; }
  .cosmic-avatar-title { font-size: 6.5px; }
  .cosmic-upload { font-size: 6.5px; }
}
/* ---------- 5 秒电影开场：紫夜星火 → 星芒 → 宇宙展开 → 登录卡 ---------- */
.cosmic-rainbow {
  position: fixed;
  left: 50%;
  top: 6%;
  z-index: 1;
  width: 135vmax;
  height: 72vmax;
  border-radius: 50%;
  pointer-events: none;
  background:
    conic-gradient(from 195deg at 50% 50%,
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 99, 154, .12) 42deg,
      rgba(255, 190, 95, .14) 76deg,
      rgba(255, 232, 129, .16) 104deg,
      rgba(91, 235, 194, .15) 138deg,
      rgba(93, 138, 255, .13) 178deg,
      rgba(181, 105, 255, .1) 215deg,
      rgba(255, 255, 255, 0) 270deg);
  filter: blur(30px);
  opacity: 0;
  transform: translateX(-50%) rotate(-7deg);
  animation: cosmic-rainbow-in 3.6s 1.65s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes cosmic-rainbow-in {
  0% { opacity: 0; transform: translateX(-50%) rotate(-7deg) scale(.88); }
  35% { opacity: .5; }
  100% { opacity: .34; transform: translateX(-50%) rotate(-7deg) scale(1); }
}

.login-cinema {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 48%, #32009b 0%, #1b0069 36%, #0b0038 70%, #03000f 100%);
  animation: login-cinema-out 3.15s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes login-cinema-out {
  0%, 64% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
.spark-star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px;
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  background: linear-gradient(135deg, #ffffff, #f4e9ff 55%, #d8c1ff);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.95)) drop-shadow(0 0 24px rgba(185, 135, 255, .7));
  opacity: 0;
  animation: spark-star 2.65s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes spark-star {
  0%, 16% { opacity: 0; transform: scale(.08) rotate(0deg); }
  30% { opacity: .95; transform: scale(.55) rotate(0deg); }
  46% { opacity: 1; transform: scale(1) rotate(0deg); }
  60% { opacity: 1; transform: scale(1.45) rotate(0deg); }
  74% { opacity: 0; transform: scale(2.4) rotate(0deg); }
  100% { opacity: 0; transform: scale(3.6) rotate(0deg); }
}
.login-cinema-stars {
  position: absolute;
  inset: 0;
  opacity: .7;
  background-image:
    radial-gradient(1px 1px at 14% 18%, rgba(255,255,255,.9), transparent 2px),
    radial-gradient(1px 1px at 74% 26%, rgba(211,228,255,.8), transparent 2px),
    radial-gradient(1.5px 1.5px at 38% 64%, rgba(255,255,255,.75), transparent 2px),
    radial-gradient(1px 1px at 88% 74%, rgba(221,236,255,.7), transparent 2px),
    radial-gradient(1px 1px at 56% 12%, rgba(255,255,255,.55), transparent 2px);
  background-size: 260px 260px, 330px 330px, 290px 290px, 370px 370px, 310px 310px;
  animation: login-cinema-stars-in 2.6s ease both;
}
@keyframes login-cinema-stars-in {
  0% { opacity: .08; transform: scale(1.04); }
  40% { opacity: .5; }
  100% { opacity: .8; transform: scale(1); }
}
.login-cinema-nebula {
  position: absolute;
  inset: -8%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 66% 40%, rgba(74, 133, 255, .38), transparent 30rem),
    radial-gradient(ellipse at 32% 58%, rgba(164, 80, 255, .3), transparent 28rem),
    radial-gradient(ellipse at 55% 88%, rgba(36, 155, 133, .22), transparent 32rem);
  filter: blur(26px);
  animation: login-cinema-nebula-in 2.4s 1.1s ease both;
}
@keyframes login-cinema-nebula-in {
  0% { opacity: 0; transform: scale(.82); }
  100% { opacity: .76; transform: scale(1); }
}
.login-cinema-rainbow {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 20%;
  height: 2px;
  border-radius: 50%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 100, 155, .65), rgba(255, 210, 100, .7), rgba(92, 242, 202, .6), rgba(108, 148, 255, .55), transparent);
  box-shadow: 0 0 22px rgba(175, 150, 255, .4);
  transform: rotate(-14deg);
  animation: login-cinema-rainbow-in 2.2s 1.25s ease both;
}
@keyframes login-cinema-rainbow-in {
  0% { opacity: 0; transform: translateY(10px) rotate(-16deg) scaleX(.6); }
  35% { opacity: .72; }
  100% { opacity: .3; transform: translateY(0) rotate(-13deg) scaleX(1); }
}
.login-cinema-spark {
  position: relative;
  z-index: 3;
  width: 1px;
  height: 1px;
}
.spark-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px rgba(255,255,255,.94), 0 0 38px 10px rgba(186, 142, 255, .6);
  animation: spark-core 2.55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes spark-core {
  0% { transform: scale(.15); opacity: 0; }
  12% { opacity: .85; transform: scale(.55); }
  28% { opacity: 1; transform: scale(1); }
  42% { transform: scale(1.25); }
  58% { transform: scale(22); opacity: .9; }
  100% { transform: scale(44); opacity: 0; }
}
.spark-ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 116px;
  margin-left: -.5px;
  transform-origin: 50% 50%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.95) 45%, rgba(190, 154, 255, .8) 52%, transparent);
  filter: drop-shadow(0 0 5px rgba(255,255,255,.7));
  animation: spark-ray 2.4s cubic-bezier(.2,.7,.2,1) both;
}
.spark-ray.r1 { --r: 0deg; }
.spark-ray.r2 { --r: 45deg; }
.spark-ray.r3 { --r: 90deg; }
.spark-ray.r4 { --r: 135deg; }
@keyframes spark-ray {
  0%, 12% { opacity: 0; transform: rotate(var(--r, 0deg)) scale(.2); }
  28% { opacity: .9; transform: rotate(var(--r, 0deg)) scale(1); }
  44% { opacity: 1; transform: rotate(var(--r, 0deg)) scale(3.8); }
  62% { opacity: .4; transform: rotate(var(--r, 0deg)) scale(8); }
  100% { opacity: 0; transform: rotate(var(--r, 0deg)) scale(15); }
}
.spark-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  margin: -19px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.78), rgba(153, 196, 255, .18) 42%, transparent 70%);
  filter: blur(2px);
  animation: spark-flash 2.5s ease both;
}
@keyframes spark-flash {
  0%, 45% { opacity: 0; transform: scale(.3); }
  56% { opacity: .9; transform: scale(1); }
  76% { opacity: .25; transform: scale(6); }
  100% { opacity: 0; transform: scale(16); }
}
.login-cinema-shoot {
  position: absolute;
  left: 62%;
  top: 26%;
  width: 130px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  transform: rotate(-28deg);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.8));
  animation: login-cinema-shoot 1.5s 1.5s ease both;
}
@keyframes login-cinema-shoot {
  0% { opacity: 0; transform: translate(44px, -22px) rotate(-28deg) scaleX(.2); }
  25% { opacity: .85; }
  100% { opacity: 0; transform: translate(-30px, 18px) rotate(-28deg) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-card, .cosmic-critter, .cosmic-stars i { animation: none !important; }
  .cosmic-card { opacity: 1 !important; }
  .login-cinema, .cosmic-rainbow { display: none !important; }
}