/* ============================================================
   EXPLORE SECTION — themed to match the rest of the site.
   Prefix: .wim-explore (BEM-style).

   Re-uses the site's design tokens (defined in style.css):
     --accent          #ffe900   (brand yellow)
     --accent-deep     #f0d800
     --light-bg        section bg
     --light-text      dark ink (#0d0d0d-ish)
     --light-border    neutral lines
     --light-bg-alt    subtle surface

   Locally scoped fallbacks under .wim-explore so the section still
   works on pages that don't import style.css.
   ============================================================ */

.wim-explore {
  --we-accent:        var(--accent, #ffe900);
  --we-accent-deep:   var(--accent-deep, #f0d800);
  --we-ink:           var(--light-text, #0d0d0d);
  --we-mute:          var(--light-text-muted, #5a5a64);
  --we-line:          var(--light-border, #ececef);
  --we-line-2:        #dcdce0;
  --we-bg:            var(--light-bg, #ffffff);
  --we-bg-alt:        var(--light-bg-alt, #f7f7f9);
  /* White frame around the video stage — single source of truth.
     Scales with viewport so the frame stays proportional on mobile. */
  --we-frame:         clamp(12px, 2vw, 20px);
  --we-frame-color:   #ffffff;
  /* MP4 macroblock hairline cover thickness. 3 px catches every
     codec/encoder bottom-row artifact in practice. */
  --we-hairline:      3px;

  background: var(--we-bg);
  color: var(--we-ink);
  /* Inherit the site-wide 'Outfit' family. */
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Whole section sits on plain white — no ambient glows, no patterns. */

.wim-explore *,
.wim-explore *::before,
.wim-explore *::after {
  box-sizing: border-box;
}

/* Match the site's container width so the section lines up with
   every other section on the page. Fluid on laptop screens so the
   section never extends past the header column. */
.wim-explore__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
}
@media (min-width: 1025px) and (max-width: 1700px) {
  .wim-explore__container {
    max-width: calc(100vw - 200px);
    width: 100%;
    padding: 0 24px;
  }
}

/* Smaller-laptop fine-tune: between the stacking breakpoint (992 px)
   and the laptop cap, shrink the sidebar card text and tighten the
   card chrome so the labels don't wrap awkwardly when the nav column
   is at its narrow end. */
@media (min-width: 992px) and (max-width: 1500px) {
  .wim-explore__item        { padding: 12px 14px; gap: 12px; border-radius: 12px; }
  .wim-explore__item-num    { font-size: 16px; width: 28px; }
  .wim-explore__item-label  { font-size: 0.86rem; line-height: 1.2; }
  .wim-explore__item-sub    { font-size: 0.72rem; line-height: 1.3; }
  .wim-explore__item-arrow  { width: 26px; height: 26px; font-size: 9px; }
  .wim-explore__nav .ex-tag-pill-set { margin-bottom: 14px; }
  .wim-explore__nav .ex-tag-pill-set .dark,
  .wim-explore__nav .ex-tag-pill-set .light { padding: 7px 14px; font-size: 0.8rem; }
  .wim-explore__list        { gap: 8px; }
}

/* ============================================================
   Layout — sidebar list + interactive media stage
   The pill-set tag (ex-tag-pill-set) now sits at the top of the
   sidebar nav, just above the numbered list.
   ============================================================ */
.wim-explore__nav .ex-tag-pill-set {
  margin-bottom: 20px;
}

.wim-explore__layout {
  display: grid;
  /* Stage on the LEFT, nav with pill-set + items on the RIGHT.
     Proportional 1.6:1 ratio so the stage stays clearly dominant on
     every viewport instead of collapsing toward 50/50 on narrower
     laptop widths where the old fixed 320–380 px sidebar took half. */
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: clamp(28px, 3.5vw, 48px);
  align-items: start;
}
/* Flip the DOM order (nav comes first in source) so the stage paints
   in column 1 (left) and the nav in column 2 (right). */
.wim-explore__stage { order: 1; }
.wim-explore__nav   { order: 2; }

@media (max-width: 991px) {
  .wim-explore__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* On mobile the stage stays first (top), nav slides below it. */
}

/* ============================================================
   Sidebar list — the 5 numbered component CARDS
   Real card-rows with big decorative numbers, label + sub-label,
   and a play-arrow chip that animates on interaction.
   ============================================================ */
.wim-explore__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wim-explore__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--we-line);
  border-radius: 14px;
  cursor: pointer;
  transition:
    transform 0.3s cubic-bezier(0.2, 0, 0.2, 1),
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.3s ease;
}

.wim-explore__item:hover {
  transform: translateX(-3px);
  border-color: var(--we-ink);
  box-shadow: 0 10px 26px rgba(13, 13, 13, 0.08);
}
.wim-explore__item:focus-visible {
  outline: 2px solid var(--we-ink);
  outline-offset: 2px;
}

/* Big decorative number — like a real "01." label. */
.wim-explore__item-num {
  font-family: 'JetBrains Mono', 'Outfit', monospace, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--we-mute);
  font-variant-numeric: tabular-nums;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

/* Two-line label block (title + sub-label) */
.wim-explore__item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wim-explore__item-label {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--we-ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.wim-explore__item-sub {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--we-mute);
  line-height: 1.3;
  letter-spacing: 0;
}

/* Play-arrow chip on the right — circular, brand-accented, scales on
   hover/active. */
.wim-explore__item-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f3f3f5;
  color: var(--we-ink);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}
.wim-explore__item:hover .wim-explore__item-arrow {
  background: var(--we-ink);
  color: #fff;
  transform: scale(1.06);
}

/* ============================================================
   Active card — dramatic flip to brand yellow background with
   dark text & a strong play-chip in the inverse colour.
   ============================================================ */
.wim-explore__item.is-active {
  background: linear-gradient(135deg, var(--we-accent) 0%, var(--we-accent-deep) 100%);
  border-color: var(--we-accent-deep);
  transform: translateX(-3px);
  box-shadow: none;
}
.wim-explore__item.is-active .wim-explore__item-num {
  color: rgba(13, 13, 13, 0.55);
}
.wim-explore__item.is-active .wim-explore__item-label { color: var(--we-ink); }
.wim-explore__item.is-active .wim-explore__item-sub   { color: rgba(13, 13, 13, 0.7); }
.wim-explore__item.is-active .wim-explore__item-arrow {
  background: var(--we-ink);
  color: var(--we-accent);
  transform: scale(1);
}

/* ============================================================
   Stage — the visual frame holding the base image, videos & dots
   ============================================================ */
.wim-explore__stage {
  position: relative;
}

/* Frame is now an invisible passthrough — no border, no shadow, no rounding.
   The crane image sits directly on the white section background. */
.wim-explore__frame {
  position: relative;
}

/* ============================================================
   Media — the 16:10 stage that holds the crane image, the 5
   videos, the hotspot dots, the badge, the caption pill and the
   close button. Single source of truth for the frame system.
   ============================================================ */
.wim-explore__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  /* Clip any sub-pixel bleed from object-fit:cover so videos can't
     leak past the white frame on any side during paint. */
  overflow: hidden;
  /* Promote the entire stage to a single GPU compositor layer.
     Every child (image, videos, dots, badge, caption, close) paints
     into this one layer instead of getting promoted individually.
     `will-change: contents` is the explicit "this layer's pixels
     update frequently" hint that gives the compositor permission to
     keep a hardware-accelerated backing store for it. */
  isolation: isolate;
  transform: translateZ(0);
  will-change: contents;
}

/* ============================================================
   Stage badge — corner hint that disappears during playback
   ============================================================ */
.wim-explore__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 11px;
  background: rgba(13, 13, 13, 0.88);
  color: #fff;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(13, 13, 13, 0.18);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.wim-explore__badge i {
  color: var(--we-accent);
  font-size: 12px;
}
.wim-explore__stage.is-playing .wim-explore__badge {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}

/* Image (idle backdrop) + the 5 videos share the same painting box.
   `object-fit: cover` makes them fill the inner area, so the white
   frame is visually equal on all four sides regardless of the source
   media's natural aspect ratio. */
.wim-explore__image,
.wim-explore__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--we-frame-color);
  border: var(--we-frame) solid var(--we-frame-color);
  /* display: block + vertical-align: top kill the 1 px inline-element
     descender gap that browsers leave below <video> tags. */
  display: block;
  vertical-align: top;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* GPU compositing is applied ONLY to the active video (and to any
   video mid-crossfade via .is-instant). Promoting all 5 videos to
   their own compositor layer permanently was eating GPU memory and
   causing playback lag — the browser will now create a layer only
   for the clip that's actually moving pixels. */
.wim-explore__video.is-active,
.wim-explore__video.is-instant {
  will-change: opacity;
  transform: translateZ(0);
}

/* MP4 source files have a 1–2 px dark hairline baked into the bottom
   edge of every frame (H.264 macroblock artifact). Neither the border
   nor overflow:hidden catches it because it's part of the pixel data
   itself. Overlay a thin white strip at the inner edge of the bottom
   border to hide it. Positions are derived from --we-frame so the
   cover follows the frame thickness automatically. */
.wim-explore__media::after {
  content: '';
  position: absolute;
  left: var(--we-frame);
  right: var(--we-frame);
  bottom: var(--we-frame);
  height: var(--we-hairline);
  background: var(--we-frame-color);
  z-index: 6;
  pointer-events: none;
}
.wim-explore__image  { opacity: 1; z-index: 1; }

/* Idle videos are visibility:hidden, NOT just opacity:0.
   - opacity:0 = browser still paints + composites + decodes every frame
   - visibility:hidden = browser skips painting entirely, decoder idles
   The transition-delay trick keeps the fading-out video painted for
   the 320 ms it takes to crossfade, then makes it truly hidden — so
   the visual fade is preserved but the steady-state cost is zero. */
.wim-explore__video {
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.32s;
}
.wim-explore__video.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}
/* is-instant: shorter 180 ms crossfade between videos. Visibility
   flips immediately in both directions so both clips overlap during
   the crossfade. */
