:root {
  color-scheme: dark;
  --rage: 0;
  --rage-bg-alpha: 0.08;
  --rage-mist-red-a: 0.06;
  --rage-mist-red-b: 0.05;
  --rage-depth-red: 0.05;
  --rage-face-alpha: 0.24;
  --rage-eye-scale: 1;
  --rage-shadow-blur: 7px;
  --rage-shadow-alpha: 0.56;
  --rage-eye-glow-alpha: 0.48;
  --rage-eye-glow-blur: 5px;
  --rage-eye-glow-opacity: 0.58;
  --rage-core-red-alpha: 0.61;
  --rage-core-highlight-alpha: 0.18;
  --rage-core-glow-blur: 7px;
  --rage-core-opacity: 0.9;
  --rage-spiral-opacity: 0.9;
  --rage-spiral-thick-alpha: 0.94;
  --rage-spiral-thick-width: 3.4px;
  --rage-spiral-thin-alpha: 0.78;
  --rage-spiral-blade-alpha: 0.48;
  --rage-center-width: 18%;
  --rage-lid-height: 44%;
  --rage-lid-top: -4%;
  --rage-lid-bottom: -7%;
  --rage-lid-top-shift: -12%;
  --rage-lid-bottom-shift: 13%;
  --rage-saturate-a: 0.95;
  --rage-saturate-b: 1.08;
  --rage-bright-a: 0.94;
  --rage-bright-b: 1;
  --rage-pulse-1: 0.9;
  --rage-pulse-2: 1.01;
  --rage-pulse-3: 0.95;
  --rage-pulse-4: 1.05;
  --rage-mist-a-peak: 0.56;
  --rage-mist-b-peak: 0.5;
  --rage-aura-scale-peak: 1.03;
  --blink-top-start: -12%;
  --blink-top-near: -6%;
  --blink-top-close: 12%;
  --blink-top-reset: -10%;
  --blink-bottom-start: 13%;
  --blink-bottom-near: 7%;
  --blink-bottom-close: -11%;
  --blink-bottom-reset: 10%;
  --eye-x: 0;
  --eye-y: 0;
  --eye-shift-x: 0px;
  --eye-shift-y: 0px;
  --mist-drift-x: 0px;
  --mist-drift-y: 0px;
  --eye-size: clamp(18px, 3.2vmin, 48px);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: #000;
}

.wallpaper-root {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(34, 0, 5, 0.12), rgba(0, 0, 0, 0) 32%),
    #000;
  user-select: none;
  isolation: isolate;
}

.wallpaper-root::before,
.wallpaper-root::after {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 1;
  pointer-events: none;
}

.wallpaper-root::before {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(82, 0, 12, var(--rage-bg-alpha)), rgba(0, 0, 0, 0) 31%),
    radial-gradient(ellipse at 50% 68%, rgba(0, 0, 0, 0) 0 36%, rgba(0, 0, 0, 0.78) 82%);
  opacity: 0.78;
}

.wallpaper-root::after {
  background:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.48) 16%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.48) 84%, #000 100%),
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 68%, #000 100%);
  opacity: 0.84;
}

.mist-field {
  /*
    Mist intensity knobs:
    raise opacity for denser fog, raise blur for softer fog, or adjust the
    animation durations to make the wallpaper calmer or more aggressive.
  */
  position: absolute;
  inset: -32%;
  z-index: 2;
  pointer-events: none;
  background-repeat: repeat;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
}

.mist-field-a {
  background:
    radial-gradient(ellipse at 12% 44%, rgba(110, 110, 110, 0.24), rgba(0, 0, 0, 0) 31%),
    radial-gradient(ellipse at 54% 52%, rgba(150, 150, 150, 0.17), rgba(0, 0, 0, 0) 34%),
    radial-gradient(ellipse at 88% 39%, rgba(112, 112, 112, 0.22), rgba(0, 0, 0, 0) 29%),
    linear-gradient(98deg, rgba(0, 0, 0, 0) 0 12%, rgba(132, 132, 132, 0.17) 24%, rgba(0, 0, 0, 0) 37%, rgba(146, 146, 146, 0.14) 61%, rgba(0, 0, 0, 0) 78%);
  filter: blur(24px);
  opacity: 0.76;
  transform: translate3d(calc(-7% + var(--mist-drift-x)), calc(-2% + var(--mist-drift-y)), 0) scale(1.08);
  animation: mistFlowA 42s linear infinite, mistBreath 11s ease-in-out infinite;
}

