/*
 * ══════════════════════════════════════════════════════════
 *  BCA STORE · PREMIUM BACKGROUND CSS v3.0
 *  Aurora waves · Shimmer · Glass reflections · Depth layers
 *  Apple × Linear × Stripe × Nothing inspired aesthetics
 *
 *  Performance:
 *   - transform + opacity only (GPU-only properties)
 *   - will-change on animated elements
 *   - pointer-events: none everywhere
 *   - No layout interference
 *   - Smooth Light ↔ Dark transitions
 * ══════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════
   AURORA BACKGROUND LAYER
   Slow, sweeping gradient aurora lights behind all content
══════════════════════════════════════════════════════════ */

/* Dark Mode Aurora */
[data-theme="dark"] .aurora-layer {
  display: block;
}
[data-theme="light"] .aurora-layer {
  display: block;
}

.aurora-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}

/* Aurora Beam 1 — top-left, indigo/violet */
.aurora-beam-1 {
  position: absolute;
  top: -40%;
  left: -20%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  animation: auroraDrift1 28s ease-in-out infinite alternate;
  will-change: transform, opacity;
  pointer-events: none;
}

[data-theme="dark"] .aurora-beam-1 {
  background: radial-gradient(ellipse at center,
    rgba(94, 60, 200, 0.055) 0%,
    rgba(120, 80, 230, 0.025) 35%,
    transparent 70%
  );
  opacity: 1;
}
[data-theme="light"] .aurora-beam-1 {
  background: radial-gradient(ellipse at center,
    rgba(120, 100, 255, 0.04) 0%,
    rgba(160, 140, 255, 0.015) 35%,
    transparent 70%
  );
  opacity: 1;
}

/* Aurora Beam 2 — bottom-right, cyan/blue */
.aurora-beam-2 {
  position: absolute;
  bottom: -40%;
  right: -20%;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  animation: auroraDrift2 35s ease-in-out infinite alternate;
  will-change: transform, opacity;
  pointer-events: none;
}

[data-theme="dark"] .aurora-beam-2 {
  background: radial-gradient(ellipse at center,
    rgba(0, 210, 255, 0.03) 0%,
    rgba(0, 160, 220, 0.015) 40%,
    transparent 70%
  );
  opacity: 1;
}
[data-theme="light"] .aurora-beam-2 {
  background: radial-gradient(ellipse at center,
    rgba(80, 200, 255, 0.035) 0%,
    rgba(60, 180, 240, 0.012) 40%,
    transparent 70%
  );
  opacity: 1;
}

/* Aurora Beam 3 — centre, violet/magenta pulse */
.aurora-beam-3 {
  position: absolute;
  top: 20%;
  right: -10%;
  width: 55%;
  height: 55%;
  border-radius: 50%;
  animation: auroraDrift3 42s ease-in-out infinite alternate;
  will-change: transform, opacity;
  pointer-events: none;
}

[data-theme="dark"] .aurora-beam-3 {
  background: radial-gradient(ellipse at center,
    rgba(190, 60, 240, 0.025) 0%,
    rgba(150, 40, 200, 0.01) 40%,
    transparent 70%
  );
  opacity: 1;
}
[data-theme="light"] .aurora-beam-3 {
  background: radial-gradient(ellipse at center,
    rgba(200, 100, 255, 0.025) 0%,
    rgba(180, 80, 230, 0.008) 40%,
    transparent 70%
  );
  opacity: 1;
}

/* Aurora Beam 4 — subtle bottom-left warm accent */
.aurora-beam-4 {
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 60%;
  height: 55%;
  border-radius: 50%;
  animation: auroraDrift4 50s ease-in-out infinite alternate;
  will-change: transform, opacity;
  pointer-events: none;
}

[data-theme="dark"] .aurora-beam-4 {
  background: radial-gradient(ellipse at center,
    rgba(60, 130, 255, 0.02) 0%,
    rgba(40, 100, 200, 0.008) 40%,
    transparent 70%
  );
  opacity: 1;
}
[data-theme="light"] .aurora-beam-4 {
  background: radial-gradient(ellipse at center,
    rgba(100, 160, 255, 0.025) 0%,
    rgba(80, 130, 220, 0.01) 40%,
    transparent 70%
  );
  opacity: 1;
}

/* ── Aurora Keyframes ─────────────────────────────────── */
@keyframes auroraDrift1 {
  0%   { transform: translateX(0%) translateY(0%) scale(1) translateZ(0); }
  33%  { transform: translateX(5%) translateY(8%) scale(1.08) translateZ(0); }
  66%  { transform: translateX(-3%) translateY(4%) scale(0.96) translateZ(0); }
  100% { transform: translateX(8%) translateY(12%) scale(1.05) translateZ(0); }
}

@keyframes auroraDrift2 {
  0%   { transform: translateX(0%) translateY(0%) scale(1) translateZ(0); }
  33%  { transform: translateX(-6%) translateY(-5%) scale(1.1) translateZ(0); }
  66%  { transform: translateX(4%) translateY(-8%) scale(0.95) translateZ(0); }
  100% { transform: translateX(-9%) translateY(-10%) scale(1.06) translateZ(0); }
}

