/* An upward scroll at the top reveals the taller rooftop illustration. */
:is(#todayView, #plannerView) .rooftop-banner {
  --banner-expanded-height: clamp(420px, 38vw, 620px);
  --banner-rail-duration:720ms;
  --banner-rail-ease:cubic-bezier(.45,0,.2,1);
  transition:height var(--banner-rail-duration) var(--banner-rail-ease);
}

:is(#todayView, #plannerView) .rooftop-banner.is-expanded {
  height: var(--banner-expanded-height);
}

:is(#todayView, #plannerView) .rooftop-banner.is-expanded.is-image-ready .banner-scene,
:is(#todayView, #plannerView) .rooftop-banner.is-expanded.is-image-ready .banner-copy,
:is(#todayView, #plannerView) .rooftop-banner.is-expanded.is-image-ready .banner-silhouette {
  display: none;
}

@media (max-width: 780px) {
  :is(#todayView, #plannerView) .rooftop-banner {
    --banner-expanded-height: clamp(370px, 78vw, 520px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#todayView, #plannerView) .rooftop-banner {
    transition: none;
  }
}