/* Shared active-video and sound-permission layer v83. */

.portfolio-sound-unlock {
  position: fixed;
  z-index: 10050;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(203, 255, 38, .58);
  border-radius: 999px;
  background: rgba(8, 10, 8, .92);
  color: #f4f5ef;
  box-shadow: 0 14px 42px rgba(0, 0, 0, .42), 0 0 20px rgba(203, 255, 38, .10);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font: 700 10px/1 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px) scale(.97);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s, border-color .22s ease;
}

.portfolio-sound-unlock span {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #cbff26;
  box-shadow: 0 0 12px rgba(203, 255, 38, .68);
}

.portfolio-sound-unlock.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-sound-unlock.is-visible:hover {
    border-color: #cbff26;
    transform: translate(-50%, -2px) scale(1.015);
  }
}

/* A silent source still receives buffering feedback and the normal responsive
   frame, but transport/audio UI is intentionally absent. */
.portfolio-silent-media .portfolio-video-controls,
.portfolio-silent-media .artist-video-controls,
.portfolio-silent-media .wkndr-carousel-controls,
.portfolio-silent-media .wkndr-standalone-controls,
.portfolio-silent-media .bella-video-controls,
.portfolio-silent-media .clean-loop-video-cta,
.portfolio-silent-media .clean-loop-video-badge,
.portfolio-silent-media .video-sound-hint,
.portfolio-silent-media .bella-play-prompt {
  display: none !important;
}

.portfolio-silent-media video {
  cursor: default;
}

/* Preserve the editor's complete exported frame. Portrait, 4:5, square, and
   landscape sources may letterbox inside an existing phone/post shell, but
   they must never be enlarged with `cover` and cropped at the top or bottom. */
video:not(.artist-hero-preview) {
  object-fit: contain !important;
  object-position: center center !important;
  background-color: #020202;
}

/* Stacked outer cards are their own navigation. The visible side cards,
   swipe gestures, and keyboard arrows replace redundant external buttons.
   Inner-carousel arrows intentionally remain available. */
.wkndr-series-nav,
.wkndr-video-meta > button,
.video-coverflow-nav,
.campaign-coverflow-nav,
.subsidy-series-nav,
.bella-stage-arrow,
.artist-series-controls {
  display: none !important;
}

.wkndr-video-meta {
  grid-template-columns: minmax(0, 1fr) !important;
}

.wkndr-video-meta > div {
  grid-column: 1 !important;
}

.video-coverflow-meta {
  grid-template-columns: minmax(0, 1fr) !important;
}

.video-coverflow-meta > div {
  grid-column: 1 !important;
}

/* Campaign Worlds use the same depth-card language as the portfolio's other
   coverflows: one readable foreground system, with adjacent systems kept
   visible as darker, softly blurred navigation targets. */
.wkndr-world-deck {
  width: 100%;
  outline: none;
}

.wkndr-world-deck:focus-visible {
  border-radius: 22px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--world-accent) 72%, transparent);
}

.wkndr-world-stage {
  position: relative;
  width: min(100%, 960px);
  height: min(680px, 76dvh);
  min-height: 525px;
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
  perspective: 1300px;
  touch-action: pan-y pinch-zoom;
}

.wkndr-world-card {
  --world-card-slot: 0;
  --world-card-depth: 0;
  --world-card-z: 40;
  position: absolute;
  z-index: var(--world-card-z);
  top: 5px;
  left: 50%;
  width: min(76%, 380px, calc(65dvh * .8));
  margin: 0;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(241, 239, 233, .11);
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(255,255,255,.035), rgba(0,0,0,.12)), #080908;
  opacity: calc(1 - (var(--world-card-depth) * .54));
  filter: brightness(calc(1 - (var(--world-card-depth) * .48))) blur(calc(var(--world-card-depth) * 2.1px));
  transform: translateX(calc(-50% + (var(--world-card-slot) * 180px))) translateY(calc(var(--world-card-depth) * 22px)) scale(calc(1 - (var(--world-card-depth) * .13)));
  transform-origin: center top;
  cursor: pointer;
  outline: none;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .32s ease, filter .32s ease, border-color .28s ease, box-shadow .28s ease;
}

.wkndr-world-card.is-active {
  z-index: 60;
  opacity: 1;
  filter: none;
  transform: translateX(-50%) translateY(0) scale(1);
  cursor: default;
}