.wim-explore__video.is-instant {
  visibility: visible;
  transition: opacity 0.18s linear,
              visibility 0s linear 0s;
}

.wim-explore__stage.is-playing .wim-explore__image { opacity: 0; }

/* ============================================================
   Hotspot dots
   ============================================================ */
.wim-explore__dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 5;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc((var(--i, 1) - 1) * 30ms);
}

.wim-explore__dot-core {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--we-accent);
  color: var(--we-ink);
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 5px rgba(13, 13, 13, 0.12),
    0 8px 18px rgba(13, 13, 13, 0.25),
    0 0 30px rgba(255, 233, 0, 0.35);
  transition: box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.wim-explore__dot-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--we-accent);
  opacity: 0.7;
  animation: wim-explore-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

.wim-explore__dot::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(4px);
  background: var(--we-ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1;
}
.wim-explore__dot::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: 8px;
  height: 8px;
  background: var(--we-ink);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.wim-explore__dot:hover { transform: translate(-50%, -50%) scale(1.12); }
.wim-explore__dot:hover .wim-explore__dot-core {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 4px var(--we-ink),
    0 8px 18px rgba(13, 13, 13, 0.28);
}
.wim-explore__dot:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.wim-explore__dot:hover::before { opacity: 1; }

.wim-explore__dot:focus-visible { outline: none; }
.wim-explore__dot:focus-visible .wim-explore__dot-core {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--we-ink);
}

