/**
 * er-bg-elements.css - Styles & Animations for ER Psychedelic Elements
 * Version: 1.0.0
 */

:root {
  --er-orange: #f28c1f;
  --er-deep-orange: #e8641a;
  --er-purple: #6b3fa0;
  --er-deep-purple: #2c1b4d;
  --er-teal: #2bb3a3;
  --er-pink: #e64b8f;
  --er-green: #6fbf4a;
  --er-gold: #f4c542;
}

/* Base Container */
.er-bg-elements-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  filter: blur(0.3px);
}

.er-bg-element-item {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: multiply;
  transform-origin: center;
  display: block;
}

.er-bg-element-item img,
.er-bg-element-item svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Animations */
@keyframes er-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes er-spin-slow-rev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes er-drift-1 {
  from { transform: translate(0, 0); }
  to   { transform: translate(3vw, 4vh); }
}

@keyframes er-drift-2 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-4vw, -3vh); }
}

@keyframes er-drift-3 {
  from { transform: translate(0, 0); }
  to   { transform: translate(2vw, -5vh); }
}

@keyframes er-float-soft {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-15px) rotate(4deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes er-pulse-glow {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.12); opacity: 0.75; }
}

@keyframes er-twinkle {
  from { opacity: 0.18; }
  to   { opacity: 0.45; }
}

/* Optional Stars layer */
.er-bg-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, var(--er-deep-orange), transparent),
    radial-gradient(2px 2px at 70% 15%, var(--er-purple), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, var(--er-teal), transparent),
    radial-gradient(2px 2px at 85% 60%, var(--er-pink), transparent),
    radial-gradient(1.5px 1.5px at 10% 80%, var(--er-gold), transparent),
    radial-gradient(1.5px 1.5px at 60% 45%, var(--er-green), transparent);
  opacity: 0.35;
  animation: er-twinkle 5s ease-in-out infinite alternate;
}

/* Speed modifiers */
.er-speed-slow { animation-duration: 90s !important; }
.er-speed-normal { animation-duration: 50s !important; }
.er-speed-fast { animation-duration: 25s !important; }

/* -------------------------------------------------------------
 * PRESETS LAYOUT DEFINITIONS
 * ------------------------------------------------------------- */

/* Preset 1: corners-flow */
.er-preset-corners-flow .er-spot-1 {
  top: -8%; left: -6%; width: 28vw; min-width: 200px; max-width: 420px;
  animation: er-spin-slow 60s linear infinite, er-drift-1 22s ease-in-out infinite alternate;
}
.er-preset-corners-flow .er-spot-2 {
  top: 10%; right: -8%; width: 32vw; min-width: 220px; max-width: 460px;
  animation: er-spin-slow-rev 75s linear infinite, er-drift-2 26s ease-in-out infinite alternate;
}
.er-preset-corners-flow .er-spot-3 {
  bottom: -10%; left: 8%; width: 26vw; min-width: 190px; max-width: 380px;
  animation: er-spin-slow 85s linear infinite, er-drift-3 30s ease-in-out infinite alternate;
}
.er-preset-corners-flow .er-spot-4 {
  bottom: -5%; right: 10%; width: 22vw; min-width: 170px; max-width: 320px;
  animation: er-spin-slow-rev 55s linear infinite, er-float-soft 14s ease-in-out infinite;
}
.er-preset-corners-flow .er-spot-5 {
  top: 40%; left: 45%; width: 14vw; min-width: 110px; max-width: 200px;
  animation: er-pulse-glow 8s ease-in-out infinite;
  opacity: 0.5;
}

/* Preset 2: hero-whirl */
.er-preset-hero-whirl .er-spot-1 {
  top: 5%; left: 35%; width: 34vw; min-width: 260px; max-width: 500px;
  animation: er-spin-slow 50s linear infinite, er-pulse-glow 10s ease-in-out infinite;
}
.er-preset-hero-whirl .er-spot-2 {
  top: 25%; left: 10%; width: 22vw; min-width: 170px; max-width: 320px;
  animation: er-spin-slow-rev 65s linear infinite, er-drift-1 18s ease-in-out infinite alternate;
}
.er-preset-hero-whirl .er-spot-3 {
  top: 30%; right: 12%; width: 25vw; min-width: 180px; max-width: 360px;
  animation: er-spin-slow 70s linear infinite, er-drift-2 22s ease-in-out infinite alternate;
}
.er-preset-hero-whirl .er-spot-4 {
  bottom: 8%; left: 25%; width: 18vw; min-width: 140px; max-width: 260px;
  animation: er-float-soft 12s ease-in-out infinite;
}
.er-preset-hero-whirl .er-spot-5 {
  bottom: 12%; right: 30%; width: 16vw; min-width: 130px; max-width: 240px;
  animation: er-spin-slow-rev 80s linear infinite, er-drift-3 25s ease-in-out infinite alternate;
}

