/* home hero: bright space with drifting office things (src/fx.js) */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero > .wrap { position: relative; z-index: 1; }
.fx-canvas {                           /* only the first screen animates; it fades into the page colour below */
  position: absolute; left: 0; top: 0; width: 100%; height: min(100%, 100svh, 980px); z-index: 0; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
          mask-image: linear-gradient(180deg, #000 78%, transparent);
}
.hero.fx-on {
  background-color: #e9f1e7;
  background-image: radial-gradient(ellipse 70% 60% at 78% 18%, #ffffff 0%, rgba(255,255,255,0) 70%),
                    radial-gradient(ellipse 60% 50% at 10% 0%, #f6faf3 0%, rgba(246,250,243,0) 70%);
  background-size: auto; background-position: 0 0;
  border-bottom-color: #d3ded1;
}
.hero.fx-on .hero-intro { background: rgba(240,246,238,.55); box-shadow: 0 0 46px 38px rgba(240,246,238,.55); border-radius: 46px; }
.hero.fx-on .tag::before { background: #e9f1e7; }