/* ============================================================
   Magic Backgrounds — animated, subtle, performance-friendly
   Layers (back -> front):
     1. Aurora gradient base (theme-tinted)
     2. Floating gradient blobs (slow drift)
     3. Solar particle field (tiny dots, twinkle)
     4. Grid mesh overlay (very faint)
   - No JS, pure CSS animations
   - Respects prefers-reduced-motion
   ============================================================ */

:root {
  --aurora-1: rgba(245, 158, 11, 0.18);
  --aurora-2: rgba(236, 72, 153, 0.14);
  --aurora-3: rgba(56, 189, 248, 0.16);
  --aurora-4: rgba(34, 197, 94, 0.12);
  --blob-1: #f59e0b;
  --blob-2: #ec4899;
  --blob-3: #38bdf8;
  --blob-4: #22c55e;
  --mesh-color: rgba(255, 255, 255, 0.04);
}

/* --- Theme-aware aurora tints --- */
body[data-theme="sunrise"] {
  --aurora-1: rgba(245, 158, 11, 0.22);
  --aurora-2: rgba(251, 191, 36, 0.18);
  --aurora-3: rgba(244, 114, 182, 0.14);
  --aurora-4: rgba(34, 197, 94, 0.12);
}
body[data-theme="golden"] {
  --aurora-1: rgba(217, 119, 6, 0.25);
  --aurora-2: rgba(245, 158, 11, 0.20);
  --aurora-3: rgba(234, 88, 12, 0.18);
  --aurora-4: rgba(253, 224, 71, 0.16);
}
body[data-theme="deep-space"] {
  --aurora-1: rgba(99, 102, 241, 0.30);
  --aurora-2: rgba(56, 189, 248, 0.25);
  --aurora-3: rgba(168, 85, 247, 0.20);
  --aurora-4: rgba(14, 165, 233, 0.18);
}
body[data-theme="eco"] {
  --aurora-1: rgba(34, 197, 94, 0.22);
  --aurora-2: rgba(16, 185, 129, 0.20);
  --aurora-3: rgba(132, 204, 22, 0.18);
  --aurora-4: rgba(245, 158, 11, 0.10);
}

/* The body gets a fixed background that does not scroll with content. */
body {
  background-color: #0b1220;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* --- Layer 1: Aurora gradient base --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, var(--aurora-1), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, var(--aurora-2), transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 100%, var(--aurora-3), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 80%, var(--aurora-4), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 50%, #0b1220 100%);
  animation: auroraShift 24s ease-in-out infinite alternate;
  pointer-events: none;
}

/* --- Layer 2: Floating gradient blobs --- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle 320px at 15% 25%, var(--blob-1), transparent 70%),
    radial-gradient(circle 280px at 85% 30%, var(--blob-2), transparent 70%),
    radial-gradient(circle 360px at 75% 80%, var(--blob-3), transparent 70%),
    radial-gradient(circle 240px at 25% 75%, var(--blob-4), transparent 70%);
  opacity: 0.18;
  filter: blur(40px);
  animation: blobDrift 30s ease-in-out infinite;
  pointer-events: none;
}

/* --- Layer 3: Subtle grid mesh --- */
.magic-mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--mesh-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--mesh-color) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  pointer-events: none;
  opacity: 0.6;
  animation: meshFloat 60s linear infinite;
}

