/* ============================================================
   nl-mediaGlow.css
   Neon glass-border hover glow for .vkMediaFrame elements
   inside the night life section.

  Source: migrated from legacy prototype styling
   .vkMediaFrame is only ever created by nl-vkMediaLayout.js
   so no selector-scoping with #nightlifeBody is needed for
   the frame rules. Overflow overrides ARE scoped so they
   cannot break other sections.
   ============================================================ */

/* ── Position context for the nightlife grid ──────────────── */
#nightlifeBody,
#nightlifeBody .vkDivsNSvg,
#nightlifeBody .roadmapCon,
#nightlifeBody .nl-vkGrid {
  position: relative;
  z-index: 10;
}

/* Hidden until universe_can animation completes — set to block
   by nl-vkMediaLayout.js once the universeAnimationComplete event fires. */
#nightlifeBody .vkDivsNSvg {
  display: none;
}

/* ── Allow glow bleed outside containers ──────────────────── */
/* nl-svgDraw.css sets overflow:hidden on several ancestors.
   Win the cascade with !important so glow layers are visible. */
#nightlifeBody .vkDivsNSvg,
#nightlifeBody .nl-vkRow,
#nightlifeBody .nl-vkImg,
#nightlifeBody .nl-vKitem-1,
#nightlifeBody .nl-vKitem-2,
#nightlifeBody .nl-vKitem-2-img,
#nightlifeBody .nl-vKitem-3-img,
#nightlifeBody .nl-vkRow .media-row,
#nightlifeBody .nl-vkImg .media-row,
#nightlifeBody .nl-vKitem-1 .media-row,
#nightlifeBody .nl-vKitem-2 .media-row,
#nightlifeBody .nl-vKitem-2-img .media-row,
#nightlifeBody .nl-vKitem-3-img .media-row {
  overflow: visible !important;
}

/* ── vkMediaFrame base ────────────────────────────────────── */
.vkMediaFrame {
  --hue1: 255;
  --hue2: 222;
  --border: 1px;
  --border-color: hsl(var(--hue2), 12%, 60%);
  --radius: 14px;
  --ease: cubic-bezier(0.5, 1, 0.89, 1);
  position: relative;
  display: block;
  border: var(--border) solid var(--border-color);
  border-radius: var(--radius);
  isolation: isolate;
  overflow: visible;
  transition: filter 0.8s var(--ease), border-color 0.8s var(--ease);
  will-change: filter;
  padding: 0;
  box-sizing: border-box;
}

.vkMediaFrame > img,
.vkMediaFrame > video {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  object-fit: contain;
  background: #000;
}

.vkMediaFrame:hover {
  filter: brightness(1.03) saturate(1.04);
}

/* ── Shine / Glow shared base ─────────────────────────────── */
.vkMediaFrame .shine,
.vkMediaFrame .glow {
  --hue: var(--hue1);
  --conic: -45deg;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}

.vkMediaFrame .shine-bottom,
.vkMediaFrame .glow-bottom {
  --hue: var(--hue2);
  --conic: 135deg;
}

/* ── Shine layer (conic-gradient border line) ─────────────── */
.vkMediaFrame .shine,
.vkMediaFrame .shine::before,
.vkMediaFrame .shine::after {
  pointer-events: none;
  width: 75%;
  aspect-ratio: 1;
  min-height: 0;
  display: block;
  position: absolute;
  right: calc(var(--border) * -1);
  top: calc(var(--border) * -1);
  left: auto;
  z-index: 1;
  border-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-left-radius: inherit;
  border: 1px solid transparent;
  --start: 12%;
  background: conic-gradient(
    from var(--conic, -45deg) at center in oklch,
    transparent var(--start, 0%),
    hsl(var(--hue), var(--sat, 80%), var(--lit, 60%)),
    transparent var(--end, 50%)
  ) border-box;
  mask:
    linear-gradient(transparent),
    linear-gradient(black);
  mask-repeat: no-repeat;
  mask-clip: padding-box, border-box;
  mask-composite: subtract;
}

.vkMediaFrame .shine::before,
.vkMediaFrame .shine::after {
  content: '';
  width: auto;
  inset: -2px;
  mask: none;
}

.vkMediaFrame .shine::after {
  z-index: 2;
  --start: 17%;
  --end: 33%;
  background: conic-gradient(
    from var(--conic, -45deg) at center in oklch,
    transparent var(--start, 0%),
    hsl(var(--hue), var(--sat, 80%), var(--lit, 85%)),
    transparent var(--end, 50%)
  );
}

.vkMediaFrame .shine-bottom {
  top: auto;
  right: auto;
  left: calc(var(--border) * -1);
  bottom: calc(var(--border) * -1);
}

