/* Cloud art behind the hero. Switched on by data-hero-art on <header id="top">;
   remove that attribute and the hero is exactly as it was.

   Layers, back to front:
     hero background   the original periwinkle gradient (dot grid moved up, see ::after)
     ::before          hero.png (as WebP): faded at the bottom, drifting very slowly
     ::after           a soft haze behind the headline so the copy stays readable, then the dot grid
     content           untouched

   --art       cloud strength, 0 to 1. Preview any value with ?art=0.4 (or ?art=off).
   --art-haze  how much the clouds clear behind the headline, 0 to 1. */
.day .hero[data-hero-art]{--art:.62;--art-haze:.9;isolation:isolate;
  background:linear-gradient(160deg,#F2F3FF 0%,#D8D5F6 100%)}
.day .hero[data-hero-art]::before,.day .hero[data-hero-art]::after{content:"";position:absolute;inset:0;pointer-events:none}
.day .hero[data-hero-art]::before{z-index:-2;opacity:var(--art);
  background:url("omni-hero-clouds-2048.webp") left top/cover no-repeat;
  /* The artwork is lighter than the hero's lower right, so let it dissolve before it gets there. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 88%);
  transform-origin:18% 0;animation:omni-cloud-drift 70s ease-in-out infinite alternate;will-change:transform}
.day .hero[data-hero-art]::after{z-index:-1;background:
  radial-gradient(rgba(79,70,229,.2) 1px,transparent 1.3px) 0 0/22px 22px,
  radial-gradient(56% 44% at 25% 52%,rgba(242,243,255,var(--art-haze)) 0%,rgba(242,243,255,calc(var(--art-haze)*.62)) 50%,rgba(242,243,255,0) 80%)}
@keyframes omni-cloud-drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(-1.2%,.8%,0)}}

/* Desktop: drop the headline + logo row so the top of the 3D logo clears the cloud bank.
   The same amount comes off the bottom padding, so the hero's height does not change.
   --art-drop is the distance. --art-rise lifts the cloud image itself by a little (the artwork is
   taller than the hero, so nothing is uncovered), which keeps a margin while the clouds drift. */
@media (min-width:981px){
  .day .hero[data-hero-art]{--art-drop:44px;--art-rise:26px}
  .day .hero[data-hero-art]::before{background-position:left calc(var(--art-rise) * -1)}
  .day .hero[data-hero-art] .hgrid{padding-top:calc(clamp(28px,3.4vw,52px) + var(--art-drop));padding-bottom:calc(clamp(56px,6vw,84px) - var(--art-drop))}
}

/* The grey nav links sit on the deepest part of the clouds: use ink there. */
.day .hero[data-hero-art] .hnav nav,.day .hero[data-hero-art] .hnav .login{color:rgba(27,29,74,.8)}
.day .hero[data-hero-art] .hnav a:hover{color:#1B1D4A}

/* Stacked hero: the box is tall, so size the clouds from the width and keep them to the top. */
@media (max-width:980px){
  .day .hero[data-hero-art]::before{background-image:url("omni-hero-clouds-1280.webp");background-size:max(175%,860px) auto;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 190px,transparent 540px);
    mask-image:linear-gradient(180deg,#000 0,#000 190px,transparent 540px)}
  .day .hero[data-hero-art]::after{background:
    radial-gradient(rgba(79,70,229,.2) 1px,transparent 1.3px) 0 0/22px 22px,
    radial-gradient(95% 300px at 42% 330px,rgba(242,243,255,var(--art-haze)) 0%,rgba(242,243,255,calc(var(--art-haze)*.6)) 52%,rgba(242,243,255,0) 82%)}
}
/* Phone artwork is composed vertically; preserve its full width instead of
   magnifying the desktop cloud bank. Source: ../hero-mobile.png. */
@media (max-width:700px){
  .day .hero[data-hero-art]::before{
    background-image:url("omni-hero-clouds-mobile-1200.webp");
    background-size:100% auto;background-position:center top;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%);
  }
}
@media (prefers-reduced-motion:reduce){.day .hero[data-hero-art]::before{animation:none;transform:scale(1.04)}}