/* Hero blend — loaded after nz-glow.css.
   1) header: no full-width dark/blurred band in dark mode (nz-shell.css:118 out-specifies nz-fidelity.css:32)
   2) hero photo: starts at the very top of the page (behind the top bar + glass header), no hard line
   3) bottom edge: gradient mask (not a fog overlay, not the old wave) + a Yazd skyline (badgirs and domes) in the page colour
   4) subtle grain against banding, slow drift on the photo (off for reduced motion / .nz-still) */

/* 1 — header sits directly on the photo; only the rounded glass pill inside .nz-head__main stays */
[data-nzc-mode] .nz-herohead__bar,
[data-nzc-mode] .nz-herohead .nz-top {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border: 0;
}
[data-nzc-mode="dark"] .nz-herohead .nz-top a,
[data-nzc-mode="dark"] .nz-herohead .nz-weather { text-shadow: 0 1px 8px rgba(0, 0, 0, .75); }

/* 2 + 3 — photo layer */
.nz-hero { padding-block-end: 100px; }
.nz-hero::before {
  background-position: 30% top;
  -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0, #000 16%, #000 56%, rgba(0, 0, 0, .4) 82%, transparent 100%) center / 100% 100% no-repeat;
          mask: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0, #000 16%, #000 56%, rgba(0, 0, 0, .4) 82%, transparent 100%) center / 100% 100% no-repeat;
  transform-origin: 60% 40%;
  animation: nzHeroDrift 30s ease-in-out infinite alternate;
}
[data-nzc-mode="dark"] .nz-hero::before { opacity: .88; filter: brightness(.8) saturate(.95) contrast(1.02); }

/* readability layer: text-side fade + a soft top shade under the header; no mask, no bottom fog */
:root {
  --nz-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.nz-hero::after {
  -webkit-mask: none; mask: none;
  background:
    var(--nz-grain),
    linear-gradient(to bottom, rgba(38, 24, 14, .28) 0, transparent 22%),
    linear-gradient(to left, color-mix(in srgb, var(--bg) 94%, transparent) 0, color-mix(in srgb, var(--bg) 80%, transparent) 24%, color-mix(in srgb, var(--bg) 40%, transparent) 42%, transparent 60%);
}
[data-nzc-mode="dark"] .nz-hero::after {
  background:
    var(--nz-grain),
    linear-gradient(to bottom, rgba(10, 7, 6, .6) 0, rgba(10, 7, 6, .18) 18%, transparent 32%),
    linear-gradient(to left, var(--bg) 0, color-mix(in srgb, var(--bg) 78%, transparent) 30%, transparent 70%);
}

/* skyline: badgirs + domes, filled with the page colour so the photo ends in a desert skyline */
.nz-hero__sky {
  position: absolute; inset: auto 0 -1px 0; height: 64px; z-index: 0; pointer-events: none;
  background: var(--bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V48H30V22H36V10H44V4H52V10H60V22H66V48H130C130 26 190 26 190 48H250V34H258V14H266V6H274V14H282V34H290V48H360V40H372V28H384V40H396V48H450C450 24 520 24 520 48H560V30H566V16H574V30H580V48H600V64Z'/%3E%3C/svg%3E") bottom left / 600px 64px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V48H30V22H36V10H44V4H52V10H60V22H66V48H130C130 26 190 26 190 48H250V34H258V14H266V6H274V14H282V34H290V48H360V40H372V28H384V40H396V48H450C450 24 520 24 520 48H560V30H566V16H574V30H580V48H600V64Z'/%3E%3C/svg%3E") bottom left / 600px 64px repeat-x;
}

@keyframes nzHeroDrift { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .nz-hero::before { animation: none; } }
.nz-still .nz-hero::before { animation: none; }
.nz-no-hero .nz-hero__sky { display: none; }

@media (max-width: 800px) {
  .nz-hero { padding-block-end: 70px; }
  /* on phones the photo is a 430px band at the top: fade it there instead of at the bottom of the whole hero */
  .nz-hero::before {
    -webkit-mask: linear-gradient(to bottom, #000 0, #000 300px, transparent 430px) top / 100% 100% no-repeat;
            mask: linear-gradient(to bottom, #000 0, #000 300px, transparent 430px) top / 100% 100% no-repeat;
  }
  .nz-hero__sky { height: 40px; -webkit-mask-size: 375px 40px; mask-size: 375px 40px; }
}