.heart-stage .scene-background { z-index: -4; }
.heart-clouds {
  position: absolute; z-index: -3; overflow: hidden;
  pointer-events: none; visibility: hidden;
}
.heart-clouds[data-ready="true"] { visibility: visible; }
.heart-cloud-patch {
  position: absolute; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 35%, #000c 56%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 35%, #000c 56%, transparent 100%);
}
.heart-cloud-patch[data-depth="far"] {
  -webkit-mask-image: var(--cloud-sky-mask);
  mask-image: var(--cloud-sky-mask);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.heart-cloud-patch[data-depth="near"] {
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 40%, #000d 65%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 40%, #000d 65%, transparent 100%);
}
/* Narrow override of the static-page animation reset; other artwork stays still. */
.static-page .heart-clouds .heart-cloud-texture {
  position: absolute; background-image: var(--cloud-art-url); background-repeat: no-repeat;
  animation: heartCloudDrift var(--cloud-duration) ease-in-out var(--cloud-delay) infinite !important;
  will-change: transform;
}
.static-page .heart-clouds:not([data-playing="true"]) .heart-cloud-texture {
  animation-play-state: paused !important;
}
@keyframes heartCloudDrift {
  0%, 100% { transform: translate3d(calc(-1 * var(--cloud-drift)), 0, 0); }
  50% { transform: translate3d(var(--cloud-drift), 0, 0); }
}
.heart-cloud-toggle {
  position: fixed; z-index: 20; right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 56px);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 9px 15px;
  border: 1px solid #f8e8bd72; border-radius: 99px;
  background: #312515db; color: #fff4d5; font: inherit;
  font-size: 12px; letter-spacing: .08em; cursor: pointer; backdrop-filter: blur(8px);
}
.heart-cloud-toggle[hidden] { display: none; }
.heart-cloud-toggle:hover { background: #574026; }
.heart-cloud-toggle:focus-visible { outline: 2px solid #fff4d5; outline-offset: 4px; }
.heart-cloud-toggle-icon { min-width: 12px; font-size: 14px; text-align: center; }
@media (max-width: 767px) {
  .heart-cloud-toggle {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 56px);
    padding: 9px 12px; font-size: 11px;
  }
}