/*!
 * SDS Motion Forge — cards.css
 * Card animations (Section 4).
 * Part of the lossless v5 category split — combined entry: src/motion.css
 */

/* ============================================================
   SECTION 4 — CARD ANIMATIONS
   Namespace: .sds-card-*
   ============================================================ */

/* 57 · Cinematic Reveal ------------------------------------ */

.sds-card-cinematic {
  animation: sds-cinematicReveal var(--sds-duration) var(--sds-easing) both;
}

@keyframes sds-cinematicReveal {
  0% {
    clip-path: inset(50% 0 50% 0);
    opacity: 0;
  }
  50% {
    clip-path: inset(0% 0 0% 0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0% 0 0% 0);
    opacity: 1;
  }
}

/* 58 · Holographic Tilt ------------------------------------ */

.sds-card-holo {
  animation: sds-holographicTilt 4s ease infinite;
}

@keyframes sds-holographicTilt {
  0%,
  100% {
    transform: perspective(600px) rotateX(0) rotateY(0);
    filter: hue-rotate(0deg);
  }
  25% {
    transform: perspective(600px) rotateX(4deg) rotateY(-5deg);
    filter: hue-rotate(20deg);
  }
  75% {
    transform: perspective(600px) rotateX(-3deg) rotateY(5deg);
    filter: hue-rotate(-20deg);
  }
}

/* 59 · Depth Portal ---------------------------------------- */

.sds-card-portal {
  animation: sds-depthPortal var(--sds-duration) var(--sds-easing) both;
}

@keyframes sds-depthPortal {
  0% {
    opacity: 0;
    transform: perspective(500px) translateZ(-200px) scale(0.6);
    filter: blur(12px);
  }
  60% {
    opacity: 1;
    transform: perspective(500px) translateZ(8px) scale(1.02);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: perspective(500px) translateZ(0) scale(1);
  }
}

/* 60 · Refraction Shimmer ---------------------------------- */

.sds-card-shimmer {
  background: linear-gradient(
    135deg,
    rgba(0, 21, 209, 0.06) 0%,
    rgba(0, 21, 209, 0.02) 50%,
    rgba(0, 21, 209, 0.06) 100%
  );
  background-size: 300% 300%;
  animation: sds-refractionShimmer 4s ease infinite;
}

@keyframes sds-refractionShimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* 61 · Magnetic Hover -------------------------------------- */

.sds-card-magnetic {
  animation: sds-magneticHover var(--sds-duration-dramatic, 3s) ease infinite;
}

@keyframes sds-magneticHover {
  0%,
  100% {
    transform: translateY(0) rotate(0);
    box-shadow: 0 4px 20px rgba(0, 21, 209, 0.08);
  }
  50% {
    transform: translateY(-8px) rotate(0.5deg);
    box-shadow:
      0 20px 40px rgba(0, 21, 209, 0.14),
      0 4px 8px rgba(0, 21, 209, 0.08);
  }
}

/* 62 · Warp Gate ------------------------------------------- */

.sds-card-warp {
  animation: sds-warpGate var(--sds-duration) var(--sds-easing) both;
}

@keyframes sds-warpGate {
  0% {
    opacity: 0;
    transform: perspective(400px) rotateY(-90deg) translateX(-40px);
  }
  60% {
    opacity: 1;
    transform: perspective(400px) rotateY(6deg) translateX(3px);
  }
  100% {
    opacity: 1;
    transform: perspective(400px) rotateY(0) translateX(0);
  }
}

/* 63 · Ambient Float --------------------------------------- */

.sds-card-float {
  animation: sds-ambientFloat var(--sds-duration-dramatic, 3s) ease infinite;
}

@keyframes sds-ambientFloat {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 8px 24px rgba(0, 21, 209, 0.07),
      0 2px 6px rgba(0, 0, 0, 0.05);
  }
  50% {
    transform: translateY(-7px);
    box-shadow:
      0 20px 48px rgba(0, 21, 209, 0.12),
      0 8px 16px rgba(0, 21, 209, 0.06);
  }
}

/* 64 · Slice Up (children) --------------------------------- */

.sds-card-slice {
  overflow: hidden;
}

.sds-card-slice > * {
  animation: sds-sliceUp 0.6s var(--sds-easing) both;
  transform: translateY(100%);
}

.sds-card-slice > *:nth-child(1) {
  animation-delay: 0s;
}

.sds-card-slice > *:nth-child(2) {
  animation-delay: 0.08s;
}

.sds-card-slice > *:nth-child(3) {
  animation-delay: 0.16s;
}

.sds-card-slice > *:nth-child(4) {
  animation-delay: 0.24s;
}

@keyframes sds-sliceUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 65 · Glow Surge ------------------------------------------ */

.sds-card-glow {
  animation: sds-glowSurge 2.5s ease infinite;
}

/* 66 · Parallax Depth -------------------------------------- */

.sds-card-parallax {
  animation: sds-parallaxDepth 4s ease infinite;
}

@keyframes sds-parallaxDepth {
  0%,
  100% {
    transform: perspective(400px) rotateX(0) translateZ(0);
  }
  50% {
    transform: perspective(400px) rotateX(3deg) translateZ(12px);
  }
}

/* 67 · Tilt --------------------------------------------- */

.sds-card-tilt {
  animation: sds-cardTilt 4s ease-in-out infinite;
}

@keyframes sds-cardTilt {
  0%,
  100% {
    transform: perspective(600px) rotateX(0) rotateY(0);
  }
  25% {
    transform: perspective(600px) rotateX(-4deg) rotateY(6deg);
  }
  75% {
    transform: perspective(600px) rotateX(4deg) rotateY(-6deg);
  }
}

/* 68 · Expand ------------------------------------------- */

.sds-card-expand {
  animation: sds-cardExpand 0.9s var(--sds-easing) both;
}