/* ── Glow layer (blurred noise-masked border bloom) ───────── */
.vkMediaFrame .glow {
  pointer-events: none;
  width: 75%;
  aspect-ratio: 1;
  min-height: 0;
  display: block;
  position: absolute;
  inset: calc(var(--radius) * -2);
  left: auto;
  bottom: auto;
  border-top-right-radius: calc(var(--radius) * 2.5);
  border-bottom-left-radius: calc(var(--radius) * 2.5);
  border: calc(var(--radius) * 1.25) solid transparent;
  mask: url('https://assets.codepen.io/13471/noise-base.png');
  mask-mode: luminance;
  mask-size: 29%;
  filter: blur(12px) saturate(1.25) brightness(0.5);
  mix-blend-mode: plus-lighter;
  z-index: 3;
}

.vkMediaFrame .glow::before,
.vkMediaFrame .glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border: inherit;
  border-radius: inherit;
  background: conic-gradient(
    from var(--conic, -45deg) at center in oklch,
    transparent var(--start, 0%),
    hsl(var(--hue), var(--sat, 95%), var(--lit, 60%)),
    transparent var(--end, 50%)
  ) border-box;
  mask:
    linear-gradient(transparent),
    linear-gradient(black);
  mask-repeat: no-repeat;
  mask-clip: padding-box, border-box;
  mask-composite: subtract;
  filter: saturate(2) brightness(1);
}

.vkMediaFrame .glow::after {
  --lit: 70%;
  --sat: 100%;
  --start: 15%;
  --end: 35%;
  border-width: calc(var(--radius) * 1.75);
  border-radius: calc(var(--radius) * 2.75);
  inset: calc(var(--radius) * -0.25);
  opacity: 0.75;
  z-index: 4;
}

.vkMediaFrame .glow-bottom {
  inset: calc(var(--radius) * -2);
  top: auto;
  right: auto;
}

.vkMediaFrame .glow-bright {
  --lit: 80%;
  --sat: 100%;
  --start: 13%;
  --end: 37%;
  border-width: 5px;
  border-radius: calc(var(--radius) + 2px);
  inset: -7px;
  left: auto;
  filter: blur(2px) brightness(0.66);
}

.vkMediaFrame .glow-bright::after {
  content: none;
}

.vkMediaFrame .glow-bright.glow-bottom {
  inset: -7px;
  top: auto;
  right: auto;
}

/* ── Hover triggers ───────────────────────────────────────── */
.vkMediaFrame > img:hover ~ .shine,
.vkMediaFrame > img:hover ~ .shine::before,
.vkMediaFrame > img:hover ~ .shine::after,
.vkMediaFrame > img:hover ~ .glow,
.vkMediaFrame > img:hover ~ .glow::before,
.vkMediaFrame > img:hover ~ .glow::after,
.vkMediaFrame > img:hover ~ .glow-bright,
.vkMediaFrame > img:hover ~ .glow-bright::before,
.vkMediaFrame > img:hover ~ .glow-bright::after,
.vkMediaFrame > video:hover ~ .shine,
.vkMediaFrame > video:hover ~ .shine::before,
.vkMediaFrame > video:hover ~ .shine::after,
.vkMediaFrame > video:hover ~ .glow,
.vkMediaFrame > video:hover ~ .glow::before,
.vkMediaFrame > video:hover ~ .glow::after,
.vkMediaFrame > video:hover ~ .glow-bright,
.vkMediaFrame > video:hover ~ .glow-bright::before,
.vkMediaFrame > video:hover ~ .glow-bright::after {
  opacity: 1;
  transition: 1s;
}

.vkMediaFrame.is-hover .shine,
.vkMediaFrame.is-hover .shine::before,
.vkMediaFrame.is-hover .shine::after,
.vkMediaFrame.is-hover .glow,
.vkMediaFrame.is-hover .glow::before,
.vkMediaFrame.is-hover .glow::after,
.vkMediaFrame.is-hover .glow-bright,
.vkMediaFrame.is-hover .glow-bright::before,
.vkMediaFrame.is-hover .glow-bright::after {
  opacity: 1;
  transition: 1s;
}

.vkMediaFrame > img:hover ~ .shine-bottom,
.vkMediaFrame > video:hover ~ .shine-bottom { opacity: 1; }
.vkMediaFrame > img:hover ~ .glow-bottom,
.vkMediaFrame > video:hover ~ .glow-bottom { opacity: 1; }
.vkMediaFrame > img:hover ~ .glow-bright,
.vkMediaFrame > video:hover ~ .glow-bright { opacity: 1; }

