/* Home-only native featured-work rail. */
html[data-oa-home-runtime-booting] .bar-logo,
html[data-oa-home-runtime-booting] .bar-nav,
html[data-oa-home-runtime-booting] .hero-meta,
html[data-oa-home-runtime-booting] .production-signal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.showcase-rail {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.showcase-rail::-webkit-scrollbar {
  display: none;
}

.showcase-rail > .hero-feature,
.showcase-rail > .showcase-next {
  flex: 0 0 76% !important;
  width: 76% !important;
  min-width: 76% !important;
  max-width: 76% !important;
  scroll-snap-align: start;
}

.showcase-rail .hero-key-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.showcase-rail .hero-key-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Keep the visible Case Study action above the full-frame trailer hit target. */
#hero-feature .hero-feature-links {
  position: absolute;
  z-index: 7;
  pointer-events: auto;
}

@media (min-width: 761px) {
  .showcase-rail {
    height: min(clamp(31rem, 38vw, 42.5rem), 68vh);
  }

  .showcase-rail > .hero-feature,
  .showcase-rail > .showcase-next {
    height: 100%;
    aspect-ratio: auto;
  }

  .showcase-rail > .hero-feature > img,
  .showcase-rail > .hero-feature > iframe,
  .showcase-rail > .hero-feature .hero-signal-video,
  .showcase-rail > .showcase-next > img {
    height: 100%;
    object-fit: cover;
  }
}

.showcase-rail.is-away-from-origin #hero-feature .hero-signal-video,
.showcase-rail.is-away-from-origin #hero-feature .hero-play-hit,
.showcase-rail.is-away-from-origin #hero-feature .hero-feature-label,
.showcase-rail.is-away-from-origin #hero-feature .hero-feature-links,
.showcase-rail.is-loop-normalizing #hero-feature .hero-signal-video,
.showcase-rail.is-loop-normalizing #hero-feature .hero-play-hit,
.showcase-rail.is-loop-normalizing #hero-feature .hero-feature-label,
.showcase-rail.is-loop-normalizing #hero-feature .hero-feature-links {
  visibility: hidden;
  opacity: 0;
}

.showcase-rail-control {
  position: absolute;
  z-index: 22;
  top: 52%;
  display: grid;
  grid-template-columns: auto auto;
  place-items: center;
  gap: .38rem;
  width: 5rem;
  min-width: 5rem;
  height: 1.5rem;
  padding: 0 .55rem;
  color: var(--ink);
  background: var(--acid);
  border: 1px solid var(--ink);
  border-radius: 0;
  font: inherit;
  cursor: pointer;
  transition: opacity .16s linear, background-color .16s linear, color .16s linear;
}

/* Keep the compact 80 × 24 shell while extending its interactive box to the
   44px minimum on tablet/desktop layouts. The transparent pseudo-element is
   owned by the button, so pointer events still resolve to the native control. */
@media (min-width: 761px) {
  .showcase-rail-control::after {
    content: "";
    position: absolute;
    inset: -11px 0;
  }

  .showcase-next-arrow {
    -webkit-clip-path: none;
    clip-path: none;
  }
}

/* Signal cleanup is a completed state, not another animation. Restore both
   fixed controls atomically so the non-arrival anchor cannot linger faded. */
.showcase-rail-control.is-signal-restoring {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

.showcase-rail-control b {
  align-self: center;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
}

.showcase-rail-control span {
  align-self: center;
  margin: 0;
  font-size: .55rem;
  letter-spacing: .08em;
}

.showcase-next-arrow {
  transform: translate(-50%, -50%);
}

.showcase-back-arrow {
  transform: translate(0, -50%);
}

.showcase-next-arrow:hover,
.showcase-next-arrow:focus-visible {
  width: 5rem;
  min-width: 5rem;
  height: 1.5rem;
  transform: translate(-50%, -50%);
}

.showcase-back-arrow:hover,
.showcase-back-arrow:focus-visible {
  transform: translate(0, -50%);
  color: var(--ink) !important;
  background: var(--acid) !important;
}

.showcase-rail-control:hover,
.showcase-rail-control:focus-visible {
  color: var(--paper);
  background: var(--blue);
}

.showcase-rail-control[hidden] {
  display: none;
}

/* The site cursor owns the complete carousel-control handoff: eye on artwork,
   square on approach, then a hairline frame around the fixed click target. */
html.oa-pixel-cursor-ready .showcase-rail-control {
  cursor: none !important;
}

@media (max-width: 760px) {
  .showcase-rail > .hero-feature,
  .showcase-rail > .showcase-next {
    flex-basis: 86% !important;
    width: 86% !important;
    min-width: 86% !important;
    max-width: 86% !important;
  }

  .showcase-rail-control {
    width: 6.25rem;
    min-width: 6.25rem;
    height: 3rem;
    padding-inline: .65rem;
  }

  .showcase-next-arrow:hover,
  .showcase-next-arrow:focus-visible {
    width: 6.25rem;
    min-width: 6.25rem;
    height: 3rem;
  }

  /* The control remains centered on the 86% panel seam. Below 360px, cap its
     inline size to the exact space between that seam and the viewport edge. */
  .showcase-next-arrow,
  .showcase-next-arrow:hover,
  .showcase-next-arrow:focus-visible {
    width: min(6.25rem, 28vw);
    min-width: min(6.25rem, 28vw);
  }
}

/* At the narrowest supported phone width, keep the centered play cue clear of
   the fixed BACK shell without changing the full-frame play button hit area. */
@media (max-width: 340px) {
  .hero-play-hit::before,
  .hero-play-hit::after {
    left: calc(50% + .5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-rail {
    scroll-behavior: auto;
  }
}
/* Keep the in-image featured label legible across every moving frame without
   changing its geometry or adding a painted panel. */
.hero-showcase-copy strong,
.hero-showcase-copy em {
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .96), 0 3px 18px rgba(0, 0, 0, .78);
}

/* Exact current-frame bridge for the Reggaetón BACK wrap. It is created only
   for the wrap, never participates in layout, and costs no second decoder. */
.showcase-back-wrap-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.showcase-loop-clone .showcase-next-copy {
  z-index: 2;
}