/* Translucent photographed cloud banks travel at different depths; no scroll lock. */
.cloud-reveal {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  contain: layout paint;
}
.cloud-reveal[hidden] { display: none !important; }
.cloud-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #edf0e7, #d4e0e3 64%, #c0d1da);
  opacity: 1;
}
.cloud-bank {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(135vw, 170vh);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 1;
  backface-visibility: hidden;
  user-select: none;
  -webkit-user-drag: none;
}
.cloud-bank--far { width: max(115vw, 160vh); }
.cloud-bank--near { width: max(155vw, 210vh); }
.cloud-bank--wisp { width: max(90vw, 120vh); }
.cloud-reveal.is-running .cloud-bank,
.cloud-reveal.is-running .cloud-veil { will-change: transform, opacity; }
.cloud-radiance {
  position: absolute;
  inset: -20%;
  opacity: .3;
  background: radial-gradient(ellipse at 62% 33%, #fff5dceb, #dcecf63b 23%, transparent 56%);
  mix-blend-mode: screen;
}
body.cloud-arriving .site-header {
  color: #47606b;
  background: linear-gradient(180deg, #dce8e22b, transparent);
  backdrop-filter: none;
}
body.cloud-arriving .site-header .brand-mark,
body.cloud-arriving .site-header .brand small { color: #536e77; }
body.cloud-arriving .site-header :is(a, button):hover { color: #213b47; }
body.cloud-arriving .site-header :is(a, button, .nav-en, .nav-cn) { color: #47606b; }
.pv-opening[data-cloud-hold] .pv-page-actions { pointer-events: none; visibility: hidden; }
.pv-opening[data-cloud-state="opening"] .pv-page-top,
.pv-opening[data-cloud-state="opening"] .pv-page-bottom,
.pv-opening[data-cloud-state="opening"] .pv-page-actions {
  animation: cloud-copy-arrive 1250ms cubic-bezier(.2,.65,.2,1) both;
}
.pv-opening[data-cloud-state="opening"] .pv-page-bottom { animation-delay: 140ms; }
.pv-opening[data-cloud-state="opening"] .pv-page-actions { animation-delay: 250ms; }
@keyframes cloud-copy-arrive {
  from { opacity: 0; translate: 0 9px; }
  to { opacity: 1; translate: 0 0; }
}
@media (max-width:760px) {
  .cloud-bank { width: max(205vw, 140vh); }
  .cloud-bank--far { width: max(190vw, 130vh); }
  .cloud-bank--near { width: max(240vw, 165vh); }
  .cloud-bank--wisp { width: max(160vw, 105vh); }
}
@media (prefers-reduced-motion:reduce) {
  .cloud-reveal { display: none; }
  .pv-opening[data-cloud-state] :is(.pv-page-top,.pv-page-bottom,.pv-page-actions) { animation: none; }
}