/* Preset 3: side-framing */
.er-preset-side-framing .er-spot-1 {
  top: 15%; left: -6%; width: 24vw; min-width: 180px; max-width: 350px;
  animation: er-float-soft 16s ease-in-out infinite;
}
.er-preset-side-framing .er-spot-2 {
  bottom: 15%; left: -4%; width: 20vw; min-width: 150px; max-width: 300px;
  animation: er-spin-slow 75s linear infinite;
}
.er-preset-side-framing .er-spot-3 {
  top: 10%; right: -5%; width: 26vw; min-width: 190px; max-width: 380px;
  animation: er-spin-slow-rev 60s linear infinite, er-drift-2 20s ease-in-out infinite alternate;
}
.er-preset-side-framing .er-spot-4 {
  bottom: 10%; right: -3%; width: 22vw; min-width: 160px; max-width: 320px;
  animation: er-float-soft 14s ease-in-out infinite alternate;
}
.er-preset-side-framing .er-spot-5 {
  top: 45%; left: 5%; width: 12vw; min-width: 90px; max-width: 160px;
  animation: er-pulse-glow 9s ease-in-out infinite;
  opacity: 0.6;
}

/* Preset 4: scattered-drift */
.er-preset-scattered-drift .er-spot-1 {
  top: 8%; left: 12%; width: 18vw; min-width: 130px; max-width: 260px;
  animation: er-drift-1 20s ease-in-out infinite alternate, er-spin-slow 90s linear infinite;
}
.er-preset-scattered-drift .er-spot-2 {
  top: 12%; right: 18%; width: 22vw; min-width: 160px; max-width: 320px;
  animation: er-drift-2 24s ease-in-out infinite alternate, er-spin-slow-rev 70s linear infinite;
}
.er-preset-scattered-drift .er-spot-3 {
  top: 48%; left: 8%; width: 15vw; min-width: 110px; max-width: 220px;
  animation: er-float-soft 15s ease-in-out infinite;
}
.er-preset-scattered-drift .er-spot-4 {
  top: 42%; right: 10%; width: 20vw; min-width: 150px; max-width: 280px;
  animation: er-drift-3 28s ease-in-out infinite alternate;
}
.er-preset-scattered-drift .er-spot-5 {
  bottom: 10%; left: 38%; width: 16vw; min-width: 120px; max-width: 240px;
  animation: er-pulse-glow 11s ease-in-out infinite;
}

/* Preset 5: diagonal-wave */
.er-preset-diagonal-wave .er-spot-1 {
  top: -5%; left: -4%; width: 30vw; min-width: 220px; max-width: 440px;
  animation: er-spin-slow 65s linear infinite, er-drift-1 22s ease-in-out infinite alternate;
}
.er-preset-diagonal-wave .er-spot-2 {
  top: 25%; left: 28%; width: 18vw; min-width: 140px; max-width: 260px;
  animation: er-float-soft 14s ease-in-out infinite;
}
.er-preset-diagonal-wave .er-spot-3 {
  top: 45%; left: 52%; width: 24vw; min-width: 170px; max-width: 340px;
  animation: er-spin-slow-rev 80s linear infinite, er-drift-2 24s ease-in-out infinite alternate;
}
.er-preset-diagonal-wave .er-spot-4 {
  bottom: -8%; right: -5%; width: 32vw; min-width: 230px; max-width: 460px;
  animation: er-spin-slow 70s linear infinite, er-drift-3 26s ease-in-out infinite alternate;
}

/* Preset 6: minimal-floating */
.er-preset-minimal-floating .er-spot-1 {
  top: 15%; right: 10%; width: 18vw; min-width: 130px; max-width: 250px;
  animation: er-float-soft 18s ease-in-out infinite;
}
.er-preset-minimal-floating .er-spot-2 {
  bottom: 15%; left: 8%; width: 16vw; min-width: 120px; max-width: 230px;
  animation: er-spin-slow 80s linear infinite, er-drift-1 25s ease-in-out infinite alternate;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .er-bg-element-item, .er-bg-stars {
    animation: none !important;
  }
}