/* ==========================================================================
   Home page hero with a background video or image (theme settings →
   Home page hero; markup in page.html.twig, video in js/hero.js).

   Layers, back to front: the media (a still, then the video once it plays),
   a navy scrim that keeps the text readable, the copy. Without a background
   the hero is the plain horizon block from style.css.
   ========================================================================== */

.debtsunset-hero--media {
  /* Scrim strength (theme setting hero_overlay): desktop runs left to right
     behind the text column, phones top to bottom. */
  --hero-s1: 0.82; --hero-s2: 0.58; --hero-s3: 0.22; --hero-s4: 0.06;
  --hero-m1: 0.5; --hero-m2: 0.9;
  --hero-position: 50% 50%;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Nothing inside (the drifting image included) ever paints outside. */
  contain: paint;
  display: flex;
  align-items: center;
  min-height: clamp(32rem, 78vh, 48rem);
  min-height: clamp(32rem, 78svh, 48rem);
  padding-block: clamp(4rem, 10vh, 7.5rem);
  background-color: var(--ds-night, #0A1A33);
  color: #FFFCF8;
}

.debtsunset-hero--overlay-light { --hero-s1: 0.72; --hero-s2: 0.45; --hero-s3: 0.12; --hero-s4: 0; --hero-m1: 0.4; --hero-m2: 0.82; }
.debtsunset-hero--overlay-strong { --hero-s1: 0.9; --hero-s2: 0.74; --hero-s3: 0.42; --hero-s4: 0.2; --hero-m1: 0.66; --hero-m2: 0.94; }

/* Where each background is anchored when cropped (the subject). */
.debtsunset-hero--dshero { --hero-position: 62% 50%; }
.debtsunset-hero--dshero2 { --hero-position: 50% 50%; }
.debtsunset-hero--debtmtn { --hero-position: 55% 45%; }

/* --- Media ------------------------------------------------------------------ */
.debtsunset-hero__media,
.debtsunset-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.debtsunset-hero__media { z-index: -2; }

/* Square corners, full bleed: the theme rounds every image (style.css). */
.debtsunset-layout .debtsunset-hero__media :is(picture, img, video) {
  border-radius: 0;
}

.debtsunset-hero__media :is(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--hero-position);
}

/* Staggering: the still waits until js/hero.js has picked today's
   background, so the primary does not flash first. Without JavaScript (no
   .ds-js), or if the script never runs, it appears anyway after a moment. */
.ds-js .debtsunset-hero--stagger:not(.is-hero-ready) .debtsunset-hero__still {
  opacity: 0;
  animation: ds-hero-reveal 0.3s ease 2.5s forwards;
}

/* A transition, not an animation, so the image's own drift (below) keeps
   running. */
.debtsunset-hero--stagger .debtsunset-hero__still {
  transition: opacity 0.5s ease;
}

@keyframes ds-hero-reveal { to { opacity: 1; } }

/* The video waits, invisible, until it is really playing. */
.debtsunset-hero__video {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.debtsunset-hero__video.is-playing { opacity: 1; }

.debtsunset-hero__scrim {
  z-index: -1;
  background:
    /* Ground the bottom edge, where the next block begins. */
    linear-gradient(0deg, rgb(10 26 51 / 0.55) 0%, rgb(10 26 51 / 0) 32%),
    linear-gradient(90deg,
      rgb(10 26 51 / var(--hero-s1)) 0%,
      rgb(10 26 51 / var(--hero-s2)) 42%,
      rgb(10 26 51 / var(--hero-s3)) 72%,
      rgb(10 26 51 / var(--hero-s4)) 100%);
}

/* --- Copy ------------------------------------------------------------------- */
.debtsunset-hero--media .debtsunset-hero__inner {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.debtsunset-hero--media .debtsunset-hero__copy {
  max-width: 40rem;
}

.debtsunset-hero--media .debtsunset-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ds-marigold, #FBB03B);
  text-shadow: 0 1px 10px rgb(10 26 51 / 0.6);
}

.debtsunset-hero--media .debtsunset-eyebrow::before {
  content: "";
  width: 2rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ds-marigold, #FBB03B), #E05A47);
}

.debtsunset-hero--media h1 {
  color: #FFFFFF;
  font-size: clamp(2.4rem, 5.2vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgb(10 26 51 / 0.5);
}

.debtsunset-hero--media .debtsunset-lede {
  color: rgb(255 252 248 / 0.92);
  text-shadow: 0 1px 14px rgb(10 26 51 / 0.65);
}

.debtsunset-hero--media .debtsunset-hero__secondary {
  color: #FFFCF8;
  text-shadow: 0 1px 10px rgb(10 26 51 / 0.6);
}

.debtsunset-hero--media .debtsunset-hero__proof {
  color: #FFFCF8;
  text-shadow: 0 1px 10px rgb(10 26 51 / 0.6);
}

.debtsunset-hero--media .debtsunset-hero__note {
  color: rgb(251 238 226 / 0.8);
  text-shadow: 0 1px 10px rgb(10 26 51 / 0.6);
}

/* --- Motion (only for those who have not asked for less) ----------------- */
@media (prefers-reduced-motion: no-preference) {
  .debtsunset-hero--media .debtsunset-hero__copy > * {
    animation: ds-hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .debtsunset-hero--media .debtsunset-hero__copy > :nth-child(2) { animation-delay: 0.08s; }
  .debtsunset-hero--media .debtsunset-hero__copy > :nth-child(3) { animation-delay: 0.16s; }
  .debtsunset-hero--media .debtsunset-hero__copy > :nth-child(n+4) { animation-delay: 0.24s; }

  /* A still image drifts, slowly, so it feels alive. */
  .debtsunset-hero--debtmtn .debtsunset-hero__still {
    animation: ds-hero-drift 28s ease-in-out infinite alternate;
  }
}

@keyframes ds-hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes ds-hero-drift {
  from { transform: scale(1.02); }
  to { transform: scale(1.09) translate(-1.5%, -1%); }
}

/* --- Phones: the text spans the width, so the scrim runs top to bottom ---- */
@media (max-width: 47.99em) {
  .debtsunset-hero--media {
    align-items: flex-end;
    min-height: min(40rem, 84svh);
    padding-block: 4rem 2.25rem;
  }

  /* The accent rule would sit alone on the first line of a wrapped tagline. */
  .debtsunset-hero--media .debtsunset-eyebrow::before {
    display: none;
  }

  /* The picture keeps its own phone shape (3:4, the screen's width) at the
     top and fades into the navy below, instead of being blown up to cover
     a hero that the text makes taller than the screen. */
  .debtsunset-hero--media .debtsunset-hero__media {
    bottom: auto;
    height: min(100%, 133.34vw);
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }

  /* No slow zoom on phones: it would magnify the picture further. */
  .debtsunset-hero--debtmtn .debtsunset-hero__still {
    animation: none;
  }

  .debtsunset-hero--media .debtsunset-hero__scrim {
    background: linear-gradient(180deg,
      rgb(10 26 51 / calc(var(--hero-m1) * 0.6)) 0%,
      rgb(10 26 51 / var(--hero-m1)) 35%,
      rgb(10 26 51 / var(--hero-m2)) 100%);
  }
}