/*
 * HaoLo home hero · animated grayscale diffusion
 * WebGL paints the live texture; the CSS background is the no-WebGL fallback.
 */
.hero-grayscale-shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Let the moving texture dissolve into the shared page atmosphere instead
     of ending on a hard, full-width edge at the bottom of the hero. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 320px),
    rgba(0, 0, 0, .9) calc(100% - 240px),
    rgba(0, 0, 0, .48) calc(100% - 130px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 320px),
    rgba(0, 0, 0, .9) calc(100% - 240px),
    rgba(0, 0, 0, .48) calc(100% - 130px),
    transparent 100%
  );
  background:
    radial-gradient(ellipse at 22% 34%, rgba(116, 116, 116, .34), transparent 45%),
    radial-gradient(ellipse at 72% 62%, rgba(158, 158, 158, .28), transparent 48%),
    #f7f7f7;
}

/* Both sides of the hero/features seam meet on one shared neutral tone. The
   transition spans both sections so the demo shadow cannot end on a hard
   horizontal edge when the hero clips its overflowing artwork. */
.page-home {
  --hero-seam-rgb: 245, 245, 245;
}

.page-home .hero {
  overflow: visible;
}

.page-home .hero::after,
.page-home .hero-banner-image::after {
  height: clamp(240px, 22vw, 360px);
  background: linear-gradient(
    180deg,
    rgba(var(--hero-seam-rgb), 0) 0%,
    rgba(var(--hero-seam-rgb), .18) 30%,
    rgba(var(--hero-seam-rgb), .64) 68%,
    rgb(var(--hero-seam-rgb)) 100%
  );
}

.page-home #features {
  margin-top: -1px;
  isolation: isolate;
  background: transparent;
}

.page-home #features::before {
  display: block;
  inset: clamp(-140px, -7vw, -96px) 0 auto;
  height: clamp(520px, 34vw, 680px);
  border: 0;
  border-radius: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--hero-seam-rgb), 0) 0%,
    rgba(var(--hero-seam-rgb), 0) 10%,
    rgba(var(--hero-seam-rgb), .35) 13%,
    rgb(var(--hero-seam-rgb)) 18%,
    rgb(var(--hero-seam-rgb)) 34%,
    rgba(var(--hero-seam-rgb), .88) 48%,
    rgba(var(--hero-seam-rgb), .5) 72%,
    rgba(var(--hero-seam-rgb), 0) 100%
  );
  box-shadow: none;
  pointer-events: none;
  z-index: 0;
}

.page-home #features > .container {
  position: relative;
  z-index: 1;
}

.hero-grayscale-shader canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.002);
  filter: blur(.32px);
  opacity: 0;
  transition: opacity 700ms var(--ease-out, ease-out);
}

.hero-grayscale-shader.is-ready canvas { opacity: 1; }

/* Theme-specific type contrast over a background whose luminance is moving. */
body.site-monochrome.page-home .hero-title :is(.at, .brand-name) {
  color: var(--registration-download-blue);
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

.page-home p.hero-sub {
  color: #282c30;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .56);
}

@media (prefers-color-scheme: dark) {
  .page-home {
    --hero-seam-rgb: 17, 17, 17;
  }

  .hero-grayscale-shader {
    background:
      radial-gradient(ellipse at 22% 34%, rgba(118, 118, 118, .28), transparent 45%),
      radial-gradient(ellipse at 72% 62%, rgba(66, 66, 66, .34), transparent 48%),
      #101010;
  }

  body.site-monochrome.page-home .hero-title :is(.at, .brand-name) {
    color: var(--registration-download-blue);
  }

  .page-home p.hero-sub {
    color: #d8d8d8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grayscale-shader canvas { transition: none; }
}

@media (forced-colors: active) {
  .hero-grayscale-shader { display: none; }
  body.site-monochrome.page-home .hero-title :is(.at, .brand-name) {
    color: CanvasText;
    background: none;
    -webkit-text-fill-color: CanvasText;
    text-shadow: none;
  }
}