/* ═══════════════════════════════════════════════════════
   LUXE AURA — Ambient Background Animations
   Floating gradient orbs + particle canvas
   ═══════════════════════════════════════════════════════ */

/* ─── PARTICLE CANVAS ─── */
.particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ─── FLOATING ORBS CONTAINER ─── */
.ambient-orbs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

/* ─── INDIVIDUAL ORB ─── */
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
  mix-blend-mode: screen;
}

/* Orb 1 — Large gold, top-left drift */
.ambient-orb--1 {
  width: clamp(300px, 40vw, 600px);
  height: clamp(300px, 40vw, 600px);
  background: radial-gradient(circle, rgba(201, 169, 110, 0.10) 0%, rgba(201, 169, 110, 0.02) 60%, transparent 80%);
  top: -10%;
  left: -5%;
  animation: orbDrift1 25s ease-in-out infinite;
}

/* Orb 2 — Warm amber, bottom-right drift */
.ambient-orb--2 {
  width: clamp(250px, 35vw, 500px);
  height: clamp(250px, 35vw, 500px);
  background: radial-gradient(circle, rgba(212, 185, 123, 0.08) 0%, rgba(168, 139, 85, 0.02) 60%, transparent 80%);
  bottom: -5%;
  right: -5%;
  animation: orbDrift2 30s ease-in-out infinite;
}

/* Orb 3 — Subtle cool accent, center-left */
.ambient-orb--3 {
  width: clamp(200px, 30vw, 450px);
  height: clamp(200px, 30vw, 450px);
  background: radial-gradient(circle, rgba(163, 177, 191, 0.06) 0%, rgba(163, 177, 191, 0.01) 60%, transparent 80%);
  top: 40%;
  left: 10%;
  animation: orbDrift3 35s ease-in-out infinite;
}

/* Orb 4 — Small gold highlight, top-right */
.ambient-orb--4 {
  width: clamp(180px, 25vw, 350px);
  height: clamp(180px, 25vw, 350px);
  background: radial-gradient(circle, rgba(201, 169, 110, 0.07) 0%, rgba(201, 169, 110, 0.01) 60%, transparent 80%);
  top: 15%;
  right: 10%;
  animation: orbDrift4 20s ease-in-out infinite;
}

/* Orb 5 — Deep gold, bottom-center */
.ambient-orb--5 {
  width: clamp(280px, 35vw, 550px);
  height: clamp(280px, 35vw, 550px);
  background: radial-gradient(circle, rgba(201, 169, 110, 0.05) 0%, rgba(168, 139, 85, 0.015) 60%, transparent 80%);
  bottom: 10%;
  left: 35%;
  animation: orbDrift5 28s ease-in-out infinite;
}

/* ─── ORB DRIFT KEYFRAMES ─── */
@keyframes orbDrift1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(8vw, 6vh) scale(1.05);
  }
  50% {
    transform: translate(3vw, 12vh) scale(0.95);
  }
  75% {
    transform: translate(-5vw, 5vh) scale(1.02);
  }
}

@keyframes orbDrift2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(-6vw, -8vh) scale(1.08);
  }
  50% {
    transform: translate(-10vw, -3vh) scale(0.92);
  }
  75% {
    transform: translate(-3vw, -10vh) scale(1.04);
  }
}

@keyframes orbDrift3 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(12vw, -6vh) scale(1.06);
  }
  66% {
    transform: translate(5vw, 8vh) scale(0.94);
  }
}

@keyframes orbDrift4 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  20% {
    transform: translate(-4vw, 5vh) scale(0.95);
  }
  50% {
    transform: translate(-8vw, 10vh) scale(1.1);
  }
  80% {
    transform: translate(-2vw, 3vh) scale(1.02);
  }
}

@keyframes orbDrift5 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  30% {
    transform: translate(7vw, -5vh) scale(1.04);
  }
  60% {
    transform: translate(-4vw, -10vh) scale(0.96);
  }
}

/* ─── FLOATING SPARKLES (pure CSS) ─── */
.sparkle-field {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.sparkle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(201, 169, 110, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(201, 169, 110, 0.3);
  animation: sparkleFloat linear infinite;
  opacity: 0;
}

/* 12 sparkles with staggered timing */
.sparkle:nth-child(1)  { left: 8%;   animation-duration: 18s; animation-delay: 0s;   }
.sparkle:nth-child(2)  { left: 16%;  animation-duration: 22s; animation-delay: 2s;   }
.sparkle:nth-child(3)  { left: 25%;  animation-duration: 16s; animation-delay: 4s;   }
.sparkle:nth-child(4)  { left: 35%;  animation-duration: 20s; animation-delay: 1s;   }
.sparkle:nth-child(5)  { left: 45%;  animation-duration: 24s; animation-delay: 5s;   }
.sparkle:nth-child(6)  { left: 55%;  animation-duration: 17s; animation-delay: 3s;   }
.sparkle:nth-child(7)  { left: 65%;  animation-duration: 21s; animation-delay: 6s;   }
.sparkle:nth-child(8)  { left: 72%;  animation-duration: 19s; animation-delay: 2.5s; }
.sparkle:nth-child(9)  { left: 80%;  animation-duration: 23s; animation-delay: 4.5s; }
.sparkle:nth-child(10) { left: 88%;  animation-duration: 15s; animation-delay: 1.5s; }
.sparkle:nth-child(11) { left: 42%;  animation-duration: 26s; animation-delay: 7s;   }
.sparkle:nth-child(12) { left: 58%;  animation-duration: 20s; animation-delay: 3.5s; }

@keyframes sparkleFloat {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  5% {
    opacity: 0.8;
    transform: translateY(90vh) translateX(5px) scale(1);
  }
  30% {
    opacity: 0.5;
    transform: translateY(60vh) translateX(-8px) scale(0.8);
  }
  60% {
    opacity: 0.6;
    transform: translateY(30vh) translateX(10px) scale(1.1);
  }
  90% {
    opacity: 0.2;
    transform: translateY(5vh) translateX(-3px) scale(0.6);
  }
  100% {
    transform: translateY(-5vh) translateX(0) scale(0);
    opacity: 0;
  }
}

/* ─── PERFORMANCE ─── */
@media (prefers-reduced-motion: reduce) {
  .ambient-orb,
  .sparkle,
  .particle-canvas {
    animation: none !important;
    display: none !important;
  }
}

/* Disable on very small / low-power devices */
@media (max-width: 480px) {
  .ambient-orb--3,
  .ambient-orb--5 {
    display: none;
  }
  .sparkle:nth-child(n+8) {
    display: none;
  }
}

/* Disable all ambient effects on mobile for performance */
@media (max-width: 768px) {
  .ambient-orbs,
  .sparkle-field {
    display: none !important;
  }
}