/* Clean, corrected dualism stylesheet */

:root {
  --dualism-body-base-dark: #040610;
  --dualism-body-base-light: #f4fbf6;
  --dualism-body-gradient-dark:
    radial-gradient(circle at 20% 20%, rgba(216, 180, 102, 0.08) 0%, rgba(16, 12, 48, 0) 40%),
    radial-gradient(circle at 80% 10%, rgba(146, 197, 222, 0.06) 0%, rgba(8, 16, 53, 0) 38%),
    radial-gradient(circle at 50% 85%, rgba(248, 231, 154, 0.1) 0%, rgba(9, 10, 27, 0) 55%),
    linear-gradient(180deg, #050814 0%, #070b1d 55%, #090b1a 100%);
  --dualism-body-gradient-light:
    radial-gradient(circle at 22% 30%, rgba(124, 206, 180, 0.18) 0%, rgba(124, 206, 180, 0) 48%),
    radial-gradient(circle at 78% 18%, rgba(168, 227, 206, 0.16) 0%, rgba(168, 227, 206, 0) 46%),
    radial-gradient(circle at 52% 80%, rgba(211, 241, 226, 0.2) 0%, rgba(211, 241, 226, 0) 52%),
    linear-gradient(180deg, #f4fbf6 0%, #eef8f2 48%, #e1f1ea 100%);
}

html[data-dualism-theme] {
  background-image: none !important;
  background-color: var(--dualism-body-base, var(--dualism-body-base-dark)) !important;
  background: var(--dualism-body-gradient, var(--dualism-body-gradient-dark)) fixed no-repeat !important;
  transition: background 800ms ease, color 400ms ease;
  position: relative;
}

html[data-dualism-theme="dark"] {
  --dualism-body-base: var(--dualism-body-base-dark);
  --dualism-body-gradient: var(--dualism-body-gradient-dark);
  color: rgba(255, 255, 255, 0.88);
}

html[data-dualism-theme="light"] {
  --dualism-body-base: var(--dualism-body-base-light);
  --dualism-body-gradient: var(--dualism-body-gradient-light);
  color: rgba(18, 24, 32, 0.9);
}

.dualism-auras {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 600ms ease;
}

html[data-dualism-theme] .dualism-auras { opacity: 1; }

.dualism-auras::before,
.dualism-auras::after {
  content: "";
  position: absolute;
  width: 120vmax;
  height: 120vmax;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.6;
  animation: dualism-aurora 24s linear infinite;
}

.dualism-auras::after {
  width: 90vmax;
  height: 90vmax;
  filter: blur(110px);
  opacity: 0.48;
  animation-duration: 32s;
  animation-direction: reverse;
}

html[data-dualism-theme="dark"] .dualism-auras::before { background: radial-gradient(circle, rgba(255, 220, 150, 0.22) 0%, rgba(255, 214, 94, 0) 65%); }
html[data-dualism-theme="dark"] .dualism-auras::after  { background: radial-gradient(circle, rgba(134, 188, 224, 0.2) 0%, rgba(56, 77, 135, 0) 62%); }
html[data-dualism-theme="light"] .dualism-auras::before { background: radial-gradient(circle, rgba(138, 219, 193, 0.26) 0%, rgba(138, 219, 193, 0) 68%); }
html[data-dualism-theme="light"] .dualism-auras::after  { background: radial-gradient(circle, rgba(178, 236, 215, 0.22) 0%, rgba(178, 236, 215, 0) 65%); }

@keyframes dualism-aurora {
  0%   { transform: translate(-50%, -50%) scale(0.88) rotate(0deg);   opacity: 0.55; }
  45%  { transform: translate(-40%, -55%) scale(1.08) rotate(120deg); opacity: 0.8;  }
  100% { transform: translate(-50%, -50%) scale(0.92) rotate(360deg); opacity: 0.65; }
}

#dualism-spirits {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0; /* behind content */
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 600ms ease, filter 700ms ease;
  background: transparent;
  isolation: isolate;
  contain: paint;
}

html[data-dualism-theme] #dualism-spirits { opacity: 0.6; filter: saturate(0.94); }
html[data-dualism-theme="light"] #dualism-spirits { mix-blend-mode: multiply; opacity: 0.58; filter: saturate(0.92); }

.dualism-spirits__layer { position: absolute; inset: -12vh; animation: dualism-layer-oscillate calc(22s + 12s * var(--dualism-layer-depth)) ease-in-out infinite; }
.dualism-spirits__layer--transition { animation-duration: 12s !important; filter: saturate(1.15); }

.dualism-spirits__sprite { position: absolute; top: calc(50% + (44vh * var(--dualism-layer-depth) * var(--dualism-direction)) + var(--dualism-offset-y, 0vh)); left: 50%; width: clamp(220px, 20vw, 360px); transform-origin: center; transform: translate(calc(-50% + var(--dualism-offset-x, 0vw)), -50%) scale(var(--dualism-scale)); animation: dualism-drift var(--dualism-duration) ease-in-out infinite; animation-delay: var(--dualism-delay); }
.dualism-spirits__sprite svg { display: block; width: 100%; height: auto; filter: blur(calc(var(--dualism-blur) * 0.4)); background: transparent; overflow: visible; }
.dualism-spirits__sprite path { transition: fill 700ms ease, opacity 700ms ease; shape-rendering: geometricPrecision; filter: blur(0.85px); }

#dualism-spirits.dualism-spirits--transitioning { filter: saturate(1.12) brightness(1.05); }
#dualism-spirits.dualism-spirits--pulse { animation: dualism-response 0.75s ease; }

@keyframes dualism-layer-oscillate {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(2.5vw, -4vh, 0); }
  100% { transform: translate3d(-2vw, 3.5vh, 0); }
}

@keyframes dualism-drift {
  0%   { transform: translate(calc(-50% + var(--dualism-offset-x, 0vw)), calc(18vh * var(--dualism-direction))) scale(var(--dualism-scale)); opacity: 0; }
  20%  { opacity: 0.48; }
  50%  { transform: translate(calc(-50% + var(--dualism-offset-x, 0vw) + 9vw * var(--dualism-direction)), calc(-6vh * var(--dualism-direction))) scale(calc(var(--dualism-scale) * 1.06)); opacity: 0.62; }
  75%  { opacity: 0.44; }
  100% { transform: translate(calc(-50% + var(--dualism-offset-x, 0vw) - 8vw * var(--dualism-direction)), calc(-24vh * var(--dualism-direction))) scale(calc(var(--dualism-scale) * 0.92)); opacity: 0; }
}

@keyframes dualism-response { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }

#moral-dualism-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0; /* behind content */
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease, filter 600ms ease;
  background: transparent;
}

html[data-dualism-theme="dark"] #moral-dualism-canvas { opacity: 0.4; mix-blend-mode: screen;   filter: drop-shadow(0 0 12px rgba(255, 233, 164, 0.3)); }
html[data-dualism-theme="light"] #moral-dualism-canvas { opacity: 0.25; mix-blend-mode: multiply; filter: drop-shadow(0 0 16px rgba(36, 40, 68, 0.32)); }

/* Caption/legend intentionally omitted for immersive experience */

@media (max-width: 980px) { #dualism-spirits { opacity: 0.5; } }
@media (max-width: 640px) { .dualism-spirits__sprite { width: clamp(170px, 36vw, 240px); } }