/* ============================================================
   NHPI "Experience" landing concept — scroll-story styles (v2).
   Loaded only by /experience/. Progressive enhancement:
   the base styles are the complete static experience (also the
   reduced-motion + no-JS experience). Scroll-driven behavior
   layers on inside prefers-reduced-motion media gates and JS
   gsap.matchMedia gates — motion is only ever *added*.
   ============================================================ */

/* ---------- Scroll cue (lives in the opening pinned scene) ---------- */
.scroll-cue {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 1.2rem; z-index: 2;
  display: none; text-align: center;
  color: var(--focus-light); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.scroll-cue-line {
  display: block; width: 1px; height: 42px;
  margin: 0.55rem auto 0;
  background: linear-gradient(to bottom, var(--focus-light), transparent);
  transform-origin: top;
}
.frag-pin.is-scrub .scroll-cue { display: block; } /* only when the scene actually scrubs */
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue-line { animation: cue-grow 2.8s ease-in-out infinite; }
}
@keyframes cue-grow {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  75%  { transform: scaleY(1); opacity: 0.9; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- Fragmentation → One Roof ---------- */
.frag { position: relative; z-index: 2; background: var(--paper); }
.frag-panel {
  max-width: 1200px; margin: 0 auto;
  padding: var(--sect-y) var(--pad-x);
}
.frag-head { padding-bottom: 0.4rem; }
.frag-head h1 {
  margin-top: 0.5rem;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  color: var(--navy);
}
.frag-h { display: block; }
.frag-h-b { margin-top: 0.2em; }
.frag-h-b em { font-style: italic; color: var(--bronze); }

.frag-stage { position: relative; margin-top: 2.4rem; }
.frag-chips {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.8rem; max-width: 56rem; margin: 0 auto;
}
.frag-chips li {
  background: #fff; border: 1px dashed rgba(74, 90, 112, 0.45);
  border-radius: 12px; padding: 0.65rem 1.05rem;
  color: var(--slate); font-size: 0.94rem;
  box-shadow: 0 2px 8px -4px rgba(14, 27, 44, 0.14);
}
.frag-chips li:nth-child(odd)  { transform: rotate(-1.6deg); }
.frag-chips li:nth-child(even) { transform: rotate(1.4deg); }
.frag-chips li:nth-child(6) { font-style: italic; }

.frag-dots, .frag-glow { display: none; } /* animation-only props; absent from the static story */

.frag-one { position: relative; margin: 2.8rem auto 0; width: min(100%, 440px); text-align: center; }
.frag-roof { display: block; width: min(320px, 82%); margin: 0 auto 0.9rem; overflow: visible; }
.frag-roof path { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.frag-card {
  position: relative; z-index: 2;
  background: var(--navy);
  border: 1px solid rgba(201, 169, 110, 0.55);
  border-radius: 16px; padding: 1.9rem 1.6rem;
  box-shadow: 0 24px 50px -22px rgba(14, 27, 44, 0.45);
}
.frag-card img { margin: 0 auto; }
.frag-card-name {
  margin-top: 0.9rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.22rem; line-height: 1.25; color: #fff;
}
.frag-card-depts { margin-top: 0.55rem; color: var(--pulse); font-size: 0.9rem; }
.frag-card-addr { margin-top: 0.6rem; color: var(--sub-on-dark); font-size: 0.86rem; }
.frag-note {
  margin: 2.6rem auto 0; text-align: center; max-width: 34rem;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.1rem; color: var(--slate);
}

/* Scrub mode (added by experience.js on desktop + motion only) */
.frag-pin.is-scrub .frag-panel {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 3rem; padding-bottom: 3rem;
}
.frag-pin.is-scrub .frag-panel { position: relative; } /* anchors the scroll cue while pinned */
.frag-pin.is-scrub .frag-head { width: 100%; } /* auto-margins would otherwise shrink-to-fit in the flex column */
.frag-pin.is-scrub .frag-head h1 { position: relative; min-height: 2.5em; }
.frag-pin.is-scrub .frag-h { position: absolute; left: 0; right: 0; top: 0; margin: 0; }
.frag-pin.is-scrub .frag-stage { height: min(54vh, 440px); margin-top: 1.6rem; }
.frag-pin.is-scrub .frag-chips { max-width: none; }
.frag-pin.is-scrub .frag-chips li {
  position: absolute; left: 50%; top: 50%;
  margin: 0; white-space: nowrap;
}
@media (max-width: 639px) {
  .frag-pin.is-scrub .frag-chips li {
    white-space: normal; width: max-content;
    max-width: min(48vw, 185px); text-align: center;
  }
}
.frag-pin.is-scrub .frag-chips li:nth-child(odd),
.frag-pin.is-scrub .frag-chips li:nth-child(even) { transform: none; }
.frag-pin.is-scrub .frag-dots { display: block; }
.frag-pin.is-scrub .frag-dot {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pulse);
  box-shadow: 0 0 12px 2px rgba(143, 184, 206, 0.75);
}
.frag-pin.is-scrub .frag-one { position: absolute; left: 50%; top: 50%; margin: 0; width: min(90vw, 440px); }
.frag-pin.is-scrub .frag-glow {
  display: block; position: absolute; z-index: 1;
  left: 50%; top: 50%;
  width: min(560px, 96vw); height: min(420px, 52vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(201, 169, 110, 0.34), rgba(201, 169, 110, 0));
  filter: blur(2px); pointer-events: none;
}
.frag-pin.is-scrub .frag-note { margin-top: 1.8rem; }

/* ---------- The gold thread (finale motif) ---------- */
.inter-thread {
  display: block; width: 1px; height: 68px;
  margin: 0 auto 1.7rem;
  background: linear-gradient(to bottom, rgba(201, 169, 110, 0), var(--gold) 30%, var(--gold));
  transform-origin: top;
}

/* ---------- Walk-through deck ---------- */
/* Base = static photo essay (no-JS, reduced-motion, and print) */
.walk { position: relative; z-index: 2; background: var(--paper); }
.walk-list { list-style: none; margin: 0; padding: 0; }
.walk-slot { margin: 0; }
.walk-scene { position: relative; }
.walk-img {
  width: 100%; height: auto; display: block;
  max-height: 82vh; object-fit: cover; /* keeps the static essay's rhythm even for portrait photos */
}
.walk-img--exam { object-position: 72% 58%; } /* favor the exam table and art over the window */
.walk-scrim, .walk-path, .walk-progress { display: none; }
.walk-cap-in {
  max-width: var(--wrap); margin: 0 auto;
  padding: 1.5rem var(--pad-x) 3rem;
}
.mask { display: block; }
.walk-num {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-style: italic;
  font-size: 1rem; color: var(--bronze); letter-spacing: 0.08em;
}
.walk-num-rule { display: inline-block; width: 26px; height: 1px; background: var(--bronze); }
.walk-cap h3 {
  margin-top: 0.3rem;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--navy);
}
.walk-sub { margin-top: 0.6rem; max-width: 36rem; color: var(--slate); }

/* Motion mode = sticky full-viewport deck with held scenes */
@media (prefers-reduced-motion: no-preference) {
  .walk-list { padding-bottom: 38svh; } /* gives the last scene its hold */
  .walk-slot { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  .walk-slot:not(:last-child) { margin-bottom: 38svh; } /* the hold: each scene stays alone before the next arrives */
  .walk-scene { position: static; height: 100%; }
  .walk-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-height: none; /* the essay cap must not apply to full-bleed scenes */
    object-fit: cover;
  }
  .walk-scrim {
    display: block; position: absolute; inset: 0;
    background: linear-gradient(
      to top,
      rgba(14, 27, 44, 0.84) 0%,
      rgba(14, 27, 44, 0.38) 34%,
      rgba(14, 27, 44, 0.10) 58%,
      rgba(14, 27, 44, 0.34) 100%
    );
  }
  .walk-path {
    display: block; position: absolute;
    left: 0; right: 0; bottom: 6svh;
    width: 100%; height: clamp(140px, 24vh, 230px);
    pointer-events: none;
  }
  .walk-path path {
    stroke: var(--pulse); stroke-width: 2; fill: none;
    stroke-linecap: round; vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 7px rgba(143, 184, 206, 0.65));
  }
  .walk-path-dot {
    fill: #fff; opacity: 0;
    filter: drop-shadow(0 0 8px rgba(143, 184, 206, 0.9));
  }
  .walk-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
  .walk-cap-in { padding-bottom: clamp(3rem, 9vh, 5.5rem); }
  .mask { overflow: hidden; }
  .walk-num { color: var(--gold); }
  .walk-num-rule { background: var(--gold); transform-origin: left; }
  .walk-cap h3 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.9rem); }
  .walk-sub { color: var(--text-on-dark); font-size: clamp(1rem, 1.4vw, 1.16rem); }
  @media (max-width: 767px) {
    .walk-cap-in { padding-bottom: 6rem; } /* clear the fixed quick-action bar */
  }

  /* progress dots (desktop) */
  @media (min-width: 900px) {
    .walk-progress {
      display: flex; flex-direction: column; gap: 12px;
      position: fixed; right: 1.5rem; top: 50%;
      transform: translateY(-50%); z-index: 60;
      opacity: 0; transition: opacity 0.35s ease;
      pointer-events: none;
    }
    .walk-progress.is-on { opacity: 1; }
    .wp-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: rgba(255, 255, 255, 0.38);
      transition: background-color 0.3s ease, transform 0.3s ease;
    }
    .wp-dot.is-active {
      background: var(--gold);
      transform: scale(1.45);
      box-shadow: 0 0 10px rgba(201, 169, 110, 0.8);
    }
  }
}