.wim-explore__stage.is-playing .wim-explore__dot {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.55);
  transition-delay: calc((5 - var(--i, 1)) * 30ms);
}
/* Stop the pulse animation while a video is playing — the dots are
   invisible (opacity: 0) anyway, so the animation was just costing
   the compositor recalc work every frame without showing anything. */
.wim-explore__stage.is-playing .wim-explore__dot-pulse {
  animation-play-state: paused;
}

@keyframes wim-explore-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.1); opacity: 0;   }
}

/* ============================================================
   Close button
   ============================================================ */
.wim-explore__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 12;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8) rotate(-90deg);
  transition:
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.35s,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wim-explore__close-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(13, 13, 13, 0.06),
    0 8px 22px rgba(13, 13, 13, 0.20);
  transition: background 0.25s ease;
}

.wim-explore__close-icon {
  position: relative;
  width: 22px;
  height: 22px;
  color: var(--we-ink);
  pointer-events: none;
  transition: color 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wim-explore__stage.is-playing .wim-explore__close {
  opacity: 1;
  visibility: visible;
  transform: scale(1) rotate(0deg);
  transition-delay: 0.05s;
}

.wim-explore__close:hover .wim-explore__close-bg { background: var(--we-ink); }
.wim-explore__close:hover .wim-explore__close-icon { color: var(--we-accent); transform: rotate(90deg); }
.wim-explore__close:active { transform: scale(0.94); }

.wim-explore__close:focus-visible { outline: none; }
.wim-explore__close:focus-visible .wim-explore__close-bg {
  box-shadow:
    0 0 0 3px var(--we-accent),
    0 8px 22px rgba(13, 13, 13, 0.20);
}

/* ============================================================
   Caption pill (during playback)
   ============================================================ */
.wim-explore__caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px 9px 9px;
  background: var(--we-ink);
  border-radius: 999px;
  z-index: 12;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.35s ease,
    visibility 0.35s,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: calc(100% - 100px);
  box-shadow: 0 10px 28px rgba(13, 13, 13, 0.25);
}