.mist-field-b {
  background:
    repeating-linear-gradient(102deg, rgba(0, 0, 0, 0) 0 70px, rgba(132, 132, 132, 0.12) 112px, rgba(0, 0, 0, 0) 178px),
    radial-gradient(ellipse at 30% 62%, rgba(174, 174, 174, 0.17), rgba(0, 0, 0, 0) 35%),
    radial-gradient(ellipse at 76% 50%, rgba(130, 9, 19, var(--rage-mist-red-a)), rgba(0, 0, 0, 0) 32%);
  filter: blur(18px);
  opacity: 0.56;
  transform: translate3d(calc(9% + var(--mist-drift-x) * -0.6), calc(3% + var(--mist-drift-y) * 0.4), 0) scale(1.12);
  animation: mistFlowB 55s linear infinite reverse, mistThreat 14s ease-in-out infinite;
}

.mist-field-c {
  background:
    radial-gradient(ellipse at 18% 30%, rgba(215, 215, 215, 0.13), rgba(0, 0, 0, 0) 22%),
    radial-gradient(ellipse at 50% 43%, rgba(122, 0, 13, var(--rage-mist-red-b)), rgba(0, 0, 0, 0) 24%),
    radial-gradient(ellipse at 83% 68%, rgba(200, 200, 200, 0.13), rgba(0, 0, 0, 0) 28%);
  filter: blur(31px);
  opacity: 0.5;
  transform: translate3d(calc(-2% + var(--mist-drift-x) * 0.4), calc(4% + var(--mist-drift-y) * -0.7), 0) scale(1.18);
  animation: mistFlowC 67s linear infinite, mistBreath 16s ease-in-out infinite reverse;
}

.mist-depth-shadow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 49%, rgba(0, 0, 0, 0) 0 23%, rgba(0, 0, 0, 0.42) 62%, rgba(0, 0, 0, 0.94) 100%),
    radial-gradient(ellipse at 50% 46%, rgba(102, 0, 14, var(--rage-depth-red)), rgba(0, 0, 0, 0) 25%);
  opacity: 0.9;
}

.bat-logo-stage {
  /*
    The PNG is never stretched or distorted.
    It is contained within the viewport at its original 1536x1024 aspect ratio.
  */
  position: relative;
  z-index: 4;
  width: min(100vw, 150vh);
  aspect-ratio: 1536 / 1024;
  overflow: visible;
  pointer-events: auto;
  transform: translate3d(0, 1.2vh, 0);
}

.bat-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

.bat-face-aura,
.bat-eye-vignette,
.bat-eye,
.bat-eye * {
  pointer-events: none;
}

.bat-face-aura {
  position: absolute;
  left: 50%;
  top: 46.5%;
  width: clamp(100px, 14vmin, 210px);
  height: clamp(34px, 5.2vmin, 78px);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(132, 0, 17, var(--rage-face-alpha)) 0%, rgba(65, 0, 9, 0.16) 38%, rgba(0, 0, 0, 0) 74%);
  filter: blur(15px);
  opacity: 0.42;
  mix-blend-mode: screen;
  animation: faceAura 7.9s ease-in-out infinite;
  z-index: 2;
}

.bat-eye-vignette {
  position: absolute;
  left: 50%;
  top: 46.7%;
  width: clamp(190px, 27vmin, 430px);
  height: clamp(76px, 11vmin, 170px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0 34%, rgba(0, 0, 0, 0.38) 70%, rgba(0, 0, 0, 0.7) 100%);
  filter: blur(11px);
  opacity: 0.62;
  mix-blend-mode: multiply;
  z-index: 3;
}

.bat-eye {
  /*
    Eye coordinates from the 1536x1024 source image:
    left eye center:  left 46.2%, top 46.6%
    right eye center: left 53.5%, top 46.5%
  */
  position: absolute;
  width: var(--eye-size);
  aspect-ratio: 1 / 1;
  transform:
    translate(-50%, -50%)
    translate(var(--eye-shift-x), var(--eye-shift-y))
    scale(var(--rage-eye-scale));
  transform-origin: 50% 50%;
  z-index: 5;
  border-radius: 50%;
  filter:
    drop-shadow(0 0 2px rgba(0, 0, 0, 1))
    drop-shadow(0 0 var(--rage-shadow-blur) rgba(95, 0, 10, var(--rage-shadow-alpha)));
  animation: eyeThreat 8.4s ease-in-out infinite;
}

