/* ═══════════════════════════════════════════════════════
   AutoMixSJ88 Codex — PREMIUM UPGRADE LAYER
   Features that enhance the base design
   ═══════════════════════════════════════════════════════ */

/* ─── Aurora Floating Orbs ──────────────────────────── */
.aurora-orbs {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.aurora-orb:nth-child(1) {
  width: 500px; height: 500px;
  background: #8b5cf6;
  top: -10%; left: -5%;
  animation: orb1 18s;
}
.aurora-orb:nth-child(2) {
  width: 600px; height: 600px;
  background: #3b82f6;
  bottom: -15%; right: -10%;
  animation: orb2 22s;
}
.aurora-orb:nth-child(3) {
  width: 350px; height: 350px;
  background: #06b6d4;
  top: 50%; left: 40%;
  animation: orb3 15s;
  opacity: 0.07;
}
.aurora-orb:nth-child(4) {
  width: 280px; height: 280px;
  background: #ec4899;
  top: 20%; right: 15%;
  animation: orb4 20s;
  opacity: 0.06;
}
@keyframes orb1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(80px, 60px) scale(1.15); }
}
@keyframes orb2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-70px, -50px) scale(1.1); }
}
@keyframes orb3 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.07; }
  100% { transform: translate(40px, -80px) scale(1.3); opacity: 0.1; }
}
@keyframes orb4 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-60px, 30px) scale(0.85); }
}

/* ─── Ripple Ring Effect ─────────────────────────── */
.ripple-ring {
  position: absolute;
  border-radius: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.15);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: rippleExpand 0.6s ease-out forwards;
}
@keyframes rippleExpand {
  0%   { width: 0; height: 0; opacity: 0.5; }
  100% { width: 250px; height: 250px; opacity: 0; }
}

/* ─── Page Transition ────────────────────────────── */
.page.active {
  animation: premiumPageIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes premiumPageIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.995); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Nav Transition ─────────────────────────────── */
@keyframes navSlideIn {
  from { transform: translateX(-6px); opacity: 0.5; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ─── Auth Particles ─────────────────────────────── */
.auth-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.auth-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(139, 92, 246, 0.4);
  border-radius: 50%;
  animation: particleFloat 6s ease-in-out infinite;
}
.auth-particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.auth-particle:nth-child(2) { left: 20%; top: 80%; animation-delay: 1s; }
.auth-particle:nth-child(3) { left: 60%; top: 40%; animation-delay: 2s; }
.auth-particle:nth-child(4) { left: 80%; top: 60%; animation-delay: 3s; }
.auth-particle:nth-child(5) { left: 40%; top: 10%; animation-delay: 4s; }
.auth-particle:nth-child(6) { left: 70%; top: 90%; animation-delay: 5s; }
.auth-particle:nth-child(7) { left: 90%; top: 30%; animation-delay: 1.5s; }
.auth-particle:nth-child(8) { left: 30%; top: 50%; animation-delay: 2.5s; }

@keyframes particleFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  50% { transform: translate(20px, -30px) scale(1.5); opacity: 0.8; }
}