@keyframes sds-cardExpand {
  0% {
    opacity: 0;
    transform: scale(0.72) translateY(20px);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    transform: scale(1.04) translateY(-4px);
    filter: blur(0);
  }
  80% {
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 69 · Flip Reveal --------------------------------------- */

.sds-card-flip-reveal {
  animation: sds-cardFlipReveal var(--sds-duration-base, 0.8s) var(--sds-easing) both;
}

@keyframes sds-cardFlipReveal {
  0% {
    opacity: 0;
    transform: perspective(600px) rotateY(-80deg);
  }
  60% {
    opacity: 1;
    transform: perspective(600px) rotateY(6deg);
  }
  100% {
    opacity: 1;
    transform: perspective(600px) rotateY(0);
  }
}

/* 70 · Spotlight ---------------------------------------- */

.sds-card-spotlight {
  animation: sds-cardSpotlight 4s ease infinite;
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  background-size: 200% 200%;
}

@keyframes sds-cardSpotlight {
  0%,
  100% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
}

/* 71 · Glitch ------------------------------------------- */

.sds-card-glitch {
  animation: sds-cardGlitch 4s steps(1) infinite;
}

@keyframes sds-cardGlitch {
  0%,
  100% {
    transform: none;
    filter: none;
  }
  8% {
    transform: translate(3px, -1px) skewX(2deg);
    filter: hue-rotate(30deg);
  }
  9% {
    transform: none;
    filter: none;
  }
  45% {
    transform: translate(-2px, 1px);
    filter: brightness(1.2);
  }
  46% {
    transform: none;
    filter: none;
  }
}

/* 72 · Morph ------------------------------------------- */

.sds-card-morph {
  animation: sds-cardMorph var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}

@keyframes sds-cardMorph {
  0%,
  100% {
    border-radius: 12px;
  }
  33% {
    border-radius: 24px 8px 24px 8px;
  }
  66% {
    border-radius: 8px 24px 8px 24px;
  }
}

/* 73 · Rise --------------------------------------------- */

.sds-card-rise {
  animation: sds-cardRise var(--sds-duration-base, 0.8s) var(--sds-easing) both;
}

@keyframes sds-cardRise {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 74 · Drift ------------------------------------------- */

.sds-card-drift {
  animation: sds-cardDrift 5s ease-in-out infinite;
}

@keyframes sds-cardDrift {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(4px, -6px) rotate(0.4deg);
  }
  50% {
    transform: translate(-2px, -10px) rotate(-0.2deg);
  }
  75% {
    transform: translate(-4px, -4px) rotate(0.3deg);
  }
}

/* 75 · Glass ------------------------------------------- */

.sds-card-glass {
  animation: sds-cardGlass 0.7s ease both;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.1);
}

@keyframes sds-cardGlass {
  from {
    opacity: 0;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transform: scale(1);
  }
}

/* 76 · Breath ------------------------------------------ */

.sds-card-breath {
  animation: sds-cardBreath var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}

@keyframes sds-cardBreath {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(0, 21, 209, 0.06);
  }
  50% {
    transform: scale(1.025);
    box-shadow: 0 12px 40px rgba(0, 21, 209, 0.12);
  }
}

/* 77 · Aurora ------------------------------------------ */

.sds-card-aurora {
  animation: sds-cardAurora 5s ease-in-out infinite;
}

@keyframes sds-cardAurora {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(0, 21, 209, 0.1),
      0 0 60px rgba(0, 21, 209, 0.04);
  }
  25% {
    box-shadow:
      0 0 20px rgba(139, 92, 246, 0.15),
      0 0 60px rgba(139, 92, 246, 0.05);
  }
  50% {
    box-shadow:
      0 0 20px rgba(6, 182, 212, 0.12),
      0 0 60px rgba(6, 182, 212, 0.04);
  }
  75% {
    box-shadow:
      0 0 20px rgba(16, 185, 129, 0.12),
      0 0 60px rgba(16, 185, 129, 0.04);
  }
}

/* 78 · Scan -------------------------------------------- */

.sds-card-scan {
  overflow: hidden;
  animation: sds-cardScan 0.9s var(--sds-easing) both;
}

