/* =========================
   Auth pages (login / register / forgot / reset)
   Left info panel + Right form panel layout
   ========================= */

:root {
  --auth-orb-1: rgba(59, 130, 246, .22);
  --auth-orb-2: rgba(124, 58, 237, .16);
}

body.auth-page {
  background:
    radial-gradient(circle at 20% 30%, var(--auth-orb-1), transparent 38%),
    radial-gradient(circle at 80% 70%, var(--auth-orb-2), transparent 38%),
    #f1f5f9;
  background-size: 200% 200%;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', sans-serif;
  color: #334155;
  animation: auth-bg-shift 18s ease infinite;
}

.auth-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 1rem;
}

.auth-section::before,
.auth-section::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
  animation: auth-orb-float 14s ease-in-out infinite;
}

.auth-section::before {
  width: 22rem;
  height: 22rem;
  top: 8%;
  right: 6%;
  background: var(--auth-orb-1);
}

.auth-section::after {
  width: 18rem;
  height: 18rem;
  bottom: 8%;
  left: 4%;
  background: var(--auth-orb-2);
  animation-delay: -7s;
}

.auth-section .container {
  position: relative;
  z-index: 1;
}

/* Card layout */
.auth-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .12);
  background: #fff;
  display: flex;
  flex-direction: column;
  animation: auth-pop .7s cubic-bezier(.2,.9,.2,1) both;
  transition: transform .4s cubic-bezier(.2,.9,.2,1), box-shadow .4s cubic-bezier(.2,.9,.2,1);
}

.auth-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 35px 100px rgba(0, 0, 0, .16);
}

/* Left info panel */
.auth-info-panel {
  position: relative;
  width: 100%;
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
  color: #e2e8f0;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  flex-shrink: 0;
}

.auth-info-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(99, 102, 241, .22), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(56, 189, 248, .16), transparent 40%),
    radial-gradient(circle at 60% 15%, rgba(139, 92, 246, .13), transparent 38%),
    radial-gradient(circle at 15% 85%, rgba(59, 130, 246, .10), transparent 35%);
  pointer-events: none;
}

/* Starry sky on left panel */
.auth-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.auth-stars span {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    313px 33px rgba(255,255,255,0.72),
    91px 407px rgba(255,255,255,0.45),
    11px 224px rgba(255,255,255,0.36),
    34px 109px rgba(255,255,255,0.49),
    90px 376px rgba(255,255,255,0.80),
    78px 214px rgba(255,255,255,0.82),
    104px 179px rgba(255,255,255,0.26),
    279px 564px rgba(255,255,255,0.78),
    250px 66px rgba(255,255,255,0.44),
    194px 13px rgba(255,255,255,0.69),
    323px 120px rgba(255,255,255,0.88),
    2px 169px rgba(255,255,255,0.49),
    173px 502px rgba(255,255,255,0.88),
    248px 296px rgba(255,255,255,0.63),
    232px 361px rgba(255,255,255,0.71),
    23px 490px rgba(255,255,255,0.70),
    227px 51px rgba(255,255,255,0.65),
    3px 593px rgba(255,255,255,0.40),
    13px 54px rgba(255,255,255,0.77),
    101px 188px rgba(255,255,255,0.42),
    156px 99px rgba(255,255,255,0.31),
    326px 421px rgba(255,255,255,0.44),
    339px 347px rgba(255,255,255,0.77),
    322px 576px 1px rgba(255,255,255,0.78),
    45px 497px rgba(255,255,255,0.53),
    297px 594px rgba(255,255,255,0.84),
    190px 93px rgba(255,255,255,0.78),
    213px 543px rgba(255,255,255,0.79),
    310px 63px rgba(255,255,255,0.42),
    64px 561px rgba(255,255,255,0.84),
    336px 375px rgba(255,255,255,0.53),
    208px 423px 1px rgba(255,255,255,0.62),
    170px 519px rgba(255,255,255,0.78),
    157px 358px 1px rgba(255,255,255,0.60),
    279px 188px 1px rgba(255,255,255,0.87),
    242px 474px rgba(255,255,255,0.67),
    21px 8px rgba(255,255,255,0.70),
    104px 397px rgba(255,255,255,0.53),
    95px 439px rgba(255,255,255,0.63),
    264px 130px rgba(255,255,255,0.39),
    89px 24px rgba(255,255,255,0.30),
    228px 24px rgba(255,255,255,0.65),
    74px 244px rgba(255,255,255,0.68),
    32px 429px rgba(255,255,255,0.82),
    320px 356px rgba(255,255,255,0.42),
    225px 58px 1px rgba(255,255,255,0.27),
    128px 260px rgba(255,255,255,0.31),
    248px 447px 1px rgba(255,255,255,0.63),
    248px 188px rgba(255,255,255,0.39),
    104px 231px 1px rgba(255,255,255,0.56),
    150px 116px rgba(255,255,255,0.39),
    155px 448px rgba(255,255,255,0.36),
    99px 313px rgba(255,255,255,0.33),
    186px 561px rgba(255,255,255,0.45),
    131px 582px rgba(255,255,255,0.84),
    287px 472px rgba(255,255,255,0.71),
    280px 273px 1px rgba(255,255,255,0.26),
    30px 372px 1px rgba(255,255,255,0.71),
    289px 535px rgba(255,255,255,0.40),
    277px 199px 1px rgba(255,255,255,0.51),
    238px 101px rgba(255,255,255,0.50),
    299px 6px rgba(255,255,255,0.31),
    152px 133px 1px rgba(255,255,255,0.47),
    173px 442px 1px rgba(255,255,255,0.78),
    298px 89px rgba(255,255,255,0.50),
    23px 185px rgba(255,255,255,0.40),
    190px 163px rgba(255,255,255,0.40),
    312px 224px rgba(255,255,255,0.55),
    226px 423px rgba(255,255,255,0.57),
    43px 226px rgba(255,255,255,0.30);
  animation: auth-twinkle 4s ease-in-out infinite alternate;
}