/* ── Remove black border/background around videos ─────────── */
.nl-vkImg video,
.media-row video,
.vkMediaFrame > video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid hsl(222 18% 30% / 0.3);
  outline: none;
  background: transparent;
  object-fit: cover;
  -webkit-appearance: none;
  vertical-align: middle;
  border-radius: 0;
}

/* Keep frame-owned videos tied to the frame radius/border so no double border appears. */
.vkMediaFrame > video {
  border: 0;
  border-radius: 0;
  -webkit-clip-path: none;
  clip-path: none;
}

/* Transparent wrappers */
.nl-vkImg,
.media-row,
.vkMediaFrame {
  background: transparent !important;
  box-shadow: none;
}

/* ── Video scale trick — hide subpixel edge gaps ──────────── */
.media-row video,
.nl-vkImg video,
.vkMediaFrame > video {
  transform: scale(1.01);
  -webkit-transform: scale(1.01);
  transform-origin: center center;
  -webkit-transform-origin: center center;
  will-change: transform;
}

/* ── Internal media-row inside a frame ───────────────────── */
/* Crops the 1% scale overshoot but inherits rounded corners */
.vkMediaFrame .media-row {
  overflow: hidden;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
  top: 0;
  left: 0;
}

.vkMediaFrame .media-row > img,
.vkMediaFrame .media-row > video,
.vkMediaFrame .media-row > picture,
.vkMediaFrame .media-row > picture > img,
.vkMediaFrame img,
.vkMediaFrame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
  border-radius: inherit;
}

.vkMediaFrame picture {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

#nightlifeBody #velvetvideo .vkMediaFrame,
#nightlifeBody #velvetvideo .vkMediaFrame > video,
#nightlifeBody #velvetvideo .fullscreen-video {
  pointer-events: auto;
  cursor: pointer;
}

/* Keep velvet host/frame width fixed even when source tiers change.
   The host is a column flex container; without stretch, children can
   shrink-wrap to intrinsic media width (e.g. 360p). */
#nightlifeBody #velvetvideo {
  align-items: stretch;
}

#nightlifeBody #velvetvideo > .vkMediaFrame,
#nightlifeBody #velvetvideo > .nl-vkMediaFrame,
#nightlifeBody #velvetvideo > .dynamic-video-controls-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
}

#nightlifeBody #velvetvideo .dynamic-video-controls-wrap,
#nightlifeBody #velvetvideo .dynamic-video-controls-wrap > video,
#nightlifeBody #velvetvideo .vkMediaFrame > video,
#nightlifeBody #velvetvideo .fullscreen-video {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Keep hover border/glow rounded like the media tiles. */
#nightlifeBody .nightlife-bottom-media-row > .vkMediaFrame,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame.playbtn-host,
#nightlifeBody .nl-vkGrid .vkMediaFrame.playbtn-host {
  --radius: 22px;
  border-radius: var(--radius);
  overflow: hidden;
}

#nightlifeBody .nl-vkGrid .vkMediaFrame.playbtn-host > video,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame.playbtn-host > video {
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  transform: scale(1.01);
  -webkit-transform: scale(1.01);
}

#nightlifeBody .nl-vkGrid .vkMediaFrame.playbtn-host > .dynamic-video-controls-wrap,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame.playbtn-host > .dynamic-video-controls-wrap {
  width: 100%;
  height: 100%;
  min-width: 0;
}

#nightlifeBody .nl-vkGrid .vkMediaFrame.playbtn-host > .dynamic-video-controls-wrap > video,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame.playbtn-host > .dynamic-video-controls-wrap > video {
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}

/* Direct media-row video hosts need a fixed frame too, otherwise swapping
   preview/full sources reflows the sibling images and the row jumps. */
#nightlifeBody .nl-vkImg.nl-vKitem-1 .media-row > .playbtn-host,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .playbtn-host {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  min-width: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
}

#nightlifeBody .nl-vkImg.nl-vKitem-1 .media-row > .playbtn-host > .dynamic-video-controls-wrap,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .playbtn-host > .dynamic-video-controls-wrap {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: block;
}

#nightlifeBody .nl-vkImg.nl-vKitem-1 .media-row > .playbtn-host > .dynamic-video-controls-wrap > video,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .playbtn-host > .dynamic-video-controls-wrap > video,
#nightlifeBody .nl-vkImg.nl-vKitem-1 .media-row > .playbtn-host > video,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .playbtn-host > video {
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  display: block;
}

