/* The live card retains its 3D scene. Opacity is used only on decorative leaves;
   no filter, opacity, clipping, or blending is applied to a card ancestor. */
.pack-grid > .flip-slot {
  position: relative;
}

.flip-slot.is-card-revealing {
  --reveal-rgb: 207, 218, 198;
  position: relative;
  z-index: 6;
  transform-style: preserve-3d;
  will-change: transform;
  animation: card-reveal-small var(--reveal-duration, 320ms) cubic-bezier(.2, .7, .25, 1) both;
}

/* Override exactly the existing flip duration without replacing its transform. */
.flip-slot.is-card-revealing > .flip-inner {
  transition: transform var(--reveal-flip-duration, 280ms) cubic-bezier(.22, .68, .22, 1);
}

.flip-slot.is-card-revealing.reveal-r { --reveal-rgb: 95, 155, 223; }
.flip-slot.is-card-revealing.reveal-sr {
  --reveal-rgb: 170, 125, 221;
  animation-name: card-reveal-sr;
}
.flip-slot.is-card-revealing.reveal-ssr {
  --reveal-rgb: 225, 179, 83;
}
.flip-slot.is-card-revealing.reveal-ssr.reveal-new {
  animation-name: card-reveal-ssr;
}
.flip-slot.is-card-revealing.reveal-ssr.reveal-repeat {
  animation-name: card-reveal-repeat;
}

/* Quiet sibling cards with a separate, noninteractive leaf. The scroller and
   every card's perspective, opacity, and focus behavior remain untouched. */
.pack-grid > .flip-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 14px;
  pointer-events: none;
  background: #eff2e863;
  opacity: 0;
  transition: opacity 160ms ease;
}
.pack-grid.has-card-reveal-focus > .flip-slot:not(.is-card-revealing)::after {
  opacity: 1;
}

.card-reveal-effects {
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: 14px;
  pointer-events: none;
  user-select: none;
}
.card-reveal-rim {
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(var(--reveal-rgb), .8);
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(var(--reveal-rgb), .12), 0 0 16px 2px rgba(var(--reveal-rgb), .16);
  opacity: 0;
  animation: card-reveal-rim var(--reveal-duration, 320ms) ease both;
}
.reveal-ssr.reveal-new .card-reveal-rim {
  border-color: #f5d589;
  box-shadow: 0 0 0 1px #c4933d1a, 0 0 16px 3px #edcb8438, 0 7px 30px 8px #ca9a4217;
  animation-name: card-reveal-gold-rim;
}
.reveal-n .card-reveal-rim { border-color: #e9efdf; }

.card-reveal-mote {
  position: absolute;
  left: var(--mote-x);
  top: var(--mote-y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffe9ac;
  box-shadow: 0 0 7px #edc777aa;
  opacity: 0;
}
.card-reveal-mote:nth-child(3n) {
  width: 2px;
  height: 2px;
}
.is-reveal-face-visible .card-reveal-mote {
  animation: card-reveal-mote 460ms cubic-bezier(.2, .65, .3, 1) var(--mote-delay) both;
}

.flip-slot.is-reveal-instant,
.flip-slot.is-reveal-instant > .flip-inner {
  animation: none !important;
  transition: none !important;
}

@keyframes card-reveal-small {
  0%, 100% { transform: translateY(0) scale(1); }
  48% { transform: translateY(-2px) scale(1.008); }
}
@keyframes card-reveal-sr {
  0%, 100% { transform: translateY(0) scale(1); }
  35%, 65% { transform: translateY(-6px) scale(1.022); }
}
@keyframes card-reveal-repeat {
  0%, 100% { transform: translateY(0) scale(1); }
  40%, 64% { transform: translateY(-4px) scale(1.014); }
}
@keyframes card-reveal-ssr {
  0%, 100% { transform: translateY(0) scale(1); }
  12% { transform: translateY(-4px) scale(1.012); }
  32%, 74% { transform: translateY(-11px) scale(1.04); }
  86% { transform: translateY(-8px) scale(1.028); }
}
@keyframes card-reveal-rim {
  0%, 100% { opacity: 0; }
  25%, 55% { opacity: .7; }
}
@keyframes card-reveal-gold-rim {
  0%, 100% { opacity: 0; }
  12% { opacity: .95; }
  36% { opacity: .7; }
  70% { opacity: .48; }
  86% { opacity: .12; }
}
@keyframes card-reveal-mote {
  0% { opacity: 0; transform: translate(0, 4px) scale(.6); }
  20% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--mote-dx), var(--mote-dy)) scale(.35); }
}

@media (prefers-reduced-motion: reduce) {
  .flip-slot > .flip-inner,
  .flip-slot.is-card-revealing,
  .pack-grid > .flip-slot::after {
    animation: none !important;
    transition: none !important;
  }
  .card-reveal-effects { display: none; }
}