.video-catalogue {
  min-height: 160svh;
  background: #101112;
  color: #fff;
  overflow: clip;
}

.video-catalogue-stage {
  position: sticky;
  top: 76px;
  height: calc(100svh - 76px);
  min-height: 620px;
  overflow: hidden;
  padding: clamp(22px, 4svh, 42px) 0 clamp(24px, 5svh, 52px);
}

.video-catalogue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100%, 1640px);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 64px);
}

.video-catalogue h2 {
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1;
  margin: 0;
  color: #fff;
}

.video-carousel-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.video-carousel-controls button,
.video-player-close {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: #fff;
  cursor: pointer;
}

.video-carousel-controls button:hover,
.video-carousel-controls button:focus-visible,
.video-player-close:hover,
.video-player-close:focus-visible {
  border-color: rgba(255,255,255,.58);
  background: rgba(255,255,255,.12);
  outline: none;
}

.video-wall {
  position: absolute;
  inset: clamp(74px, 13svh, 118px) 0 clamp(22px, 6svh, 58px);
  perspective: 1500px;
  overflow: visible;
  touch-action: pan-y;
}

.video-wall:focus-visible {
  outline: 2px solid #808bff;
  outline-offset: -8px;
}

.video-wall-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.video-wall figure {
  --slide-x: 0px;
  --slide-y: 0px;
  --slide-scale: 1;
  --slide-yaw: 0deg;
  --slide-opacity: 1;
  --slide-width: min(33vw, 470px);
  --slide-aspect: 9 / 16;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--slide-z, 1);
  width: var(--slide-width);
  max-width: 82vw;
  margin: 0;
  opacity: var(--slide-opacity);
  transform:
    translate3d(-50%, -50%, 0)
    translate3d(var(--slide-x), var(--slide-y), var(--slide-depth, 0px))
    rotateY(var(--slide-yaw))
    scale(var(--slide-scale));
  transform-origin: center center;
  transition: transform 820ms cubic-bezier(.2,.74,.2,1), opacity 520ms ease, filter 520ms ease;
  will-change: transform, opacity;
  pointer-events: none;
}

.video-catalogue.is-entering .video-wall figure {
  transform:
    translate3d(-50%, -50%, 0)
    translate3d(calc(var(--slide-x) + var(--entry-x, 0px)), calc(var(--slide-y) + var(--entry-y, 0px)), -140px)
    rotate(var(--entry-rotation, 0deg))
    rotateY(calc(var(--slide-yaw) * .35))
    scale(calc(var(--slide-scale) * .72));
  opacity: calc(var(--slide-opacity) * .35);
}

.video-wall figure.is-visible {
  pointer-events: auto;
}

.video-wall figure.is-active {
  filter: saturate(1.08) contrast(1.03);
}

.video-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #050607;
  color: white;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12);
}

.video-card video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--slide-aspect);
  object-fit: contain;
  background: #000;
}

.video-card:focus-visible {
  outline: 3px solid #808bff;
  outline-offset: 4px;
}

.video-card::after {
  content: '\2197';
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 180ms ease;
}

.video-card:hover::after,
.video-card:focus-visible::after,
.video-wall figure.is-active .video-card::after {
  opacity: 1;
}

.video-wall figcaption {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  padding: 9px 2px 0;
  color: rgba(255,255,255,.78);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-gallery-player {
  padding: 16px;
  background: #111;
  color: #fff;
  border: 1px solid #555;
  max-width: min(92vw, 900px);
  max-height: 94svh;
}

.video-gallery-player::backdrop { background: #000d; }
.video-player-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 12px; }
.video-player-top h3 { font-size: 16px; margin: 0; }
.video-player-close { flex: 0 0 auto; font-size: 24px; }
.video-gallery-player video { display: block; max-height: 78svh; max-width: 100%; width: auto; margin: auto; background: #000; }
.video-player-status { font-size: 13px; }

@media (max-width: 1100px) {
  .video-catalogue { min-height: 145svh; }
  .video-catalogue-stage { min-height: 560px; }
}

@media (max-width: 760px) {
  .video-catalogue { min-height: 132svh; }
  .video-catalogue-stage {
    min-height: 560px;
    padding-top: 22px;
  }
  .video-catalogue-header {
    padding-inline: 18px;
  }
  .video-wall {
    inset: 82px 0 28px;
  }
  .video-catalogue h2 { font-size: 22px; }
  .video-wall figcaption { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .video-catalogue { min-height: 100svh; }
  .video-catalogue-stage { position: relative; top: 0; }
  .video-wall figure { transition: none; }
}