/* From the hero up into the sky of the company graph (hero-flow.mjs). The hero holds while you scroll through its stage,
   so the step becomes a moment of its own. */
.hf-stage { position: relative; }
.hf-stage > .hero { position: sticky; top: 0; }
.hf-stage .scene-viewport, .hf-stage #ambient-sky { will-change: transform; }

/* the hero holds for a third of a screen while the ground falls away */
.hf-stage { height: calc(100svh + 35svh); }
@media (max-width: 700px) { .hf-stage { height: calc(max(740px, 100svh) + 32svh); } }
/* the graph comes up while the ground is still falling, so the sky is never empty */
.hf-stage + section { position: relative; z-index: 1; margin-top: -30svh; mask-image: linear-gradient(to bottom, transparent, #000 44px); }      /* no edge where it meets the sky */
.hf-sunrise, .hf-day { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: -1; }
.hf-sunrise { background: linear-gradient(to bottom, #3c3f7a00 10%, #b784a8aa 55%, #ffc49acc 85%); }
.hf-day { background: #cde6ee url('./art/landscape-panorama-a3.webp') center top / auto 200%; }      /* the day sky of the graph below */