/* ── Homepage: this build's own additions ──
   Layered AFTER css/public/home.css, which is the approved stylesheet held byte-identical to the
   reference. Everything here is a selector the approved file does NOT define.

   NDIC approved two homepages whose heroes differ (index.html and index-alt.html). This build lets
   a single carousel run both, choosing per slide, which the reference has no equivalent for: there,
   the choice is which of two HTML files you deploy, so nothing ever changes after paint.

   The carousel writes data-hero-layout on #hero as it advances and the rules below react to it.
   `.hm-hero-inner--alt` is NOT restated here — home.css:1085 already defines it and the script
   toggles that class directly, so option 2's geometry stays the approved one. Restating it is how
   the About layer drifted into 67 conflicting selectors; do not.
*/

/* Which end of the band the copy block sits at. Held here rather than as justify-* utilities in
   the Blade, because it is now per slide and a utility would have to be scripted on and off. */
#hero .hm-hero-frame { justify-content: flex-start }
@media (min-width: 768px) {
    #hero .hm-hero-frame { justify-content: center }
}
#hero[data-hero-layout="image_only"] .hm-hero-frame { justify-content: flex-end }

/* An image-only slide shows no copy. display:none rather than opacity, so the hidden headline does
   not hold open the space that keeps the button off the foot of the band. The script un-hides both
   inline while it measures them — see reserveLayout() in public.js. */
#hero[data-hero-layout="image_only"] .hm-hero-title,
#hero[data-hero-layout="image_only"] .hm-hero-sub { display: none }

/* The scrims exist on every slide and fade out on an image-only one. */
#hero .hm-hero-scrim { transition: opacity .45s ease }
#hero[data-hero-layout="image_only"] .hm-hero-scrim { opacity: 0 }

/* Crossing between the two options moves the button and the dots from mid-band to the foot. The
   reference never has to move them, so it has no transition for it. The script fades the whole
   block out, repositions it while it is invisible, and fades it back in — the jump happens behind
   the fade. Slides that share a layout keep the approved copy-only cross-fade and never touch this
   opacity, so a homepage whose slides are all one option behaves exactly as signed off.

   .18s, not the .3s the copy uses: the script repositions 200ms after starting the fade, so this
   has to have reached zero by then or the block moves while it is still partly visible. Both the
   fade out and the fade back land inside the 0.65s the photograph itself takes to slide. */
#hero .hm-hero-inner { transition: opacity .18s ease }

@media (prefers-reduced-motion: reduce) {
    #hero .hm-hero-scrim,
    #hero .hm-hero-inner { transition: none }
}