/* Movimiento ambiental discreto: cargar después de theme.css. */
.mansion-scene__sky {
  animation: none;
  opacity: .45;
}

/* Dos bancos visibles y desiguales, concentrados en el tercio inferior. */
.mansion-scene__mist {
  pointer-events: none;
  overflow: hidden;
}
.mansion-scene__mist::before,
.mansion-scene__mist::after {
  content: "";
  position: absolute;
  left: -35%;
  width: 170%;
  height: 31%;
  bottom: -5%;
  background:
    radial-gradient(ellipse 22% 39% at 12% 70%, #e5c9ffad, transparent 80%),
    radial-gradient(ellipse 29% 32% at 38% 53%, #cba0f2a3, transparent 82%),
    radial-gradient(ellipse 24% 45% at 63% 71%, #eddaffb0, transparent 80%),
    radial-gradient(ellipse 30% 31% at 86% 47%, #cba8f4a6, transparent 82%);
  filter: blur(14px);
  opacity: .68;
  transform: translate3d(-14%, 0, 0);
  animation: ambientMistNear 11s ease-in-out infinite alternate;
  will-change: transform;
}
.mansion-scene__mist::after {
  left: -30%;
  width: 160%;
  height: 28%;
  bottom: 8%;
  background:
    radial-gradient(ellipse 26% 36% at 18% 60%, #dcb9fba8, transparent 82%),
    radial-gradient(ellipse 31% 33% at 47% 73%, #c8a1ed9c, transparent 84%),
    radial-gradient(ellipse 24% 43% at 76% 52%, #e7ccffa3, transparent 82%),
    radial-gradient(ellipse 18% 29% at 97% 73%, #b989e590, transparent 80%);
  filter: blur(17px);
  opacity: .48;
  animation: ambientMistFar 15s ease-in-out infinite alternate;
}
@keyframes ambientMistNear {
  from { transform: translate3d(-14%, 2%, 0); }
  to { transform: translate3d(13%, -6%, 0); }
}
@keyframes ambientMistFar {
  from { transform: translate3d(13%, -3%, 0); }
  to { transform: translate3d(-12%, 4%, 0); }
}

/* Siluetas pequeñas cruzan el cielo con vuelos escalonados y pausas entre pasadas. */
.bat-layer { pointer-events: none; }
.bat-layer > .bat { display: none; animation: none; }
.ambient-bat {
  position: absolute;
  left: -48px;
  top: var(--start-y, 17%);
  width: var(--size, 18px);
  height: auto;
  color: #1a0a25;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scaleX(var(--direction, 1));
  animation: ambientBatPass var(--duration, 28s) linear var(--delay, 0s) infinite both;
  will-change: transform;
}
.ambient-bat[data-direction="reverse"] {
  left: calc(var(--flight-width, 400px) + 48px);
  animation-name: ambientBatPassReverse;
}
.ambient-bat__drift {
  display: block;
  width: 100%;
  animation: ambientBatSway 8s ease-in-out var(--delay, 0s) infinite alternate both;
}
.ambient-bat svg {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
  overflow: visible;
}
.ambient-bat__wing--left,
.ambient-bat__wing--right {
  transform-box: view-box;
  transform-origin: 32px 16px;
  animation: ambientBatLeftWing .62s ease-in-out infinite alternate;
}
.ambient-bat__wing--right { animation-name: ambientBatRightWing; }
.ambient-bat__body { transform: none; }
@keyframes ambientBatPass {
  0%, 10% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(var(--direction, 1));
  }
  12% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(var(--direction, 1));
  }
  15% { opacity: .72; }
  37% { opacity: .72; }
  40%, 44%, 100% {
    opacity: 0;
    transform: translate3d(calc(var(--flight-width, 400px) + 96px), 0, 0) scaleX(var(--direction, 1));
  }
}
@keyframes ambientBatPassReverse {
  0%, 10% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(var(--direction, -1));
  }
  12% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(var(--direction, -1));
  }
  15% { opacity: .66; }
  37% { opacity: .66; }
  40%, 44%, 100% {
    opacity: 0;
    transform: translate3d(calc(-1 * (var(--flight-width, 400px) + 96px)), 0, 0) scaleX(var(--direction, -1));
  }
}
@keyframes ambientBatSway {
  from { transform: translate3d(0, calc(-1 * var(--sway, 7px)), 0) rotate(-3deg); }
  to { transform: translate3d(0, var(--sway, 7px), 0) rotate(3deg); }
}
@keyframes ambientBatLeftWing {
  from { transform: rotate(-8deg) scaleY(.73); }
  to { transform: rotate(8deg) scaleY(1); }
}
@keyframes ambientBatRightWing {
  from { transform: rotate(8deg) scaleY(.73); }
  to { transform: rotate(-8deg) scaleY(1); }
}

/* Pausa antes de entrar y cuando el usuario o el navegador lo soliciten. */
body:not(.has-entered) .ambient-bat,
body:not(.has-entered) .mansion-scene__mist {
  visibility: hidden;
}
body:not(.has-entered) :is(.ambient-bat, .ambient-bat__drift, .ambient-bat__wing--left, .ambient-bat__wing--right),
body:not(.has-entered) .mansion-scene__mist::before,
body:not(.has-entered) .mansion-scene__mist::after,
.ambience-paused :is(.ambient-bat, .ambient-bat__drift, .ambient-bat__wing--left, .ambient-bat__wing--right),
.ambience-paused .mansion-scene__mist::before,
.ambience-paused .mansion-scene__mist::after {
  animation-play-state: paused;
}
.ambience-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  width: 100%;
  min-height: 40px;
  margin-top: .6rem;
  padding: .55rem .7rem;
  border: 1px solid #cb86e24d;
  border-radius: 5px;
  background: #230e37;
  color: #edd4f8;
  text-align: left;
  font-size: .73rem;
  line-height: 1.4;
  cursor: pointer;
}
.ambience-control:hover { border-color: #e39cd6; background: #301344; }
.ambience-control:focus-visible { outline: 2px solid #ffcb85; outline-offset: 3px; }
.ambience-control[aria-pressed="true"] { border-color: #ba82d1; color: #dec0eb; }
.ambience-control:disabled { opacity: .65; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .ambient-bat { display: none !important; }
  .ambient-bat, .ambient-bat__drift, .ambient-bat__wing--left, .ambient-bat__wing--right,
  .mansion-scene__mist::before, .mansion-scene__mist::after { animation: none !important; will-change: auto; }
  .mansion-scene__mist::before { transform: none; opacity: .08; }
  .mansion-scene__mist::after { transform: none; opacity: .05; }
}