/* The photograph stays upright inside the moving edge of the record. */
.bn-stage[data-vinyl] {
  background: linear-gradient(112deg, #0751ff 4%, #004bff 44%, #0938c9 100%);
}
.bn-stage[data-vinyl] .bn-scene {
  --disc: min(86cqw, 550px);
  --center-x: 48%;
  --center-y: 51%;
}
.bn-stage[data-vinyl] .bn-motif {opacity: .19}
.bn-stage[data-vinyl] :is(.bn-photo, .bn-sun, .bn-vinyl) {
  position: absolute;
  inset: var(--center-y) auto auto var(--center-x);
  width: var(--disc);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.bn-stage[data-vinyl] .bn-sun {
  margin: .65% 0 0 1.9%;
  background: var(--pink);
}
.bn-stage[data-vinyl] .bn-sun::after {content: none}
.bn-stage[data-vinyl] .bn-photo {
  width: calc(var(--disc) * .83);
  z-index: 1;
  box-shadow: 0 0 0 2px #151638;
}
.bn-stage[data-vinyl] .bn-photo img {
  transform: scale(1.07);
}
.bn-vinyl {
  pointer-events: none;
  background:
    repeating-radial-gradient(circle, transparent 0 3px, #d1dcff32 3.5px, transparent 4.6px),
    conic-gradient(from 25deg, #172b68, #122150 12%, #5a70bc 19%, #182654 26%, #141b42 47%, #3d518d 61%, #28305d 66%, #101a40 78%, #4557a0 90%, #172b68);
  box-shadow: inset 0 0 0 1px #b5caff80;
}
.bn-vinyl::after {
  content: "";
  position: absolute;
  inset: 1.3%;
  border-radius: inherit;
  background: conic-gradient(from 14deg,
    transparent 0deg 16deg, #ffe08c 17deg 68deg, transparent 69deg 78deg,
    #ffb507 79deg 85deg, transparent 86deg 192deg,
    #ff6688 193deg 239deg, transparent 240deg 246deg,
    #ffe9f0 247deg 253deg, transparent 254deg);
  mask-image: radial-gradient(closest-side, transparent 97.8%, black 98.2%);
}
.bn-stage[data-vinyl] .bn-date-sticker {z-index: 2}
@media (max-width: 700px) {
  .bn-stage[data-vinyl] .bn-scene {
    --disc: clamp(222px, 64cqw, 305px);
    --center-x: 65%;
    --center-y: 53%;
    height: clamp(206px, 51vw, 275px);
  }
  .bn-stage[data-vinyl] .bn-motif {opacity: .25}
  .bn-stage[data-vinyl] .bn-date-sticker {bottom: 7%; left: 8%}
}

@media (prefers-reduced-motion: no-preference) {
  .bn-stage[data-vinyl] {view-timeline-name: --concert-stage}
  .bn-stage[data-vinyl] .bn-vinyl::after {
    animation: bn-record-turn 11s linear infinite;
    animation-play-state: paused;
  }
  .bn-stage[data-vinyl] .bn-live i {
    animation: bn-level 850ms ease-in-out infinite alternate;
    animation-play-state: paused;
  }
  .bn-stage[data-vinyl] .bn-live i:nth-child(2) {animation-delay: -490ms; animation-duration: 620ms}
  .bn-stage[data-vinyl] .bn-live i:nth-child(3) {animation-delay: -390ms; animation-duration: 720ms}
  .bn-stage[data-vinyl] .bn-live i:nth-child(4) {animation-delay: -180ms; animation-duration: 610ms}
  .bn-spotlight[data-carousel-visible]:not([data-autoplay-paused]) .bn-stage[data-vinyl].is-current .bn-vinyl::after,
  .bn-spotlight[data-carousel-visible]:not([data-autoplay-paused]) .bn-stage[data-vinyl].is-current .bn-live i {animation-play-state: running}
  .bn-spotlight[data-carousel-visible]:not([data-autoplay-paused]) .bn-stage[data-vinyl].is-current .bn-photo img {
    translate: var(--disc-x, 0px) var(--disc-y, 0px);
    transition: translate 300ms cubic-bezier(.2,.7,.25,1);
  }
  @supports (animation-timeline: view()) {
    .bn-spotlight[data-carousel-visible]:not([data-autoplay-paused]) .bn-stage[data-vinyl].is-current .bn-photo img {
      animation: bn-stage-depth linear both;
      animation-timeline: --concert-stage;
      animation-range: exit 0% exit 95%;
    }
  }
  @keyframes bn-record-turn {to {transform: rotate(1turn)}}
  @keyframes bn-level {from {transform: scaleY(.48)} to {transform: scaleY(1.14)}}
  @keyframes bn-stage-depth {from {transform: scale(1.07)} to {transform: translateY(2.7%) scale(1.10)}}
}
@media (prefers-reduced-motion:reduce) {
  .bn-stage[data-vinyl] .bn-photo img {transform: none}
}