.wim-explore__stage.is-playing .wim-explore__caption {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0.05s;
}

.wim-explore__caption-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: var(--we-accent);
  color: var(--we-ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.wim-explore__caption-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.25);
}

.wim-explore__caption-text {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  .wim-explore { padding: 72px 0; }
  .wim-explore__container { padding: 0 20px; }

  .wim-explore__dot { width: 36px; height: 36px; }
  .wim-explore__dot-core { font-size: 13px; inset: 3px; }
  .wim-explore__dot::after { font-size: 12px; padding: 6px 10px; }

  .wim-explore__close { top: 12px; right: 12px; width: 44px; height: 44px; }
  .wim-explore__close-icon { width: 19px; height: 19px; }

  .wim-explore__caption { left: 12px; bottom: 12px; padding: 8px 16px 8px 8px; }
  .wim-explore__caption-num { width: 26px; height: 26px; font-size: 11px; }
  .wim-explore__caption-text { font-size: 13px; }
}

@media (max-width: 480px) {
  .wim-explore { padding: 56px 0; }
  .wim-explore__container { padding: 0 16px; }

  .wim-explore__item { gap: 12px; padding: 14px 14px; }
  .wim-explore__item-num { font-size: 17px; width: 28px; }
  .wim-explore__item-arrow { width: 28px; height: 28px; }

  .wim-explore__dot { width: 38px; height: 38px; }
  .wim-explore__dot-core { font-size: 13px; inset: 4px; }
  .wim-explore__badge { top: 10px; left: 10px; padding: 6px 12px 6px 9px; font-size: 11.5px; }

  .wim-explore__caption {
    left: 10px;
    bottom: 10px;
    padding: 6px 14px 6px 6px;
    gap: 10px;
  }
  .wim-explore__caption-num { width: 24px; height: 24px; font-size: 10.5px; }
  .wim-explore__caption-text { font-size: 12.5px; }

  .wim-explore__close { top: 10px; right: 10px; width: 40px; height: 40px; }
  .wim-explore__close-icon { width: 17px; height: 17px; }
}

@media (min-width: 1400px) {
  .wim-explore__media { aspect-ratio: 16 / 9.5; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .wim-explore__dot-pulse { animation: none; }
  .wim-explore *,
  .wim-explore *::before,
  .wim-explore *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}