/* Local light, glass and smoke only. No atmospheric layer touches the UI. */
.scene-frame {
  position: relative;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  isolation: isolate;
  background: #211b15;
}
.scene-frame > img,
.atmosphere-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.scene-frame > img {
  object-fit: contain;
}
.atmosphere-art {
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  contain: paint;
}
.atmosphere-art * {
  pointer-events: none;
}
.scene-storm .scene-frame > img {
  filter: brightness(0.86) saturate(0.83);
}
.scene-storm .window-cold {
  opacity: 0.17;
}
.scene-embers .scene-frame > img {
  filter: brightness(0.88) saturate(0.85);
}
.scene-embers .window-cold {
  opacity: 0.06;
}
.rain-far {
  animation: rain-fall 5.9s linear infinite;
  opacity: 0.33;
}
.rain-near {
  animation: rain-fine 9.7s linear infinite;
  animation-delay: -4.3s;
  opacity: 0.22;
}
@keyframes rain-fall {
  from {
    transform: translateY(-120px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes rain-fine {
  from {
    transform: translateY(-160px);
  }
  to {
    transform: translateY(0);
  }
}
.glass-drop {
  stroke-dasharray: 9 260;
  animation: glass-slide 19s linear infinite;
  opacity: 0;
}
.drop-one {
  animation-delay: -7s;
}
.drop-two {
  animation-duration: 27s;
  animation-delay: -18s;
}
.drop-three {
  animation-duration: 23s;
  animation-delay: -4s;
}
@keyframes glass-slide {
  0%,
  12% {
    stroke-dashoffset: 30;
    opacity: 0;
  }
  17% {
    opacity: 0.42;
  }
  60% {
    opacity: 0.28;
  }
  78%,
  100% {
    stroke-dashoffset: -245;
    opacity: 0;
  }
}
.hearth-breath {
  animation: hearth-breath 9.3s ease-in-out infinite;
  opacity: 0.3;
}
@keyframes hearth-breath {
  0%,
  100% {
    opacity: 0.26;
  }
  22% {
    opacity: 0.36;
  }
  43% {
    opacity: 0.29;
  }
  68% {
    opacity: 0.39;
  }
  84% {
    opacity: 0.32;
  }
}
.candle {
  --cadence: 4.7s;
  --phase: -1s;
}
.candle-2 {
  --cadence: 5.9s;
  --phase: -3.8s;
}
.candle-3 {
  --cadence: 3.8s;
  --phase: -2.7s;
}
.candle-4 {
  --cadence: 6.3s;
  --phase: -5.1s;
}
.candle-5 {
  --cadence: 4.3s;
  --phase: -3.2s;
}
.candle-6 {
  --cadence: 5.3s;
  --phase: -1.8s;
}
.candle-7 {
  --cadence: 6.7s;
  --phase: -4.6s;
}
.candle-8 {
  --cadence: 7.1s;
  --phase: -6.2s;
}
.candle-light {
  opacity: 0.33;
  animation: candle-light var(--cadence) var(--phase) ease-in-out infinite;
}
.candle-flame {
  opacity: 0.8;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: candle-flame var(--cadence) var(--phase) ease-in-out infinite;
}
@keyframes candle-light {
  0%,
  100% {
    opacity: 0.29;
  }
  19% {
    opacity: 0.38;
  }
  32% {
    opacity: 0.32;
  }
  58% {
    opacity: 0.41;
  }
  71% {
    opacity: 0.34;
  }
  89% {
    opacity: 0.37;
  }
}
@keyframes candle-flame {
  0%,
  100% {
    transform: scale(0.95, 1) rotate(-2deg);
    opacity: 0.75;
  }
  19% {
    transform: scale(1.02, 1.08) rotate(2deg);
    opacity: 0.84;
  }
  32% {
    transform: scale(0.97, 0.96) rotate(-1deg);
    opacity: 0.78;
  }
  58% {
    transform: scale(0.92, 1.1) rotate(3deg);
    opacity: 0.86;
  }
  71% {
    transform: scale(1.02, 1) rotate(0deg);
    opacity: 0.8;
  }
  89% {
    transform: scale(0.96, 1.04) rotate(-2deg);
    opacity: 0.82;
  }
}
.smoke-wisp {
  stroke-width: 1.7;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: incense-rise 19s linear infinite;
}
.wisp-one {
  animation-delay: -7s;
}
.wisp-two {
  animation-duration: 23s;
  animation-delay: -18s;
  stroke-width: 1.2;
}
.wisp-three {
  animation-duration: 29s;
  animation-delay: -2s;
  stroke-width: 0.9;
}
@keyframes incense-rise {
  0% {
    opacity: 0;
    transform: translate(0, 6px) scale(0.65, 0.75);
  }
  18% {
    opacity: 0.22;
  }
  48% {
    opacity: 0.17;
  }
  77% {
    opacity: 0.07;
  }
  100% {
    opacity: 0;
    transform: translate(-16px, -28px) scale(1.25, 1.1);
  }
}
[data-atmosphere="subtle"] .atmosphere-art {
  opacity: 0.62;
}
[data-atmosphere="subtle"] .rain-near,
[data-atmosphere="subtle"] .window-drops,
[data-atmosphere="subtle"] .wisp-two,
[data-atmosphere="subtle"] .wisp-three {
  display: none;
}
[data-atmosphere="subtle"] .candle-flame {
  animation: none;
  opacity: 0.6;
}
[data-atmosphere="off"] .atmosphere-art * {
  animation: none !important;
}
[data-atmosphere="off"] .rain-sheet,
[data-atmosphere="off"] .window-drops,
[data-atmosphere="off"] .incense-smoke {
  visibility: hidden;
}
[data-page-hidden="true"] .atmosphere-art *,
[data-scene-visible="false"] .atmosphere-art * {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere-art * {
    animation: none !important;
  }
  .rain-sheet,
  .window-drops,
  .incense-smoke {
    visibility: hidden;
  }
}