.wkndr-world-card:not(.is-active) .wkndr-media-carousel {
  pointer-events: none;
}

.wkndr-world-card-label {
  display: block;
  min-height: 28px;
  padding: 3px 5px 10px;
  overflow: hidden;
  color: var(--world-accent);
  font: 700 8px/1.4 var(--mono);
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.wkndr-world-card .wkndr-media-carousel {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 20px;
}

.wkndr-world-card-meta {
  width: min(100%, 720px);
  min-height: 61px;
  margin: 10px auto 0;
  padding-inline: 12px;
  text-align: center;
}

.wkndr-world-card-meta span,
.wkndr-world-card-meta strong,
.wkndr-world-card-meta small {
  display: block;
}

.wkndr-world-card-meta span {
  color: var(--world-accent);
  font: 700 8px/1 var(--mono);
  letter-spacing: .1em;
}

.wkndr-world-card-meta strong {
  margin-top: 7px;
  font-size: 17px;
  font-weight: 500;
}

.wkndr-world-card-meta small {
  margin-top: 7px;
  color: #74756e;
  font: 7px/1.45 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Moving a card to the foreground gets a single, restrained focus pulse. The
   resting design stays neutral; the lime/brand glow does not remain active. */
@keyframes wkndr-stack-front-focus {
  0% { filter: brightness(.92); box-shadow: 0 18px 55px rgba(0,0,0,.34); }
  42% { filter: brightness(1.055); box-shadow: 0 20px 62px rgba(0,0,0,.42), 0 0 0 1px rgba(214,255,75,.34), 0 0 28px rgba(214,255,75,.13); }
  100% { filter: brightness(1); box-shadow: 0 18px 55px rgba(0,0,0,.34); }
}

.wkndr-video-card.is-active .wkndr-video-phone,
.wkndr-world-card.is-active {
  animation: wkndr-stack-front-focus .52s cubic-bezier(.2,.78,.2,1) both;
}

@media (hover: hover) and (pointer: fine) {
  .wkndr-world-card:not(.is-active):hover {
    opacity: .68;
    filter: brightness(.68) blur(.7px);
  }

  .wkndr-world-card.is-active:hover {
    transform: translateX(-50%) translateY(-4px) scale(1.006);
    border-color: rgba(214,255,75,.56);
    box-shadow: 0 18px 55px rgba(0,0,0,.34), 0 0 28px rgba(214,255,75,.08);
  }

  .wkndr-video-card.is-active:hover .wkndr-video-phone {
    border-color: rgba(214,255,75,.58);
    box-shadow: 0 24px 80px rgba(0,0,0,.48), 0 0 30px rgba(214,255,75,.08);
  }
}

@media (max-width: 1180px) {
  .wkndr-world-card {
    transform: translateX(calc(-50% + (var(--world-card-slot) * 145px))) translateY(calc(var(--world-card-depth) * 19px)) scale(calc(1 - (var(--world-card-depth) * .135)));
  }
}

@media (max-width: 900px) {
  .wkndr-world-stage {
    height: min(610px, 72dvh);
    min-height: 465px;
  }

  .wkndr-world-card {
    width: min(72vw, 330px, calc(60dvh * .8));
    padding: 10px;
    border-radius: 23px;
    transform: translateX(calc(-50% + (var(--world-card-slot) * 88px))) translateY(calc(var(--world-card-depth) * 14px)) scale(calc(1 - (var(--world-card-depth) * .145)));
  }

  .wkndr-world-card .wkndr-media-carousel {
    border-radius: 17px;
  }
}

@media (max-width: 480px) {
  .wkndr-world-stage {
    height: min(570px, 68dvh);
    min-height: 440px;
  }

  .wkndr-world-card {
    width: min(72vw, 290px, calc(59dvh * .8));
    transform: translateX(calc(-50% + (var(--world-card-slot) * 72px))) translateY(calc(var(--world-card-depth) * 11px)) scale(calc(1 - (var(--world-card-depth) * .15)));
  }

  .wkndr-world-card-meta small {
    display: none;
  }
}

@media (max-width: 640px) {
  .portfolio-sound-unlock {
    bottom: max(14px, env(safe-area-inset-bottom));
    min-height: 40px;
    padding-inline: 14px;
    max-width: calc(100vw - 28px);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-sound-unlock,
  .wkndr-world-card,
  .wkndr-video-phone {
    transition: none;
    animation: none !important;
  }
}