/**
 * Binds --ch-hero-scale to #cinematic-hero .cinematic-hero-scale.
 * Skips handsets (min-width: 641px) and very short viewports (min-height: 500px).
 * Do not put data-aos on nodes inside .cinematic-hero-scale — zoom breaks AOS visibility checks.
 */

#cinematic-hero .cinematic-hero-scale {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

@media (min-width: 641px) {
  @media (min-height: 500px) {
    #cinematic-hero .cinematic-hero-scale {
      zoom: var(--ch-hero-scale, 1);
    }
  }
}

/* More headroom above the hero stack; keeps flex-centered block visually mid-hero (not hugging the nav). */
@media (min-width: 769px) {
  #cinematic-hero {
    padding-top: clamp(9rem, 20vh, 15rem);
    padding-bottom: clamp(6rem, 14vh, 10rem);
  }
}