.auth-stars span:nth-child(2) {
  width: 2px;
  height: 2px;
  box-shadow:
    16px 392px rgba(255,255,255,0.35),
    26px 438px 1px rgba(255,255,255,0.35),
    203px 89px rgba(255,255,255,0.19),
    260px 16px rgba(255,255,255,0.57),
    35px 507px rgba(255,255,255,0.16),
    286px 117px 1px rgba(255,255,255,0.58),
    105px 588px rgba(255,255,255,0.34),
    144px 11px rgba(255,255,255,0.44),
    295px 337px rgba(255,255,255,0.59),
    122px 325px rgba(255,255,255,0.40),
    210px 141px rgba(255,255,255,0.46),
    14px 198px rgba(255,255,255,0.36),
    279px 457px rgba(255,255,255,0.25),
    270px 97px rgba(255,255,255,0.55),
    22px 272px rgba(255,255,255,0.18),
    50px 240px rgba(255,255,255,0.57),
    209px 465px rgba(255,255,255,0.40),
    246px 66px rgba(255,255,255,0.35),
    216px 389px 1px rgba(255,255,255,0.50),
    257px 374px rgba(255,255,255,0.45),
    145px 533px rgba(255,255,255,0.31),
    189px 468px rgba(255,255,255,0.33),
    167px 248px rgba(255,255,255,0.27),
    202px 138px rgba(255,255,255,0.22),
    108px 45px rgba(255,255,255,0.17),
    160px 429px rgba(255,255,255,0.39),
    122px 122px 1px rgba(255,255,255,0.20),
    165px 537px rgba(255,255,255,0.15),
    15px 598px rgba(255,255,255,0.48),
    71px 414px rgba(255,255,255,0.24),
    337px 307px rgba(255,255,255,0.25),
    155px 378px rgba(255,255,255,0.45),
    64px 431px rgba(255,255,255,0.22),
    88px 210px rgba(255,255,255,0.38),
    73px 501px 1px rgba(255,255,255,0.22),
    221px 194px rgba(255,255,255,0.38),
    157px 239px rgba(255,255,255,0.41),
    57px 519px rgba(255,255,255,0.49),
    239px 279px rgba(255,255,255,0.28),
    50px 532px rgba(255,255,255,0.57),
    54px 14px rgba(255,255,255,0.15),
    154px 225px rgba(255,255,255,0.40),
    299px 120px rgba(255,255,255,0.45),
    18px 30px rgba(255,255,255,0.32),
    61px 285px rgba(255,255,255,0.21),
    339px 422px rgba(255,255,255,0.23),
    274px 234px rgba(255,255,255,0.46),
    163px 378px rgba(255,255,255,0.49),
    65px 91px rgba(255,255,255,0.55),
    124px 266px rgba(255,255,255,0.22);
  animation-duration: 6s;
  animation-delay: 1s;
}

