.cup.vortex-candidate {
  position: relative;
  isolation: isolate;
}

.cup.vortex-candidate .tokens,
.cup.vortex-candidate .cup-index,
.cup.vortex-candidate .modifier-badge,
.cup.vortex-candidate .token-count {
  position: relative;
  z-index: 3;
}

.vortex-candidate-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-left-color: transparent;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 31%, rgba(83, 218, 246, 0.22) 33% 45%, rgba(10, 151, 190, 0.08) 47% 62%, transparent 65%),
    conic-gradient(from 0deg, rgba(22, 184, 239, 0.08), rgba(22, 184, 239, 0.54), rgba(12, 141, 145, 0.08), rgba(22, 184, 239, 0.46), rgba(22, 184, 239, 0.08));
  box-shadow: 0 0 16px rgba(8, 116, 169, 0.2);
  pointer-events: none;
  z-index: 1;
  animation: vortexCandidateSpin 1.25s linear infinite;
}

.cup.vortex-left .vortex-candidate-mark {
  border-top-color: rgba(255, 116, 93, 0.95);
  border-right-color: rgba(255, 116, 93, 0.72);
  box-shadow: 0 0 16px rgba(255, 116, 93, 0.22);
}

.cup.vortex-right .vortex-candidate-mark {
  border-top-color: rgba(22, 184, 239, 0.98);
  border-right-color: rgba(22, 184, 239, 0.76);
  box-shadow: 0 0 16px rgba(22, 184, 239, 0.26);
}

.cup.vortex-both .vortex-candidate-mark {
  border-top-color: rgba(246, 178, 29, 0.98);
  border-right-color: rgba(22, 184, 239, 0.9);
  box-shadow: 0 0 18px rgba(246, 178, 29, 0.26), 0 0 24px rgba(22, 184, 239, 0.15);
}

.vortex-candidate-mark::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-right-color: rgba(22, 184, 239, 0.9);
  border-bottom-color: transparent;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  animation: vortexCandidateSpin 720ms linear infinite reverse;
}

.vortex-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 5%, rgba(68, 218, 244, 0.44) 8% 29%, rgba(8, 139, 181, 0.18) 31% 51%, transparent 54%),
    conic-gradient(from 45deg, transparent, rgba(255, 255, 255, 0.78), rgba(22, 184, 239, 0.72), transparent 58%, rgba(12, 141, 145, 0.64), transparent);
  animation: vortexBurst 900ms cubic-bezier(.18,.72,.18,1) forwards;
}

.vortex-burst::before,
.vortex-burst::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 3px solid rgba(255, 255, 255, 0.74);
  border-left-color: transparent;
  border-radius: 50%;
}

.vortex-burst::before {
  animation: vortexCandidateSpin 430ms linear infinite;
}

.vortex-burst::after {
  inset: 17px;
  border-color: rgba(22, 184, 239, 0.78);
  border-right-color: transparent;
  animation: vortexCandidateSpin 310ms linear infinite reverse;
}

.cup.vortex-source {
  animation: vortexSourceLift 520ms ease-out 1;
}

body[data-vortex-phase="preview_candidate"] .flow-status {
  border-color: rgba(22, 184, 239, 0.82);
  box-shadow: 0 10px 30px rgba(8, 116, 169, 0.22);
}

body[data-vortex-phase="vortex_rescue"] .flow-status,
body[data-vortex-phase="vortex_chain"] .flow-status,
body[data-vortex-phase="grand_vortex"] .flow-status {
  border-color: rgba(12, 141, 145, 0.9);
  background: linear-gradient(135deg, rgba(221, 252, 255, 0.98), rgba(232, 255, 240, 0.98));
}

body[data-vortex-phase="vortex_chain"] .flow-status-icon,
body[data-vortex-phase="grand_vortex"] .flow-status-icon {
  animation: vortexStatusPop 660ms ease-out 1;
}

body[data-vortex-phase="grand_vortex"] .flow-status {
  box-shadow: 0 12px 34px rgba(8, 116, 169, 0.28), inset 0 0 0 2px rgba(246, 178, 29, 0.34);
}

@keyframes vortexCandidateSpin {
  to { transform: rotate(360deg); }
}

@keyframes vortexBurst {
  0% { transform: scale(0.35) rotate(-80deg); opacity: 0; }
  22% { opacity: 1; }
  68% { transform: scale(1.08) rotate(120deg); opacity: 0.94; }
  100% { transform: scale(1.36) rotate(220deg); opacity: 0; }
}

@keyframes vortexSourceLift {
  0% { transform: translateY(0) scale(1); }
  36% { transform: translateY(-7px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes vortexStatusPop {
  0% { transform: scale(0.78) rotate(-12deg); }
  58% { transform: scale(1.18) rotate(7deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .vortex-candidate-mark,
  .vortex-candidate-mark::after,
  .vortex-burst,
  .vortex-burst::before,
  .vortex-burst::after,
  .cup.vortex-source,
  body[data-vortex-phase] .flow-status-icon {
    animation: none !important;
  }

  .vortex-burst {
    opacity: 0.82;
    transform: none;
  }
}