@keyframes sds-cardScan {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

/* 79 · Rotate ------------------------------------------ */

.sds-card-rotate {
  animation: sds-cardRotate var(--sds-duration-base, 0.8s) var(--sds-easing) both;
}

@keyframes sds-cardRotate {
  0% {
    opacity: 0;
    transform: perspective(600px) rotateX(40deg) translateY(30px);
    filter: blur(4px);
  }
  65% {
    opacity: 1;
    transform: perspective(600px) rotateX(-3deg) translateY(-4px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: perspective(600px) rotateX(0) translateY(0);
  }
}

/* 80 · Unfold ------------------------------------------ */

.sds-card-unfold {
  transform-origin: top center;
  animation: sds-cardUnfold var(--sds-duration-base, 0.8s) var(--sds-easing) both;
}

@keyframes sds-cardUnfold {
  0% {
    opacity: 0;
    transform: scaleY(0) perspective(400px) rotateX(-20deg);
  }
  60% {
    opacity: 1;
    transform: scaleY(1.04) perspective(400px) rotateX(2deg);
  }
  100% {
    opacity: 1;
    transform: scaleY(1) perspective(400px) rotateX(0);
  }
}

/* 81 · Ink --------------------------------------------- */

.sds-card-ink {
  animation: sds-cardInk 1s var(--sds-easing) both;
}

@keyframes sds-cardInk {
  from {
    clip-path: circle(0% at 0% 0%);
    opacity: 0;
  }
  to {
    clip-path: circle(150% at 0% 0%);
    opacity: 1;
  }
}

/* 82 · Electric ---------------------------------------- */

.sds-card-electric {
  animation: sds-cardElectric 2.4s ease infinite;
}

@keyframes sds-cardElectric {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(0, 21, 209, 0.15);
  }
  10% {
    box-shadow:
      0 0 0 1px var(--sds-primary),
      0 0 20px var(--sds-primary-glow);
  }
  12% {
    box-shadow: 0 0 0 1px rgba(0, 21, 209, 0.15);
  }
  30% {
    box-shadow:
      0 0 0 1px rgba(0, 21, 209, 0.4),
      0 0 10px rgba(0, 21, 209, 0.12);
  }
  32% {
    box-shadow: 0 0 0 1px rgba(0, 21, 209, 0.15);
  }
}

/* 83 · Prism ------------------------------------------- */

.sds-card-prism {
  animation: sds-cardPrism 5s linear infinite;
}

@keyframes sds-cardPrism {
  0% {
    filter: hue-rotate(0deg) brightness(1);
  }
  25% {
    filter: hue-rotate(60deg) brightness(1.05);
  }
  50% {
    filter: hue-rotate(120deg) brightness(1);
  }
  75% {
    filter: hue-rotate(200deg) brightness(1.05);
  }
  100% {
    filter: hue-rotate(360deg) brightness(1);
  }
}

/* 84 · Levitate ---------------------------------------- */

.sds-card-levitate {
  animation: sds-cardLevitate 3.5s ease-in-out infinite;
}

@keyframes sds-cardLevitate {
  0%,
  100% {
    transform: translateY(0) perspective(500px) rotateX(0);
    box-shadow: 0 6px 20px rgba(0, 21, 209, 0.08);
  }
  50% {
    transform: translateY(-12px) perspective(500px) rotateX(2deg);
    box-shadow: 0 24px 56px rgba(0, 21, 209, 0.16);
  }
}

/* 85 · Vortex ------------------------------------------ */

.sds-card-vortex {
  animation: sds-cardVortex 0.7s var(--sds-easing) both;
}

@keyframes sds-cardVortex {
  0% {
    opacity: 0;
    transform: perspective(400px) translateZ(-300px) rotate(-15deg) scale(0.5);
    filter: blur(20px);
  }
  60% {
    opacity: 1;
    transform: perspective(400px) translateZ(8px) rotate(2deg) scale(1.02);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: perspective(400px) translateZ(0) rotate(0) scale(1);
  }
}

/* 86 · Iris -------------------------------------------- */

.sds-card-iris {
  animation: sds-cardIris var(--sds-duration-base, 0.8s) var(--sds-easing) both;
}

@keyframes sds-cardIris {
  from {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
  to {
    clip-path: circle(150% at 50% 50%);
    opacity: 1;
  }
}

/* 87 · Spring ------------------------------------------ */

.sds-card-spring {
  animation: sds-cardSpring 0.9s var(--sds-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

@keyframes sds-cardSpring {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(-3deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.06) rotate(1deg);
  }
  80% {
    transform: scale(0.97) rotate(-0.5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* 88 · Shadow Lift -------------------------------------- */

.sds-card-shadow-lift {
  animation: sds-cardShadowLift 2.8s ease-in-out infinite;
}

@keyframes sds-cardShadowLift {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.06),
      0 1px 2px rgba(0, 0, 0, 0.04);
  }
  50% {
    transform: translateY(-10px);
    box-shadow:
      0 28px 60px rgba(0, 0, 0, 0.12),
      0 10px 20px rgba(0, 0, 0, 0.07);
  }
}

/* 89 · Neon Border -------------------------------------- */

.sds-card-neon-border {
  animation: sds-cardNeonBorder var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}

@keyframes sds-cardNeonBorder {
  0%,
  85%,
  100% {
    box-shadow:
      0 0 6px var(--sds-primary-glow),
      inset 0 0 6px var(--sds-primary-dim);
  }
  87% {
    box-shadow: none;
  }
  89% {
    box-shadow: 0 0 10px var(--sds-primary-glow);
  }
  91% {
    box-shadow: none;
  }
}

/* 90 · Wave -------------------------------------------- */

.sds-card-wave {
  animation: sds-cardWave 0.9s var(--sds-easing) both;
}

@keyframes sds-cardWave {
  0% {
    opacity: 0;
    transform: perspective(500px) translateZ(-100px) rotateX(25deg) scaleX(0.85);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    transform: perspective(500px) translateZ(4px) rotateX(-2deg) scaleX(1.02);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: perspective(500px) translateZ(0) rotateX(0) scaleX(1);
  }
}

/* 91 · Snap -------------------------------------------- */

.sds-card-snap {
  animation: sds-cardSnap 0.5s var(--sds-ease-bounce, cubic-bezier(0.68, -0.55, 0.27, 1.55)) both;
}

@keyframes sds-cardSnap {
  0% {
    opacity: 0;
    transform: scale(1.3) rotate(4deg);
  }
  60% {
    opacity: 1;
    transform: scale(0.95) rotate(-1deg);
  }
  80% {
    transform: scale(1.03) rotate(0.5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* 92 · Gravity ----------------------------------------- */

.sds-card-gravity {
  animation: sds-cardGravity var(--sds-duration-base, 0.8s) var(--sds-ease-bounce, cubic-bezier(0.68, -0.55, 0.27, 1.55)) both;
}

@keyframes sds-cardGravity {
  0% {
    opacity: 0;
    transform: translateY(-80px) scaleY(0.6);
  }
  65% {
    opacity: 1;
    transform: translateY(8px) scaleY(1.04);
  }
  80% {
    transform: translateY(-3px) scaleY(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* 93 · Bloom ------------------------------------------- */

.sds-card-bloom {
  animation: sds-cardBloom var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}

@keyframes sds-cardBloom {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(0, 21, 209, 0);
    filter: brightness(1);
  }
  50% {
    box-shadow:
      0 0 40px rgba(0, 21, 209, 0.14),
      0 0 80px rgba(0, 21, 209, 0.06);
    filter: brightness(1.04);
  }
}

/* 94 · Fold -------------------------------------------- */

.sds-card-fold {
  transform-origin: bottom center;
  animation: sds-cardFold var(--sds-duration-base, 0.8s) var(--sds-easing) both;
}

@keyframes sds-cardFold {
  0% {
    opacity: 0;
    transform: perspective(500px) rotateX(-60deg) scaleY(0.7);
  }
  60% {
    opacity: 1;
    transform: perspective(500px) rotateX(4deg) scaleY(1.02);
  }
  100% {
    opacity: 1;
    transform: perspective(500px) rotateX(0) scaleY(1);
  }
}

/* 95 · Burst ------------------------------------------- */

.sds-card-burst {
  animation: sds-cardBurst 0.7s var(--sds-easing) both;
}

@keyframes sds-cardBurst {
  0% {
    opacity: 0;
    transform: scale(0.3);
    filter: blur(24px) brightness(3);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
    filter: blur(2px) brightness(1.2);
  }
  70% {
    transform: scale(0.97);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
  }
}

/* 96 · Liquid Border ----------------------------------- */

.sds-card-liquid-border {
  animation: sds-cardLiquidBorder 4s ease-in-out infinite;
}

@keyframes sds-cardLiquidBorder {
  0%,
  100% {
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(0, 21, 209, 0.2);
  }
  25% {
    border-radius: 20px 8px 20px 8px;
    box-shadow: 0 0 0 1px rgba(0, 21, 209, 0.4);
  }
  50% {
    border-radius: 8px 20px 8px 20px;
    box-shadow: 0 0 0 1px rgba(0, 21, 209, 0.3);
  }
  75% {
    border-radius: 16px 4px 16px 4px;
    box-shadow: 0 0 0 1px rgba(0, 21, 209, 0.35);
  }
}

/* 97 · Stagger (up to 6 children) --------------------- */

.sds-card-stagger {
  overflow: hidden;
}

.sds-card-stagger > * {
  animation: sds-cardStaggerChild 0.5s var(--sds-easing) both;
}

.sds-card-stagger > *:nth-child(1) {
  animation-delay: 0s;
}

.sds-card-stagger > *:nth-child(2) {
  animation-delay: 0.08s;
}

.sds-card-stagger > *:nth-child(3) {
  animation-delay: 0.16s;
}

.sds-card-stagger > *:nth-child(4) {
  animation-delay: 0.24s;
}

.sds-card-stagger > *:nth-child(5) {
  animation-delay: 0.32s;
}

.sds-card-stagger > *:nth-child(6) {
  animation-delay: 0.4s;
}

@keyframes sds-cardStaggerChild {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 98 · Deep Float -------------------------------------- */

.sds-card-deep-float {
  animation: sds-cardDeepFloat 4s ease-in-out infinite;
}

@keyframes sds-cardDeepFloat {
  0%,
  100% {
    transform: perspective(600px) translateZ(0) translateY(0);
    box-shadow: 0 4px 24px rgba(0, 21, 209, 0.06);
  }
  50% {
    transform: perspective(600px) translateZ(20px) translateY(-8px);
    box-shadow: 0 24px 60px rgba(0, 21, 209, 0.14);
  }
}

/* 99 · Force ------------------------------------------- */

.sds-card-force {
  animation: sds-cardForce 2s ease-in-out infinite;
}

@keyframes sds-cardForce {
  0%,
  100% {
    transform: scaleX(1) scaleY(1);
    box-shadow: 0 4px 16px rgba(0, 21, 209, 0.08);
  }
  25% {
    transform: scaleX(1.03) scaleY(0.97);
  }
  50% {
    transform: scaleX(0.97) scaleY(1.03);
    box-shadow: 0 12px 32px rgba(0, 21, 209, 0.14);
  }
  75% {
    transform: scaleX(1.01) scaleY(0.99);
  }
}

/* 100 · Cascade (up to 6 children) -------------------- */

.sds-card-cascade > * {
  animation: sds-cardCascadeChild 0.6s var(--sds-easing) both;
}

.sds-card-cascade > *:nth-child(1) {
  animation-delay: 0s;
}

.sds-card-cascade > *:nth-child(2) {
  animation-delay: 0.1s;
}

.sds-card-cascade > *:nth-child(3) {
  animation-delay: 0.2s;
}

.sds-card-cascade > *:nth-child(4) {
  animation-delay: 0.3s;
}

.sds-card-cascade > *:nth-child(5) {
  animation-delay: 0.4s;
}

.sds-card-cascade > *:nth-child(6) {
  animation-delay: 0.5s;
}

@keyframes sds-cardCascadeChild {
  from {
    opacity: 0;
    transform: translateX(-40px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

/* 101 · Smoke ------------------------------------------ */

.sds-card-smoke {
  animation: sds-cardSmoke 1.1s ease both;
}

@keyframes sds-cardSmoke {
  0% {
    opacity: 0;
    filter: blur(28px) brightness(2);
    transform: scale(1.2);
  }
  40% {
    opacity: 1;
    filter: blur(4px) brightness(1.2);
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scale(1);
  }
}

/* 102 · Momentum --------------------------------------- */

.sds-card-momentum {
  animation: sds-cardMomentum 0.85s var(--sds-easing) both;
}

@keyframes sds-cardMomentum {
  0% {
    opacity: 0;
    transform: translateX(-80px) skewX(-6deg);
    filter: blur(10px);
  }
  40% {
    filter: blur(0);
    opacity: 1;
    transform: translateX(8px) skewX(1deg);
  }
  65% {
    transform: translateX(-3px) skewX(-0.5deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0);
  }
}

.sds-card-neon {
  animation: sds-glowSurge 2.5s ease infinite;
}

.sds-card-depth {
  animation: sds-parallaxDepth 4s ease infinite;
}

.sds-card-flip {
  animation: sds-sliceUp 0.6s var(--sds-easing) both;
}

/*  GPU compositing hints (cards) — split from the global will-change rule; must stay after the class definitions above  */

.sds-card-float,
.sds-card-holo,
.sds-card-magnetic,
.sds-card-tilt,
.sds-card-drift,
.sds-card-levitate,
.sds-card-deep-float {
  will-change: transform, opacity;
}


/* ====================================================================
   BATCH 8 � Cards: 3D Depth & Parallax (7) + Clip Reveals (7)
   ==================================================================== */

/* -- 3D Depth & Parallax ------------------------------------------- */

/* 103 � Tilt Orbit ------------------------------------------ */
@keyframes sds-tiltOrbit {
  0%,100% { transform: perspective(600px) rotateX(7deg) rotateY(-10deg); filter: drop-shadow(4px 8px 10px rgba(0,0,0,.22)); }
  25%     { transform: perspective(600px) rotateX(-5deg) rotateY(10deg);  filter: drop-shadow(-3px 6px 14px rgba(0,0,0,.18)); }
  50%     { transform: perspective(600px) rotateX(-7deg) rotateY(-8deg);  filter: drop-shadow(-4px -8px 10px rgba(0,0,0,.22)); }
  75%     { transform: perspective(600px) rotateX(5deg) rotateY(8deg);    filter: drop-shadow(3px 6px 14px rgba(0,0,0,.18)); }
}
.sds-card-tilt-orbit {
  animation: sds-tiltOrbit 6s cubic-bezier(.45,.05,.55,.95) infinite;
  transform-style: preserve-3d;
}

/* 104 � Layers (up to 3 children, parallax-bob) --------------- */
@keyframes sds-layerBobA {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}
@keyframes sds-layerBobB {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-9px); }
}
@keyframes sds-layerBobC {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-13px); }
}
.sds-card-layers > *:nth-child(1) { animation: sds-layerBobA 3s ease-in-out infinite; }
.sds-card-layers > *:nth-child(2) { animation: sds-layerBobB 3s ease-in-out infinite .2s; }
.sds-card-layers > *:nth-child(3) { animation: sds-layerBobC 3s ease-in-out infinite .4s; }

/* 105 � Door Peek ------------------------------------------- */
@keyframes sds-doorPeek {
  0%,100% { transform: perspective(600px) rotateY(0deg); }
  15%     { transform: perspective(600px) rotateY(-18deg); }
  70%     { transform: perspective(600px) rotateY(-18deg); }
  88%     { transform: perspective(600px) rotateY(0deg); }
}
.sds-card-door-peek {
  animation: sds-doorPeek 3.2s cubic-bezier(.25,.46,.45,.94) infinite;
  transform-origin: left center;
}

/* 106 � Flip Loop ------------------------------------------- */
@keyframes sds-flipLoop {
  0%   { transform: perspective(800px) rotateY(0deg);   filter: brightness(1); }
  22%  { transform: perspective(800px) rotateY(90deg);  filter: brightness(.35); }
  45%  { transform: perspective(800px) rotateY(180deg); filter: brightness(1); }
  68%  { transform: perspective(800px) rotateY(270deg); filter: brightness(.35); }
  82%  { transform: perspective(800px) rotateY(375deg); filter: brightness(1); }
  90%  { transform: perspective(800px) rotateY(352deg); filter: brightness(1); }
  100% { transform: perspective(800px) rotateY(360deg); filter: brightness(1); }
}
.sds-card-flip-loop {
  animation: sds-flipLoop 2.8s cubic-bezier(.34,1.2,.64,1) infinite;
}

/* 107 � Carousel Step --------------------------------------- */
@keyframes sds-carouselStep {
  0%,12%   { transform: perspective(800px) rotateY(0deg); }
  18%,32%  { transform: perspective(800px) rotateY(-30deg); }
  38%,52%  { transform: perspective(800px) rotateY(-60deg); }
  58%,72%  { transform: perspective(800px) rotateY(-90deg); }
  78%,88%  { transform: perspective(800px) rotateY(-45deg); }
  94%,100% { transform: perspective(800px) rotateY(0deg); }
}
.sds-card-carousel-step {
  animation: sds-carouselStep 5s ease-in-out infinite;
}

/* 108 � Dive ----------------------------------------------- */
@keyframes sds-cardDive {
  0%   { transform: perspective(800px) rotateX(65deg) translateY(-36px) scale(.86); filter: blur(4px); opacity: 0; }
  50%  { transform: perspective(800px) rotateX(10deg) translateY(-8px) scale(.97);  filter: blur(1px); opacity: 1; }
  75%  { transform: perspective(800px) rotateX(-4deg) translateY(2px) scale(1.01);  filter: blur(0px); opacity: 1; }
  88%  { transform: perspective(800px) rotateX(2deg) translateY(-1px) scale(1);     filter: blur(0px); opacity: 1; }
  100% { transform: perspective(800px) rotateX(0deg) translateY(0px) scale(1);      filter: blur(0px); opacity: 1; }
}
.sds-card-dive {
  animation: sds-cardDive 1s cubic-bezier(.2,.6,.3,1) both;
}

/* 109 � Float Gimbal --------------------------------------- */
@keyframes sds-floatGimbal {
  0%   { transform: perspective(600px) translateY(0px)   rotateX(2deg) rotateY(-3deg); }
  25%  { transform: perspective(600px) translateY(-8px)  rotateX(-2deg) rotateY(3deg); }
  50%  { transform: perspective(600px) translateY(-4px)  rotateX(3deg) rotateY(-2deg); }
  75%  { transform: perspective(600px) translateY(-10px) rotateX(-1deg) rotateY(2deg); }
  100% { transform: perspective(600px) translateY(0px)   rotateX(2deg) rotateY(-3deg); }
}
.sds-card-float-gimbal {
  animation: sds-floatGimbal 5s ease-in-out infinite;
}

/* -- Clip Reveals -------------------------------------------------- */

/* 110 � Iris Bloom ------------------------------------------ */
@keyframes sds-irisBloom {
  0%   { clip-path: circle(0% at 35% 42%); opacity: .7; filter: brightness(1); }
  60%  { clip-path: circle(85% at 50% 50%); opacity: 1; filter: brightness(1.25); }
  80%  { clip-path: circle(100% at 50% 50%); filter: brightness(1.12); }
  100% { clip-path: circle(100% at 50% 50%); filter: brightness(1); }
}
.sds-card-iris-bloom {
  animation: sds-irisBloom .85s cubic-bezier(.2,.6,.2,1) both;
}

/* 111 � Diagonal Wipe --------------------------------------- */
@keyframes sds-diagWipe {
  0%   { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); filter: brightness(1); }
  70%  { clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 0% 100%); filter: brightness(1); }
  80%  { clip-path: polygon(0% 0%, 98% 0%, 100% 100%, 0% 100%); filter: brightness(1.14); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); filter: brightness(1); }
}
.sds-card-diagonal-wipe {
  animation: sds-diagWipe .75s cubic-bezier(.4,0,.2,1) both;
}

/* 112 � Shutter --------------------------------------------- */
@keyframes sds-cardShutter {
  0%   { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.sds-card-shutter {
  animation: sds-cardShutter .55s steps(5, start) both;
}

/* 113 � Spiral Reveal --------------------------------------- */
@keyframes sds-spiralReveal {
  /* 10 fixed points: center + 9 swept clockwise from 12-o'clock */
  0%   { clip-path: polygon(50% 50%, 50% 0%, 51% 0%, 51% 0%, 51% 0%, 51% 0%, 51% 0%, 51% 0%, 51% 0%, 51% 0%); opacity: .8; }
  11%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%); opacity: 1; }
  22%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 25%, 100% 25%, 100% 25%, 100% 25%, 100% 25%, 100% 25%, 100% 25%); }
  33%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 25%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%); }
  44%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 25%, 100% 75%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%); }
  55%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 25%, 100% 75%, 100% 100%, 50% 100%, 0% 100%, 0% 100%, 0% 100%); }
  66%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 25%, 100% 75%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 50%); }
  77%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 25%, 100% 75%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 0%); }
  88%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 25%, 100% 75%, 100% 100%, 50% 100%, 0% 100%, 0% 0%, 30% 0%); }
  100% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 25%, 100% 75%, 100% 100%, 50% 100%, 0% 100%, 0% 0%, 50% 0%); }
}
.sds-card-spiral-reveal {
  animation: sds-spiralReveal 1.2s cubic-bezier(.4,0,.6,1) both;
}

