/* ============================================================
   TSW SITE-WIDE ANIMATED BACKGROUND
   Originally built for Battle only, now used on every page. Fixed,
   full-viewport layer (z-index:0) sitting behind everything real -
   any page using this include wraps its actual content in
   .tsw-page-content (z-index:10) so nothing ever sits under it by
   accident.
   ============================================================ */
body { background: #02071d; }

/* Articles are read for a while, not glanced at like a hub screen -
   plain white reads better for long-form text, so they opt back out
   of the dark animated layer entirely (both the background colour and
   the fixed .tsw-bg behind everything). Add body class="tsw-article-page"
   to any future article page to get the same treatment automatically. */
body.tsw-article-page { background: var(--bg, #f5f5f5); }
body.tsw-article-page .tsw-bg { display: none; }

.tsw-bg {
  position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(40,47,130,0.35), transparent 45%),
    linear-gradient(160deg, #020617 0%, #050a26 30%, #07103c 55%, #070525 78%, #020617 100%);
}
.tsw-page-content { position: relative; z-index: 10; min-height: 100vh; }

.tsw-aurora {
  position: absolute; width: 160%; height: 160%; left: -30%; top: -30%;
  background:
    radial-gradient(circle at 20% 40%, rgba(0,68,255,.28), transparent 25%),
    radial-gradient(circle at 75% 25%, rgba(157,0,255,.30), transparent 27%),
    radial-gradient(circle at 80% 75%, rgba(255,0,190,.24), transparent 28%),
    radial-gradient(circle at 35% 85%, rgba(45,0,180,.20), transparent 30%);
  filter: blur(45px);
  animation: tswAuroraMove 18s ease-in-out infinite alternate;
}
@keyframes tswAuroraMove {
  0% { transform: translate3d(-3%,-2%,0) scale(1); }
  35% { transform: translate3d(5%,3%,0) scale(1.08); }
  70% { transform: translate3d(-2%,7%,0) scale(1.12); }
  100% { transform: translate3d(7%,-3%,0) scale(1.05); }
}

.tsw-streaks {
  position: absolute; inset: -40%; opacity: .45;
  background: repeating-linear-gradient(132deg,
    transparent 0px, transparent 48px,
    rgba(81,60,255,.07) 49px,
    rgba(165,40,255,.15) 51px,
    transparent 54px, transparent 105px);
  transform: translate3d(0,0,0);
  animation: tswStreakMovement 16s linear infinite;
}
@keyframes tswStreakMovement {
  from { transform: translate3d(-80px,-80px,0); }
  to { transform: translate3d(120px,120px,0); }
}

.tsw-glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .7; will-change: transform; }

.tsw-glow-blue {
  width: 520px; height: 520px; left: -300px; top: 32%;
  background: radial-gradient(circle, rgba(0,71,255,.65), rgba(0,45,190,.20) 45%, transparent 72%);
  animation: tswBlueGlowMove 14s ease-in-out infinite alternate;
}
@keyframes tswBlueGlowMove {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(180px,120px,0) scale(1.25); }
}

.tsw-glow-purple {
  width: 600px; height: 600px; right: -330px; top: 12%;
  background: radial-gradient(circle, rgba(133,0,255,.65), rgba(96,0,200,.20) 45%, transparent 72%);
  animation: tswPurpleGlowMove 18s ease-in-out infinite alternate;
}
@keyframes tswPurpleGlowMove {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(-170px,190px,0) scale(1.20); }
}

.tsw-glow-pink {
  width: 520px; height: 520px; right: -250px; bottom: -100px;
  background: radial-gradient(circle, rgba(255,0,195,.55), rgba(177,0,156,.18) 45%, transparent 72%);
  animation: tswPinkGlowMove 16s ease-in-out infinite alternate;
}
@keyframes tswPinkGlowMove {
  from { transform: translate3d(0,0,0) scale(.95); }
  to { transform: translate3d(-200px,-130px,0) scale(1.25); }
}

.tsw-particles { position: absolute; inset: 0; overflow: hidden; }
.tsw-particle {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(190,150,255,.8);
  box-shadow: 0 0 4px rgba(185,110,255,.9), 0 0 9px rgba(140,40,255,.5);
  animation: tswParticleFloat var(--duration) linear infinite;
  animation-delay: var(--delay);
}
@keyframes tswParticleFloat {
  0% { transform: translate3d(0,80px,0); opacity: 0; }
  15% { opacity: .8; }
  75% { opacity: .5; }
  100% { transform: translate3d(var(--drift),-500px,0); opacity: 0; }
}

.tsw-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,15,.16) 65%, rgba(0,0,15,.42) 100%);
}
.tsw-bg::before {
  content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image: repeating-linear-gradient(135deg,
    transparent 0px, transparent 30px,
    rgba(255,255,255,.015) 31px, transparent 32px);
}

@media (max-width: 700px) {
  .tsw-aurora { width: 190%; height: 160%; left: -45%; }
  .tsw-streaks { opacity: .38; }
  .tsw-glow-blue { width: 360px; height: 360px; left: -230px; }
  .tsw-glow-purple { width: 420px; height: 420px; right: -270px; }
  .tsw-glow-pink { width: 400px; height: 400px; right: -250px; }
}

@media (prefers-reduced-motion: reduce) {
  .tsw-aurora, .tsw-streaks, .tsw-glow, .tsw-particle { animation: none !important; }
}