/*
 * Homepage hero: auto-rotating five-photo slider with white text and a
 * text-link CTA.
 *
 * Overrides the .nass-home-intro rules from presentation-refresh.css
 * without editing that file (same selectors, this sheet loads later via
 * the nass/mega-menu library dependency). The markup lives in
 * templates/pages/page--front.html.twig.
 *
 * Rotation is a pure-CSS crossfade, no module. Photo 1 (the reflecting pool)
 * is the section's own background — always painted, never animated, so there
 * is no blank frame on first paint and it is what a visitor sees on arrival.
 * Photos 2–5 are .nass-home-intro__slide layers stacked over it, each running
 * the SAME keyframe on a 50s cycle and separated by a 10s animation-delay.
 * The ::after scrim paints above all of them, and paint order does the
 * stacking for free: in-flow children, then ::after.
 *
 * The keyframe holds each layer opaque for 4%→24% of the cycle — a 20%
 * window, deliberately wider than the 20% delay step. That overlap means the
 * incoming photo fades up while the outgoing one is still fully opaque, so
 * photo 1 never flashes through mid-transition.
 *
 * Photo order is the background first, then the layers in --2 … --5 order. To
 * reorder, move the file names. To add an Nth photo: add a --N layer with a
 * delay of (N-1)x10s, set the cycle to Nx10s, and set the keyframe's hold to
 * 100/N % with the fades at 2s expressed as a percentage of the new cycle.
 *
 * Photos live in assets/img/hero-slider/. Each carries its own
 * background-position because the hero crops to a much wider aspect than the
 * 3:2 sources — the offsets keep each photo's subject in frame and its darker
 * area under the text.
 */

/* The photos are 3:2 and this slot is much wider, so `cover` fixes each image
   at full width and only a horizontal band is visible. Height is therefore
   the ONLY zoom control — background-position just slides the window up and
   down, it cannot reveal more. 20rem shows roughly a third of each photo,
   which is why slide 3's standing figure needs a high offset to keep his head
   in frame. Changing this height means re-checking all four offsets. */
.nass-home-intro {
  position: relative;
  display: flex;
  min-height: 20rem;
  padding: 1.25rem 0;   /* v3: a little breathing room top and bottom */
  background: url('../img/hero-slider/hero-reflecting-pool.jpg') center 50% / cover;
}

.nass-home-intro__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  animation: nass-hero-slide 50s ease-in-out infinite;
  pointer-events: none;
}

.nass-home-intro__slide--2 {
  background-image: url('../img/hero-slider/hero-harvest-basket.jpg');
  background-position: center 62%;
  animation-delay: 10s;
}

.nass-home-intro__slide--3 {
  background-image: url('../img/hero-slider/hero-farmer-garden.jpg');
  background-position: center 22%;
  animation-delay: 20s;
}

.nass-home-intro__slide--4 {
  background-image: url('../img/hero-slider/hero-beekeepers.jpg');
  background-position: center 50%;
  animation-delay: 30s;
}

.nass-home-intro__slide--5 {
  background-image: url('../img/hero-slider/hero-gis-mapping.jpg');
  background-position: center 50%;
  animation-delay: 40s;
}


/* Scrim: the photos are busy and light in places, so white text needs a
   floor of contrast. Darkest at the left where the text sits, clearing to
   nothing by 78% so the photo still reads. Sits above both image layers
   (later pseudo-element) and below the content (z-indexed container).
   v3: this CSS gradient is now the ONLY darkening — the slider photos are
   clean, unedited originals (the Photoshop-darkened versions were replaced
   at Celso's request), so the left stops are a touch stronger than before. */
.nass-home-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 52%) 35%, rgb(0 0 0 / 14%) 60%, rgb(0 0 0 / 0%) 78%);
  pointer-events: none;
}

.nass-home-intro .grid-container {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
}

/* v3: the text block fills the photo's height along the left side —
   heading at the top, description in the middle, CTA at the bottom —
   with generous padding around the text. Width capped so it stays over
   the darkest part of the scrim. */
.nass-home-intro__content {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;  /* equal space above, between, and below */
  align-items: flex-start;
  gap: 1rem;
  max-width: 36rem;
  padding: 3.25rem 1.5rem;  /* taller padding pulls the four lines closer together */
}

@media (max-width: 39.99rem) {
  /* Narrow screens: text spans the full width, so the scrim has to as
     well — a left-only gradient would leave the last words bare. */
  .nass-home-intro::after {
    background: linear-gradient(180deg, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 52%) 45%, rgb(0 0 0 / 22%) 100%);
  }
}

/* One keyframe for every layer; animation-delay decides which 10s of the 50s
   cycle each photo owns. 4% of 50s is a 2s crossfade. The hold runs to 24%
   rather than 20% so it outlasts the next layer's fade-in — see the note at
   the top of this file. */
@keyframes nass-hero-slide {
  0% { opacity: 0; }
  4%, 24% { opacity: 1; }
  28%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Hold on photo 1 — the section background, which needs no layer. */
  .nass-home-intro__slide { animation: none; }
}

/* White text, small high-set heading (photo shows at full clarity —
   no gradient overlay). */
.nass-home-intro h1 {
  margin: 0;
  color: #fff;
  /* Sans for headers, serif for body (Paolo, 2026-09-08) -- the same split
     usda.gov uses. No font-family here: the theme's bare-element rules already
     resolve this h1 to Source Sans Pro Web, which is what we want. The clamp
     matches .nass-release-schedule__heading in nass_releases.css so the hero
     title and the release headings stay one size at every width; they used to
     drift on narrow viewports, flooring at 1.2rem here against 1.45rem there. */
  font-size: clamp(1.75rem, 2.9vw, 2.5rem);
  /* w200 is usda.gov's h1 weight, and PublicSans-ExtraLight is now declared in
     nass-typography.css so this is a drawn face. Kept at the release headings'
     size rather than the global h1's 3rem, because Paolo asked for the hero
     title and those headings to read at one size. */
  font-weight: 200;
  letter-spacing: .04em;
}

.nass-home-intro p {
  margin: 0;
  color: #fff;
  font-size: 1rem;
}

/* CTA as a white text link with an arrow, not a button. The long selector
   outranks usda-foundations' blue+underline main a:not(.usa-button) rule. */
.nass-home-intro__cta,
main .nass-home-intro a.nass-home-intro__cta:not(.usa-button) {
  display: inline-block;
  margin-top: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
}

.nass-home-intro__cta::after {
  content: " \2192";
}

.nass-home-intro__cta:hover,
.nass-home-intro__cta:focus,
main .nass-home-intro a.nass-home-intro__cta:not(.usa-button):hover,
main .nass-home-intro a.nass-home-intro__cta:not(.usa-button):focus {
  color: #fff;
  text-decoration: none;
}