/* ==========================================================================
   Hero slider — one photograph per chapter, a glass caption card,
   and a pager that lives inside the card. Loaded last on index.
   ========================================================================== */

/* ---- Photo slides */
.hero-slide--photo { background: #0b8fa8; }
.hero-slide--photo::before,
.hero-slide--photo::after { display: none !important; }

.hs-photo {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  z-index: 0;
}
.hs-kb {
  position: absolute;
  inset: 0;
  transform-origin: 70% 40%;
}
.hero-slide.is-active .hs-kb { animation: hs-drift 14s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
@keyframes hs-drift {
  from { transform: scale(1.12); }
  to { transform: scale(1.02); }
}
/* Wider than the slide so it can lag behind the track (parallax) */
.hs-kb img {
  position: absolute;
  top: 0;
  left: -12%;
  width: 124%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.05) brightness(0.94);
  transform: translate3d(var(--hs-shift, 0%), 0, 0);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.77, 0, 0.18, 1);
  will-change: transform;
}
/* A cool navy grade and a soft floor so the card always reads */
.hs-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 143, 168, 0.62) 0%, rgba(11, 143, 168, 0.18) 46%, rgba(11, 143, 168, 0) 70%),
    linear-gradient(0deg, rgba(11, 143, 168, 0.55) 0%, rgba(11, 143, 168, 0) 38%),
    linear-gradient(180deg, rgba(11, 143, 168, 0.35) 0%, rgba(11, 143, 168, 0) 22%),
    rgba(4, 142, 170, 0.08);
  mix-blend-mode: normal;
}

/* Photo credit, bottom right — the editorial touch */
.hs-credit {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 18px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 10.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}
.hs-credit span { color: #a1e1ee; }
.hs-credit::before { content: ""; width: 22px; height: 1px; background: rgba(255, 255, 255, 0.6); order: -1; }
.hero-slide.is-active .hs-credit { opacity: 1; transform: none; }
@media (max-width: 899px) { .hs-credit { top: 16px; bottom: auto; right: 16px; } }

/* ---- Glass caption card on the photo slides */
.home .hero-slide--photo .hero-card {
  background:
    linear-gradient(160deg, rgba(11, 143, 168, 0.72), rgba(11, 143, 168, 0.8)) padding-box,
    linear-gradient(135deg, rgba(161, 225, 238, 0.6), rgba(255, 255, 255, 0.06)) border-box !important;
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
}

/* ---- Pager inside the card (desktop) */
.hs-pager { display: none; }
@media (min-width: 900px) {
  .home .hero-slide .hero-card { padding-bottom: 72px !important; }
  .home .hero-arrow, .hero-rail { display: none !important; }
  .hs-credit { right: var(--card-x, 80px); }

  .hs-pager {
    position: absolute;
    z-index: 9;
    left: calc(var(--card-x, 80px) + 28px);
    width: calc(min(var(--card-w, 480px), 100% - 2 * var(--card-x, 80px)) - 56px);
    bottom: 20px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
  }
  .hs-count {
    font: 500 12px/1 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    min-width: 58px;
  }
  .hs-count b { font-weight: 600; color: #fff; }
  .hs-segs { display: flex; gap: 6px; height: 18px; align-items: center; }
  .hs-segs button {
    position: relative;
    flex: 1;
    height: 18px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .hs-segs button::before,
  .hs-segs button i {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: rgba(255, 255, 255, 0.22);
    transition: background-color 0.3s ease, height 0.3s ease;
  }
  .hs-segs button:hover::before { background: rgba(255, 255, 255, 0.5); }
  .hs-segs button i {
    right: auto;
    width: 0;
    background: #a1e1ee;
  }
  .hs-segs button.is-done i { width: 100%; }
  .hs-segs button.is-on i { animation: hs-fill var(--hs-dwell, 5.8s) linear var(--hs-delay, 1.1s) forwards; }
  .hero-stage:hover .hs-segs button.is-on i,
  .hero-stage:focus-within .hs-segs button.is-on i { animation-play-state: paused; }
  @keyframes hs-fill { from { width: 0; } to { width: 100%; } }
  .hs-segs button:focus-visible { outline: 2px solid #a1e1ee; outline-offset: 2px; }

  .hs-arrows { display: flex; gap: 6px; }
  .hs-arrows button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .hs-arrows button:hover { background: #fff; border-color: #fff; color: #2f3a3d; }
  .hs-arrows svg { width: 14px; height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active .hs-kb { animation: none; }
  .hs-kb img { transition: none; }
}