/* V92 — two lightweight winter clouds, restricted to the upper sky. */
#css3d-cloud-viewport-v92 {
  position: fixed;
  left: 0;
  right: 0;
  top: clamp(70px, 8.5vh, 94px);
  height: clamp(112px, 18vh, 205px);
  overflow: hidden;
  pointer-events: none;
  z-index: 7;
  contain: layout paint style;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
}

#css3d-cloud-world-v92 {
  position: absolute;
  inset: 0;
}

.cloud-v92 {
  position: absolute;
  top: 0;
  width: clamp(300px, 35vw, 610px);
  height: auto;
  opacity: .48;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 22px 24px rgba(24, 72, 96, .18))
    saturate(.66)
    brightness(1.05)
    contrast(.94);
  will-change: transform;
}

.cloud-v92--left {
  left: 16%;
  transform: translate3d(-4%, -8%, 0) scale(1.02);
  animation: cloudV92Left 26s ease-in-out infinite alternate;
}

.cloud-v92--right {
  right: 15%;
  top: 10px;
  transform: translate3d(4%, -5%, 0) scale(.94);
  animation: cloudV92Right 31s ease-in-out infinite alternate;
}

/* Keep navigation and the white hero title readable even on bright cloud edges. */
body.clouds-enabled-v92 #root a,
body.clouds-enabled-v92 #root button,
body.clouds-enabled-v92 #root h1,
body.clouds-enabled-v92 #root h2,
body.clouds-enabled-v92 #root [class*="title"] {
  text-shadow: 0 2px 10px rgba(0, 17, 31, .68), 0 0 22px rgba(0, 10, 24, .28);
}

@keyframes cloudV92Left {
  from { transform: translate3d(-4%, -8%, 0) scale(1.02); }
  to   { transform: translate3d(2%, -3%, 0) scale(1.06); }
}
@keyframes cloudV92Right {
  from { transform: translate3d(4%, -5%, 0) scale(.94); }
  to   { transform: translate3d(-3%, 0, 0) scale(.99); }
}

@media (max-width: 760px) {
  #css3d-cloud-viewport-v92 {
    top: 68px;
    height: 126px;
    z-index: 5;
  }
  .cloud-v92 {
    width: clamp(250px, 57vw, 360px);
    opacity: .38;
  }
  .cloud-v92--left { left: 8%; }
  .cloud-v92--right { right: 5%; top: 18px; }
}

@media (max-height: 620px) and (orientation: landscape) {
  #css3d-cloud-viewport-v92 { top: 58px; height: 105px; }
  .cloud-v92 { width: clamp(250px, 31vw, 420px); opacity: .36; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-v92 { animation: none !important; will-change: auto; }
}

@media print {
  #css3d-cloud-viewport-v92 { display: none !important; }
}