/* ============================================================================
   Iteration 23 "Hyperframe" — crossfade photo-reel hero
   Loads AFTER iteration-22.css. Replaces the single Ken-Burns background with a
   two-layer dissolve that cycles through real, people-free SF property photos.
   Stacking inside .hero's isolated context (from styles.css):
     reel  z-index -2   <   scrim/vignette  z-index -1   <   headline + CTA
   ========================================================================== */

/* the dissolve reel sits exactly where .hero__bg used to (behind the scrim) */
.hero__reel {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden; background: #0d0b09;
}

.hero__layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 50%;
  opacity: 0;
  transition: opacity var(--reel-fade, 1500ms) ease-in-out;
  will-change: opacity;
  backface-visibility: hidden;
}
.hero__layer.is-active { opacity: 1; }

/* gentle Ken-Burns on the live layer so a still frame never feels frozen */
.hero__layer.is-kb { animation: reelKB var(--reel-kb, 9000ms) ease-out forwards; }
@keyframes reelKB { from { transform: scale(1.012); } to { transform: scale(1.07); } }

/* JS toggles .is-paused on .hero when the section is hidden or scrolled away */
.hero.is-paused .hero__layer { animation-play-state: paused; }

/* photos vary wildly in brightness — lift the scrim a touch for headline legibility
   (.hero::after is z-index -1, above the reel) */
.hero::after {
  background: linear-gradient(180deg,
    rgba(8,7,6,.52) 0%, rgba(8,7,6,.20) 30%, rgba(8,7,6,.34) 58%, rgba(8,7,6,.80) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero__layer { transition: none !important; animation: none !important; }
}

/* a11y: make the footer "powered by" link distinguishable without relying on colour
   (clears a pre-existing axe link-in-text-block carried over from iteration 22) */
.footer-bottom .powered a { text-decoration: underline; text-underline-offset: 2px; }