/* BlueHarbor Freight — experience.css
   Experience section + full-bleed photo carousel. */

.experience {
  z-index: 2;
  overflow: hidden;
  padding: clamp(76px, 10vw, 150px) 0 calc(var(--r-xl) + clamp(64px, 8vw, 120px));
  background:
    radial-gradient(70% 40% at 88% 0%, rgba(90, 132, 181, .16), rgba(90, 132, 181, 0) 70%),
    linear-gradient(180deg, #1B2F45 0%, #172A3E 55%, #142639 100%);
  box-shadow: 0 -40px 80px -40px rgba(1, 5, 10, .9);
}
.experience__head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 52px); }
.experience__title { font-size: clamp(76px, 17vw, 270px); line-height: .8; margin-left: -.03em; color: var(--cream); }

/* ---------- Carousel ---------- */
.xp {
  --content: min(calc(100vw - var(--pad-l) - var(--pad-r)), var(--maxw));
  --x0: calc((100vw - var(--content)) / 2);
  --slide-w: min(calc(var(--content) * .78), calc(70vh * 1.5));
  --aspect: 3 / 2;
  position: relative;
}
@media (max-width: 719px) {
  .xp { --slide-w: calc(var(--content) * .86); --aspect: 4 / 5; }
}

.xp__viewport {
  position: relative;
  overflow: hidden;
  padding: 6px 0 30px;
  margin-bottom: -30px;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.xp__viewport.is-dragging { cursor: grabbing; }
.xp.is-single .xp__viewport { cursor: default; }
.xp__track { display: grid; transition: opacity .4s var(--ease-out); }
.xp.is-swapping .xp__track { opacity: 0; }
.xp__slide { grid-area: 1 / 1; width: var(--slide-w); margin-left: var(--x0); transform-origin: 50% 50%; will-change: transform; }
html:not(.js) .xp__slide ~ .xp__slide { visibility: hidden; }

.xp__frame {
  position: relative;
  aspect-ratio: var(--aspect);
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: #1B2F45;
  box-shadow: 0 44px 80px -44px rgba(1, 5, 10, .95), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.xp__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #050B13;
  opacity: calc(var(--dim, 0) * .55);
  pointer-events: none;
}
.xp__img, .xp__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}
.xp__img { z-index: 1; opacity: 0; transform: scale(1.05); transition: opacity 1s var(--ease-out), transform 1.8s var(--ease-out); }
.xp__frame.is-loaded .xp__img { opacity: 1; transform: none; }
.xp__frame.is-loaded::after { animation: none; opacity: 0; }
.xp__frame.is-contain .xp__img { object-fit: contain; }
.xp__backdrop { z-index: 0; transform: scale(1.2); filter: blur(30px) saturate(1.15) brightness(.7); }

/* Placeholder light (zero photos / loading) */
.xp__ph {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at var(--gx, 50%) var(--gy, 50%), rgba(90, 132, 181, .34), rgba(90, 132, 181, 0) 70%),
    radial-gradient(40% 50% at calc(100% - var(--gx, 50%)) calc(100% - var(--gy, 50%)), rgba(204, 218, 233, .14), rgba(204, 218, 233, 0) 70%);
}

.xp__chip {
  --g-tint: rgba(9, 19, 31, .3);
  --g-spot: 80px;
  position: absolute;
  z-index: 4;
  left: clamp(12px, 1.6vw, 20px);
  bottom: clamp(12px, 1.6vw, 20px);
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--cream);
}

/* ---------- Bar: progress + controls ---------- */
.xp__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; margin-top: clamp(16px, 2.2vw, 28px); }
html:not(.js) .xp__bar, .xp.is-single .xp__bar { display: none; }
.xp__dots { display: flex; gap: 6px; flex: 1 1 220px; max-width: 520px; min-width: 0; }
.xp__dot { position: relative; flex: 1 1 0; min-width: 12px; height: 44px; padding: 0; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
button.xp__dot { cursor: pointer; }
.xp__dot::before,
.xp__dot i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; }
.xp__dot::before { background: rgba(169, 188, 208, .24); transition: background-color .3s var(--ease-out); }
button.xp__dot:hover::before { background: rgba(169, 188, 208, .5); }
.xp__dot i { display: block; background: linear-gradient(90deg, var(--sky), var(--sky-hi)); box-shadow: 0 0 10px rgba(90, 132, 181, .8); transform-origin: 0 50%; transform: scaleX(0); }
.xp__dot.is-past i { transform: none; opacity: .45; box-shadow: none; }
.xp.is-static .xp__dot.is-active i { transform: none; }

.xp__controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.xp__count { display: flex; align-items: baseline; gap: 6px; margin-right: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--mist); }
.xp__count [data-xp-now] { font-size: 18px; color: var(--cream); }
.xp__btn .i { width: 18px; height: 18px; }
.xp__btn.btn:hover .i { transform: none; }
.xp__btn .i-play { display: none; }
.xp.is-user-paused .xp__btn .i-play { display: block; }
.xp.is-user-paused .xp__btn .i-pause { display: none; }
.xp.is-static [data-xp-toggle] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .xp__img { transform: none; transition: opacity .4s linear; }
}