/* --- Layer 4: Twinkling particles (pure CSS) --- */
.magic-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.magic-particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 70%);
  box-shadow: 0 0 6px rgba(253, 224, 71, 0.8);
  opacity: 0;
  animation: twinkle 6s ease-in-out infinite;
}
/* Spread 24 particles across the viewport using nth-child positioning */
.magic-particles span:nth-child(1)  { left:  4%; top: 12%; animation-delay:  0.0s; }
.magic-particles span:nth-child(2)  { left: 11%; top: 48%; animation-delay:  0.6s; }
.magic-particles span:nth-child(3)  { left: 17%; top: 78%; animation-delay:  1.2s; }
.magic-particles span:nth-child(4)  { left: 23%; top: 22%; animation-delay:  1.8s; }
.magic-particles span:nth-child(5)  { left: 29%; top: 65%; animation-delay:  2.4s; }
.magic-particles span:nth-child(6)  { left: 35%; top: 35%; animation-delay:  3.0s; }
.magic-particles span:nth-child(7)  { left: 41%; top: 88%; animation-delay:  3.6s; }
.magic-particles span:nth-child(8)  { left: 47%; top:  8%; animation-delay:  4.2s; }
.magic-particles span:nth-child(9)  { left: 53%; top: 52%; animation-delay:  4.8s; }
.magic-particles span:nth-child(10) { left: 59%; top: 18%; animation-delay:  5.4s; }
.magic-particles span:nth-child(11) { left: 65%; top: 72%; animation-delay:  0.3s; }
.magic-particles span:nth-child(12) { left: 71%; top: 42%; animation-delay:  0.9s; }
.magic-particles span:nth-child(13) { left: 77%; top: 92%; animation-delay:  1.5s; }
.magic-particles span:nth-child(14) { left: 83%; top: 28%; animation-delay:  2.1s; }
.magic-particles span:nth-child(15) { left: 89%; top: 58%; animation-delay:  2.7s; }
.magic-particles span:nth-child(16) { left: 95%; top: 14%; animation-delay:  3.3s; }
.magic-particles span:nth-child(17) { left:  8%; top: 84%; animation-delay:  3.9s; }
.magic-particles span:nth-child(18) { left: 38%; top:  4%; animation-delay:  4.5s; }
.magic-particles span:nth-child(19) { left: 56%; top: 96%; animation-delay:  5.1s; }
.magic-particles span:nth-child(20) { left: 74%; top:  6%; animation-delay:  5.7s; }
.magic-particles span:nth-child(21) { left: 14%; top: 60%; animation-delay:  0.2s; }
.magic-particles span:nth-child(22) { left: 50%; top: 30%; animation-delay:  1.7s; }
.magic-particles span:nth-child(23) { left: 80%; top: 50%; animation-delay:  3.4s; }
.magic-particles span:nth-child(24) { left: 32%; top: 46%; animation-delay:  4.4s; }

/* --- Animations --- */
@keyframes auroraShift {
  0%   { background-position:   0%   0%, 100%  0%,  50% 100%,   0% 100%, 0 0; transform: scale(1)    rotate(0deg);   }
  50%  { background-position:  10%  20%,  90% 30%,  40%  90%,  10%  80%, 0 0; transform: scale(1.05) rotate(1.2deg); }
  100% { background-position:  -5%  15%, 110% 10%,  60%  90%,  -5% 110%, 0 0; transform: scale(1)    rotate(-0.8deg);}
}

@keyframes blobDrift {
  0%   { transform: translate(0,    0)   scale(1)    rotate(0deg); }
  33%  { transform: translate(40px, -30px) scale(1.08) rotate(3deg); }
  66%  { transform: translate(-30px, 40px) scale(0.95) rotate(-2deg); }
  100% { transform: translate(0,    0)   scale(1)    rotate(0deg); }
}

@keyframes meshFloat {
  0%   { background-position:   0 0; }
  100% { background-position:  60px 60px; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0;    transform: scale(0.6); }
  50%      { opacity: 0.85; transform: scale(1.4); }
}

/* --- Content readability over the magic bg --- */
.site-main {
  position: relative;
  z-index: 1;
}
/* Make sure white card-style sections stay readable */
.section,
.products,
.hero,
.feature,
.dashboard,
.cta,
.contact-form,
.gallery,
.news,
.services {
  position: relative;
  z-index: 2;
}
/* Cards & key surfaces get a subtle backdrop to keep content crisp */
.product-card,
.dashboard-card,
.feature-card,
.service-card,
.news-card,
.timeline-item,
.contact-form,
.form-card,
.stat-card,
.gallery-item,
.lang-cycle-btn,
.theme-toggle,
.theme-panel,
.site-card {
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Light hero/title sections: gentle wash so text stays readable */
.hero-overlay,
.section-title,
.page-header {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* --- Accessibility: respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .magic-mesh, .magic-particles span {
    animation: none !important;
  }
  .magic-particles span { opacity: 0.5; }
}

/* --- Mobile: tone down to save battery --- */
@media (max-width: 768px) {
  body::after { opacity: 0.10; filter: blur(28px); }
  .magic-particles span { width: 2px; height: 2px; }
}