@supports (color: color-mix(in srgb, red, blue)) {
  @media (hover: hover) and (pointer: fine) {
    .hero img, .hero h1, .hero hr, .hero .lead, .feature img { transition: filter 0.2s, text-shadow 0.2s, box-shadow 0.2s, color 0.2s, transform 0.2s; }
    .button { transition: background-color 0.25s, box-shadow 0.2s; }
    .bar-home img { transition: filter 0.2s; }
    .bar-home img.is-lit { filter: drop-shadow(0 0 calc(var(--glow, 0) * 8px) color-mix(in srgb, #fff calc(var(--glow, 0) * 90%), transparent)) drop-shadow(0 0 calc(var(--glow, 0) * 24px) color-mix(in srgb, var(--green) calc(var(--glow, 0) * 100%), transparent)); }
    .hero img.is-lit { filter: drop-shadow(0 0 calc(var(--glow, 0) * 16px) color-mix(in srgb, #fff calc(var(--glow, 0) * 80%), transparent)) drop-shadow(0 0 calc(var(--glow, 0) * 56px) color-mix(in srgb, var(--green) calc(var(--glow, 0) * 100%), transparent)); }
    .hero h1 { text-shadow: 0 0 calc(var(--glow, 0) * 12px) color-mix(in srgb, #fff calc(var(--glow, 0) * 100%), transparent), 0 0 calc(var(--glow, 0) * 36px) color-mix(in srgb, var(--pink) calc(var(--glow, 0) * 100%), transparent), 0 0 calc(var(--glow, 0) * 90px) color-mix(in srgb, var(--pink) calc(var(--glow, 0) * 80%), transparent); }
    .hero hr { box-shadow: 0 0 calc(var(--glow, 0) * 14px) color-mix(in srgb, #fff calc(var(--glow, 0) * 70%), transparent), 0 0 calc(var(--glow, 0) * 44px) color-mix(in srgb, var(--pink) calc(var(--glow, 0) * 100%), transparent); }
    .hero .lead { color: color-mix(in srgb, #fff calc(var(--glow, 0) * 100%), var(--text-soft)); text-shadow: 0 0 calc(var(--glow, 0) * 10px) color-mix(in srgb, #fff calc(var(--glow, 0) * 90%), transparent), 0 0 calc(var(--glow, 0) * 40px) color-mix(in srgb, #fff calc(var(--glow, 0) * 60%), transparent); }
    .feature img.is-lit { filter: drop-shadow(0 0 calc(var(--glow, 0) * 14px) color-mix(in srgb, #fff calc(var(--glow, 0) * 90%), transparent)) drop-shadow(0 0 calc(var(--glow, 0) * 48px) color-mix(in srgb, #fff calc(var(--glow, 0) * 70%), transparent)); }
    .feature img { transform: translateY(calc(var(--glow, 0) * -6px)); }
    .button { box-shadow: 0 0 calc(var(--glow, 0) * 18px) color-mix(in srgb, #fff calc(var(--glow, 0) * 60%), transparent), 0 0 calc(var(--glow, 0) * 64px) color-mix(in srgb, var(--pink) calc(var(--glow, 0) * 100%), transparent); }
  }
}