/* ══ Ring «Rosa de guilloché» · Azula XV ══
   Medallón de plata grabada: filo festoneado fijo, dos rosetas que giran en contra
   (moiré de placa) y el sello-corazón de la carta al centro. Sin disco: el core
   pinta uno en .kc-audio-toggle y aquí se apaga entero. */

#kc-audio-toggle.pdp-ring {
  position: fixed;
  z-index: var(--kc-z-audio);
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 58px; height: 58px;
  padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0; translate: 0 14px;
  transition: opacity .6s ease, translate .7s cubic-bezier(.22, 1, .36, 1);
}
/* entra cuando termina la despixelación (1 s): no le roba cuadros a la salida del Gate */
#kc-audio-toggle.pdp-ring.visible { opacity: 1; translate: 0 0; transition-delay: 1.1s; }
#kc-audio-toggle.pdp-ring:hover { transform: none; }
#kc-audio-toggle.pdp-ring:active .pdp-ring-face { scale: .93; }
#kc-audio-toggle.pdp-ring:focus-visible { outline: 1.5px solid #6F7378; outline-offset: 3px; border-radius: 50%; }

.pdp-ring > * { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Luz de placa: lavado marfil que se apaga hacia el filo. Da lectura sobre marfil y sobre peltre. */
.pdp-ring-plate {
  inset: 3px; width: auto; height: auto; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(246, 244, 239, .96) 0 58%, rgba(246, 244, 239, .78) 80%, rgba(246, 244, 239, 0) 100%);
}

/* Grabado: línea de sombra + línea de luz, como un buril sobre plata */
.pdp-ring-lo use { fill: none; stroke: #3E4146; stroke-opacity: .5; stroke-width: .55; translate: 0 .45px; }
.pdp-ring-hi use { fill: none; stroke: url(#pdp-ring-silver); stroke-width: .6; }
.pdp-ring-b .pdp-ring-lo use { stroke-opacity: .32; }

.pdp-ring-layer { transform-origin: 50% 50%; will-change: rotate; transition: opacity .5s ease; }
.pdp-ring-a { animation: pdp-ring-cw 38s linear infinite; }
.pdp-ring-b { animation: pdp-ring-ccw 54s linear infinite; }
@keyframes pdp-ring-cw { to { rotate: 360deg; } }
@keyframes pdp-ring-ccw { to { rotate: -360deg; } }

.pdp-ring-edge-lo { fill: none; stroke: #2B2D30; stroke-opacity: .55; stroke-width: 1.1; translate: 0 .5px; }
.pdp-ring-edge { fill: none; stroke: url(#pdp-ring-silver); stroke-width: .9; }
.pdp-ring-face { transition: scale .18s ease; }
.pdp-ring[data-kc-state="playing"] .pdp-ring-face { animation: pdp-ring-beat 2.6s ease-in-out infinite; }
@keyframes pdp-ring-beat { 0%, 100% { scale: 1; } 12% { scale: 1.035; } 24% { scale: 1; } 36% { scale: 1.02; } }

/* Chispa del estilete: la misma luz de la pluma del Gate, que corre un tramo del filo y se apaga */
.pdp-ring-spark {
  width: 9px; height: 9px; inset: auto; border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0 22%, rgba(228, 231, 236, .6) 45%, rgba(228, 231, 236, 0) 70%);
  offset-path: path("M29 2.4a26.6 26.6 0 1 1 0 53.2a26.6 26.6 0 1 1 0-53.2");
  offset-rotate: 0deg;
  opacity: 0;
}
.pdp-ring[data-kc-state="playing"] .pdp-ring-spark { animation: pdp-ring-stylus 6.4s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes pdp-ring-stylus {
  0% { offset-distance: 8%; opacity: 0; }
  6% { opacity: 1; }
  38% { opacity: 1; }
  48% { offset-distance: 58%; opacity: 0; }
  100% { offset-distance: 58%; opacity: 0; }
}

/* Pausa: el grabado se queda quieto y se vuelve grafito */
.pdp-ring.paused .pdp-ring-layer { animation-play-state: paused; opacity: .55; }
.pdp-ring.paused .pdp-ring-hi use, .pdp-ring.paused .pdp-ring-edge { stroke: #8A8E94; }
.pdp-ring.paused .pdp-ring-heart { opacity: .72; }

/* Etiqueta colgante: aviso único, misma gramática de pergamino de la carta */
.pdp-ring-tag {
  position: fixed;
  z-index: var(--kc-z-audio);
  right: calc(max(14px, env(safe-area-inset-right)) + 70px);
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 8px);
  max-width: min(15.5rem, calc(100vw - 112px));
  margin: 0; padding: .55rem .85rem .6rem 1.35rem;
  display: grid; gap: .1rem;
  color: #2B2D30;
  background: #F4F1EA url("../../assets/textures/pergamino.webp") center / 256px;
  border: 1px solid rgba(92, 96, 102, .42);
  border-radius: 3px 10px 10px 3px;
  box-shadow: 0 6px 18px -8px rgba(43, 45, 48, .45);
  font-family: var(--f-text, "Cormorant Garamond", serif);
  opacity: 0; translate: 10px 0;
  transition: opacity .45s ease, translate .55s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.pdp-ring-tag[hidden] { display: none; }
.pdp-ring-tag.is-on { opacity: 1; translate: 0 0; }
/* ojal + hilo de tinta hacia el filo del sello */
.pdp-ring-tag::before {
  content: ""; position: absolute; left: .5rem; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: #E4E2DC; box-shadow: inset 0 0 0 1px rgba(62, 65, 70, .6);
}
.pdp-ring-tag::after {
  content: ""; position: absolute; left: 100%; top: 50%;
  width: 14px; height: 1px; background: rgba(62, 65, 70, .55);
}
.pdp-ring-tag-title { font-size: .95rem; font-style: italic; line-height: 1.2; }
.pdp-ring-tag-hint { font-family: var(--f-inscription, "Cinzel", serif); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #5C6066; }

@media (prefers-reduced-motion: reduce) {
  .pdp-ring-layer, .pdp-ring-face, .pdp-ring-spark { animation: none !important; }
  #kc-audio-toggle.pdp-ring, .pdp-ring-tag { transition: none; }
}