/* 114 � Letterbox ------------------------------------------- */
@keyframes sds-letterbox {
  0%   { clip-path: inset(22% 0 22% 0); transform: scale(1.04); }
  50%  { clip-path: inset(10% 0 10% 0); transform: scale(1.02); }
  100% { clip-path: inset(0% 0 0% 0);   transform: scale(1); }
}
.sds-card-letterbox {
  animation: sds-letterbox .9s cubic-bezier(.4,0,.2,1) both;
}

/* 115 � Tear ----------------------------------------------- */
@keyframes sds-cardTear {
  0%   { clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%); transform: rotate(-4deg); opacity: .9; }
  30%  { clip-path: polygon(0% 0%, 55% 0%, 22% 55%, 0% 100%); transform: rotate(-2.5deg); opacity: 1; }
  60%  { clip-path: polygon(0% 0%, 100% 0%, 72% 48%, 88% 100%, 0% 100%); transform: rotate(-1deg); }
  85%  { clip-path: polygon(0% 0%, 100% 0%, 100% 68%, 88% 100%, 0% 100%); transform: rotate(-.3deg); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: rotate(0deg); }
}
.sds-card-tear {
  animation: sds-cardTear .85s cubic-bezier(.34,1.1,.64,1) both;
}

/* 116 � Checker (4 quadrant children, diagonal pairs) --------- */
@keyframes sds-checkerPop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.sds-card-checker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.sds-card-checker > * {
  flex: 1;
}
.sds-card-checker > *:nth-child(1),
.sds-card-checker > *:nth-child(4) {
  animation: sds-checkerPop .35s cubic-bezier(.2,0,.2,1) both;
}
.sds-card-checker > *:nth-child(2),
.sds-card-checker > *:nth-child(3) {
  animation: sds-checkerPop .35s cubic-bezier(.2,0,.2,1) .2s both;
}