#nightlifeBody .nightlife-bottom-media-row > .vkMediaFrame .shine,
#nightlifeBody .nightlife-bottom-media-row > .vkMediaFrame .shine::before,
#nightlifeBody .nightlife-bottom-media-row > .vkMediaFrame .shine::after,
#nightlifeBody .nightlife-bottom-media-row > .vkMediaFrame .glow,
#nightlifeBody .nightlife-bottom-media-row > .vkMediaFrame .glow::before,
#nightlifeBody .nightlife-bottom-media-row > .vkMediaFrame .glow::after,
#nightlifeBody .nightlife-bottom-media-row > .vkMediaFrame .glow-bright,
#nightlifeBody .nightlife-bottom-media-row > .vkMediaFrame .glow-bright::before,
#nightlifeBody .nightlife-bottom-media-row > .vkMediaFrame .glow-bright::after,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame .shine,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame .shine::before,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame .shine::after,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame .glow,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame .glow::before,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame .glow::after,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame .glow-bright,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame .glow-bright::before,
#nightlifeBody .nl-vkImg.nl-vKitem-2 .media-row > .vkMediaFrame .glow-bright::after,
#nightlifeBody .nl-vkGrid .vkMediaFrame.playbtn-host .shine,
#nightlifeBody .nl-vkGrid .vkMediaFrame.playbtn-host .shine::before,
#nightlifeBody .nl-vkGrid .vkMediaFrame.playbtn-host .shine::after,
#nightlifeBody .nl-vkGrid .vkMediaFrame.playbtn-host .glow,
#nightlifeBody .nl-vkGrid .vkMediaFrame.playbtn-host .glow::before,
#nightlifeBody .nl-vkGrid .vkMediaFrame.playbtn-host .glow::after,
#nightlifeBody .nl-vkGrid .vkMediaFrame.playbtn-host .glow-bright,
#nightlifeBody .nl-vkGrid .vkMediaFrame.playbtn-host .glow-bright::before,
#nightlifeBody .nl-vkGrid .vkMediaFrame.playbtn-host .glow-bright::after {
  border-radius: inherit;
}

/* Hard radius contract for all Nightlife vkDivsNSvg media tiles.
   Keep 22px while paused and while playing, including runtime wrappers. */
#nightlifeBody .vkDivsNSvg {
  --nl-media-radius: 22px;
}

#nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkImg,
#nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkTextCon,
#nightlifeBody .vkDivsNSvg .roadmapCon .media-row,
#nightlifeBody .vkDivsNSvg .roadmapCon .playbtn-host,
#nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkMediaFrame,
#nightlifeBody .vkDivsNSvg .roadmapCon .vkMediaFrame,
#nightlifeBody .vkDivsNSvg .roadmapCon picture,
#nightlifeBody .vkDivsNSvg .roadmapCon picture > img,
#nightlifeBody .vkDivsNSvg .roadmapCon video,
#nightlifeBody .vkDivsNSvg .roadmapCon .dynamic-video-controls-wrap {
  border-radius: var(--nl-media-radius) !important;
}

#nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkImg,
#nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkTextCon,
#nightlifeBody .vkDivsNSvg .roadmapCon .media-row,
#nightlifeBody .vkDivsNSvg .roadmapCon .playbtn-host,
#nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkMediaFrame,
#nightlifeBody .vkDivsNSvg .roadmapCon .vkMediaFrame,
#nightlifeBody .vkDivsNSvg .roadmapCon .dynamic-video-controls-wrap {
  overflow: hidden;
}

#nightlifeBody .vkDivsNSvg .roadmapCon [data-roadmap-playing="1"],
#nightlifeBody .vkDivsNSvg .roadmapCon [data-roadmap-playing="1"] > video,
#nightlifeBody .vkDivsNSvg .roadmapCon [data-roadmap-playing="1"] > .dynamic-video-controls-wrap,
#nightlifeBody .vkDivsNSvg .roadmapCon [data-roadmap-playing="1"] > .dynamic-video-controls-wrap > video {
  border-radius: var(--nl-media-radius) !important;
}

@media (max-width: 767px) {
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > .vkMediaFrame,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > .nl-vkMediaFrame,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > .playbtn-host,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > picture,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > video,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: hidden;
  }

  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > .vkMediaFrame > picture,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > .vkMediaFrame > video,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > .vkMediaFrame > img,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > .nl-vkMediaFrame > picture,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > .nl-vkMediaFrame > video,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > .nl-vkMediaFrame > img,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > .playbtn-host > .dynamic-video-controls-wrap,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > .playbtn-host > video,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > picture > img,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > video,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > img,
  #nightlifeBody .vkDivsNSvg .roadmapCon .nl-vkRow .media-row > .playbtn-host > .dynamic-video-controls-wrap > video {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
  }
}