/* =========================================================
   Elastic reel — hero media on index-v2.html
   A dock of photo slices: bars swell under the pointer (or an
   idle sweep) and a click opens one into the full image.
   Sizes are driven by assets/js/reel.js; the values here are
   the no-JS fallback (a static row of slices) and the look.
   ========================================================= */

.hero-carousel-wrap--reel {
  justify-content: center;
}

.reel {
  --reel-h: clamp(320px, 34vw, 480px);
  --reel-gap: 10px;
  --reel-fg: #fff;
  --reel-muted: rgba(255, 255, 255, 0.6);
  --reel-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.6);
  --reel-rim: rgba(255, 255, 255, 0.12);
  --hs-fg: #fff;
  --hs-well: rgba(255, 255, 255, 0.08);
  --hs-hover-well: rgba(255, 255, 255, 0.16);

  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--reel-fg);
  -webkit-tap-highlight-color: transparent;
}

[data-theme="light"] .reel {
  --reel-fg: #0a0a0a;
  --reel-muted: rgba(0, 0, 0, 0.6);
  --reel-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.35);
  --reel-rim: rgba(0, 0, 0, 0.08);
  --hs-fg: #111;
  --hs-well: rgba(17, 17, 17, 0.07);
  --hs-hover-well: rgba(17, 17, 17, 0.13);
}

/* ---------- Stage ---------- */
.reel-stage {
  width: 100%;
  height: var(--reel-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--reel-gap);
  /* Vertical swipes still scroll the page; horizontal ones drive the reel. */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.reel-bar {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 68%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a1a;
  color: inherit;
  cursor: pointer;
  box-shadow: var(--reel-shadow);
  transition: filter 0.35s ease, opacity 0.35s ease;
}

/* Hairline rim, drawn above the photo */
.reel-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--reel-rim);
  pointer-events: none;
}

.reel-bar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* --focus picks which vertical slice a narrow bar shows */
  object-position: var(--focus, 50%) 50%;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

.reel-bar:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* While a photo is open the others step back; hover or focus sharpens one. */
.reel.is-open .reel-bar:not(.is-open) {
  filter: blur(2px);
  opacity: 0.5;
}
.reel.is-open .reel-bar:not(.is-open):hover,
.reel.is-open .reel-bar:not(.is-open):focus-visible {
  filter: none;
  opacity: 1;
}

/* ---------- Caption ---------- */
.reel-caption {
  position: relative;
  width: 100%;
  /* The label is lifted up under its bar by reel.js, so this only
     reserves room for the lowest position (an open photo's two lines). */
  height: 2.5rem;
}

.reel-label {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--reel-fg);
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform;
}
.reel.has-label .reel-label { opacity: 1; }

.reel-label-sub {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--reel-muted);
}
.reel-label-sub a {
  color: var(--reel-fg);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reel-label-sub a:hover { text-decoration-thickness: 2px; }

/* ---------- Controls ---------- */
.reel-controls {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

/* ---------- Intro ----------
   Bars fade in left to right while the script springs them up to size.
   Hidden only while the intro is armed; if reel.js never runs, the
   failsafe shows the static row after a moment. */
html.js-intro .reel:not(.is-live) .reel-bar {
  opacity: 0;
  animation: reel-failsafe 0.4s ease 2.5s forwards;
}
.reel.is-live .reel-bar {
  animation: reel-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes reel-in { from { opacity: 0; } }
@keyframes reel-failsafe { to { opacity: 1; } }

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .reel {
    --reel-h: clamp(280px, 78vw, 400px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reel-bar { transition: none; }
  .reel.is-live .reel-bar { animation: none; }
  .reel-label { transition: none; }
}