/*
 * Service preview cards (#105): keyframes from Claude Design 'Service preview
 * cards' (project bdde0915), plus the play-state rules. Same stage as the
 * ambition mockups (.jkc-ac, 720x540, scaled by initAmbitionCards()).
 *
 * The markup carries its entry animations inline. They stay paused until
 * scStart() in app.js adds .is-in (in view, or the mega menu shows the card);
 * the continuous loops are set inline 950ms later, as in the design.
 */
/* Only once initAmbitionCards() has run (it sets .jkc-ac-ready, never under
   reduced motion): without JS the entries simply play once and stay. */
.jkc-ac-ready .jkc-sc:not(.is-in) * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  /* Resting frame = the designed end state, so drop every animation. */
  .jkc-sc * { animation: none !important; }
}

@keyframes jkcFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes jkcUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes jkcUpCenter { from { opacity: 0; transform: translate(-50%,-50%) translateY(8px) } to { opacity: 1; transform: translate(-50%,-50%) } }
@keyframes jkcSwLoop1 { 0%, 4% { background-color: #E7E9F2 } 10%, 84% { background-color: #04155E } 92%, 100% { background-color: #E7E9F2 } }
@keyframes jkcSwLoop2 { 0%, 14% { background-color: #E7E9F2 } 20%, 84% { background-color: #007AF4 } 92%, 100% { background-color: #E7E9F2 } }
@keyframes jkcSwLoop3 { 0%, 24% { background-color: #E7E9F2 } 30%, 84% { background-color: #B99CFF } 92%, 100% { background-color: #E7E9F2 } }
@keyframes jkcSwLoop4 { 0%, 34% { background-color: #E7E9F2 } 40%, 84% { background-color: #F49453 } 92%, 100% { background-color: #E7E9F2 } }
@keyframes jkcHexLoop1 { 0%, 8% { opacity: .25 } 14%, 84% { opacity: 1 } 92%, 100% { opacity: .25 } }
@keyframes jkcHexLoop2 { 0%, 18% { opacity: .25 } 24%, 84% { opacity: 1 } 92%, 100% { opacity: .25 } }
@keyframes jkcHexLoop3 { 0%, 28% { opacity: .25 } 34%, 84% { opacity: 1 } 92%, 100% { opacity: .25 } }
@keyframes jkcHexLoop4 { 0%, 38% { opacity: .25 } 44%, 84% { opacity: 1 } 92%, 100% { opacity: .25 } }
@keyframes jkcMarkLoop { 0%, 40% { opacity: 0; transform: scale(.55) } 50% { opacity: 1; transform: scale(1.08) } 58%, 84% { opacity: 1; transform: scale(1) } 92%, 100% { opacity: 0; transform: scale(.55) } }
@keyframes jkcCursorMove { 0%, 55% { opacity: 0; transform: translate(58px,38px) scale(1) } 65% { opacity: 1; transform: translate(4px,2px) scale(1) } 72% { opacity: 1; transform: translate(4px,2px) scale(.8) } 80%, 90% { opacity: 1; transform: translate(4px,2px) scale(1) } 96%, 100% { opacity: 0; transform: translate(58px,38px) scale(1) } }
@keyframes jkcCtaPulse { 0%, 68% { background-color: #297F49; transform: scale(1) } 74% { background-color: #04155E; transform: scale(.94) } 80%, 90% { background-color: #297F49; transform: scale(1) } 100% { background-color: #297F49; transform: scale(1) } }
@keyframes jkcRankShift1 { 0%, 20% { transform: translateY(0); opacity: 1 } 45%, 75% { transform: translateY(52px); opacity: .5 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes jkcRankShift2 { 0%, 20% { transform: translateY(0); opacity: .55 } 45%, 75% { transform: translateY(52px); opacity: .32 } 100% { transform: translateY(0); opacity: .55 } }
@keyframes jkcRankClimb3 { 0%, 20% { transform: translateY(0); opacity: .32 } 45%, 75% { transform: translateY(-104px); opacity: 1 } 100% { transform: translateY(0); opacity: .32 } }
@keyframes jkcSparkPulse { 0%, 40% { opacity: 0; transform: scale(.5) } 52% { opacity: 1; transform: scale(1.2) } 60%, 72% { opacity: 1; transform: scale(1) } 85%, 100% { opacity: 0; transform: scale(.5) } }
@keyframes jkcAvatarPop1 { 0%, 6% { transform: scale(.85); opacity: .5 } 14%, 84% { transform: scale(1); opacity: 1 } 92%, 100% { transform: scale(.85); opacity: .5 } }
@keyframes jkcAvatarPop2 { 0%, 16% { transform: scale(.85); opacity: .5 } 24%, 84% { transform: scale(1); opacity: 1 } 92%, 100% { transform: scale(.85); opacity: .5 } }
@keyframes jkcAvatarPop3 { 0%, 26% { transform: scale(.85); opacity: .5 } 34%, 84% { transform: scale(1); opacity: 1 } 92%, 100% { transform: scale(.85); opacity: .5 } }
@keyframes jkcBadgePulse { 0%, 44% { transform: scale(1); background-color: #F0F7FE } 50% { transform: scale(1.06); background-color: #EAFBF0 } 58%, 84% { transform: scale(1); background-color: #F0F7FE } 100% { transform: scale(1); background-color: #F0F7FE } }
@keyframes jkcStripeLoop1 { 0%, 4% { background-color: #E7E9F2 } 10%, 84% { background-color: #04155E } 92%, 100% { background-color: #E7E9F2 } }
@keyframes jkcStripeLoop2 { 0%, 14% { background-color: #E7E9F2 } 20%, 84% { background-color: #007AF4 } 92%, 100% { background-color: #E7E9F2 } }
@keyframes jkcStripeLoop3 { 0%, 24% { background-color: #E7E9F2 } 30%, 84% { background-color: #F49453 } 92%, 100% { background-color: #E7E9F2 } }
@keyframes jkcLiftBounce1 { 0%, 6% { transform: translateY(0) } 14% { transform: translateY(-8px) } 22%, 100% { transform: translateY(0) } }
@keyframes jkcLiftBounce2 { 0%, 16% { transform: translateY(0) } 24% { transform: translateY(-8px) } 32%, 100% { transform: translateY(0) } }
@keyframes jkcLiftBounce3 { 0%, 26% { transform: translateY(0) } 34% { transform: translateY(-8px) } 42%, 100% { transform: translateY(0) } }
@keyframes jkcCartBadge { 0%, 58% { transform: scale(0); opacity: 0 } 66% { transform: scale(1.25); opacity: 1 } 74%, 86% { transform: scale(1); opacity: 1 } 96%, 100% { transform: scale(0); opacity: 0 } }
@keyframes jkcStepFill1 { 0%, 10% { background-color: rgba(4,21,94,0.12) } 18%, 84% { background-color: #62CC88 } 92%, 100% { background-color: rgba(4,21,94,0.12) } }
@keyframes jkcStepFill2 { 0%, 32% { background-color: rgba(4,21,94,0.12) } 40%, 84% { background-color: #62CC88 } 92%, 100% { background-color: rgba(4,21,94,0.12) } }
@keyframes jkcStepFill3 { 0%, 54% { background-color: rgba(4,21,94,0.12) } 62%, 84% { background-color: #62CC88 } 92%, 100% { background-color: rgba(4,21,94,0.12) } }
@keyframes jkcLineFill1 { 0%, 10% { transform: scaleX(0) } 18%, 84% { transform: scaleX(1) } 92%, 100% { transform: scaleX(0) } }
@keyframes jkcLineFill2 { 0%, 32% { transform: scaleX(0) } 40%, 84% { transform: scaleX(1) } 92%, 100% { transform: scaleX(0) } }
@keyframes jkcTotalPulse { 0%, 60% { transform: scale(1) } 66% { transform: scale(1.08) } 74%, 100% { transform: scale(1) } }
@keyframes jkcBarFillA { 0%, 4% { transform: scaleY(.15) } 14%, 84% { transform: scaleY(1) } 92%, 100% { transform: scaleY(.15) } }
@keyframes jkcBarFillB { 0%, 14% { transform: scaleY(.15) } 24%, 84% { transform: scaleY(.7) } 92%, 100% { transform: scaleY(.15) } }
@keyframes jkcBarFillC { 0%, 24% { transform: scaleY(.15) } 34%, 84% { transform: scaleY(.9) } 92%, 100% { transform: scaleY(.15) } }
@keyframes jkcToggleTrack { 0%, 44% { background-color: rgba(4,21,94,0.12) } 52%, 84% { background-color: #62CC88 } 92%, 100% { background-color: rgba(4,21,94,0.12) } }
@keyframes jkcToggleKnob { 0%, 44% { transform: translateX(0) } 52%, 84% { transform: translateX(18px) } 92%, 100% { transform: translateX(0) } }
@keyframes jkcPacketFlow1 { 0%, 14% { opacity: 0; left: 8% } 18% { opacity: 1; left: 8% } 30% { opacity: 1; left: 50% } 36%, 42% { opacity: 0; left: 50% } 100% { opacity: 0; left: 8% } }
@keyframes jkcPacketFlow2 { 0%, 46% { opacity: 0; left: 50% } 52% { opacity: 1; left: 50% } 64% { opacity: 1; left: 92% } 70%, 76% { opacity: 0; left: 92% } 100% { opacity: 0; left: 50% } }
@keyframes jkcNodePulse1 { 0%, 4% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,122,244,0) } 10% { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(0,122,244,.18) } 18%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,122,244,0) } }
@keyframes jkcNodePulse2 { 0%, 24% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,122,244,0) } 30% { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(0,122,244,.18) } 38%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,122,244,0) } }
@keyframes jkcNodePulse3 { 0%, 58% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,122,244,0) } 64% { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(0,122,244,.18) } 72%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,122,244,0) } }
@keyframes jkcFlowHighlight1 { 0%, 8% { background-color: #F1F3F8 } 16%, 40% { background-color: #DBEAFD } 48%, 100% { background-color: #F1F3F8 } }
@keyframes jkcFlowHighlight2 { 0%, 32% { background-color: #F1F3F8 } 40%, 64% { background-color: #DBEAFD } 72%, 100% { background-color: #F1F3F8 } }
@keyframes jkcFlowHighlight3 { 0%, 56% { background-color: #F1F3F8 } 64%, 88% { background-color: #DBEAFD } 96%, 100% { background-color: #F1F3F8 } }
@keyframes jkcCheckPop { 0%, 60% { opacity: 0; transform: scale(.4) } 70% { opacity: 1; transform: scale(1.25) } 78%, 92% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(.4) } }
@keyframes jkcStatusFade1 { 0%, 4% { opacity: 1 } 26%, 100% { opacity: 0 } }
@keyframes jkcStatusFade2 { 0%, 30% { opacity: 0 } 36%, 60% { opacity: 1 } 66%, 100% { opacity: 0 } }
@keyframes jkcStatusFade3 { 0%, 64% { opacity: 0 } 70%, 94% { opacity: 1 } 100% { opacity: 0 } }
@keyframes jkcRingFill { 0%, 4% { transform: scaleX(0) } 90%, 100% { transform: scaleX(1) } }
@keyframes jkcAdRankClimb { 0%, 20% { transform: translateY(0) } 45%, 75% { transform: translateY(-56px) } 100% { transform: translateY(0) } }
@keyframes jkcCoinPop { 0%, 44% { opacity: 0; transform: translateY(0) scale(.6) } 54% { opacity: 1; transform: translateY(-10px) scale(1) } 64%, 78% { opacity: 0; transform: translateY(-18px) scale(.9) } 100% { opacity: 0; transform: translateY(0) scale(.6) } }
@keyframes jkcBudgetFill { 0%, 6% { transform: scaleX(0) } 60%, 84% { transform: scaleX(1) } 92%, 100% { transform: scaleX(0) } }
@keyframes jkcHeartPop { 0%, 44% { transform: scale(1); color: rgba(4,21,94,0.3) } 52% { transform: scale(1.35); color: #F49453 } 60%, 84% { transform: scale(1); color: #F49453 } 92%, 100% { transform: scale(1); color: rgba(4,21,94,0.3) } }
@keyframes jkcEngageFill { 0%, 10% { transform: scaleX(.2) } 60%, 84% { transform: scaleX(1) } 92%, 100% { transform: scaleX(.2) } }
@keyframes jkcEnvelopeFlow { 0%, 6% { left: 4%; opacity: 1 } 30% { left: 36%; opacity: 1 } 36% { opacity: 0 } 40% { left: 36%; opacity: 0 } 46% { opacity: 1 } 64% { left: 68%; opacity: 1 } 70% { opacity: 0 } 100% { left: 4%; opacity: 0 } }
@keyframes jkcFunnelHighlight1 { 0%, 8% { background-color: #F1F3F8 } 16%, 32% { background-color: #DBEAFD } 40%, 100% { background-color: #F1F3F8 } }
@keyframes jkcFunnelHighlight2 { 0%, 42% { background-color: #F1F3F8 } 50%, 66% { background-color: #DBEAFD } 74%, 100% { background-color: #F1F3F8 } }
@keyframes jkcFunnelHighlight3 { 0%, 76% { background-color: #F1F3F8 } 84%, 96% { background-color: #DBEAFD } 100% { background-color: #F1F3F8 } }
@keyframes jkcStepState1 { 0%, 4% { background-color: #F1F3F8; color: #04155E } 10%, 20% { background-color: #007AF4; color: #fff } 26%, 100% { background-color: #62CC88; color: #04155E } }
@keyframes jkcStepState2 { 0%, 26% { background-color: #F1F3F8; color: #04155E } 32%, 42% { background-color: #007AF4; color: #fff } 48%, 100% { background-color: #62CC88; color: #04155E } }
@keyframes jkcStepState3 { 0%, 48% { background-color: #F1F3F8; color: #04155E } 54%, 64% { background-color: #007AF4; color: #fff } 70%, 100% { background-color: #62CC88; color: #04155E } }
@keyframes jkcAutoLine1 { 0%, 20% { transform: scaleX(0) } 26%, 94% { transform: scaleX(1) } 100% { transform: scaleX(0) } }
@keyframes jkcAutoLine2 { 0%, 42% { transform: scaleX(0) } 48%, 94% { transform: scaleX(1) } 100% { transform: scaleX(0) } }
@keyframes jkcChartWave { 0%, 100% { clip-path: polygon(0% 62%,14% 48%,28% 55%,42% 30%,57% 40%,71% 18%,85% 32%,100% 22%,100% 100%,0% 100%) } 50% { clip-path: polygon(0% 40%,14% 58%,28% 32%,42% 50%,57% 20%,71% 38%,85% 15%,100% 36%,100% 100%,0% 100%) } }
@keyframes jkcWdHeroDrag { 0%, 8% { opacity: 0; transform: translateX(70px) translateY(-6px) } 26%, 86% { opacity: 1; transform: translateX(0) translateY(0) } 94%, 100% { opacity: 0; transform: translateX(70px) translateY(-6px) } }
@keyframes jkcWdType1 { 0%, 30% { clip-path: inset(0 100% 0 0) } 48%, 88% { clip-path: inset(0 0% 0 0) } 96%, 100% { clip-path: inset(0 100% 0 0) } }
@keyframes jkcWdType2 { 0%, 48% { clip-path: inset(0 100% 0 0) } 64%, 88% { clip-path: inset(0 0% 0 0) } 96%, 100% { clip-path: inset(0 100% 0 0) } }
@keyframes jkcWdBtnPop { 0%, 54% { opacity: 0; transform: scale(.7) } 60% { opacity: 1; transform: scale(1.08) } 66%, 88% { opacity: 1; transform: scale(1) } 96%, 100% { opacity: 0; transform: scale(.7) } }
@keyframes jkcWdCursorMove { 0%, 4% { opacity: 0; top: 8%; left: 78% } 10% { opacity: 1; top: 8%; left: 78% } 26% { opacity: 1; top: 20%; left: 8% } 32%, 46% { opacity: 1; top: 20%; left: 8% } 52% { opacity: 1; top: 78%; left: 32% } 60% { opacity: 1; top: 82%; left: 28%; transform: scale(.85) } 68%, 84% { opacity: 1; top: 82%; left: 28%; transform: scale(1) } 92%, 100% { opacity: 0; top: 8%; left: 78% } }
@keyframes jkcHexDotTravel { 0%, 4% { opacity: 0; transform: translateX(0) } 8% { opacity: 1; transform: translateX(0) } 30% { opacity: 1; transform: translateX(130px) } 38%, 100% { opacity: 0; transform: translateX(130px) } }
@keyframes jkcWdSelect { 0%, 8% { opacity: 0 } 12%, 26% { opacity: 1 } 32%, 100% { opacity: 0 } }
@keyframes jkcWdBadge { 0%, 80% { opacity: 0; transform: scale(.6) translateY(6px) } 86% { opacity: 1; transform: scale(1.08) translateY(0) } 90%, 96% { opacity: 1; transform: scale(1) translateY(0) } 100% { opacity: 0; transform: scale(.6) translateY(6px) } }
@keyframes jkcEmaHero { 0%, 6% { opacity: 0; transform: translateY(14px) scale(.96) } 16%, 84% { opacity: 1; transform: translateY(0) scale(1) } 94%, 100% { opacity: 0; transform: translateY(14px) scale(.96) } }
@keyframes jkcEmaLine1 { 0%, 14% { transform: scaleX(0) } 22%, 84% { transform: scaleX(1) } 92%, 100% { transform: scaleX(0) } }
@keyframes jkcEmaLine2 { 0%, 24% { transform: scaleX(0) } 32%, 84% { transform: scaleX(1) } 92%, 100% { transform: scaleX(0) } }
@keyframes jkcEmaStat { 0%, 60% { opacity: 0; transform: translateY(6px) } 68%, 88% { opacity: 1; transform: translateY(0) } 96%, 100% { opacity: 0; transform: translateY(6px) } }
@keyframes jkcAdsTitleClick { 0%, 66% { text-decoration-color: transparent } 72%, 92% { text-decoration-color: #007AF4 } 100% { text-decoration-color: transparent } }
@keyframes jkcAdsCursorMove { 0%, 50% { opacity: 0; top: 22px; left: 60% } 58% { opacity: 1; top: 22px; left: 60% } 68% { opacity: 1; top: 22px; left: 2% } 74% { opacity: 1; top: 22px; left: 2%; transform: scale(.82) } 82%, 92% { opacity: 1; top: 22px; left: 2%; transform: scale(1) } 100% { opacity: 0; top: 22px; left: 60% } }
@keyframes jkcAdsCoin { 0%, 70% { opacity: 0; transform: translateY(0) scale(.6) } 78% { opacity: 1; transform: translateY(-10px) scale(1) } 86%, 90% { opacity: 0; transform: translateY(-18px) scale(.9) } 100% { opacity: 0; transform: translateY(0) scale(.6) } }
@keyframes jkcMapDotPulse { 0%, 50% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,122,244,0) } 58% { transform: scale(1.15); box-shadow: 0 0 0 12px rgba(0,122,244,.18) } 68%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,122,244,0) } }
@keyframes jkcMapLabelPop { 0%, 54% { opacity: 0; transform: translateY(4px) } 62%, 100% { opacity: 1; transform: translateY(0) } }
@keyframes jkcRoadmapState1 { 0% { background-color: #F1F3F8 } 10%, 18% { background-color: #DBEAFD } 24%, 90% { background-color: #62CC88 } 100% { background-color: #F1F3F8 } }
@keyframes jkcRoadmapState2 { 0%, 24% { background-color: #F1F3F8 } 30%, 38% { background-color: #DBEAFD } 44%, 90% { background-color: #62CC88 } 100% { background-color: #F1F3F8 } }
@keyframes jkcRoadmapState3 { 0%, 44% { background-color: #F1F3F8 } 50%, 58% { background-color: #DBEAFD } 64%, 90% { background-color: #62CC88 } 100% { background-color: #F1F3F8 } }
@keyframes jkcRoadmapState4 { 0%, 64% { background-color: #F1F3F8 } 70%, 78% { background-color: #DBEAFD } 84%, 90% { background-color: #62CC88 } 100% { background-color: #F1F3F8 } }
@keyframes jkcRoadmapLine1 { 0%, 18% { transform: scaleX(0) } 24%, 100% { transform: scaleX(1) } }
@keyframes jkcRoadmapLine2 { 0%, 38% { transform: scaleX(0) } 44%, 100% { transform: scaleX(1) } }
@keyframes jkcRoadmapLine3 { 0%, 58% { transform: scaleX(0) } 64%, 100% { transform: scaleX(1) } }
@keyframes jkcRoadmapDraw { 0%, 6% { stroke-dashoffset: 1 } 68% { stroke-dashoffset: 0 } 82% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 1 } }
@keyframes jkcResearchBar1 { 0%, 6% { transform: scaleX(0) } 16%, 84% { transform: scaleX(1) } 92%, 100% { transform: scaleX(0) } }
@keyframes jkcResearchBar2 { 0%, 16% { transform: scaleX(0) } 26%, 84% { transform: scaleX(1) } 92%, 100% { transform: scaleX(0) } }
@keyframes jkcResearchBar3 { 0%, 26% { transform: scaleX(0) } 36%, 84% { transform: scaleX(1) } 92%, 100% { transform: scaleX(0) } }