/* Hero background: an aerial city picture that zooms out once on load (or a video, see README). */

.hero-bg { position: absolute; inset: 0; z-index: -1; background: var(--hero); }
.hero-bg-img, .hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg-img { background: var(--hero) url("../assets/hero-aerial.webp") center / cover no-repeat; transform: scale(1.4); transform-origin: 62% 45%; animation: heroZoom 26s cubic-bezier(.16, .6, .25, 1) .2s forwards; will-change: transform; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,27,77,.94) 0%, rgba(10,27,77,.80) 42%, rgba(10,27,77,.52) 100%), linear-gradient(0deg, rgba(10,27,77,.55), transparent 35%); } /* keeps the text readable */
@keyframes heroZoom { to { transform: scale(1); } }
@media (max-width: 759px) {
  .hero-bg-img { background-image: url("../assets/hero-aerial-sm.webp"); transform-origin: 50% 40%; }
  .hero-bg::after { background: linear-gradient(0deg, rgba(10,27,77,.9), rgba(10,27,77,.72)); }
}
@media (prefers-reduced-motion: reduce) { .hero-bg-img { animation: none; transform: none; } }