/* ============================================================
   NDRI Website — Premium Inner Page Banner (cinematic v3)
   ------------------------------------------------------------
   Automatic "before/after" reveal hero.

   A glowing horizontal divider glides vertically through the
   banner and acts as a LIVE CLIPPING BOUNDARY between TWO
   layers of the same background photo:

     - Image A (top layer):  brighter top crop, clipped ABOVE the divider
     - Image B (bottom layer): darker bottom crop, clipped BELOW the divider

   As the divider rises, Image A grows and Image B shrinks; as it
   falls the opposite happens — exactly like a comparison slider,
   except the handle moves on its own.

   Layer stack (bottom -> top):
     1. Image B layer  (bottom crop, slight zoom, parallax down)
     2. Image A layer  (top crop, slight zoom, parallax up)
        (clipped by the divider position via clip-path — no opacity blending)
     3. Dark blue overlay (55-70%) for readability
     4. Neon divider (4px glowing line + white centre light +
        blurred blue glow + moving shine + soft shadow)
     5. Decorative particles
     6. Hero content (breadcrumb pill + large title) — always fixed

   Motion uses transform + clip-path only (GPU friendly, 60fps).
   The divider, top clip and bottom clip share identical keyframe
   timing so they always meet on the same seam.
   ============================================================ */

/* ---------------- Keyframes ---------------- */

/* Divider vertical travel: top band -> bottom band -> top band */
@keyframes ndriDividerLine {
  0%, 100% { transform: translateY(12%); }
  50%      { transform: translateY(88%); }
}

/* Top layer reveals 0% .. divider position */
@keyframes ndriClipTop {
  0%, 100% { clip-path: inset(0 0 88% 0); }
  50%      { clip-path: inset(0 0 12% 0); }
}

/* Bottom layer reveals divider position .. 100% */
@keyframes ndriClipBottom {
  0%, 100% { clip-path: inset(12% 0 0 0); }
  50%      { clip-path: inset(88% 0 0 0); }
}

/* Independent image motion (subtle, cinematic) */
@keyframes ndriTopDrift {
  0%, 100% { transform: translate3d(0, -1%, 0) scale(1.05); }
  50%      { transform: translate3d(0, 1%, 0) scale(1.05); }
}

@keyframes ndriBottomDrift {
  0%, 100% { transform: translate3d(0, 1.2%, 0) scale(1); }
  50%      { transform: translate3d(0, -1.2%, 0) scale(1); }
}

/* Divider accents */
@keyframes ndriGlowPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@keyframes ndriStreak {
  0%        { transform: translate3d(-190%, -50%, 0); opacity: 0; }
  18%       { opacity: 0.9; }
  60%       { transform: translate3d(600%, -50%, 0); opacity: 0.9; }
  78%, 100% { transform: translate3d(820%, -50%, 0); opacity: 0; }
}

@keyframes ndriShine {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9; }
}

/* Content entrances */
@keyframes ndriHeroTitleIn {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ndriHeroCrumbIn {
  from { opacity: 0; transform: translate3d(0, -12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Floating decorative particles */
@keyframes ndriHeroParticle {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  12%  { opacity: var(--po, 0.55); }
  55%  { transform: translate3d(var(--dx, 16px), -64px, 0) scale(0.9); opacity: var(--po, 0.55); }
  100% { transform: translate3d(calc(var(--dx, 16px) * 0.5), -128px, 0) scale(0.7); opacity: 0; }
}

/* ---------------- Hero shell ---------------- */

.breadcrumb-wrapper {
  position: relative;
  height: 460px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  /* Deep-blue fallback + the original photo (JS lifts it onto the image layers) */
  background-color: #0f3557;
  background-image: url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------------- Image layers (two crops of the same photo) ---------------- */

.hero-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #0f3557;
  will-change: clip-path;
}

.hero-layer--top {
  z-index: 2;
  animation: ndriClipTop 12s ease-in-out infinite;
}

.hero-layer--bottom {
  z-index: 1;
  animation: ndriClipBottom 12s ease-in-out infinite;
}

.hero-layer__img {
  position: absolute;
  left: -2%;
  top: -2%;
  width: 104%;
  height: 104%;
  display: block;
  object-fit: cover;
  will-change: transform;
}

/* Top image — zoomed, brighter, top crop, drifts slowly upward */
.hero-layer--top .hero-layer__img {
  object-position: center 22%;
  filter: brightness(1.07) saturate(1.06);
  animation: ndriTopDrift 16s ease-in-out infinite;
}

/* Bottom image — normal scale, darker, bottom crop, drifts slowly downward */
.hero-layer--bottom .hero-layer__img {
  object-position: center 78%;
  filter: brightness(0.96);
  animation: ndriBottomDrift 18s ease-in-out infinite;
}

/* ---------------- Dark blue overlay (readability) ---------------- */

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg,
      rgba(9, 24, 48, 0.74) 0%,
      rgba(9, 24, 48, 0.64) 45%,
      rgba(9, 24, 48, 0.58) 100%);
}

/* ---------------- Animated divider (travelling neon seam) ---------------- */

.hero-divider-track {
  /* Neon palette (CSS variables, tweak here) */
  --divider-rgb: 60, 150, 255;
  --divider-rgb-hot: 140, 205, 255;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  will-change: transform;
  animation: ndriDividerLine 12s ease-in-out infinite;
}

.hero-divider {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 12px;
  transform: translateY(-50%);
}

/* Blurred blue edge: soft halo hugging the seam (always visible) */
.hero-divider__glow {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 60px;
  transform: translateY(-50%);
  background: radial-gradient(50% 100% at 50% 50%, rgba(var(--divider-rgb), 0.6), transparent 70%);
  filter: blur(12px);
  animation: ndriGlowPulse 6s ease-in-out infinite;
}

/* 4px neon line — white centre light, blue neon glow, blurred edges */
.hero-divider__core {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(var(--divider-rgb), 0.4) 10%,
      rgba(var(--divider-rgb-hot), 0.95) 44%,
      #ffffff 50%,
      rgba(var(--divider-rgb-hot), 0.95) 56%,
      rgba(var(--divider-rgb), 0.4) 90%,
      transparent 100%);
  box-shadow:
    0 0 6px rgba(var(--divider-rgb-hot), 0.9),
    0 0 16px rgba(var(--divider-rgb), 0.7),
    0 0 34px rgba(var(--divider-rgb), 0.45),
    0 7px 22px rgba(2, 12, 30, 0.5);
}

/* Moving light streak travelling along the line */
.hero-divider__streak {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16%;
  height: 5px;
  transform: translate3d(-190%, -50%, 0);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  filter: blur(1px);
  animation: ndriStreak 7s ease-in-out infinite;
}

/* Subtle shine band hugging the line */
.hero-divider__shine {
  position: absolute;
  left: -5%;
  right: -5%;
  top: 50%;
  height: 28px;
  transform: translateY(-50%);
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 42%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.08) 58%,
      transparent 100%);
  filter: blur(3px);
  animation: ndriShine 8s ease-in-out infinite;
}

