/* BEX: one complete artwork per stop, staged as a digital exhibition. */
.project-reel--bex {
  --bex-orange: #ff5a1f;
  height: calc(var(--frames) * 100svh);
  min-height: calc(var(--frames) * 100svh);
  background: #030303;
}

.project-reel--bex .project-reel__stage {
  isolation: isolate;
  overflow: hidden;
  perspective: 1900px;
  background: #030303;
}

.project-reel--bex .project-reel__stage::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  inset: 0;
  height: auto;
  pointer-events: none;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 9% 91%, rgba(255, 255, 255, .06)),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 18% 76%, rgba(255, 86, 24, .06));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), inset 0 -1px rgba(255, 90, 31, .18);
}

.project-reel--bex .project-reel__stage::after {
  content: "BEX";
  display: block;
  position: absolute;
  z-index: 1;
  inset: auto -2vw -9vh auto;
  color: rgba(255, 90, 31, .045);
  font-size: clamp(250px, 39vw, 740px);
  font-weight: 820;
  line-height: .72;
  letter-spacing: -.04em;
  pointer-events: none;
  transform: translate3d(calc(var(--ambient-x, 0px) * -.2), 0, 0);
}

.project-reel--bex .project-reel__ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
  overflow: hidden;
  filter: none;
  transform: none;
  background:
    radial-gradient(circle at calc(50% + var(--ambient-x, 0px)) calc(48% + var(--ambient-y, 0px)), rgba(255, 92, 28, .22), transparent 31%),
    radial-gradient(ellipse at 50% 112%, rgba(255, 100, 36, .13), transparent 43%),
    linear-gradient(112deg, #030303 0%, #100704 47%, #030303 100%);
}

.project-reel--bex .project-reel__ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255, 255, 255, .035) 8.1% 8.2%, transparent 8.3% 91.7%, rgba(255, 255, 255, .035) 91.8% 91.9%, transparent 92%),
    linear-gradient(180deg, transparent 0 11%, rgba(255, 92, 28, .6) 11.1% 11.2%, transparent 11.3%);
  opacity: .76;
  box-shadow: inset 0 0 190px rgba(0, 0, 0, .88);
}

.project-reel--bex .project-reel__ambient::after {
  content: "";
  position: absolute;
  left: 3vw;
  right: 3vw;
  bottom: -25vh;
  height: 51vh;
  transform: perspective(900px) rotateX(68deg);
  transform-origin: center top;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 92, 28, .16), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .78));
  border-top: 1px solid rgba(255, 112, 55, .34);
  box-shadow: 0 -18px 70px rgba(255, 75, 8, .08);
}

.project-reel--bex .project-reel__meta {
  top: clamp(22px, 3.2vh, 38px);
  left: clamp(28px, 4vw, 76px);
  right: clamp(28px, 4vw, 76px);
  z-index: 14;
  align-items: center;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(12px, .85vw, 15px);
}

.project-reel--bex .project-reel__meta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 13px);
  height: 1px;
  background: linear-gradient(90deg, var(--bex-orange), rgba(255, 255, 255, .16) 18%, rgba(255, 255, 255, .05) 74%, transparent);
}

.project-reel--bex .project-reel__meta span,
.project-reel--bex .project-reel__meta strong {
  color: #fff;
  font-weight: 520;
}

.project-reel--bex .project-reel__meta strong {
  font-variant-numeric: tabular-nums;
}

.project-reel--bex .project-reel__slides {
  z-index: 6;
  perspective: 1900px;
  transform-style: preserve-3d;
}

.project-reel--bex .project-reel__slide,
.reel-ready .project-reel--bex .project-reel__slide {
  inset: clamp(82px, 9vh, 104px) clamp(52px, 5.5vw, 106px) clamp(74px, 8vh, 96px);
  display: grid;
  place-items: center;
  overflow: visible;
  opacity: 0;
  clip-path: none;
  filter: blur(12px) brightness(.62);
  transform: translate3d(0, 7vh, -280px) rotateX(4deg) scale(.95);
  transition:
    opacity 520ms cubic-bezier(.16, 1, .3, 1),
    transform 760ms cubic-bezier(.16, 1, .3, 1),
    filter 620ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: 0ms;
  transform-origin: 50% 64%;
  will-change: transform, opacity, filter;
}

.project-reel--bex .project-reel__slide::before {
  content: attr(data-artwork);
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 1px;
  color: rgba(255, 255, 255, .58);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.project-reel--bex .project-reel__slide::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4vh;
  width: min(52vw, 980px);
  height: 8vh;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 83, 22, .2), rgba(255, 83, 22, .055) 34%, transparent 71%);
  filter: blur(18px);
  transform: translateX(-50%) perspective(800px) rotateX(68deg);
}

.project-reel--bex .project-reel__slide.is-active {
  opacity: 1;
  filter: none;
  transform:
    translate3d(calc(var(--pointer-x, 0px) * .24), calc(var(--pointer-y, 0px) * .18), 0)
    rotateX(var(--bex-rot-x, 0deg))
    rotateY(var(--bex-rot-y, 0deg))
    scale(1);
  transition-delay: 80ms;
}

.project-reel--bex .project-reel__slide img,
.project-reel--bex .project-reel__slide--portrait img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: min(88vw, 1720px);
  max-height: calc(100svh - clamp(174px, 19vh, 218px));
  object-fit: contain;
  object-position: center;
  clip-path: none;
  transform: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow:
    0 0 0 7px rgba(8, 7, 6, .92),
    0 0 0 8px rgba(255, 116, 61, .16),
    0 42px 120px rgba(0, 0, 0, .82),
    0 0 78px rgba(255, 77, 15, .12);
}

.project-reel--bex .project-reel__slide--source-landscape img {
  max-width: min(86vw, 1589px);
}

.project-reel--bex .project-reel__slide--source-portrait img,
.project-reel--bex .project-reel__slide--source-tall img {
  max-height: calc(100svh - clamp(166px, 18vh, 204px));
}

/* The BEX originals are embedded in index.html, so visibility never depends on
   a delayed asset request or an inherited reel effect. */
.project-reel--bex .project-reel__slide img,
.project-reel--bex .project-reel__slide.is-active img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.project-reel--bex .project-reel__progress {
  left: clamp(28px, 4vw, 76px);
  right: clamp(28px, 4vw, 76px);
  bottom: clamp(25px, 3.2vh, 40px);
  z-index: 14;
  height: 2px;
  background: rgba(255, 255, 255, .12);
}

.project-reel--bex .project-reel__progress span {
  background: var(--bex-orange);
  box-shadow: 0 0 18px rgba(255, 82, 19, .72);
}

@media (max-width: 900px) {
  .project-reel--bex .project-reel__slide,
  .reel-ready .project-reel--bex .project-reel__slide {
    inset: 72px 14px 60px;
  }

  .project-reel--bex .project-reel__slide img,
  .project-reel--bex .project-reel__slide--portrait img {
    width: auto;
    max-width: calc(100vw - 34px);
    max-height: calc(100svh - 148px);
  }

  .project-reel--bex .project-reel__slide::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-reel--bex .project-reel__slide,
  .reel-ready .project-reel--bex .project-reel__slide,
  .project-reel--bex .project-reel__slide.is-active {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}