.bat-eye.left {
  left: 46.2%;
  top: 46.6%;
}

.bat-eye.right {
  left: 53.5%;
  top: 46.5%;
}

.bat-eye::before,
.bat-eye::after {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  z-index: 5;
}

.bat-eye::before {
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.82) 74%, rgba(0, 0, 0, 0.98) 100%);
  filter: blur(0.4px);
}

.bat-eye::after {
  background:
    radial-gradient(ellipse at center, rgba(15, 0, 0, 0) 40%, rgba(0, 0, 0, 0.78) 80%, rgba(0, 0, 0, 1) 100%);
  opacity: 0.82;
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 1),
    inset 0 3px 6px rgba(0, 0, 0, 0.96),
    inset 0 -3px 6px rgba(0, 0, 0, 0.92);
}

.bat-eye-glow {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(151, 0, 17, var(--rage-eye-glow-alpha)) 0 21%, rgba(83, 0, 11, 0.24) 44%, rgba(0, 0, 0, 0) 72%);
  filter: blur(var(--rage-eye-glow-blur));
  opacity: var(--rage-eye-glow-opacity);
  transform: scale(0.92);
  animation: eyePulse 3.7s ease-in-out infinite;
  z-index: 1;
}

.bat-eye-core {
  /*
    Animation layers:
    - spiral speed reacts to pointer proximity through --rage.
    - core micro-movement stays tiny and predatory, never playful.
    - lids narrow on rage/hover, making the face feel like it noticed you.
  */
  position: absolute;
  inset: 8%;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.98) 0 8%, rgba(47, 0, 6, 0.97) 10% 19%, rgba(128, 0, 14, var(--rage-core-red-alpha)) 20% 38%, rgba(34, 0, 5, 0.94) 58%, rgba(0, 0, 0, 1) 100%),
    conic-gradient(from 18deg, rgba(186, 0, 20, 0.8), rgba(17, 0, 2, 1), rgba(111, 0, 13, 0.54), rgba(0, 0, 0, 0.98), rgba(186, 0, 20, 0.8));
  box-shadow:
    inset 0 0 3px rgba(255, 35, 35, var(--rage-core-highlight-alpha)),
    inset 0 0 9px rgba(0, 0, 0, 1),
    0 0 var(--rage-core-glow-blur) rgba(105, 0, 10, 0.58);
  opacity: var(--rage-core-opacity);
  transform-origin: 50% 50%;
  animation: microMovement 6.8s ease-in-out infinite;
  z-index: 2;
}

.bat-eye-spiral {
  position: absolute;
  inset: 2%;
  width: 96%;
  height: 96%;
  transform-origin: 50% 50%;
  animation:
    spiralRotate 5.5s linear infinite,
    spiralRage 1.1s ease-in-out infinite;
  opacity: var(--rage-spiral-opacity);
}

.spiral-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.spiral-line.thick {
  stroke: rgba(166, 0, 19, var(--rage-spiral-thick-alpha));
  stroke-width: var(--rage-spiral-thick-width);
  filter: drop-shadow(0 0 1px rgba(80, 0, 6, 0.86));
}

.spiral-line.thin {
  stroke: rgba(100, 0, 11, var(--rage-spiral-thin-alpha));
  stroke-width: 1.6;
}

.spiral-line.blade {
  stroke: rgba(206, 12, 28, var(--rage-spiral-blade-alpha));
  stroke-width: 1.2;
}

.bat-eye-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--rage-center-width);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 1) 0 42%, rgba(45, 0, 5, 0.96) 66%, rgba(0, 0, 0, 0) 100%);
  box-shadow:
    0 0 3px rgba(0, 0, 0, 1),
    0 0 6px rgba(74, 0, 8, 0.72);
  z-index: 3;
}

.bat-eye-lid {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 6;
}

.bat-eye-lid::before,
.bat-eye-lid::after {
  content: "";
  position: absolute;
  left: -14%;
  width: 128%;
  height: var(--rage-lid-height);
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.98) 62%, rgba(0, 0, 0, 0));
  filter: blur(0.45px);
  opacity: 0.95;
}