/*  GPU compositing hints � Batch 8 */
.sds-card-tilt-orbit,
.sds-card-door-peek,
.sds-card-flip-loop,
.sds-card-carousel-step,
.sds-card-dive,
.sds-card-float-gimbal {
  will-change: transform, filter;
}


/* ====================================================================
   BATCH 9 � Cards: Staged Content Choreography (6) + Border Beam & Frame (6)
   ==================================================================== */

/* -- Staged Content Choreography ---------------------------------- */

/* 117 � Reveal Stack � children stagger-slide up from beneath */
@keyframes sds-revealStack {
  0%   { transform: translateY(24px); opacity: 0; }
  100% { transform: translateY(0px);  opacity: 1; }
}
.sds-card-reveal-stack > *:nth-child(1) { animation: sds-revealStack .45s cubic-bezier(.2,0,.2,1) both; }
.sds-card-reveal-stack > *:nth-child(2) { animation: sds-revealStack .45s cubic-bezier(.2,0,.2,1) .1s both; }
.sds-card-reveal-stack > *:nth-child(3) { animation: sds-revealStack .45s cubic-bezier(.2,0,.2,1) .2s both; }
.sds-card-reveal-stack > *:nth-child(4) { animation: sds-revealStack .45s cubic-bezier(.2,0,.2,1) .3s both; }

/* 118 � Curtain Fall � pseudo-curtain drops then retracts, revealing card */
@keyframes sds-curtainFallKf {
  0%   { transform: translateY(-100%); }
  35%  { transform: translateY(0%); }
  65%  { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}
.sds-card-curtain-fall {
  position: relative;
  overflow: hidden;
}
.sds-card-curtain-fall::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 50, 0.88);
  animation: sds-curtainFallKf 1.4s cubic-bezier(.4,0,.6,1) both;
  z-index: 1;
}

