/* Efecto del RITUAL de recuperación — motor visual ÚNICO (lector + admin).
 * Las partículas se generan con ritual-fx.js (window.RITUAL_FX); aquí viven
 * las formas y keyframes. Si esto se duplica en algún bundle, el preview de
 * la Vitrina dejará de coincidir con la recompensa real: NO copiar. */

/* formas del efecto: diamond (default), spark, ember */
.frag-p.fx-spark{width:3px;height:14px;border-radius:2px !important}
.frag-p.fx-ember{width:7px;height:7px;border-radius:50% !important;
  filter:blur(.4px);box-shadow:0 0 8px currentColor}
.frag-p{position:absolute;left:50%;bottom:55%;width:9px;height:9px;background:var(--accent,#C9A96E);
  transform:rotate(45deg);opacity:0;box-shadow:0 0 8px rgba(201,169,110,.35);pointer-events:none;
  animation:fragrise 1.2s ease-out var(--d,0s) both}
@keyframes fragrise{0%{opacity:0;transform:translate(0,0) rotate(45deg) scale(.6)}
  15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-74px) rotate(45deg) scale(1)}}
.frag-float{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:6px;
  font-family:var(--mono,monospace);font-size:13px;color:var(--accent,#C9A96E);white-space:nowrap;pointer-events:none;
  animation:fragtext 1.2s ease-out both}
@keyframes fragtext{0%{opacity:0;transform:translate(-50%,10px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px)}}

/* PREVIEW EN LOOP (tarjeta de la Vitrina / editor del admin): mismas
 * partículas y keyframes, en bucle suave y contenidas en su caja. */
.fx-preview{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fx-preview .frag-p{bottom:24%;animation:fragrise 1.9s ease-out var(--d,0s) infinite}
.fx-preview.paused .frag-p{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  /* frame estático representativo: la paleta se VE, nada se mueve */
  .fx-preview .frag-p{animation:none;opacity:.75;
    transform:translate(var(--dx,0),-30px) rotate(45deg)}
}