/* Independent sky layers inspired by the user's ABCname cloud reference.
   Texture: https://xn----7sbbaqhlkm9ah9aiq.net/upload2/cloud-01.png */
.hero-photo .hero-clouds {
    position: absolute;
    inset: 6% 0 16%;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
}
.hero-clouds[hidden], .hero-motion-toggle[hidden] { display: none !important; }
.hero-cloud {
    display: block;
    position: absolute;
    inset: 0 auto 0 0;
    width: 200%;
    height: 100%;
    background: url("assets/cloud-soft.webp") 0 0 / 50% 100% repeat-x;
    mask: none;
    -webkit-mask: none;
    opacity: .82;
    pointer-events: none;
    animation: swissgid-cloud-drift 48s linear -11s infinite;
    animation-play-state: paused;
    will-change: transform;
}
.hero-cloud--far { opacity: .46; animation-duration: 76s; animation-delay: -44s; }
.hero-clouds.is-running .hero-cloud { animation-play-state: running; }
@keyframes swissgid-cloud-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 1100px) { .hero-cloud { width: 300%; } }
.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 (max-width: 700px) {
    .hero-photo .hero-clouds { top: 18%; bottom: 16%; }
    .hero-cloud { width: 400%; opacity: .8; }
    .hero-cloud--far { opacity: .44; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-cloud {
        animation: none !important;
        transform: translate3d(0, 0, 0);
        opacity: .55;
        will-change: auto;
    }
    .hero-motion-toggle { display: none !important; }
}