.auth-stars span:nth-child(3) {
  width: 1px;
  height: 1px;
  opacity: .75;
  box-shadow:
    128px 483px rgba(255,255,255,0.35),
    401px 459px rgba(255,255,255,0.29),
    333px 609px rgba(255,255,255,0.30),
    295px 46px rgba(255,255,255,0.13),
    137px 42px rgba(255,255,255,0.30),
    91px 312px rgba(255,255,255,0.38),
    154px 468px 1px rgba(255,255,255,0.38),
    182px 579px rgba(255,255,255,0.22),
    23px 342px rgba(255,255,255,0.29),
    108px 436px rgba(255,255,255,0.32),
    399px 421px rgba(255,255,255,0.27),
    274px 221px rgba(255,255,255,0.35),
    397px 459px rgba(255,255,255,0.33),
    293px 404px rgba(255,255,255,0.23),
    67px 560px 1px rgba(255,255,255,0.17),
    220px 541px rgba(255,255,255,0.29),
    212px 42px 1px rgba(255,255,255,0.11),
    315px 70px rgba(255,255,255,0.39),
    230px 321px rgba(255,255,255,0.35),
    158px 339px rgba(255,255,255,0.12),
    363px 575px 1px rgba(255,255,255,0.34),
    417px 276px rgba(255,255,255,0.24),
    282px 113px rgba(255,255,255,0.24),
    217px 520px rgba(255,255,255,0.29),
    316px 324px rgba(255,255,255,0.11);
  animation-duration: 5s;
  animation-delay: 2.5s;
}

/* Shooting stars */
.auth-stars::after,
.auth-stars span:nth-child(2)::before,
.auth-stars span:nth-child(3)::before {
  content: '';
  position: absolute;
  width: 160px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), rgba(255,255,255,.25), transparent);
  filter: drop-shadow(0 0 8px rgba(255,255,255,.7));
  opacity: 0;
  transform: rotate(-45deg);
  pointer-events: none;
}

.auth-stars::after {
  top: 0;
  left: -120px;
  animation: auth-shooting-star 8s linear infinite;
}

.auth-stars span:nth-child(2)::before {
  top: -20px;
  right: 60px;
  width: 120px;
  background: linear-gradient(90deg, transparent, rgba(165, 180, 252, .8), transparent);
  filter: drop-shadow(0 0 6px rgba(165, 180, 252, .6));
  animation: auth-shooting-star-2 13s linear infinite;
  animation-delay: 4s;
}

.auth-stars span:nth-child(3)::before {
  top: 90px;
  left: -90px;
  width: 140px;
  background: linear-gradient(90deg, transparent, rgba(192, 219, 255, .8), transparent);
  filter: drop-shadow(0 0 7px rgba(192, 219, 255, .6));
  animation: auth-shooting-star-3 16s linear infinite;
  animation-delay: 10s;
}

.auth-info-brand {
  position: relative;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  z-index: 1;
  animation: auth-fade-in .6s ease .2s both;
}

.auth-info-content {
  position: relative;
  text-align: center;
  z-index: 1;
  margin: 2rem 0;
}

.auth-info-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  animation: auth-scale-in .7s cubic-bezier(.34,1.56,.64,1) .35s both;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}

.auth-info-logo:hover {
  transform: scale(1.1) rotate(6deg);
  box-shadow: 0 0 30px rgba(255, 255, 255, .15);
}

.auth-info-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: .5rem;
  animation: auth-fade-up .6s ease .45s both;
}

.auth-info-desc {
  font-size: .9375rem;
  color: #94a3b8;
  line-height: 1.6;
  animation: auth-fade-up .6s ease .55s both;
}

.auth-info-footer {
  position: relative;
  font-size: .75rem;
  color: #64748b;
  line-height: 1.6;
  z-index: 1;
  animation: auth-fade-in .6s ease .7s both;
}

.auth-info-footer p {
  margin-bottom: .25rem;
}

.auth-info-footer p:last-child {
  margin-bottom: 0;
}

