/* ========================================
   IMAGE BANDS
   ======================================== */
.img-band { position: relative; overflow: hidden; height: 480px; background: var(--dark); z-index: 2; }
.img-band picture { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.img-band > img {
  display: block; position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  opacity: 0.35; mix-blend-mode: lighten;
  transition: transform 8s ease;
  will-change: transform;
}
.img-band picture img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  opacity: 0.35; mix-blend-mode: lighten;
  transition: transform 8s ease;
  will-change: transform;
}
.img-band:hover img { transform: scale(1.05); }

/* Gradient overlay — matches --dark (#070E29) for seamless transitions */
.img-band::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(7, 14, 41, 1) 0%,
      rgba(7, 14, 41, 0.45) 18%,
      rgba(7, 14, 41, 0.25) 50%,
      rgba(7, 14, 41, 0.45) 82%,
      rgba(7, 14, 41, 1) 100%
    );
}
/* Halftone dot overlay */
.img-band::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background-image: radial-gradient(circle, rgba(157, 212, 207, 0.04) 1px, transparent 1px);
  background-size: 6px 6px;
  mix-blend-mode: overlay;
  opacity: 0.7;
}
.ibc {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 60px 80px;
}
.ibc h2 {
  font-family: 'Newsreader', serif;
  font-size: clamp(28px, 4vw, 44px); font-weight: 300; color: white; line-height: 1.15;
}
.ibc h2 em { font-style: italic; font-weight: 600; color: var(--mint); }
.ibc p { font-size: 16px; color: var(--text-on-dark-muted); margin-top: 12px; max-width: 560px; }
.iba { position: absolute; bottom: 20px; right: 40px; display: flex; opacity: 0.12; z-index: 2; }
.iba span {
  width: 120px; height: 60px; display: block;
  clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%, 30% 50%);
  background: var(--mint);
}
.iba span:nth-child(2) { margin-left: -40px; opacity: .6; }
.iba span:nth-child(3) { margin-left: -40px; opacity: .3; }

/* Final closing band — taller */
.img-band--final { height: 540px; }
.img-band--final .ibc { padding: 60px 120px; }
.img-band--final .ibc h2 { font-size: clamp(26px, 4.5vw, 52px); }

/* Mint Frame Variant */
.img-band-framed {
  position: relative; overflow: hidden; height: 400px;
  margin: 0 40px; border-radius: 20px; border: 8px solid var(--mint);
}
.img-band-framed img { width: 100%; height: 100%; object-fit: cover; }
.img-band-framed::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(5, 66, 64, 0.8) 0%, rgba(25, 48, 106, 0.7) 100%);
}
.img-band-framed .ibc { padding: 48px 60px; }

/* ========================================
   SCROLL PROGRESS BAR (right side)
   Covers the native scrollbar
   ======================================== */
.scroll-progress {
  position: fixed; top: 0; right: 0; z-index: 998;
  width: 14px; height: 0%;
  background: linear-gradient(180deg,
    rgba(157, 212, 207, 0) 0%,
    rgba(157, 212, 207, 0.3) 3%,
    var(--mint) 8%,
    var(--lavender) 60%,
    var(--mint) 100%
  );
  pointer-events: none;
}
/* Chevron-shaped end cap */
.scroll-progress::after {
  content: '';
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 14px solid var(--mint);
  filter: drop-shadow(0 4px 8px rgba(157, 212, 207, 0.5));
}
/* Subtle glow trail */
.scroll-progress::before {
  content: '';
  position: absolute; top: 0; left: -4px; right: -4px; bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(157, 212, 207, 0.1) 60%, rgba(157, 212, 207, 0.25) 100%);
  filter: blur(6px);
  pointer-events: none;
}

/* Hide native scrollbar */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

/* ========================================
   SCROLL-TO-TOP BUTTON
   ======================================== */
.scroll-top-btn {
  position: fixed; bottom: 32px; right: 32px; z-index: 999;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(7, 14, 41, 0.85);
  border: 1px solid rgba(157, 212, 207, 0.25);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease, transform 0.3s ease, background 0.3s ease;
  transform: translateY(12px);
}
.scroll-top-btn.visible {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.scroll-top-btn:hover {
  background: rgba(157, 212, 207, 0.15);
  border-color: rgba(157, 212, 207, 0.5);
  transform: translateY(-2px);
}
.scroll-top-btn svg {
  width: 20px; height: 20px; stroke: var(--mint); fill: none; stroke-width: 2;
}