/* Layered puff clouds (cloud-vapor.js) over a separate animated ocean. */
.hero-art{background:linear-gradient(180deg,#132650 0%,#29427a 28%,#8d639b 48%,#f4a27e 63.6%,#2d2959 63.8%,#121b44 100%);overflow:hidden;isolation:isolate}
.cloud-vapor{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.hero-cloud{display:none}
.hero-shade{background:linear-gradient(90deg,rgba(4,33,96,.62) 0%,rgba(4,33,96,.25) 38%,transparent 70%);pointer-events:none}
.final-art{overflow:hidden}
@media(max-width:800px){.hero-shade{background:linear-gradient(90deg,rgba(4,33,96,.64),rgba(4,33,96,.24))}}
/* WebGL sky, clouds and sea (sky-scene.js). The painted image stays underneath as the fallback. */
.sky-scene{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block;opacity:0;transition:opacity .8s cubic-bezier(.22,1,.36,1)}
.sky-scene.ready{opacity:1}
@media(prefers-reduced-motion:reduce){.sky-scene{transition:none}}
/* Phones: the cloud tower fills the sky, so the copy sits low over the darker sea. */
@media(max-width:800px) and (orientation:portrait){
  .hero-inner{align-items:flex-end}
  .hero-shade{background:linear-gradient(0deg,rgba(4,30,96,.82) 0%,rgba(4,30,96,.55) 38%,rgba(4,30,96,0) 62%)}
}