/* Independent sky layers inspired by the user's ABCname cloud reference.
   Texture: https://xn----7sbbaqhlkm9ah9aiq.net/upload2/cloud-01.png */
.hero-motion-toggle {
    position: absolute;
    right: max(20px, calc((100vw - 1440px) / 2));
    bottom: 22px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #dce8ef;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    color: #50738a;
    box-shadow: none;
    cursor: pointer;
    z-index: 3;
}
.hero-motion-toggle:hover { color: #2686c4; border-color: #91bad4; }
.hero-motion-toggle:focus-visible { outline: 2px solid #2686c4; outline-offset: 3px; }
.hero-motion-toggle svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.hero-motion-toggle .motion-play { display: none; }
.hero-motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.hero-motion-toggle[aria-pressed="true"] .motion-play { display: block; }
@media (prefers-reduced-motion: reduce) {
    .hero-motion-toggle { display: none !important; }
}

/* Clouds have their own scene layer, independent from the panorama's fade. */
.hero > .hero-clouds { position: absolute; inset: 18% 0 18%; overflow: hidden; pointer-events: none; user-select: none; z-index: 1; mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent); }
.hero-clouds[hidden], .hero-motion-toggle[hidden] { display: none !important; }
.hero-cloud { --cloud-tile: clamp(520px, 65vw, 1100px); display: block; position: absolute; left: 0; bottom: 0; width: calc(100% + var(--cloud-tile)); height: calc(var(--cloud-tile) * .5453125); background: url("assets/cloud-soft.webp") 0 0 / var(--cloud-tile) auto repeat-x; opacity: .92; filter: drop-shadow(0 3px 6px rgba(48, 92, 121, .22)); pointer-events: none; animation: swissgid-cloud-drift 32s linear -9s infinite; animation-play-state: paused; will-change: transform; }
.hero-cloud--far { --cloud-tile: clamp(600px, 85vw, 1500px); bottom: 30%; opacity: .55; animation-duration: 56s; animation-delay: -31s; }
.hero-clouds.is-running .hero-cloud { animation-play-state: running; }
@keyframes swissgid-cloud-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(calc(-1 * var(--cloud-tile)),0,0); } }
@media (max-width: 700px) { .hero > .hero-clouds { inset: 24% 0 14%; } }
@media (prefers-reduced-motion: reduce) { .hero-cloud { animation: none !important; transform: none; will-change: auto; } }