.bat-eye-lid::before {
  top: var(--rage-lid-top);
  transform: translateY(var(--rage-lid-top-shift)) rotate(-7deg);
  transform-origin: 50% 100%;
  animation: blinkTop 9s ease-in-out infinite;
}

.bat-eye-lid::after {
  bottom: var(--rage-lid-bottom);
  transform: translateY(var(--rage-lid-bottom-shift)) rotate(6deg);
  transform-origin: 50% 0%;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.97) 60%, rgba(0, 0, 0, 0));
  animation: blinkBottom 9s ease-in-out infinite;
}

@keyframes spiralRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spiralRage {
  0%,
  100% {
    filter: saturate(var(--rage-saturate-a)) brightness(var(--rage-bright-a));
  }
  47% {
    filter: saturate(var(--rage-saturate-b)) brightness(var(--rage-bright-b));
  }
}

@keyframes eyePulse {
  0%,
  100% {
    transform: scale(var(--rage-pulse-1));
  }
  31% {
    transform: scale(var(--rage-pulse-2));
  }
  57% {
    transform: scale(var(--rage-pulse-3));
  }
  78% {
    transform: scale(var(--rage-pulse-4));
  }
}

@keyframes eyeThreat {
  0%,
  100% {
    opacity: 0.95;
  }
  43% {
    opacity: 0.89;
  }
  59% {
    opacity: 1;
  }
  86% {
    opacity: 0.92;
  }
}

@keyframes microMovement {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  27% {
    transform: translate(0.55px, -0.25px) scale(0.985);
  }
  48% {
    transform: translate(-0.35px, 0.18px) scale(1.012);
  }
  73% {
    transform: translate(0.2px, 0.32px) scale(0.998);
  }
}

@keyframes blinkTop {
  0%,
  76%,
  100% {
    transform: translateY(var(--blink-top-start)) rotate(-7deg);
  }
  82% {
    transform: translateY(var(--blink-top-near)) rotate(-8deg);
  }
  86% {
    transform: translateY(var(--blink-top-close)) rotate(-8deg);
  }
  91% {
    transform: translateY(var(--blink-top-reset)) rotate(-7deg);
  }
}

@keyframes blinkBottom {
  0%,
  76%,
  100% {
    transform: translateY(var(--blink-bottom-start)) rotate(6deg);
  }
  82% {
    transform: translateY(var(--blink-bottom-near)) rotate(7deg);
  }
  86% {
    transform: translateY(var(--blink-bottom-close)) rotate(7deg);
  }
  91% {
    transform: translateY(var(--blink-bottom-reset)) rotate(6deg);
  }
}

@keyframes faceAura {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.96);
  }
  38% {
    transform: translate(-50%, -50%) scale(var(--rage-aura-scale-peak));
  }
  71% {
    transform: translate(-50%, -50%) scale(0.99);
  }
}

@keyframes mistFlowA {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 620px -160px, -410px 140px, 260px 320px, 980px 0;
  }
}

@keyframes mistFlowB {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: -760px 90px, 380px -220px, -320px 180px;
  }
}

@keyframes mistFlowC {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 330px 210px, -260px -180px, 520px -140px;
  }
}

@keyframes mistBreath {
  0%,
  100% {
    opacity: 0.34;
  }
  45% {
    opacity: var(--rage-mist-a-peak);
  }
  72% {
    opacity: 0.44;
  }
}

@keyframes mistThreat {
  0%,
  100% {
    opacity: 0.32;
  }
  39% {
    opacity: var(--rage-mist-b-peak);
  }
  67% {
    opacity: 0.38;
  }
}

@media (prefers-reduced-motion: reduce) {
  /*
    Reduced motion fallback:
    The live wallpaper remains a static dark bat with a crimson stare.
    Rotation, mist drift, blink, and cursor rage are all stopped.
  */
  :root {
    --rage: 0;
    --eye-x: 0;
    --eye-y: 0;
    --eye-shift-x: 0px;
    --eye-shift-y: 0px;
    --mist-drift-x: 0px;
    --mist-drift-y: 0px;
  }

  .mist-field,
  .bat-face-aura,
  .bat-eye,
  .bat-eye-glow,
  .bat-eye-core,
  .bat-eye-spiral,
  .bat-eye-lid::before,
  .bat-eye-lid::after {
    animation: none;
  }
}