/* ===========================================================
   Smart Welcome Intro Pro - Frontend Animations (v2.2.0)
   Author: Web Solution Network
   Description: Animated backgrounds for welcome intro overlay
   =========================================================== */

#swi-intro {
  position: relative;
  --swi-c1: var(--swi-c1, #6aa2ff);
  --swi-c2: var(--swi-c2, #684bff);
  --swi-bg: var(--swi-bg, #0e1220);
  --swi-text: var(--swi-text, #ffffff);
  color: var(--swi-text);
  background-color: var(--swi-bg);
  overflow: hidden;
}

#swi-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transition: background 0.6s ease;
}

/* ===========================================================
   WAVE FLOW
   =========================================================== */
.swi-style-wave::before {
  background: linear-gradient(270deg, var(--swi-c1), var(--swi-c2), var(--swi-c1));
  background-size: 400% 400%;
  animation: swi-wave-h 10s ease infinite;
}
.swi-style-wave.swi-dir-left::before { animation-name: swi-wave-h-rev; }
.swi-style-wave.swi-dir-up::before { animation-name: swi-wave-v; }
.swi-style-wave.swi-dir-down::before { animation-name: swi-wave-v-rev; }

@keyframes swi-wave-h {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
@keyframes swi-wave-h-rev {
  0% { background-position: 100% 50% }
  50% { background-position: 0% 50% }
  100% { background-position: 100% 50% }
}
@keyframes swi-wave-v {
  0% { background-position: 50% 100% }
  50% { background-position: 50% 0% }
  100% { background-position: 50% 100% }
}
@keyframes swi-wave-v-rev {
  0% { background-position: 50% 0% }
  50% { background-position: 50% 100% }
  100% { background-position: 50% 0% }
}

/* ===========================================================
   DIAGONAL FLOW
   =========================================================== */
.swi-style-diagonal::before {
  background: linear-gradient(45deg, var(--swi-c1), var(--swi-c2));
  background-size: 200% 200%;
  animation: swi-diag 8s ease-in-out infinite;
}
.swi-style-diagonal.swi-dir-left::before { animation-direction: reverse; }
.swi-style-diagonal.swi-dir-up::before { animation-name: swi-diag-v; }
.swi-style-diagonal.swi-dir-down::before { animation-name: swi-diag-v; animation-direction: reverse; }

@keyframes swi-diag {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
@keyframes swi-diag-v {
  0% { background-position: 50% 0% }
  50% { background-position: 50% 100% }
  100% { background-position: 50% 0% }
}

/* ===========================================================
   GRADIENT PULSE
   =========================================================== */
.swi-style-pulse::before {
  background:
    radial-gradient(1200px 800px at 50% 50%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(800px 600px at 20% 80%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, var(--swi-c1), var(--swi-c2));
  filter: saturate(108%);
  animation: swi-pulse 4.8s ease-in-out infinite;
}
@keyframes swi-pulse {
  0%,100% { transform: scale(1); opacity: .98; }
  50% { transform: scale(1.03); opacity: 1; }
}

/* ===========================================================
   AURORA GLOW (default)
   =========================================================== */
.swi-style-aurora::before {
  background:
    radial-gradient(800px 600px at 10% 20%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(700px 500px at 30% 80%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(120deg, var(--swi-c1), var(--swi-c2));
  animation: swi-aurora 12s ease-in-out infinite;
  background-blend-mode: screen, screen, screen, normal;
}
.swi-style-aurora.swi-dir-left::before { animation-direction: reverse; }
.swi-style-aurora.swi-dir-up::before { animation-name: swi-aurora-v; }
.swi-style-aurora.swi-dir-down::before { animation-name: swi-aurora-v; animation-direction: reverse; }

@keyframes swi-aurora {
  0%,100% { background-position: 0% 50%,100% 50%,50% 100%,50% 50% }
  50% { background-position: 100% 50%,0% 50%,50% 0%,50% 50% }
}
@keyframes swi-aurora-v {
  0%,100% { background-position: 50% 0%,50% 100%,0% 50%,50% 50% }
  50% { background-position: 50% 100%,50% 0%,100% 50%,50% 50% }
}

/* ===========================================================
   NEON FADE (cyberpunk)
   =========================================================== */
.swi-style-neon::before {
  background:
    radial-gradient(1000px 600px at 30% 30%, var(--swi-c1, #6aa2ff), transparent 60%),
    radial-gradient(900px 700px at 70% 60%, var(--swi-c2, #684bff), transparent 60%),
    linear-gradient(135deg, var(--swi-c1, #6aa2ff), var(--swi-c2, #684bff));
  animation: swi-neon 9s ease-in-out infinite;
  filter: saturate(130%) brightness(1.1);
}
@keyframes swi-neon {
  0%,100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.03); filter: brightness(1.4); }
}

/* ===========================================================
   COSMIC DRIFT
   =========================================================== */
.swi-style-cosmic::before {
  background:
    radial-gradient(800px 600px at 20% 40%, var(--swi-c1, #6aa2ff), transparent 60%),
    radial-gradient(700px 500px at 80% 70%, var(--swi-c2, #684bff), transparent 60%),
    linear-gradient(160deg, var(--swi-c1, #6aa2ff), var(--swi-c2, #684bff));
  animation: swi-cosmic 14s ease-in-out infinite;
  background-size: 200% 200%;
}
@keyframes swi-cosmic {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

/* ===========================================================
   SUNRISE GRADIENT
   =========================================================== */
.swi-style-sunrise::before {
  background:
    radial-gradient(900px 700px at 50% 120%, var(--swi-c1, #ffb07a), transparent 60%),
    radial-gradient(700px 500px at 20% 20%, var(--swi-c2, #ff6fa0), transparent 60%),
    linear-gradient(180deg, var(--swi-c1, #ffb07a), var(--swi-c2, #8a5cff));
  background-size: 200% 200%;
  animation: swi-sunrise 10s ease-in-out infinite;
}
@keyframes swi-sunrise {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}


/* Exit fade */
#swi-intro.swi-exit {
  animation: swi-glow-out 1s ease forwards;
}

@keyframes swi-glow-out {
  0%   { opacity: 1; filter: brightness(1); transform: scale(1); }
  100% { opacity: 0; filter: brightness(1.3) blur(8px); transform: scale(1.05); }
}