/* ==========================================================================
   Bastion Velocity Engine: Advisory Track Hero Diagram Presentation
   ========================================================================== */

.opt-a-track {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.opt-a-visual-box {
  width: 100%;
  height: 94px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(30, 41, 59, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  transition: all var(--transition-fast);
}

.opt-a-track:hover .opt-a-visual-box {
  border-color: rgba(56, 189, 248, 0.5);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.6));
}

.opt-a-svg {
  width: 120px;
  max-width: 100%;
  height: auto;
  max-height: 84px;
  display: block;
  shape-rendering: geometricPrecision;
}

.engine-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.engine-footer a {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  transition: color var(--transition-fast);
}

.engine-footer a:hover {
  color: #ffffff;
}

/* Technical Practice Matrix Layout & Icons */
.tech-matrix-wrapper {
  max-width: 1040px;
  margin: var(--space-2xl) auto 0;
}

.tech-matrix-card {
  max-width: 100%;
}

.tech-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

@media (max-width: 960px) {
  .tech-matrix {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .tech-matrix {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SYNCHRONIZED MULTICOLOR PALETTE: PRACTICE AREAS & MATRIX TILES
   ========================================================================== */

/* Area 01: Product Development (Azure / Sky Blue) */
.matrix-track.track-product .matrix-track-icon,
.card.track-product .card-icon-animated {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  box-shadow: none;
}
.matrix-track.track-product .matrix-track-pill {
  color: #bae6fd;
  background: rgba(56, 189, 248, 0.12);
}
.matrix-track.track-product:hover .matrix-track-icon,
.card.track-product:hover .card-icon-animated {
  border-color: rgba(56, 189, 248, 0.9);
  box-shadow: none;
}
.card.track-product:hover {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* Area 02: AI & Automation Systems (Electric Violet) */
.matrix-track.track-ai .matrix-track-icon,
.card.track-ai .card-icon-animated {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c084fc;
  box-shadow: none;
}
.matrix-track.track-ai .matrix-track-pill {
  color: #e9d5ff;
  background: rgba(168, 85, 247, 0.12);
}
.matrix-track.track-ai:hover .matrix-track-icon,
.card.track-ai:hover .card-icon-animated {
  border-color: rgba(168, 85, 247, 0.9);
  box-shadow: none;
}
.card.track-ai:hover {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* Area 03: Data Platform Architecture (Emerald Mint) */
.matrix-track.track-data .matrix-track-icon,
.card.track-data .card-icon-animated {
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #34d399;
  box-shadow: none;
}
.matrix-track.track-data .matrix-track-pill {
  color: #a7f3d0;
  background: rgba(52, 211, 153, 0.12);
}
.matrix-track.track-data:hover .matrix-track-icon,
.card.track-data:hover .card-icon-animated {
  border-color: rgba(52, 211, 153, 0.9);
  box-shadow: none;
}
.card.track-data:hover {
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* Area 04: Go-to-Market Strategy (Warm Amber) */
.matrix-track.track-gtm .matrix-track-icon,
.card.track-gtm .card-icon-animated {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fbbf24;
  box-shadow: none;
}
.matrix-track.track-gtm .matrix-track-pill {
  color: #fde68a;
  background: rgba(251, 191, 36, 0.12);
}
.matrix-track.track-gtm:hover .matrix-track-icon,
.card.track-gtm:hover .card-icon-animated {
  border-color: rgba(251, 191, 36, 0.9);
  box-shadow: none;
}
.card.track-gtm:hover {
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* Area 05: Scale Up & Out (Royal Blue) */
.matrix-track.track-scale .matrix-track-icon,
.card.track-scale .card-icon-animated {
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.35);
  color: #60a5fa;
  box-shadow: none;
}
.matrix-track.track-scale .matrix-track-pill {
  color: #bfdbfe;
  background: rgba(96, 165, 250, 0.12);
}
.matrix-track.track-scale:hover .matrix-track-icon,
.card.track-scale:hover .card-icon-animated {
  border-color: rgba(96, 165, 250, 0.9);
  box-shadow: none;
}
.card.track-scale:hover {
  border-color: rgba(96, 165, 250, 0.45);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* Area 06: Operations & Telemetry (Crimson Rose) */
.matrix-track.track-ops .matrix-track-icon,
.card.track-ops .card-icon-animated {
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.35);
  color: #fb7185;
  box-shadow: none;
}
.matrix-track.track-ops .matrix-track-pill {
  color: #fecdd3;
  background: rgba(244, 63, 94, 0.12);
}
.matrix-track.track-ops:hover .matrix-track-icon,
.card.track-ops:hover .card-icon-animated {
  border-color: rgba(244, 63, 94, 0.9);
  box-shadow: none;
}
.card.track-ops:hover {
  border-color: rgba(244, 63, 94, 0.45);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}


/* Practice Area Custom SVG Icons */
.card-glyph-svg {
  width: 28px;
  height: 28px;
  display: block;
}

.card-glyph-svg.card-glyph-stage4 {
  width: 38px;
  height: 28.5px;
  display: block;
  overflow: visible;
}

/* Stage 4 Advisory Track Capstone Animations for Homepage Velocity Matrix */
.matrix-track.track-pmf .anim-som-center {
  animation-name: somCenterLitPmf;
}
@keyframes somCenterLitPmf {
  0%, 48% {
    transform: scale(0.85);
    opacity: 0.25;
    fill: rgba(248, 113, 113, 0.2);
  }
  60% {
    transform: scale(1.35);
    opacity: 1;
    fill: #f87171;
  }
  78% {
    transform: scale(1.1);
    opacity: 1;
    fill: #f87171;
  }
  92%, 100% {
    transform: scale(0.85);
    opacity: 0.25;
    fill: rgba(248, 113, 113, 0.2);
  }
}

.matrix-track.track-gtm .anim-inroad-node1 {
  animation-name: inroadNodeLit1Gtm;
}
.matrix-track.track-gtm .anim-inroad-node2 {
  animation-name: inroadNodeLit2Gtm;
}
.matrix-track.track-gtm .anim-inroad-node3 {
  animation-name: inroadNodeLit3Gtm;
}
@keyframes inroadNodeLit1Gtm {
  0%, 20% { fill: rgba(251, 191, 36, 0.2); }
  24%, 92% { fill: #fbbf24; }
  98%, 100% { fill: rgba(251, 191, 36, 0.2); }
}
@keyframes inroadNodeLit2Gtm {
  0%, 46% { fill: rgba(251, 191, 36, 0.2); }
  50%, 92% { fill: #fbbf24; }
  98%, 100% { fill: rgba(251, 191, 36, 0.2); }
}
@keyframes inroadNodeLit3Gtm {
  0%, 74% { fill: rgba(251, 191, 36, 0.2); }
  78%, 92% { fill: #fbbf24; }
  98%, 100% { fill: rgba(251, 191, 36, 0.2); }
}


/* ==========================================================================
   TRACK 1: TARGET MARKET DISCOVERY ANIMATIONS
   ========================================================================== */
@keyframes dashedRingRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.anim-dashed-rotate {
  transform-origin: 60px 45px;
  animation: dashedRingRotate 12s linear infinite;
}

@keyframes questionPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.8; }
  50% { transform: scale(1.12); opacity: 1;  }
}
.anim-question-pulse {
  transform-origin: 60px 45px;
  animation: questionPulse 2s ease-in-out infinite;
}

@keyframes wireframeScan {
  0%, 100% { transform: scaleX(0.85); opacity: 0.6; }
  50% { transform: scaleX(1.05); opacity: 1;  }
}
.anim-wire-line1 {
  transform-origin: 45px 36px;
  animation: wireframeScan 2.4s ease-in-out infinite;
}
.anim-wire-line2 {
  transform-origin: 45px 48px;
  animation: wireframeScan 2.4s ease-in-out infinite 0.4s;
}
.anim-wire-line3 {
  transform-origin: 45px 58px;
  animation: wireframeScan 2.4s ease-in-out infinite 0.8s;
}

/* Step 03: Purchase Intent (Check drawn, then circle expands & lit in pulse) */
@keyframes checkStrokeDraw {
  0% {
    stroke-dashoffset: 35;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  32%, 85% {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: scale(1);
  }
  42% {
    transform: scale(1.15);
  }
  92%, 100% {
    stroke-dashoffset: 35;
    opacity: 0;
  }
}
.anim-check-draw {
  stroke-dasharray: 35;
  stroke-dashoffset: 35;
  transform-origin: 60px 45px;
  animation: checkStrokeDraw 3.2s ease-in-out infinite;
}

@keyframes intentCircleExpandLit {
  0%, 30% {
    transform: scale(0.92);
    fill: rgba(56, 189, 248, 0.08);
    stroke-width: 1.8;
        opacity: 0.6;
  }
  44% {
    transform: scale(1.15);
    fill: rgba(56, 189, 248, 0.4);
    stroke-width: 2.8;
    opacity: 1;
  }
  58% {
    transform: scale(1.04);
    fill: rgba(56, 189, 248, 0.25);
    stroke-width: 2.2;
  }
  85% {
    transform: scale(1);
    fill: rgba(56, 189, 248, 0.18);
    stroke-width: 2;
  }
  94%, 100% {
    transform: scale(0.92);
    fill: rgba(56, 189, 248, 0.08);
    stroke-width: 1.8;
        opacity: 0.6;
  }
}
.anim-intent-circle-lit {
  transform-origin: 60px 45px;
  animation: intentCircleExpandLit 3.2s ease-in-out infinite;
}

/* Step 04: TAM / SAM / SOM (Outer rings pulse first, then center gets lit) */
@keyframes tamPulseRing1 {
  0%, 100% { transform: scale(1); opacity: 0.35; stroke-width: 1.8;  }
  15% { transform: scale(1.1); opacity: 1; stroke-width: 2.5;  }
  30%, 85% { transform: scale(1); opacity: 0.35; stroke-width: 1.8;  }
}
.anim-tam-ring1 {
  transform-origin: 60px 45px;
  animation: tamPulseRing1 3.4s ease-in-out infinite;
}

@keyframes samPulseRing2 {
  0%, 20% { transform: scale(1); opacity: 0.4; stroke-width: 1.8;  }
  35% { transform: scale(1.12); opacity: 1; stroke-width: 2.5;  }
  50%, 100% { transform: scale(1); opacity: 0.4; stroke-width: 1.8;  }
}
.anim-sam-ring2 {
  transform-origin: 60px 45px;
  animation: samPulseRing2 3.4s ease-in-out infinite;
}

@keyframes somCenterLit {
  0%, 48% {
    transform: scale(0.85);
    opacity: 0.25;
    fill: rgba(52, 211, 153, 0.2);
  }
  60% {
    transform: scale(1.35);
    opacity: 1;
    fill: #34d399;
  }
  78% {
    transform: scale(1.1);
    opacity: 1;
    fill: #34d399;
  }
  92%, 100% {
    transform: scale(0.85);
    opacity: 0.25;
    fill: rgba(52, 211, 153, 0.2);
      }
}
.anim-som-center {
  transform-origin: 60px 45px;
  animation: somCenterLit 3.4s ease-in-out infinite;
}

/* ==========================================================================
   TRACK 2: PRODUCT LAUNCH STRATEGY ANIMATIONS
   ========================================================================== */
/* Step 01: Lighthouse (Light cone spinning along Z-axis) */
@keyframes lighthouseSpinZ {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.anim-lighthouse-cone {
  transform-origin: 60px 31px;
  transform-box: view-box;
  animation: lighthouseSpinZ 4.5s linear infinite;
}
@keyframes lighthouseLampGlow {
  0%, 100% {  opacity: 0.85; }
  50% {  opacity: 1; }
}
.anim-lighthouse-lamp {
  transform-origin: 60px 31px;
  transform-box: view-box;
  animation: lighthouseLampGlow 2.25s ease-in-out infinite;
}

/* Step 02: 80/20 Scope Lock */
@keyframes shieldGlowPulse {
  0%, 100% { transform: scale(0.96);  }
  50% { transform: scale(1.03);  }
}
.anim-shield-pulse {
  transform-origin: 60px 48px;
  animation: shieldGlowPulse 2.5s ease-in-out infinite;
}
.anim-shield-text {
  transform-origin: 60px 50px;
  animation: syndicateStaircase 2.5s ease-in-out infinite;
}

/* Step 03: Runway Governance */
@keyframes runwayStream {
  from { stroke-dashoffset: 16; }
  to { stroke-dashoffset: 0; }
}
.anim-runway-line {
  stroke-dasharray: 4 4;
  animation: runwayStream 1.2s linear infinite;
}
.anim-runway-node1 {
  transform-origin: 35px 45px;
  animation: recurLayerPulse 2.4s ease-in-out infinite;
}
.anim-runway-node2 {
  transform-origin: 60px 45px;
  animation: recurLayerPulse 2.4s ease-in-out infinite 0.4s;
}
.anim-runway-node3 {
  transform-origin: 85px 45px;
  animation: recurLayerPulse 2.4s ease-in-out infinite 0.8s;
}
.anim-runway-arrow {
  transform-origin: 60px 24px;
  animation: checkmarkBounce 2s ease-in-out infinite;
}

/* Step 04: Target Inroads (Account penetration graph sequence: 1 arrow -> 2 arrows -> 3 arrows) */
@keyframes inroadSourcePulse {
  0%, 100% { transform: scale(1);  }
  50% { transform: scale(1.15);  }
}
.anim-inroad-source {
  transform-origin: 20px 70px;
  transform-box: view-box;
  animation: inroadSourcePulse 2s ease-in-out infinite;
}

/* Sequence: Step 1 (0-24%), Step 2 (28-52%), Step 3 (56-80%), Hold (80-92%), Fade (92-100%) */
@keyframes inroadArrowDraw1 {
  0% { stroke-dashoffset: 32; opacity: 0; }
  4% { opacity: 1; }
  22%, 92% { stroke-dashoffset: 0; opacity: 1; }
  98%, 100% { stroke-dashoffset: 32; opacity: 0; }
}
.anim-inroad-arrow1 {
  stroke-dasharray: 32;
  animation: inroadArrowDraw1 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes inroadHeadFade1 {
  0%, 18% { opacity: 0; transform: scale(0.4); }
  22%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0.4); }
}
.anim-inroad-head1 {
  transform-origin: 41px 52.5px;
  transform-box: view-box;
  animation: inroadHeadFade1 5.5s ease-out infinite;
}
@keyframes inroadNodeLit1 {
  0%, 20% { fill: rgba(52, 211, 153, 0.2);  }
  24%, 92% { fill: #34d399;  }
  98%, 100% { fill: rgba(52, 211, 153, 0.2);  }
}
.anim-inroad-node1 {
  animation: inroadNodeLit1 5.5s ease-in-out infinite;
}

/* Step 2: 2 arrows simultaneously */
@keyframes inroadArrowDraw2 {
  0%, 26% { stroke-dashoffset: 32; opacity: 0; }
  30% { opacity: 1; }
  48%, 92% { stroke-dashoffset: 0; opacity: 1; }
  98%, 100% { stroke-dashoffset: 32; opacity: 0; }
}
.anim-inroad-arrow2 {
  stroke-dasharray: 32;
  animation: inroadArrowDraw2 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes inroadHeadFade2A {
  0%, 44% { opacity: 0; transform: scale(0.4); }
  48%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0.4); }
}
.anim-inroad-head2a {
  transform-origin: 67px 35.8px;
  transform-box: view-box;
  animation: inroadHeadFade2A 5.5s ease-out infinite;
}
@keyframes inroadHeadFade2B {
  0%, 44% { opacity: 0; transform: scale(0.4); }
  48%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0.4); }
}
.anim-inroad-head2b {
  transform-origin: 67px 64.2px;
  transform-box: view-box;
  animation: inroadHeadFade2B 5.5s ease-out infinite;
}
@keyframes inroadNodeLit2 {
  0%, 46% { fill: rgba(52, 211, 153, 0.2);  }
  50%, 92% { fill: #34d399;  }
  98%, 100% { fill: rgba(52, 211, 153, 0.2);  }
}
.anim-inroad-node2 {
  animation: inroadNodeLit2 5.5s ease-in-out infinite;
}

/* Step 3: 3 arrows simultaneously */
@keyframes inroadArrowDraw3 {
  0%, 54% { stroke-dashoffset: 32; opacity: 0; }
  58% { opacity: 1; }
  76%, 92% { stroke-dashoffset: 0; opacity: 1; }
  98%, 100% { stroke-dashoffset: 32; opacity: 0; }
}
.anim-inroad-arrow3 {
  stroke-dasharray: 32;
  animation: inroadArrowDraw3 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes inroadHeadFade3A {
  0%, 72% { opacity: 0; transform: scale(0.4); }
  76%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0.4); }
}
.anim-inroad-head3a {
  transform-origin: 95px 23.3px;
  transform-box: view-box;
  animation: inroadHeadFade3A 5.5s ease-out infinite;
}
@keyframes inroadHeadFade3B {
  0%, 72% { opacity: 0; transform: scale(0.4); }
  76%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0.4); }
}
.anim-inroad-head3b {
  transform-origin: 96.9px 48.4px;
  transform-box: view-box;
  animation: inroadHeadFade3B 5.5s ease-out infinite;
}
@keyframes inroadHeadFade3C {
  0%, 72% { opacity: 0; transform: scale(0.4); }
  76%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0.4); }
}
.anim-inroad-head3c {
  transform-origin: 95px 74.7px;
  transform-box: view-box;
  animation: inroadHeadFade3C 5.5s ease-out infinite;
}
@keyframes inroadNodeLit3 {
  0%, 74% { fill: rgba(52, 211, 153, 0.2);  }
  78%, 92% { fill: #34d399;  }
  98%, 100% { fill: rgba(52, 211, 153, 0.2);  }
}
.anim-inroad-node3 {
  animation: inroadNodeLit3 5.5s ease-in-out infinite;
}

/* ==========================================================================
   TRACK 4: BUSINESS SCALING ANIMATIONS
   ========================================================================== */
/* Step 01: Telemetry Radar */
@keyframes ekgHeartbeat {
  0%, 100% { transform: scaleY(0.9); opacity: 0.7; }
  50% { transform: scaleY(1.18); opacity: 1;  }
}
.anim-ekg-pulse {
  transform-origin: 60px 45px;
  animation: ekgHeartbeat 1.8s ease-in-out infinite;
}
.anim-radar-blip {
  transform-origin: 60px 45px;
  animation: questionPulse 1.8s ease-in-out infinite;
}

/* Step 02: Tooling Automation (Multiple Interleaved Counter-Rotating Gears) */
@keyframes gearRotateCW {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes gearRotateCCW {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* Primary Main Drive Gear A (Center: 45.6px 55.8px, Radius: 18px, 10 Teeth, CW) */
.anim-gear-a {
  transform-origin: 45.6px 55.8px;
  transform-box: view-box;
  animation: gearRotateCW 8s linear infinite;
}
.anim-gear-hub-a {
  transform-origin: 45.6px 55.8px;
  transform-box: view-box;
  animation: syndicateStaircase 2.5s ease-in-out infinite;
}

/* Secondary Interleaved Driven Gear B (Center: 78.0px 55.8px, Radius: 14.4px, 8 Teeth, CCW) */
.anim-gear-b {
  transform-origin: 78.0px 55.8px;
  transform-box: view-box;
  animation: gearRotateCCW 6.4s linear infinite;
}
.anim-gear-hub-b {
  transform-origin: 78.0px 55.8px;
  transform-box: view-box;
  animation: syndicateStaircase 2.5s ease-in-out infinite 0.4s;
}

/* Tertiary Interleaved Pinion Gear C (Center: 45.6px 27.0px, Radius: 10.8px, 6 Teeth, CCW) */
.anim-gear-c {
  transform-origin: 45.6px 27.0px;
  transform-box: view-box;
  animation: gearRotateCCW 4.8s linear infinite;
}
.anim-gear-hub-c {
  transform-origin: 45.6px 27.0px;
  transform-box: view-box;
  animation: syndicateStaircase 2.5s ease-in-out infinite 0.8s;
}

/* Step 03: Cloud SLA */
@keyframes serverLedBlink1 {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1;  }
}
@keyframes serverLedBlink2 {
  0%, 100% { opacity: 1;  }
  50% { opacity: 0.3; }
}
.anim-server-led1 {
  animation: serverLedBlink1 1.2s ease-in-out infinite;
}
.anim-server-led2 {
  animation: serverLedBlink2 1.2s ease-in-out infinite;
}
.anim-server-data {
  stroke-dasharray: 4 4;
  animation: runwayStream 1.5s linear infinite;
}

/* Step 04: Institutional Rhythm (Keplerian Two-Body Problem Orbit Path) */
@keyframes twoBodyOrbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.anim-twobody-system {
  transform-origin: 60px 45px;
  animation: twoBodyOrbit 5s linear infinite;
}

@keyframes mass1Pulse {
  0%, 100% { transform: scale(0.92);  }
  50% { transform: scale(1.15);  }
}
.anim-twobody-mass1 {
  transform-origin: 30px 45px;
  animation: mass1Pulse 2.5s ease-in-out infinite;
}

@keyframes mass2Pulse {
  0%, 100% { transform: scale(1.15);  }
  50% { transform: scale(0.9);  }
}
.anim-twobody-mass2 {
  transform-origin: 90px 45px;
  animation: mass2Pulse 2.5s ease-in-out infinite;
}

/* Card Front Content */
.card-front-content {
  margin-top: 0;
  padding-top: var(--space-xs);
}

.card-stage-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--space-3xs);
}

.card-stage-state {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.card-stage-pill {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
}

.card-stage-pill.state-danger {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
}

.card-stage-pill.state-warning {
  color: #fde68a;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.card-stage-pill.state-info {
  color: #bae6fd;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.card-stage-pill.state-success {
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
}

/* Flip Prompt Button / Indicator */
.card-flip-prompt {
  margin-top: var(--space-md);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  transition: color var(--transition-fast);
}

.card-flip-prompt.back {
  color: var(--text-muted);
  border-color: rgba(255, 255, 255, 0.08);
}

.flip-card:hover .card-flip-prompt {
  color: #ffffff;
}

/* Card Back Styles */
.card-back-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border-subtle);
}

.card-back-step {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  color: var(--text-accent);
}

.card-back-tag {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.card-back-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--space-xs);
}

.card-back-body .process-quote {
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-left: 3px solid var(--text-accent);
  padding-left: var(--space-sm);
  margin-bottom: var(--space-md);
  line-height: var(--leading-relaxed);
  min-height: 5.25rem;
  display: flex;
  align-items: flex-start;
}

.card-back-body .process-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}