/* Right form panel */
.auth-form-panel {
  position: relative;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: auth-slide-up .7s cubic-bezier(.16,1,.3,1) .08s both;
  flex-shrink: 0;
}

.auth-form-panel h3 {
  color: #0f172a;
  font-weight: 700;
  font-size: 1.75rem;
  margin-bottom: .5rem;
}

.auth-form-subtitle {
  color: #64748b;
  font-size: .9375rem;
  margin-bottom: 1.75rem;
}

/* Mobile brand shown inside form panel */
.auth-mobile-brand {
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-mobile-brand-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
}

/* Staggered field animations */
.auth-form-panel .form-group,
.auth-form-panel .mb-3,
.auth-form-panel .mb-4,
.auth-link-row {
  animation: auth-fade-up .6s ease both;
}

.auth-form-panel .form-group:nth-of-type(1),
.auth-form-panel .mb-3:nth-of-type(1),
.auth-form-panel .mb-4:nth-of-type(1) { animation-delay: .06s; }

.auth-form-panel .form-group:nth-of-type(2),
.auth-form-panel .mb-3:nth-of-type(2),
.auth-form-panel .mb-4:nth-of-type(2) { animation-delay: .12s; }

.auth-form-panel .form-group:nth-of-type(3),
.auth-form-panel .mb-3:nth-of-type(3),
.auth-form-panel .mb-4:nth-of-type(3) { animation-delay: .18s; }

.auth-form-panel .form-group:nth-of-type(4),
.auth-form-panel .mb-3:nth-of-type(4),
.auth-form-panel .mb-4:nth-of-type(4) { animation-delay: .24s; }

.auth-form-panel .form-group:nth-of-type(5),
.auth-form-panel .mb-3:nth-of-type(5),
.auth-form-panel .mb-4:nth-of-type(5) { animation-delay: .3s; }

/* Labels */
.auth-form-panel .label {
  color: #475569;
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: .5rem;
}

/* Inputs with icons */
.auth-input-group {
  position: relative;
}

.auth-input-group .auth-input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: .9375rem;
  pointer-events: none;
  transition: color .2s ease, transform .2s ease;
  z-index: 2;
}

.auth-input-group .form-control {
  padding-left: 2.75rem;
  padding-right: 2.5rem;
}

.auth-input-group .form-control:focus ~ .auth-input-icon,
.auth-input-group .form-control:not(:placeholder-shown) ~ .auth-input-icon {
  color: #3b82f6;
  transform: translateY(-50%) scale(1.12);
}

/* Password toggle */
.auth-password-toggle {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  padding: .25rem;
  font-size: .9375rem;
  z-index: 2;
  transition: color .2s ease;
}

.auth-password-toggle:hover {
  color: #3b82f6;
}

/* Form controls */
.auth-form-panel .form-control {
  height: calc(3rem + 2px);
  min-height: 48px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  border-radius: .5rem;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.auth-form-panel .form-control::placeholder {
  color: #94a3b8;
}

.auth-form-panel .form-control:focus {
  background: #fff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 .25rem rgba(59, 130, 246, .22), 0 4px 14px rgba(59, 130, 246, .12);
}

.auth-form-panel .form-control:disabled {
  background: #e2e8f0;
  opacity: .65;
}

/* Email code input group */
.auth-form-panel .input-group .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.auth-form-panel .input-group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 100%;
  min-height: 48px;
  background: #1e293b;
  border-color: #1e293b;
  color: #fff !important;
}

.auth-form-panel .input-group .btn:hover {
  background: #0f172a;
  border-color: #0f172a;
}

/* Buttons */
.auth-form-panel .btn-primary {
  position: relative;
  overflow: hidden;
  height: calc(3rem + 2px);
  min-height: 48px;
  background: #1e293b;
  border: 0;
  border-radius: .5rem;
  color: #fff !important;
  font-weight: 500;
  box-shadow: 0 8px 20px rgba(30, 41, 59, .18);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.auth-form-panel .btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.14) 50%, transparent 100%);
  transform: translateX(-130%);
  transition: transform .7s ease;
}

.auth-form-panel .btn-primary:hover {
  background: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(30, 41, 59, .22);
}

.auth-form-panel .btn-primary:hover::after {
  transform: translateX(130%);
}

.auth-form-panel .btn-primary:disabled,
.auth-form-panel .btn-primary.disabled {
  opacity: .7;
  cursor: not-allowed;
  filter: grayscale(.2);
}