/* ---------- Numbers ---------- */
.xnumbers { position: relative; z-index: 2; }
.xnum-proof {
  max-width: 54rem; margin: 2.4rem auto 0;
  padding: 0 var(--pad-x);
  text-align: center; color: var(--slate);
  font-size: 0.95rem; line-height: 1.9;
}

/* ---------- Team (dark band — backgrounds alternate) + finale (light) ---------- */
.xteam { position: relative; z-index: 2; }
.xteam-dark { background: var(--navy); }
.xteam-dark .section-head h2 { color: #fff; }
.xteam-dark .text-link { color: var(--pulse); text-decoration-color: rgba(143, 184, 206, 0.45); }

.xfinal {
  position: relative; z-index: 2;
  background: var(--paper); text-align: center;
  padding: clamp(4.5rem, 10vw, 7rem) var(--pad-x);
}
.xfinal .final-inner { max-width: 44rem; margin: 0 auto; }
.xfinal h2 { color: var(--navy); font-size: clamp(2rem, 4vw, 3rem); }
.xfinal p { margin-top: 1rem; color: var(--slate); }
.xfinal .hero-ctas { justify-content: center; margin-top: 1.6rem; }
.xfinal-thread { height: 56px; margin-bottom: 1.5rem; }
.xfinal-underline { display: block; width: min(260px, 60%); height: 14px; margin: 0.5rem auto 0; overflow: visible; }
.xfinal-underline path { stroke: var(--gold); stroke-width: 3; fill: none; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .xfinal-btn.glow-once { animation: btn-bloom 1.1s ease-out 1; }
}
@keyframes btn-bloom {
  0%   { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0); }
  35%  { box-shadow: 0 0 34px 6px rgba(201, 169, 110, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0); }
}

/* ---------- Small-screen tuning ---------- */
@media (max-width: 640px) {
  .xhero-title { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .frag-chips { gap: 0.6rem; }
  .frag-chips li { font-size: 0.88rem; padding: 0.55rem 0.9rem; }
}