/* 119 � Accordion In � children unfold from scaleY(0) with stagger */
@keyframes sds-accordionIn {
  0%   { transform: scaleY(0); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}
.sds-card-accordion-in {
  overflow: hidden;
}
.sds-card-accordion-in > * {
  transform-origin: top center;
}
.sds-card-accordion-in > *:nth-child(1) { animation: sds-accordionIn .3s cubic-bezier(.2,0,.2,1) both; }
.sds-card-accordion-in > *:nth-child(2) { animation: sds-accordionIn .3s cubic-bezier(.2,0,.2,1) .12s both; }
.sds-card-accordion-in > *:nth-child(3) { animation: sds-accordionIn .3s cubic-bezier(.2,0,.2,1) .24s both; }
.sds-card-accordion-in > *:nth-child(4) { animation: sds-accordionIn .3s cubic-bezier(.2,0,.2,1) .36s both; }

/* 120 � Fan Spread � children rotate out from bottom-left origin */
@keyframes sds-fanSpread1 { 0% { transform: rotate(0deg); opacity: 0; } 100% { transform: rotate(-2deg);  opacity: 1; } }
@keyframes sds-fanSpread2 { 0% { transform: rotate(0deg); opacity: 0; } 100% { transform: rotate(-8deg);  opacity: 1; } }
@keyframes sds-fanSpread3 { 0% { transform: rotate(0deg); opacity: 0; } 100% { transform: rotate(-14deg); opacity: 1; } }
@keyframes sds-fanSpread4 { 0% { transform: rotate(0deg); opacity: 0; } 100% { transform: rotate(-20deg); opacity: 1; } }
.sds-card-fan-spread > * {
  transform-origin: bottom left;
}
.sds-card-fan-spread > *:nth-child(1) { animation: sds-fanSpread1 .5s cubic-bezier(.34,1.3,.64,1) both; }
.sds-card-fan-spread > *:nth-child(2) { animation: sds-fanSpread2 .5s cubic-bezier(.34,1.3,.64,1) .08s both; }
.sds-card-fan-spread > *:nth-child(3) { animation: sds-fanSpread3 .5s cubic-bezier(.34,1.3,.64,1) .16s both; }
.sds-card-fan-spread > *:nth-child(4) { animation: sds-fanSpread4 .5s cubic-bezier(.34,1.3,.64,1) .24s both; }

/* 121 � Content Flood � diagonal clip-path fill from top-left corner */
@keyframes sds-contentFlood {
  0%   { clip-path: polygon(0% 0%, 0% 0%, 0% 0%); opacity: .5; }
  40%  { clip-path: polygon(0% 0%, 100% 0%, 0% 100%); opacity: 1; }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1; }
}
.sds-card-content-flood {
  animation: sds-contentFlood .7s cubic-bezier(.4,0,.2,1) both;
}

/* 122 � Unpack � spring-expand from compressed vertical state */
@keyframes sds-unpack {
  0%   { transform: perspective(600px) scaleY(.25) rotateX(22deg); opacity: 0; filter: blur(2px); }
  55%  { transform: perspective(600px) scaleY(1.06) rotateX(-2deg); opacity: 1; filter: blur(0px); }
  75%  { transform: perspective(600px) scaleY(.97) rotateX(1deg); }
  90%  { transform: perspective(600px) scaleY(1.01) rotateX(0deg); }
  100% { transform: perspective(600px) scaleY(1) rotateX(0deg); opacity: 1; filter: blur(0px); }
}
.sds-card-unpack {
  animation: sds-unpack .8s cubic-bezier(.34,1.1,.64,1) both;
  transform-origin: bottom center;
}

/* -- Border Beam & Frame ------------------------------------------ */

/* 123 � Border Beam � orbiting light bead via CSS Motion Path */
@keyframes sds-borderBeamOrbit {
  to { offset-distance: 100%; }
}
.sds-card-border-beam {
  position: relative;
}
.sds-card-border-beam::before {
  content: "";
  position: absolute;
  width: 28%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  border-radius: 2px;
  offset-path: border-box;
  offset-distance: 0%;
  animation: sds-borderBeamOrbit 2s linear infinite;
}

/* 124 � Frame Draw � border ring revealed left to right */
@keyframes sds-frameDrawKf {
  0%   { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); opacity: .8; }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1; }
}
.sds-card-frame-draw {
  position: relative;
}
.sds-card-frame-draw::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: inherit;
  animation: sds-frameDrawKf .7s cubic-bezier(.4,0,.2,1) both;
  pointer-events: none;
}

/* 125 � Corner Charge � alternating diagonal corner pair flash */
@keyframes sds-cornerChargeKf {
  0%,100% { opacity: 0; filter: brightness(1); }
  30%,70% { opacity: 1; filter: brightness(2.2); }
}
.sds-card-corner-charge {
  position: relative;
}
.sds-card-corner-charge::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: rgba(255,255,255,.9);
  border-right-color: rgba(255,255,255,.9);
  border-radius: inherit;
  animation: sds-cornerChargeKf 1.4s ease-in-out infinite;
}
.sds-card-corner-charge::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-bottom-color: rgba(255,255,255,.9);
  border-left-color: rgba(255,255,255,.9);
  border-radius: inherit;
  animation: sds-cornerChargeKf 1.4s ease-in-out infinite .7s;
}

/* 126 � Edge Scan � gloss scan line sweeps top then bottom edge */
@keyframes sds-edgeScanKf {
  0%,4%    { transform: translateX(-110%); opacity: 0; }
  8%       { opacity: 1; }
  44%,56%  { transform: translateX(110%); opacity: 0; }
  60%      { transform: translateX(-110%); opacity: 0; }
  64%      { opacity: 1; }
  96%,100% { transform: translateX(110%); opacity: 0; }
}
.sds-card-edge-scan {
  position: relative;
  overflow: hidden;
}
.sds-card-edge-scan::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 50%, transparent);
  animation: sds-edgeScanKf 3s ease-in-out infinite;
}
.sds-card-edge-scan::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 50%, transparent);
  animation: sds-edgeScanKf 3s ease-in-out infinite 1.5s;
}

/* 127 � Frame Breathe � border ring opacity-blur pulse */
@keyframes sds-frameBreathKf {
  0%,100% { opacity: .15; filter: blur(1px); }
  50%     { opacity: .75; filter: blur(0px); }
}
.sds-card-frame-breathe {
  position: relative;
}
.sds-card-frame-breathe::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: inherit;
  animation: sds-frameBreathKf 2.4s ease-in-out infinite;
}