@keyframes auroraDrift3 {
  0%   { transform: translateX(0%) translateY(0%) rotate(0deg) translateZ(0); }
  50%  { transform: translateX(-7%) translateY(5%) rotate(15deg) translateZ(0); }
  100% { transform: translateX(5%) translateY(-8%) rotate(-10deg) translateZ(0); }
}

@keyframes auroraDrift4 {
  0%   { transform: translateX(0%) translateY(0%) scale(1) translateZ(0); }
  50%  { transform: translateX(6%) translateY(-4%) scale(1.07) translateZ(0); }
  100% { transform: translateX(3%) translateY(-9%) scale(0.94) translateZ(0); }
}

/* ══════════════════════════════════════════════════════════
   SOFT DIAMOND SHIMMER — Horizontal CSS scan line
   Ultra-subtle premium sweep across the whole page
══════════════════════════════════════════════════════════ */

.shimmer-sweep {
  position: fixed;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  animation: shimmerSweep 14s ease-in-out infinite;
  will-change: transform, opacity;
}

[data-theme="dark"] .shimmer-sweep {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.012) 48%,
    rgba(200, 220, 255, 0.022) 50%,
    rgba(255, 255, 255, 0.012) 52%,
    transparent 70%
  );
}
[data-theme="light"] .shimmer-sweep {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(120, 160, 255, 0.015) 48%,
    rgba(180, 200, 255, 0.025) 50%,
    rgba(120, 160, 255, 0.015) 52%,
    transparent 70%
  );
}

@keyframes shimmerSweep {
  0%   { transform: translateX(0%) translateZ(0);    opacity: 0; }
  5%   { opacity: 1; }
  50%  { transform: translateX(250%) translateZ(0);  opacity: 1; }
  55%  { opacity: 0; }
  100% { transform: translateX(250%) translateZ(0);  opacity: 0; }
}

/* Second sweep — offset timing */
.shimmer-sweep-2 {
  position: fixed;
  top: 0;
  left: -100%;
  width: 40%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  animation: shimmerSweep 14s ease-in-out infinite;
  animation-delay: -7s;
  will-change: transform, opacity;
}

[data-theme="dark"] .shimmer-sweep-2 {
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(180, 140, 255, 0.008) 49%,
    rgba(150, 200, 255, 0.015) 50%,
    rgba(180, 140, 255, 0.008) 51%,
    transparent 65%
  );
}
[data-theme="light"] .shimmer-sweep-2 {
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(100, 130, 255, 0.01) 49%,
    rgba(140, 180, 255, 0.018) 50%,
    rgba(100, 130, 255, 0.01) 51%,
    transparent 65%
  );
}

/* ══════════════════════════════════════════════════════════
   DEPTH VIGNETTE
   Premium edge darkening / brightening for depth feel
══════════════════════════════════════════════════════════ */

.depth-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 0;
}

[data-theme="dark"] .depth-vignette {
  background: radial-gradient(ellipse 80% 80% at 50% 50%,
    transparent 55%,
    rgba(0, 0, 0, 0.18) 100%
  );
}
[data-theme="light"] .depth-vignette {
  background: radial-gradient(ellipse 80% 80% at 50% 50%,
    transparent 55%,
    rgba(180, 200, 240, 0.08) 100%
  );
}

/* ══════════════════════════════════════════════════════════
   THEME TRANSITION SMOOTHING
   Ensures all background elements transition smoothly
   when toggling Light ↔ Dark mode
══════════════════════════════════════════════════════════ */

.aurora-beam-1,
.aurora-beam-2,
.aurora-beam-3,
.aurora-beam-4,
.shimmer-sweep,
.shimmer-sweep-2,
.depth-vignette {
  transition:
    background 0.7s ease,
    opacity    0.5s ease;
}

/* ══════════════════════════════════════════════════════════
   MOBILE OPTIMISATION
   Reduce aurora complexity on small screens
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .aurora-beam-3,
  .aurora-beam-4,
  .shimmer-sweep-2 {
    display: none;
  }

  .aurora-beam-1 { animation-duration: 40s; }
  .aurora-beam-2 { animation-duration: 48s; }
  .shimmer-sweep { animation-duration: 20s; }
}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION SUPPORT
   Respects OS-level reduced motion preference
══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .aurora-beam-1,
  .aurora-beam-2,
  .aurora-beam-3,
  .aurora-beam-4,
  .shimmer-sweep,
  .shimmer-sweep-2 {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE BODY BACKGROUND
   Crisp white-blue premium gradient base
══════════════════════════════════════════════════════════ */

[data-theme="light"] body {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,  rgba(180, 210, 255, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(200, 180, 255, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 5%  60%, rgba(140, 220, 255, 0.08) 0%, transparent 55%),
    #f6f8ff;
  background-attachment: fixed;
}

/* ══════════════════════════════════════════════════════════
   EXISTING CANVAS (ultra-fx.js) — ensure z-index is correct
══════════════════════════════════════════════════════════ */

#ultraBgCanvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
}