/* ---------------- Decorative particles ---------------- */

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.hero-particles__dot {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.4px);
  opacity: 0;
  animation-name: ndriHeroParticle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* ---------------- Hero content (existing markup, upgraded) ---------------- */

.breadcrumb-wrapper > .container {
  position: relative;
  z-index: 6;
  width: 100%;
}

.breadcrumb-wrapper .page {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  min-height: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-sans, 'Poppins', sans-serif);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px 0 80px;
}

/* Glassmorphism breadcrumb pill */
.breadcrumb-wrapper .breadcrumb {
  order: -1;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 10px 22px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(6, 22, 46, 0.25);
  animation: ndriHeroCrumbIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.breadcrumb-wrapper .breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  border-radius: 50px;
}

.breadcrumb-wrapper .breadcrumb__item {
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.breadcrumb-wrapper .breadcrumb__link {
  color: #93cfff;
  font-weight: 600;
  transition: color 200ms ease;
}

.breadcrumb-wrapper .breadcrumb__link:hover,
.breadcrumb-wrapper .breadcrumb__link:focus {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb-wrapper .breadcrumb__item:not(:last-child)::after {
  content: "\203A";
  margin-left: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 15px;
  font-weight: 400;
  padding: 0;
}

/* Large hero title (injected from the active breadcrumb item) */
.breadcrumb-wrapper .hero-title {
  font-size: clamp(32px, 4.8vw, 56px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 920px;
  text-shadow: 0 6px 28px rgba(4, 16, 34, 0.5);
  animation: ndriHeroTitleIn 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------------- Compact variant ------------------
   Pages that already own a hero (What We Do, Program detail)
   keep a slim premium breadcrumb band instead of a full hero. */

.breadcrumb-wrapper.hero-compact {
  height: 240px;
}

.breadcrumb-wrapper.hero-compact .page {
  padding: 44px 0 60px;
}

.breadcrumb-wrapper.hero-compact .hero-title {
  display: none;
}

/* ---------------- Accessibility: reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .hero-layer--top,
  .hero-layer--bottom,
  .hero-layer--top .hero-layer__img,
  .hero-layer--bottom .hero-layer__img,
  .hero-divider-track,
  .hero-divider__glow,
  .hero-divider__core,
  .hero-divider__streak,
  .hero-divider__shine,
  .hero-particles__dot,
  .breadcrumb-wrapper .breadcrumb,
  .breadcrumb-wrapper .hero-title {
    animation: none !important;
  }

  /* Park the divider at the center as a clean static seam */
  .hero-divider-track {
    transform: translateY(50%);
  }
  .hero-layer--top {
    clip-path: inset(0 0 50% 0);
  }
  .hero-layer--bottom {
    clip-path: inset(50% 0 0 0);
  }
  .hero-layer--top .hero-layer__img {
    transform: translate3d(0, 0, 0) scale(1.05);
  }
  .hero-layer--bottom .hero-layer__img {
    transform: translate3d(0, 0, 0) scale(1);
  }
  .hero-particles {
    display: none;
  }
}

/* ---------------- Responsive ---------------- */

@media (max-width: 991px) {
  .breadcrumb-wrapper { height: 400px; }
  .breadcrumb-wrapper.hero-compact { height: 220px; }
}

@media (max-width: 767px) {
  .breadcrumb-wrapper { height: 360px; }
  .breadcrumb-wrapper .page { padding: 56px 0 70px; }
  .breadcrumb-wrapper.hero-compact { height: 200px; }
}

@media (max-width: 575px) {
  .breadcrumb-wrapper { height: 330px; }
  .breadcrumb-wrapper .page { padding: 48px 0 64px; }
  .breadcrumb-wrapper .hero-title { font-size: 30px; }
  .breadcrumb-wrapper .breadcrumb { padding: 8px 16px; }
  .breadcrumb-wrapper .breadcrumb__item { font-size: 13.5px; }
  .breadcrumb-wrapper.hero-compact { height: 170px; }
  .hero-divider__glow { height: 40px; }
}

@media (max-width: 375px) {
  .breadcrumb-wrapper { height: 300px; }
  .breadcrumb-wrapper.hero-compact { height: 150px; }
}