/* 128 � Border Tide � twin beads 180� apart tracing the border */
.sds-card-border-tide {
  position: relative;
}
.sds-card-border-tide::before {
  content: "";
  position: absolute;
  width: 26%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  offset-path: border-box;
  offset-distance: 0%;
  animation: sds-borderBeamOrbit 2.2s linear infinite;
}
.sds-card-border-tide::after {
  content: "";
  position: absolute;
  width: 26%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(180,200,255,.85), transparent);
  offset-path: border-box;
  offset-distance: 50%;
  animation: sds-borderBeamOrbit 2.2s linear infinite;
}


/* ====================================================================
   BATCH 10 � Cards: Glass & Refraction (6) + Stack & Shuffle (6)
   ==================================================================== */

/* -- Glass & Refraction -------------------------------------------- */

/* 129 � Glass Frost � blur + brightness frost breath loop */
@keyframes sds-glassFrost {
  0%,100% { filter: blur(0px) brightness(1) saturate(1); opacity: 1; }
  35%     { filter: blur(5px) brightness(1.1) saturate(.75); opacity: .82; }
  65%     { filter: blur(5px) brightness(1.1) saturate(.75); opacity: .82; }
}
.sds-card-glass-frost {
  animation: sds-glassFrost 3.5s ease-in-out infinite;
}

/* 130 � Lens Bulge � scale + perspective pulse (lens-like magnification) */
@keyframes sds-lensBulge {
  0%,100% { transform: perspective(400px) scale(1) rotateX(0deg); filter: brightness(1); }
  50%     { transform: perspective(300px) scale(1.04) rotateX(-1deg); filter: brightness(1.1); }
}
.sds-card-lens-bulge {
  animation: sds-lensBulge 3s ease-in-out infinite;
}

/* 131 � Hue Shift � full hue-rotate sweep through spectrum */
@keyframes sds-hueShift {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  50%  { filter: hue-rotate(180deg) brightness(1.08); }
  100% { filter: hue-rotate(360deg) brightness(1); }
}
.sds-card-hue-shift {
  animation: sds-hueShift 4s linear infinite;
}

/* 132 � Refract Slide � diagonal caustic-light beam passes over card */
@keyframes sds-refractSlide {
  0%   { transform: translate(-120%, -120%); opacity: 0; }
  12%  { opacity: .55; }
  50%  { transform: translate(10%, 10%); opacity: .35; }
  88%  { opacity: .55; }
  100% { transform: translate(120%, 120%); opacity: 0; }
}
.sds-card-refract-slide {
  position: relative;
  overflow: hidden;
}
.sds-card-refract-slide::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(135deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%);
  filter: blur(3px);
  animation: sds-refractSlide 4s ease-in-out infinite;
}

/* 133 � Crystal Pulse � brightness + contrast + scale energy pulse */
@keyframes sds-crystalPulse {
  0%,100% { transform: scale(1);    filter: brightness(1) contrast(1); }
  45%     { transform: scale(1.025); filter: brightness(1.28) contrast(1.06); }
}
.sds-card-crystal-pulse {
  animation: sds-crystalPulse 2.2s ease-in-out infinite;
}

/* 134 � Glass Wipe � frosted-glass strip sweeps across card */
@keyframes sds-glassWipe {
  0%   { transform: translateX(-140%) skewX(-12deg); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(140%) skewX(-12deg); opacity: 0; }
}
.sds-card-glass-wipe {
  position: relative;
  overflow: hidden;
}
.sds-card-glass-wipe::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 38%;
  background: rgba(255,255,255,.22);
  filter: blur(6px);
  animation: sds-glassWipe 3s ease-in-out infinite;
}

/* -- Stack & Shuffle ----------------------------------------------- */

/* 135 � Stack Pop � card lifts from stack with growing drop-shadow */
@keyframes sds-stackPop {
  0%,100% { transform: translateY(0) scale(1);    filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
  40%     { transform: translateY(-16px) scale(1.04); filter: drop-shadow(0 12px 20px rgba(0,0,0,.3)); }
  70%     { transform: translateY(-12px) scale(1.03); filter: drop-shadow(0 10px 16px rgba(0,0,0,.25)); }
}
.sds-card-stack-pop {
  animation: sds-stackPop 2.2s cubic-bezier(.34,1.2,.64,1) infinite;
}

/* 136 � Shuffle Deal � dealt from upper-left with translate + rotate */
@keyframes sds-shuffleDeal {
  0%   { transform: translate(-60px, -18px) rotate(-14deg) scale(.86); opacity: 0; filter: blur(2px); }
  55%  { transform: translate(4px, 2px) rotate(1deg) scale(1.02); opacity: 1; filter: blur(0px); }
  75%  { transform: translate(-2px, -1px) rotate(-.5deg) scale(.99); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; filter: blur(0px); }
}
.sds-card-shuffle-deal {
  animation: sds-shuffleDeal .72s cubic-bezier(.34,1.1,.64,1) both;
}

/* 137 � Deck Peek � two ghost cards peek from behind with stagger */
@keyframes sds-deckPeekB {
  0%,100% { transform: translate(-5px, 5px) rotate(-2deg); opacity: .55; }
  50%     { transform: translate(-10px, 10px) rotate(-4deg); opacity: .75; }
}
@keyframes sds-deckPeekA {
  0%,100% { transform: translate(-10px, 10px) rotate(-4deg); opacity: .35; }
  50%     { transform: translate(-18px, 18px) rotate(-7deg); opacity: .55; }
}
.sds-card-deck-peek {
  position: relative;
  overflow: visible;
}
.sds-card-deck-peek::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(180, 190, 230, .82);
  border-radius: inherit;
  z-index: -1;
  animation: sds-deckPeekB 2.5s ease-in-out infinite;
}
.sds-card-deck-peek::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(160, 172, 220, .65);
  border-radius: inherit;
  z-index: -2;
  animation: sds-deckPeekA 2.5s ease-in-out infinite .15s;
}

/* 138 � Deck Cycle � perspective yaw cycle like advancing a deck */
@keyframes sds-deckCycle {
  0%,15%  { transform: perspective(700px) rotateY(0deg) translateX(0); }
  35%,55% { transform: perspective(700px) rotateY(22deg) translateX(8px); }
  70%     { transform: perspective(700px) rotateY(-4deg) translateX(-2px); }
  85%,100% { transform: perspective(700px) rotateY(0deg) translateX(0); }
}
.sds-card-deck-cycle {
  animation: sds-deckCycle 2.8s ease-in-out infinite;
}

/* 139 � Stack Drop � entrance: card drops onto stack from above */
@keyframes sds-stackDrop {
  0%   { transform: translateY(-38px) scale(1.08); opacity: 0; filter: blur(3px); }
  52%  { transform: translateY(4px) scale(.98);   opacity: 1; filter: blur(0px); }
  70%  { transform: translateY(-2px) scale(1.01); }
  85%  { transform: translateY(1px) scale(.998); }
  100% { transform: translateY(0) scale(1);       opacity: 1; filter: blur(0px); }
}
.sds-card-stack-drop {
  animation: sds-stackDrop .65s cubic-bezier(.34,1.15,.64,1) both;
}

