/* Loaded after tailwind.css — avoids Tailwind rewriting color-mix into bad fallbacks.
   Photo overlays tint with the page background (--bg) instead of black. */

:root {
  --overlay: color-mix(in srgb, var(--bg) 55%, transparent);
}

[data-theme="light"] {
  --overlay: color-mix(in srgb, var(--bg) 42%, transparent);
}

/* Bottom edge is solid --bg so the hero meets <hr> / first section with no seam. */
.hero-scrim {
  background-image: linear-gradient(
    to top,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 85%, transparent) 22%,
    color-mix(in srgb, var(--bg) 42%, transparent) 52%,
    transparent 100%
  ),
  linear-gradient(
    to right,
    color-mix(in srgb, var(--bg) 50%, transparent) 0%,
    transparent 72%
  );
}

/* Stronger wash + smoother falloff — light photo reads too bright behind small display type. */
[data-theme="light"] .hero-scrim {
  background-image: linear-gradient(
    to top,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 98%, transparent) 8%,
    color-mix(in srgb, var(--bg) 88%, transparent) 22%,
    color-mix(in srgb, var(--bg) 62%, transparent) 42%,
    color-mix(in srgb, var(--bg) 28%, transparent) 65%,
    transparent 100%
  ),
  linear-gradient(
    to right,
    color-mix(in srgb, var(--bg) 72%, transparent) 0%,
    color-mix(in srgb, var(--bg) 22%, transparent) 55%,
    transparent 82%
  );
}

/* Flat wash over the contact photo — same idea as hero; direct rule on the layer
   (bg-overlay + inherited --overlay can fail to paint in some browsers). */
.contact-scrim {
  background-color: color-mix(in srgb, var(--bg) 55%, transparent);
}

[data-theme="light"] .contact-scrim {
  background-color: color-mix(in srgb, var(--bg) 48%, transparent);
}

[data-theme="light"] img.hero-photo {
  filter: grayscale(100%) contrast(1.15) brightness(0.42);
}