/* ===== Shuffle FX — Standard (Classic 3‑Card style) =====
   Includes: button glow, sparkles, riffle/tilt animation.
   Apply via shuffleFX.attach(...) in shuffleFX.js
*/

/* Button glow */
.ns-shuffle-btn{
  position:relative;
  isolation:isolate;
  border-radius: 9999px !important;
}
.ns-shuffle-btn.ns-glow{
  box-shadow:0 0 28px 8px rgba(243,231,195,.45);
  animation: ns-glow 650ms ease-out;
}
@keyframes ns-glow{
  from{ box-shadow:0 0 0 0 rgba(243,231,195,.8) }
  to  { box-shadow:0 0 28px 0 rgba(243,231,195,0) }
}

/* Sparkles */
.ns-sparkle{
  position: fixed;
  width: 18px;
  height:18px;
  pointer-events:none;
  background: radial-gradient(circle at 50% 50%, #fff 0 40%, transparent 41%);
  filter: drop-shadow(0 0 8px rgba(255,255,220,.55));
  opacity:0;
  animation: ns-spark 1100ms ease-out forwards;
  z-index: 9999;
}
.ns-sparkle::after{
  content:"";
  position:absolute;
  inset:0;
  background: conic-gradient(from 45deg, rgba(255,255,220,.85), transparent 25%, rgba(255,255,220,.6) 50%, transparent 75%, rgba(255,255,220,.85));
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%);
  mask: radial-gradient(circle, transparent 42%, #000 43%);
  border-radius:50%;
}
@keyframes ns-spark{
  0%   { opacity:0; transform: translate(0,0) scale(.8) rotate(0) }
  10%  { opacity:1 }
  100% { opacity:0; transform: translate(var(--dx,0), var(--dy,-100px)) scale(1.15) rotate(120deg) }
}

/* Riffle / tilt animation applied per slot (animation delays set in JS) */
.ns-riffle{
  transform-origin:50% 110%;
  animation: ns-riffle 600ms ease-in-out both;
}
@keyframes ns-riffle{
  0%   { transform: translateY(0) rotate(0) }
  25%  { transform: translateY(-16px) rotate(-4deg) }
  50%  { transform: translateY(0) rotate(0) }
  75%  { transform: translateY(-12px) rotate(3deg) }
  100% { transform: translateY(0) rotate(0) }
}


/* === Normalize the "Get My Reading" button (pill only, no square) === */
.ns-btn{
  all: unset;             /* remove native button box/border/background */
  display: inline-block;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Accessible focus ring on the pill shape (not the button box) */
.ns-btn:focus-visible .ns-pill{
  outline: 3px solid rgba(120,150,255,.9);
  outline-offset: 4px;
  border-radius: 9999px;
}

/* Ensure wrappers don't add a square */
#ns-reading-controls,
.floating-read{
  background: none;
  border: 0;
  box-shadow: none;
}