/* ==========================================================================
   HOME 4-FRAME HERO (mockup)  ·  .h4
   Four photographic frames, click-only tabs docked to the bottom of the band.
   ========================================================================== */

.h4 {
  /* --h4-head and --h4-bar reserve the site header and the tab bar so the copy
     block centres in the band that is left between them */
  --h4-head: 79.5px;
  --h4-bar: 0px;
  position: relative;
  isolation: isolate;
  min-height: 92svh;
  display: flex;
  align-items: center;
  background: #0a0b0c;
  overflow: hidden;
}

/* ---- image stack -------------------------------------------------------- */
.h4__stack { position: absolute; inset: 0; z-index: 0; }

.h4__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .72s cubic-bezier(.22, .61, .36, 1), visibility .72s;
}
.h4__frame.is-on { opacity: 1; visibility: visible; }

.h4__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--op, 50% 55%);
  transform: scale(1.035);
  transition: transform 8s cubic-bezier(.24, .5, .3, 1);
}
.h4__frame.is-on .h4__img { transform: scale(1); }

/* the cut-out portrait on frame 04 */
.h4__cut {
  position: absolute;
  right: clamp(0px, 2vw, 60px);
  bottom: 0;
  height: 84%;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(-24px 0 46px rgba(0, 0, 0, .42));
  opacity: 0;
  transform: translate3d(26px, 0, 0);
  transition: opacity .8s ease .12s, transform .9s cubic-bezier(.22, .61, .36, 1) .12s;
}
.h4__frame.is-on .h4__cut { opacity: 1; transform: none; }

/* ---- scrim -------------------------------------------------------------- */
.h4__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* header protection */
    linear-gradient(180deg, rgba(6, 7, 8, .70) 0%, rgba(6, 7, 8, .30) 16%,
      rgba(6, 7, 8, 0) 30%),
    /* tab-bar footing */
    linear-gradient(0deg, rgba(6, 7, 8, .80) 0%, rgba(6, 7, 8, .46) 14%,
      rgba(6, 7, 8, 0) 34%),
    /* light black ramp along the left edge, only as far as the type needs */
    linear-gradient(97deg, rgba(6, 7, 8, .86) 0%, rgba(6, 7, 8, .76) 18%,
      rgba(6, 7, 8, .58) 34%, rgba(6, 7, 8, .30) 52%, rgba(6, 7, 8, .10) 70%,
      rgba(6, 7, 8, 0) 84%);
}

/* ---- copy --------------------------------------------------------------- */
.h4__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: var(--h4-head);
  padding-bottom: var(--h4-bar);
}

.h4__copy { position: relative; display: grid; }

.h4__cs {
  grid-area: 1 / 1;
  max-width: 60ch;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 14px, 0);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1),
    visibility .5s;
  pointer-events: none;
}
.h4__cs.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* The copy block borrows the live home hero's own classes — .sh__h with
   .display .display--hero .display--inverse, .sh__lede, .sh__acts, .sh__btn —
   so type, lede measure and button styling cannot drift from index.html.
   Only the one size step-down that .sh--gen applies is repeated here. */
.h4 .sh__h { font-size: min(calc(var(--text-3xl) * 0.84), 8vw); }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .h4__cs { max-width: none; }
}

@media (max-width: 900px) {
  .h4 { min-height: 0; flex-direction: column; align-items: stretch; }
  .h4__inner {
    padding-top: clamp(116px, 20vh, 170px);
    padding-bottom: 74px;
  }
  .h4__scrim {
    background:
      linear-gradient(180deg, rgba(6, 7, 8, .80) 0%, rgba(6, 7, 8, .62) 22%,
        rgba(6, 7, 8, .50) 42%, rgba(6, 7, 8, .30) 62%, rgba(6, 7, 8, .10) 78%),
      linear-gradient(0deg, rgba(6, 7, 8, .88) 0%, rgba(6, 7, 8, .70) 28%,
        rgba(6, 7, 8, .50) 56%, rgba(6, 7, 8, .34) 82%, rgba(6, 7, 8, .26) 100%),
      /* on a phone the copy runs the full width, so the ramp has to as well */
      linear-gradient(96deg, rgba(6, 7, 8, .58) 0%, rgba(6, 7, 8, .46) 46%,
        rgba(6, 7, 8, .34) 78%, rgba(6, 7, 8, .26) 100%);
  }
  /* The approved caprock landscape is naturally much brighter than the two
     industrial frames. Ease only its active mobile scrim so the magenta sky
     and rust escarpment survive without changing the other frame treatments. */
  .h4:has(.h4__frame--landscape.is-on) .h4__scrim {
    background:
      linear-gradient(180deg, rgba(6, 7, 8, .58) 0%, rgba(6, 7, 8, .38) 22%,
        rgba(6, 7, 8, .26) 42%, rgba(6, 7, 8, .14) 62%, rgba(6, 7, 8, .04) 78%),
      linear-gradient(0deg, rgba(6, 7, 8, .36) 0%, rgba(6, 7, 8, .24) 28%,
        rgba(6, 7, 8, .15) 56%, rgba(6, 7, 8, .08) 82%, rgba(6, 7, 8, .05) 100%),
      linear-gradient(96deg, rgba(6, 7, 8, .36) 0%, rgba(6, 7, 8, .26) 46%,
        rgba(6, 7, 8, .18) 78%, rgba(6, 7, 8, .12) 100%);
    background-color: rgba(6, 7, 8, .06);
  }
  .h4__img { object-position: var(--opm, var(--op, 50% 55%)); }
  .h4__cut { height: 62%; right: -6%; opacity: .5; }
  .h4__frame.is-on .h4__cut { opacity: .5; }
  .h4 .sh__lede { max-width: none; }
  /* the live hero's accent is short enough to hold text-wrap: nowrap; these
     frame headlines are longer, so let them break on small screens */
  .h4 .sh__h { font-size: min(calc(var(--text-3xl) * 0.72), 8.4vw); }
  .h4 .sh__h .accent { text-wrap: balance; }
  .h4 .sh__acts { gap: 10px; margin-top: var(--space-6); }
}

@media (max-width: 460px) {
  .h4__cut { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .h4__img { transform: none; }
}


/* ---- frame dots ---------------------------------------------------------- */
.h4__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(20px, 3.2vh, 40px);
  z-index: 3;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
.h4__dot {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0 -8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.h4__dot > span {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .34);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .30) inset,
    0 1px 6px rgba(0, 0, 0, .45);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.h4__dot:hover > span { background: rgba(255, 255, 255, .62); }
.h4__dot.is-on > span {
  background: #ffffff;
  transform: scale(1.18);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9) inset,
    0 1px 8px rgba(0, 0, 0, .5);
}
.h4__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .h4__dot > span { transition: none; }
}