/** @license For full copyright and license information, please see the LICENSE.md file. */

/**
 * @file auth-cosmic-meteors.css
 * @description Multi-directional and multi-velocity shooting stars & meteors for guest login experience.
 *              Compositor-only GPU transforms (60/120fps), zero paint recalculations, WCAG 2.2 AA compliant.
 */

/* -------------------------------------------------------------------------
 * 1. Base Meteor Element & Luminous Glowing Head
 * ------------------------------------------------------------------------- */
.auth-meteor {
  position: absolute;
  width: 140px;
  height: 2px;
  background: var(--cosmic-meteor-trail);
  border-radius: 999px;
  filter: drop-shadow(0 0 6px var(--cosmic-meteor-glow));
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation-timing-function: cubic-bezier(0.15, 0.85, 0.35, 1);
  animation-iteration-count: infinite;
}

.auth-meteor::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--cosmic-meteor-head);
  box-shadow: 0 0 8px #ffffff, 0 0 16px var(--cosmic-meteor-glow);
}

/* -------------------------------------------------------------------------
 * 2. Multi-Directional & Multi-Velocity Shooting Star Instances
 * ------------------------------------------------------------------------- */
/* Meteor 1: Top-Right to Down-Left (South-West Swift Streak) */
.auth-meteor--1 {
  top: 4%;
  left: 88%;
  width: 130px;
  animation-name: cosmicMeteorSW;
  animation-duration: 4.8s;
  animation-delay: 0.5s;
}

/* Meteor 2: Bottom-Left to Up-Right (North-East Ascending Cosmic Flare) */
.auth-meteor--2 {
  top: 84%;
  left: 6%;
  width: 140px;
  animation-name: cosmicMeteorNE;
  animation-duration: 6.8s;
  animation-delay: 2.8s;
}

/* Meteor 3: Top-Left to Down-Right (South-East Graceful Diagonal Glide) */
.auth-meteor--3 {
  top: 6%;
  left: 10%;
  width: 145px;
  animation-name: cosmicMeteorSE;
  animation-duration: 7.6s;
  animation-delay: 5.2s;
}

/* Meteor 4: Bottom-Right to Up-Left (North-West Long-Trail Ascending Bolide) */
.auth-meteor--4 {
  top: 86%;
  left: 92%;
  width: 175px;
  height: 2.5px;
  animation-name: cosmicMeteorNW;
  animation-duration: 8.8s;
  animation-delay: 1.6s;
}

.auth-meteor--4::before {
  width: 4.5px;
  height: 4.5px;
  box-shadow: 0 0 10px #ffffff, 0 0 20px var(--cosmic-meteor-glow);
}

/* Meteor 5: West Mid to Up-Right (Shallow East-North-East Skim) */
.auth-meteor--5 {
  top: 56%;
  left: 2%;
  width: 120px;
  height: 1.5px;
  animation-name: cosmicMeteorENE;
  animation-duration: 5.4s;
  animation-delay: 7.2s;
}

/* Meteor 6: East Mid to Down-Left (Shallow West-South-West Lingering Trail) */
.auth-meteor--6 {
  top: 44%;
  left: 95%;
  width: 160px;
  height: 2.2px;
  animation-name: cosmicMeteorWSW;
  animation-duration: 11.2s;
  animation-delay: 9.0s;
}

/* Meteor 7: Top Zenith to Steep South Plunge */
.auth-meteor--7 {
  top: 1%;
  left: 48%;
  width: 110px;
  height: 1.8px;
  animation-name: cosmicMeteorPlungeS;
  animation-duration: 5.8s;
  animation-delay: 4.0s;
}

/* Meteor 8: Bottom Nadir to Steep North Ascend */
.auth-meteor--8 {
  top: 96%;
  left: 52%;
  width: 125px;
  height: 1.8px;
  animation-name: cosmicMeteorAscendN;
  animation-duration: 9.4s;
  animation-delay: 11.2s;
}

/* -------------------------------------------------------------------------
 * 3. Directional Compositor Trajectory Keyframes (Head Leads, Tail Trails)
 * ------------------------------------------------------------------------- */
/* Trajectory 1: South-West (-42deg heading, moves left and down) */
@keyframes cosmicMeteorSW {
  0% {
    transform: translate3d(0, 0, 0) rotate(-42deg);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  22%, 100% {
    transform: translate3d(-520px, 460px, 0) rotate(-42deg);
    opacity: 0;
  }
}

/* Trajectory 2: North-East (138deg heading, moves right and up) */
@keyframes cosmicMeteorNE {
  0% {
    transform: translate3d(0, 0, 0) rotate(138deg);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  22%, 100% {
    transform: translate3d(520px, -460px, 0) rotate(138deg);
    opacity: 0;
  }
}

/* Trajectory 3: South-East (-138deg heading, moves right and down) */
@keyframes cosmicMeteorSE {
  0% {
    transform: translate3d(0, 0, 0) rotate(-138deg);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  22%, 100% {
    transform: translate3d(540px, 480px, 0) rotate(-138deg);
    opacity: 0;
  }
}

/* Trajectory 4: North-West (42deg heading, moves left and up) */
@keyframes cosmicMeteorNW {
  0% {
    transform: translate3d(0, 0, 0) rotate(42deg);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  22%, 100% {
    transform: translate3d(-540px, -460px, 0) rotate(42deg);
    opacity: 0;
  }
}

/* Trajectory 5: Shallow East-North-East (-196deg heading, moves right and slightly up) */
@keyframes cosmicMeteorENE {
  0% {
    transform: translate3d(0, 0, 0) rotate(-196deg);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  18%, 100% {
    transform: translate3d(600px, -160px, 0) rotate(-196deg);
    opacity: 0;
  }
}

/* Trajectory 6: Shallow West-South-West (-16deg heading, moves left and slightly down) */
@keyframes cosmicMeteorWSW {
  0% {
    transform: translate3d(0, 0, 0) rotate(-16deg);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  18%, 100% {
    transform: translate3d(-600px, 160px, 0) rotate(-16deg);
    opacity: 0;
  }
}

/* Trajectory 7: Steep South Plunge (-98deg heading, moves down) */
@keyframes cosmicMeteorPlungeS {
  0% {
    transform: translate3d(0, 0, 0) rotate(-98deg);
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  16%, 100% {
    transform: translate3d(100px, 580px, 0) rotate(-98deg);
    opacity: 0;
  }
}

/* Trajectory 8: Steep North Ascend (82deg heading, moves up) */
@keyframes cosmicMeteorAscendN {
  0% {
    transform: translate3d(0, 0, 0) rotate(82deg);
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  16%, 100% {
    transform: translate3d(-100px, -580px, 0) rotate(82deg);
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------
 * 4. Accessibility & Reduced Motion (WCAG 2.2 Level AA)
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .auth-meteor {
    animation: none !important;
    transform: none !important;
    opacity: 0 !important;
  }
}