/* 140 � Deal Arc � entrance: arc-sweep from upper-left like dealing */
@keyframes sds-dealArc {
  0%   { transform: translate(-72px, -12px) rotate(-18deg) scale(.82); opacity: 0; }
  55%  { transform: translate(5px, -3px) rotate(1.5deg) scale(1.02); opacity: 1; }
  75%  { transform: translate(-2px, 1px) rotate(-.4deg) scale(.99); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
}
.sds-card-deal-arc {
  animation: sds-dealArc .7s cubic-bezier(.2,.6,.3,1) both;
}


/* ====================================================================
   BATCH 11 � Cards: Entrance Physics (7) + Ambient Loops (6)
   Cards category complete: 100 effects
   ==================================================================== */

/* -- Entrance Physics ---------------------------------------------- */

/* 141 � Bounce In � spring-bounce entrance from below */
@keyframes sds-bounceIn {
  0%   { transform: translateY(50px) scale(.9); opacity: 0; }
  45%  { transform: translateY(-12px) scale(1.04); opacity: 1; }
  65%  { transform: translateY(5px) scale(.98); }
  80%  { transform: translateY(-4px) scale(1.01); }
  92%  { transform: translateY(2px) scale(1); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.sds-card-bounce-in {
  animation: sds-bounceIn .75s cubic-bezier(.2,0,.2,1) both;
}

/* 142 � Elastic Drop � oscillating drop from above, 3-cycle settle */
@keyframes sds-elasticDrop {
  0%   { transform: translateY(-55px) scaleY(.85); opacity: 0; filter: blur(2px); }
  30%  { transform: translateY(8px) scaleY(1.06); opacity: 1; filter: blur(0px); }
  48%  { transform: translateY(-5px) scaleY(.97); }
  62%  { transform: translateY(3px) scaleY(1.02); }
  74%  { transform: translateY(-2px) scaleY(.99); }
  84%  { transform: translateY(1px) scaleY(1.005); }
  100% { transform: translateY(0) scaleY(1); opacity: 1; filter: blur(0px); }
}
.sds-card-elastic-drop {
  animation: sds-elasticDrop .9s cubic-bezier(.34,1.4,.64,1) both;
}

/* 143 � Slingshot � diagonal launch from lower-left with decel arc */
@keyframes sds-slingshot {
  0%   { transform: translate(-80px, 30px) rotate(-8deg) scale(.8); opacity: 0; }
  40%  { transform: translate(10px, -6px) rotate(2deg) scale(1.03); opacity: 1; }
  60%  { transform: translate(-4px, 2px) rotate(-1deg) scale(.99); }
  80%  { transform: translate(2px, -1px) rotate(.4deg) scale(1.005); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
}
.sds-card-slingshot {
  animation: sds-slingshot .65s cubic-bezier(.2,.6,.3,1) both;
}

/* 144 � Rubber Band � squeeze-stretch XY oscillation settle */
@keyframes sds-cardRubberBand {
  0%   { transform: scale(.6, .6); opacity: 0; }
  22%  { transform: scale(1.2, .82); opacity: 1; }
  40%  { transform: scale(.88, 1.14); }
  55%  { transform: scale(1.07, .95); }
  68%  { transform: scale(.97, 1.03); }
  80%  { transform: scale(1.02, .99); }
  100% { transform: scale(1, 1); opacity: 1; }
}
.sds-card-rubber-band {
  animation: sds-cardRubberBand .78s cubic-bezier(.34,1.3,.64,1) both;
}

/* 145 � Free Fall � gravity-curve accelerating entrance from above */
@keyframes sds-freeFall {
  0%   { transform: translateY(-64px) scale(.92); opacity: 0; filter: blur(2px); }
  55%  { transform: translateY(4px) scale(1.01); opacity: 1; filter: blur(0px); }
  72%  { transform: translateY(-2px) scale(1); }
  100% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0px); }
}
.sds-card-free-fall {
  animation: sds-freeFall .68s cubic-bezier(.4,0,.2,1) both;
}

/* 146 � Pinball � ricochets with direction changes before settling */
@keyframes sds-pinball {
  0%   { transform: translate(-60px, -38px) rotate(-12deg); opacity: 0; }
  20%  { transform: translate(12px, 18px) rotate(6deg); opacity: 1; }
  38%  { transform: translate(-8px, -10px) rotate(-3deg); }
  54%  { transform: translate(4px, 5px) rotate(1.5deg); }
  70%  { transform: translate(-2px, -2px) rotate(-.5deg); }
  84%  { transform: translate(1px, 1px) rotate(.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}
.sds-card-pinball {
  animation: sds-pinball .88s cubic-bezier(.2,.6,.3,1) both;
}

/* 147 � Snap Back � overshoots left then snaps to rest with rotate */
@keyframes sds-snapBack {
  0%   { transform: translateX(-50px) rotate(-10deg) scale(.9); opacity: 0; }
  30%  { transform: translateX(18px) rotate(5deg) scale(1.04); opacity: 1; }
  50%  { transform: translateX(-6px) rotate(-1.5deg) scale(.98); }
  68%  { transform: translateX(3px) rotate(.5deg) scale(1.01); }
  84%  { transform: translateX(-1px) rotate(-.2deg) scale(1); }
  100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
}
.sds-card-snap-back {
  animation: sds-snapBack .72s cubic-bezier(.34,1.25,.64,1) both;
}

/* -- Ambient Loops ------------------------------------------------- */

/* 148 � Idle Breathe � micro scale pulse (barely perceptible) */
@keyframes sds-idleBreathe {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.018); }
}
.sds-card-idle-breathe {
  animation: sds-idleBreathe 3s ease-in-out infinite;
}

/* 149 � Idle Sway � slow side-to-side lateral sway */
@keyframes sds-idleSway {
  0%,100% { transform: translateX(0px); }
  35%     { transform: translateX(-6px); }
  65%     { transform: translateX(6px); }
}
.sds-card-idle-sway {
  animation: sds-idleSway 4s ease-in-out infinite;
}

/* 150 � Idle Bob � gentle vertical float */
@keyframes sds-idleBob {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-8px); }
}
.sds-card-idle-bob {
  animation: sds-idleBob 2.5s ease-in-out infinite;
}

/* 151 � Idle Pulse � opacity + scale attention loop */
@keyframes sds-idlePulse {
  0%,100% { transform: scale(1);     opacity: 1; }
  45%,55% { transform: scale(1.025); opacity: .82; }
}
.sds-card-idle-pulse {
  animation: sds-idlePulse 2s ease-in-out infinite;
}

/* 152 � Idle Glow � drop-shadow glow breathe */
@keyframes sds-idleGlow {
  0%,100% { filter: drop-shadow(0 0 0px rgba(100,120,255,.0)); }
  50%     { filter: drop-shadow(0 0 18px rgba(100,120,255,.55)); }
}
.sds-card-idle-glow {
  animation: sds-idleGlow 2.8s ease-in-out infinite;
}

/* 153 � Idle Rock � rotation rock left-right */
@keyframes sds-idleRock {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(-2deg); }
  75%     { transform: rotate(2deg); }
}
.sds-card-idle-rock {
  animation: sds-idleRock 3.5s ease-in-out infinite;
}