/* Links */
.auth-link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.auth-link-row a,
.auth-form-panel p a {
  position: relative;
  color: #3b82f6;
  font-size: .875rem;
  transition: color .2s ease;
}

.auth-link-row a::after,
.auth-form-panel p a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .3s cubic-bezier(.2,.9,.2,1);
}

.auth-link-row a:hover,
.auth-form-panel p a:hover {
  color: #2563eb;
  text-decoration: none;
}

.auth-link-row a:hover::after,
.auth-form-panel p a:hover::after {
  width: 100%;
}

.auth-form-panel p {
  color: #64748b;
  font-size: .9375rem;
}

/* Form footer (mobile only, placed below the card) */
.auth-form-footer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: .75rem;
  color: #64748b;
  line-height: 1.7;
}

.auth-form-footer a {
  color: #475569;
  transition: color .2s ease;
}

.auth-form-footer a:hover {
  color: #3b82f6;
  text-decoration: none;
}

/* Alerts */
.auth-form-panel .alert {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
}

/* Desktop side-by-side layout */
@media (min-width: 768px) {
  .auth-card {
    flex-direction: row;
    min-height: 580px;
  }

  .auth-info-panel {
    width: 42%;
    padding: 2.5rem;
  }

  .auth-info-content {
    margin: 0;
  }

  .auth-form-panel {
    width: 58%;
    padding: 3rem 3.5rem;
  }
}

/* Mobile optimizations */
@media (max-width: 767.98px) {
  .auth-section {
    padding: 1.25rem .75rem;
    align-items: center;
  }

  .auth-card {
    border-radius: 1.25rem;
    min-height: auto;
  }

  .auth-form-panel {
    padding: 1.75rem 1.5rem;
  }

  .auth-form-panel h3 {
    font-size: 1.5rem;
  }

  .auth-form-subtitle {
    margin-bottom: 1.5rem;
  }

  .auth-mobile-brand {
    margin-bottom: 1rem;
  }

  .auth-form-footer {
    margin-top: 1rem;
  }
}

/* Small height screens */
@media (max-height: 700px) and (max-width: 767.98px) {
  .auth-section {
    padding: .75rem;
  }

  .auth-form-panel {
    padding: 1.25rem;
  }

  .auth-form-subtitle {
    margin-bottom: 1.25rem;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  body.auth-page,
  .auth-card,
  .auth-section::before,
  .auth-section::after,
  .auth-stars,
  .auth-stars span,
  .auth-stars::after,
  .auth-info-brand,
  .auth-info-logo,
  .auth-info-title,
  .auth-info-desc,
  .auth-info-footer,
  .auth-form-panel,
  .auth-form-panel .form-group,
  .auth-form-panel .mb-3,
  .auth-form-panel .mb-4,
  .auth-link-row {
    animation: none !important;
  }

  .auth-card,
  .auth-info-logo,
  .auth-form-panel .form-control,
  .auth-form-panel .btn-primary,
  .auth-link-row a,
  .auth-form-panel p a {
    transition: none !important;
  }
}

/* Keyframes */
@keyframes auth-pop {
  0% { opacity: 0; transform: translateY(20px) scale(.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes auth-slide-up {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes auth-fade-up {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes auth-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes auth-scale-in {
  0% { opacity: 0; transform: scale(.6); }
  70% { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes auth-bg-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes auth-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -30px) scale(1.05); }
  66% { transform: translate(-15px, 20px) scale(.97); }
}

@keyframes auth-twinkle {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

@keyframes auth-shooting-star {
  0% { transform: translate3d(0, 0, 0) rotate(-45deg); opacity: 0; }
  8% { opacity: 1; }
  18% { transform: translate3d(520px, 520px, 0) rotate(-45deg); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes auth-shooting-star-2 {
  0% { transform: translate3d(0, 0, 0) rotate(-45deg); opacity: 0; }
  7% { opacity: .9; }
  17% { transform: translate3d(-440px, 440px, 0) rotate(-45deg); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes auth-shooting-star-3 {
  0% { transform: translate3d(0, 0, 0) rotate(-45deg); opacity: 0; }
  7% { opacity: .85; }
  17% { transform: translate3d(480px, 480px, 0) rotate(-45deg); opacity: 0; }
  100% { opacity: 0; }
}