/* Fixed combat backdrop. Home uses a static Night frame; only windmill blades
   retain their independent CSS animation. */

.combat-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #000533;
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
}

.combat-sky[hidden] {
  display: none !important;
}

/* The Home document includes the tiny windmill shell before JavaScript runs.
   Keep it in the correct responsive stage position, but hold the blades until
   the module has confirmed both mask assets are available. */
.combat-sky--preload {
  /* Keep the 16:9 design canvas covered without waiting for JS to calculate
     its scale. The live stage switches back to the pixel canvas below. */
}

.combat-sky--preload .combat-sky__stage {
  width: max(100vw, 177.7777778vh);
  height: max(56.25vw, 100vh);
  transform: translate(-50%, -50%);
}

.combat-sky--preload .combat-sky__windmill {
  left: 55.3125%;
  top: 34.3518519%;
  width: 4.2708333%;
  height: 15%;
  /* Keep the paused placeholder visible, then gently hand it to the live
     windmill when both mask assets have finished decoding. */
  opacity: 0.82;
}

.combat-sky--preload .combat-sky__blade-pivot {
  left: calc(50% - 3.6585366%);
  top: calc(50% - 33.9506173%);
}

.combat-sky--preload .combat-sky__blades {
  width: 167.0731707%;
  height: 80.8641975%;
  margin-left: -83.5365854%;
  margin-top: -40.4320988%;
  animation: none;
}

.combat-sky__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(var(--combat-sky-scale, 1));
  transform-origin: center center;
  will-change: transform;
}

/* Compact/reduced-motion fallback: keep one painted scene and release the
   compositor layers that are only useful while scrubbing the full animation. */
.combat-sky--static .combat-sky__stage,
.combat-sky--static .combat-sky__sky,
.combat-sky--static .combat-sky__celestial {
  will-change: auto;
}

.combat-sky--static .combat-sky__blades {
  animation: none;
}

.combat-sky--fixed-night .combat-sky__stage,
.combat-sky--fixed-night .combat-sky__sky,
.combat-sky--fixed-night .combat-sky__celestial {
  will-change: auto;
}

/* A url() inside a custom property resolves against the stylesheet that uses
   it, so theme.css's `--bpb-bg-home-night` would point at js/pages/assets/. */
.combat-sky--fixed-night {
  background: url('../../../assets/theme/backgrounds/combat/CombatNightStatic.png') center / cover no-repeat;
}

/* Admin background-test presets are frozen to a selected time, but keep the
   windmill animation active so each tab shows the live mechanical detail. */
.combat-sky--test-static .combat-sky__stage,
.combat-sky--test-static .combat-sky__sky,
.combat-sky--test-static .combat-sky__celestial {
  will-change: auto;
}

.combat-sky--test-twinkle .combat-sky__star img {
  animation: combat-sky-star-glimmer 3.2s ease-in-out infinite;
}

.combat-sky--test-twinkle [data-layer='star2'] img {
  animation-delay: -1.1s;
}

.combat-sky--test-twinkle [data-layer='star3'] img {
  animation-delay: -2.2s;
}

@keyframes combat-sky-star-glimmer {
  0%,
  100% {
    filter: sepia(0.35) saturate(1.4) brightness(1.05);
  }
  46% {
    filter: sepia(0.35) saturate(1.55) brightness(1.38);
  }
  58% {
    filter: sepia(0.35) saturate(1.4) brightness(1.08);
  }
}

/* Sky: grayscale banding × modulate color */
.combat-sky__sky {
  position: absolute;
  left: 0;
  top: -35px;
  width: 1920px;
  height: 1667px;
  background-color: var(--sky-mod, #2ca4ff);
  transform: translateY(var(--sky-y, -400px));
  will-change: transform;
}

.combat-sky__sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(80, 80, 80, 0.35) 21%,
    rgba(255, 255, 255, 0.55) 42%,
    rgba(90, 90, 90, 0.3) 65%,
    rgba(0, 0, 0, 0.5) 100%
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Centered sprite layers (Godot Sprite origin) */
.combat-sky__spr {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--sx, 1), var(--sy, 1));
  transform-origin: center center;
  background-color: var(--mod, #fff);
  /* mask-image set inline (document-relative URL); size/mode here */
  -webkit-mask-source-type: alpha;
  mask-mode: alpha;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: var(--a, 1);
}

/* Sun / moon / stars keep painted color — use img, not mask tint */
.combat-sky__celestial {
  --x: 0px;
  --y: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w);
  height: var(--h);
  transform: translate3d(var(--x), var(--y), 0) translate(-50%, -50%)
    scale(var(--sx, 1), var(--sy, 1));
  transform-origin: center center;
  opacity: var(--a, 1);
  will-change: transform, opacity;
  pointer-events: none;
  contain: layout paint;
}

.combat-sky__celestial img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.combat-sky__star img {
  filter: sepia(0.35) saturate(1.4) brightness(1.05);
}

/* Windmill: tower + pivoting blades */
.combat-sky__windmill {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  transform: translate(-50%, -50%) scale(var(--sx, 1), var(--sy, 1));
  transform-origin: center center;
  transition: opacity 180ms ease-out;
}

.combat-sky__windmill-tower {
  position: absolute;
  inset: 0;
  background-color: var(--mod, #c98b3e);
  /* mask-image set inline */
  -webkit-mask-source-type: alpha;
  mask-mode: alpha;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.combat-sky__blade-pivot {
  position: absolute;
  left: calc(50% - 3px);
  top: calc(50% - 55px);
  width: 0;
  height: 0;
  transform: rotate(21.2deg) scale(0.89, 1);
  transform-origin: 0 0;
}

.combat-sky__blades {
  position: absolute;
  left: 0;
  top: 0;
  width: 137px;
  height: 131px;
  margin-left: -68.5px;
  margin-top: -65.5px;
  background-color: var(--blade-mod, #edd696);
  /* mask-image set inline */
  -webkit-mask-source-type: alpha;
  mask-mode: alpha;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: combat-sky-spin 16.67s linear infinite;
  will-change: transform;
  contain: paint;
}

@keyframes combat-sky-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Hill1 stops short of the 1080 stage. Phone view has no wood frame, so the
   night fill (#000533) showed as a line under the grass. */
.combat-sky__ground {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1920px;
  height: 28px;
  background: var(--ground-mod, #727a2a);
}

.combat-sky__speckles {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%);
  /* background-image set inline (document-relative) */
  background-size: cover;
  background-position: center;
  opacity: 0.045;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .combat-sky__windmill {
    transition: none;
  }

  .combat-sky__blades {
    animation: none;
  }
}

/* Content above fixed sky — do NOT restyle #site-nav (must stay position:fixed) */
body.page-home #main,
body.page-home #site-footer {
  position: relative;
  z-index: 1;
}