.kyka-vinyl-player {
  --kyka-disc: #111111;
  --kyka-ring: rgba(255,255,255,.16);
  --kyka-spin-speed: 3s;
  line-height: 1;
}

.kyka-vinyl-player.kyka-fixed {
  position: fixed;
}

.kyka-vinyl-player.kyka-inline {
  position: relative;
  display: inline-flex;
}

.kyka-vinyl-button {
  width: 68px;
  height: 68px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .2s ease, filter .2s ease;
}

.kyka-vinyl-button:hover {
  transform: scale(1.04);
}

.kyka-vinyl-button:active {
  transform: scale(.97);
}

.kyka-vinyl-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.kyka-vinyl-disc {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at center,
      transparent 0 19%,
      var(--kyka-ring) 20% 21%,
      transparent 22% 31%,
      var(--kyka-ring) 32% 33%,
      transparent 34% 43%,
      var(--kyka-ring) 44% 45%,
      transparent 46% 55%,
      var(--kyka-ring) 56% 57%,
      transparent 58%),
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.16), transparent 22%),
    var(--kyka-disc);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  will-change: transform;
}

.kyka-vinyl-player.is-playing .kyka-vinyl-disc {
  animation: kyka-vinyl-spin var(--kyka-spin-speed) linear infinite;
}

.kyka-vinyl-center {
  position: relative;
  z-index: 2;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12);
}

.kyka-vinyl-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kyka-vinyl-note {
  font-size: clamp(12px, 35%, 24px);
  font-weight: 700;
  color: #fff;
  transform: translateY(-1px);
}

.kyka-vinyl-player.is-paused .kyka-vinyl-disc {
  animation-play-state: paused;
}

@keyframes kyka-vinyl-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .kyka-vinyl-player.is-playing .kyka-vinyl-disc {
    animation-duration: 12s;
  }
}

/* YouTube source uses the official iframe player for playback while the vinyl
   remains the visible control. Keep the player in the page but outside the
   visible viewport so it does not affect the invitation layout. */
.kyka-youtube-stage {
  position: fixed !important;
  left: -10000px !important;
  top: 0 !important;
  width: 200px !important;
  height: 200px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.kyka-youtube-stage iframe {
  width: 200px !important;
  height: 200px !important;
}


/* Hide the vinyl on the invitation cover, then reveal it after the opening
   button is clicked. The class is rendered server-side to prevent a flash
   before JavaScript initializes. */
.kyka-vinyl-player.kyka-hidden-before-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 10px, 0) scale(.94);
  transition:
    opacity .5s cubic-bezier(.22, 1, .36, 1),
    transform .65s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .65s;
}

.kyka-vinyl-player.kyka-hidden-before-open.is-opened {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity .5s cubic-bezier(.22, 1, .36, 1),
    transform .65s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0s;
}

/* Keep the control editable inside Elementor editor. */
.elementor-editor-active .kyka-vinyl-player.kyka-hidden-before-open,
.elementor-editor-preview .kyka-vinyl-player.kyka-hidden-before-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}