/* The mission clips: each card shows a phone running that mission's real screen,
   from the app's own copy, ending on the success screen. Drawn at 342x240 and scaled
   to the card by home.js. Every name lives under .clip, and every animation is mc-. */
/* ---------- the clip, the phone in it ---------- */
.clip { position: relative; width: 342px; height: 240px; border-radius: 22px; overflow: hidden; isolation: isolate; direction: rtl; font-family: 'Heebo', sans-serif; color: #fff; background: radial-gradient(120% 100% at 50% 0%, #22212e, #0d0d12 70%); }
.clip::after { content: ''; position: absolute; inset: 0; z-index: 9; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); pointer-events: none; }
.clip .glow { position: absolute; left: 21px; top: 30px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(218,182,122,0.24), rgba(218,182,122,0) 65%); opacity: 0.55; animation: mc-glow 7s infinite; }
.clip .cphone { position: absolute; left: 83px; top: 16px; width: 176px; height: 367px; box-sizing: border-box; padding: 6px; border-radius: 32px; background: #050506; box-shadow: 0 0 0 1.5px #3a3a40, 0 0 0 3px #111114, 0 24px 50px rgba(0,0,0,0.6); animation: mc-ph 7s infinite; }
.clip .scr { position: relative; width: 164px; height: 355px; border-radius: 26px; overflow: hidden; background: #101012; }
.clip .isl { position: absolute; top: 6px; left: 57px; z-index: 8; width: 50px; height: 14px; border-radius: 7px; background: #000; }
.clip .ssvg { position: absolute; left: 0; top: 0; width: 164px; height: 218px; display: block; }
@keyframes mc-glow { 0%, 68% { opacity: 0.55; transform: scale(0.9); } 76%, 92% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0.55; transform: scale(0.9); } }
@keyframes mc-ph { 0% { transform: translateY(36px); opacity: 0; animation-timing-function: cubic-bezier(0.22,1,0.36,1); } 6%, 93% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(0.55,0,1,0.45); } 98%, 100% { transform: translateY(24px); opacity: 0; } }
/* ---------- the app's success screen ---------- */
.clip .win { position: absolute; inset: 0; z-index: 7; opacity: 0; background: linear-gradient(180deg, #1d2443 0%, #141626 30%, #101012 60%); animation: mc-win 7s infinite; }
.clip .win-in { position: absolute; inset: 0; animation: mc-winin 7s infinite; }
.clip .win-t { position: absolute; top: 30px; left: 0; right: 0; text-align: center; font-weight: 700; font-size: 11px; line-height: 14px; color: #98989D; }
.clip .win-n { position: absolute; top: 46px; left: 0; right: 0; display: flex; justify-content: center; }
.clip .win-reel { height: 52px; overflow: hidden; }
.clip .win-reel div { animation: mc-win-reel 7s infinite; }
.clip .win-reel span { display: block; height: 52px; font-weight: 800; font-size: 48px; line-height: 52px; letter-spacing: -1.5px; text-align: center; }
.clip .win-u { position: absolute; top: 100px; left: 0; right: 0; text-align: center; font-weight: 600; font-size: 10px; line-height: 13px; color: #98989D; }
.clip .win-st { position: absolute; top: 122px; left: 12px; right: 12px; display: flex; gap: 6px; }
.clip .win-s { flex: 1; padding: 7px 4px; border-radius: 10px; background: #1E1E22; text-align: center; }
.clip .win-s b { display: block; direction: ltr; font-weight: 700; font-size: 13px; line-height: 16px; }
.clip .win-s span { display: block; font-weight: 500; font-size: 8px; line-height: 11px; color: #98989D; white-space: nowrap; }
.clip .win-b { position: absolute; top: 176px; left: 22px; right: 22px; height: 28px; border-radius: 14px; background: #E8DFD2; color: #141210; font-weight: 700; font-size: 11px; line-height: 28px; text-align: center; }
.clip .cf i { position: absolute; top: -12px; width: 5px; height: 8px; border-radius: 1px; opacity: 0; animation: mc-cf 7s infinite; }
.clip .cf i.l { animation-name: mc-cf2; }
@keyframes mc-win { 0%, 69% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes mc-winin { 0%, 70% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(0.22,1,0.36,1); } 76%, 100% { opacity: 1; transform: none; } }
@keyframes mc-win-reel { 0%, 76% { transform: translateY(0); animation-timing-function: cubic-bezier(0.34,1.56,0.64,1); } 80%, 100% { transform: translateY(-52px); } }
@keyframes mc-cf { 0%, 70% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 71% { opacity: 1; transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(0.3,0.1,0.7,1); } 92% { opacity: 1; transform: translate(12px, 210px) rotate(460deg); } 96%, 100% { opacity: 0; transform: translate(14px, 230px) rotate(520deg); } }
@keyframes mc-cf2 { 0%, 70% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 71% { opacity: 1; transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(0.3,0.1,0.7,1); } 92% { opacity: 1; transform: translate(-12px, 210px) rotate(-420deg); } 96%, 100% { opacity: 0; transform: translate(-14px, 230px) rotate(-480deg); } }
/* ---------- push-ups: the front camera on the floor ---------- */
.clip .pu-cam { position: absolute; inset: 0; background: linear-gradient(180deg, #2a2631 0%, #2f2a35 66%, #3a3139 100%); }
.clip .pu-vig { position: absolute; inset: 0; background: radial-gradient(100% 80% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.4) 100%); }
.clip .lmb { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.clip .ov { fill: none; stroke: #F1CD7F; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.clip .kp { fill: #fff; stroke: #F1CD7F; stroke-width: 1; }
.clip .pu-body { animation: mc-pu-body 7s infinite; }
.clip .pu-fore { animation: mc-pu-fore 7s infinite; }
.clip .pu-upper { animation: mc-pu-upper 7s infinite; }
.clip .pu-pw { position: absolute; top: 30px; left: 0; right: 0; display: flex; justify-content: center; }
.clip .pu-pill { padding: 4px 10px; border-radius: 100px; font-weight: 800; font-size: 10px; line-height: 13px; white-space: nowrap; }
.clip .pu-warn { animation: mc-pu-warn 7s infinite; }
.clip .pu-warn .pu-pill { background: rgba(0,0,0,0.62); }
.clip .pu-go { opacity: 0; animation: mc-pu-go 7s infinite; }
.clip .pu-go .pu-pill { background: rgba(52,199,89,0.92); }
.clip .bars { position: absolute; display: flex; gap: 3px; }
.clip .bars i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.22); }
.clip .bars i.on { background: #34C759; }
.clip .pu-bars { top: 166px; left: 12px; right: 12px; }
.clip .pu-s7 { animation: mc-pu-s7 7s infinite; }
.clip .pu-s8 { animation: mc-pu-s8 7s infinite; }
.clip .pu-s9 { animation: mc-pu-s9 7s infinite; }
.clip .pu-s10 { animation: mc-pu-s10 7s infinite; }
.clip .pu-cnt { position: absolute; top: 178px; left: 0; right: 0; display: flex; justify-content: center; direction: ltr; font-weight: 800; font-size: 28px; line-height: 32px; }
.clip .pu-reel { width: 36px; height: 32px; overflow: hidden; }
.clip .pu-reel div { animation: mc-pu-reel 7s infinite; }
.clip .pu-reel span { display: block; height: 32px; text-align: right; }
/* The person holds still while the phone rises into place (until 3.6%), so the two
   motions never cancel out. Then four 1.1s reps: a beat at the top, 0.5s down, a beat
   at the bottom, 0.44s up. The last rep lands at 65.4%, before the success screen. */
@keyframes mc-pu-body {
  0%, 18.214%, 33.928%, 49.642%, 65.356%, 100% { transform: rotate(0deg); animation-timing-function: linear; }
  3.643%, 19.357%, 35.071%, 50.785% { transform: rotate(0deg); animation-timing-function: ease-in; }
  7.214%, 22.928%, 38.642%, 54.356% { transform: rotate(-8.415deg); animation-timing-function: ease-out; }
  10.786%, 26.5%, 42.214%, 57.928% { transform: rotate(-16.83deg); animation-timing-function: linear; }
  11.929%, 27.643%, 43.357%, 59.071% { transform: rotate(-16.83deg); animation-timing-function: ease-in; }
  15.072%, 30.786%, 46.5%, 62.214% { transform: rotate(-8.415deg); animation-timing-function: ease-out; }
}
@keyframes mc-pu-fore {
  0%, 18.214%, 33.928%, 49.642%, 65.356%, 100% { transform: rotate(0deg); animation-timing-function: linear; }
  3.643%, 19.357%, 35.071%, 50.785% { transform: rotate(0deg); animation-timing-function: ease-in; }
  7.214%, 22.928%, 38.642%, 54.356% { transform: rotate(26.56deg); animation-timing-function: ease-out; }
  10.786%, 26.5%, 42.214%, 57.928% { transform: rotate(25.78deg); animation-timing-function: linear; }
  11.929%, 27.643%, 43.357%, 59.071% { transform: rotate(25.78deg); animation-timing-function: ease-in; }
  15.072%, 30.786%, 46.5%, 62.214% { transform: rotate(26.56deg); animation-timing-function: ease-out; }
}
@keyframes mc-pu-upper {
  0%, 18.214%, 33.928%, 49.642%, 65.356%, 100% { transform: rotate(0deg); animation-timing-function: linear; }
  3.643%, 19.357%, 35.071%, 50.785% { transform: rotate(0deg); animation-timing-function: ease-in; }
  7.214%, 22.928%, 38.642%, 54.356% { transform: rotate(-73.94deg); animation-timing-function: ease-out; }
  10.786%, 26.5%, 42.214%, 57.928% { transform: rotate(-114.21deg); animation-timing-function: linear; }
  11.929%, 27.643%, 43.357%, 59.071% { transform: rotate(-114.21deg); animation-timing-function: ease-in; }
  15.072%, 30.786%, 46.5%, 62.214% { transform: rotate(-73.94deg); animation-timing-function: ease-out; }
}
@keyframes mc-pu-warn { 0%, 2.5% { opacity: 1; } 4%, 100% { opacity: 0; } }
@keyframes mc-pu-go { 0%, 2.5% { opacity: 0; transform: scale(0.9); } 4.5%, 100% { opacity: 1; transform: none; } }
@keyframes mc-pu-reel {
  0%, 17.7% { transform: translateY(0); animation-timing-function: cubic-bezier(0.34,1.56,0.64,1); }
  20.1%, 33.4% { transform: translateY(-32px); animation-timing-function: cubic-bezier(0.34,1.56,0.64,1); }
  35.8%, 49.1% { transform: translateY(-64px); animation-timing-function: cubic-bezier(0.34,1.56,0.64,1); }
  51.5%, 64.8% { transform: translateY(-96px); animation-timing-function: cubic-bezier(0.34,1.56,0.64,1); }
  67.2%, 100% { transform: translateY(-128px); }
}
@keyframes mc-pu-s7 { 0%, 17.9% { background: rgba(255,255,255,0.22); } 19.1%, 100% { background: #34C759; } }
@keyframes mc-pu-s8 { 0%, 33.6% { background: rgba(255,255,255,0.22); } 34.8%, 100% { background: #34C759; } }
@keyframes mc-pu-s9 { 0%, 49.3% { background: rgba(255,255,255,0.22); } 50.5%, 100% { background: #34C759; } }
@keyframes mc-pu-s10 { 0%, 65.1% { background: rgba(255,255,255,0.22); } 66.3%, 100% { background: #34C759; } }
/* ---------- math: problem, answer, keypad ---------- */
.clip .mt-c { position: absolute; top: 26px; left: 0; right: 0; height: 12px; }
.clip .mt-c span { position: absolute; left: 0; right: 0; text-align: center; direction: ltr; font-weight: 700; font-size: 9px; line-height: 12px; color: #98989D; }
.clip .mt-q1 { animation: mc-mt-q1 7s infinite; }
.clip .mt-q2 { opacity: 0; animation: mc-mt-q2 7s infinite; }
.clip .mt-pr { position: absolute; top: 40px; left: 0; right: 0; text-align: center; font-weight: 500; font-size: 8.5px; line-height: 12px; color: #98989D; }
.clip .mt-p { position: absolute; top: 54px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.clip .mt-p1 { animation: mc-mt-p1 7s infinite; }
.clip .mt-p2 { opacity: 0; animation: mc-mt-p2 7s infinite; }
.clip .mt-eq { direction: ltr; font-weight: 800; font-size: 26px; line-height: 30px; letter-spacing: -0.5px; }
.clip .mt-a { direction: ltr; width: 104px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: #1E1E22; font-weight: 800; font-size: 20px; line-height: 24px; }
.clip .mt-a span { display: inline-block; opacity: 0; }
.clip .mt-car { width: 1.5px; height: 18px; margin-left: 2px; background: #DAB67A; animation: mc-blink 1s steps(1) infinite; }
.clip .mt-ok1 { animation: mc-mt-ok1 7s infinite; }
.clip .mt-ok2 { animation: mc-mt-ok2 7s infinite; }
.clip .mt-d1 { animation: mc-mt-d1 7s infinite; }
.clip .mt-d2 { animation: mc-mt-d2 7s infinite; }
.clip .mt-d3 { animation: mc-mt-d3 7s infinite; }
.clip .mt-d4 { animation: mc-mt-d4 7s infinite; }
.clip .mt-kp { position: absolute; top: 128px; left: 10px; right: 10px; direction: ltr; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.clip .mt-kp i { height: 20px; border-radius: 6px; background: #1E1E22; font-style: normal; font-weight: 700; font-size: 11px; line-height: 20px; text-align: center; }
.clip .mt-kp i.ck { background: #E8DFD2; color: #141210; }
.clip .k7 { animation: mc-k7 7s infinite; }
.clip .k5 { animation: mc-k5 7s infinite; }
.clip .k6 { animation: mc-k6 7s infinite; }
.clip .k3 { animation: mc-k3 7s infinite; }
.clip .kc { animation: mc-kc 7s infinite; }
@keyframes mc-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes mc-mt-q1 { 0%, 31% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes mc-mt-q2 { 0%, 31% { opacity: 0; } 34%, 100% { opacity: 1; } }
@keyframes mc-mt-p1 { 0%, 26% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 33%, 100% { transform: translateX(90px); opacity: 0; } }
@keyframes mc-mt-p2 { 0%, 27% { transform: translateX(-90px); opacity: 0; animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 34%, 100% { transform: none; opacity: 1; } }
@keyframes mc-mt-d1 { 0%, 9.5% { opacity: 0; transform: translateY(4px); } 11%, 100% { opacity: 1; transform: none; } }
@keyframes mc-mt-d2 { 0%, 16.5% { opacity: 0; transform: translateY(4px); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes mc-mt-d3 { 0%, 41.5% { opacity: 0; transform: translateY(4px); } 43%, 100% { opacity: 1; transform: none; } }
@keyframes mc-mt-d4 { 0%, 49.5% { opacity: 0; transform: translateY(4px); } 51%, 100% { opacity: 1; transform: none; } }
@keyframes mc-mt-ok1 { 0%, 21% { background: #1E1E22; } 22.5%, 100% { background: rgba(52,199,89,0.22); } }
@keyframes mc-mt-ok2 { 0%, 54% { background: #1E1E22; } 55.5%, 100% { background: rgba(52,199,89,0.22); } }
@keyframes mc-k7 { 0%, 9.5% { background: #1E1E22; transform: none; } 10% { background: #4A4A50; transform: scale(0.9); } 12%, 100% { background: #1E1E22; transform: none; } }
@keyframes mc-k5 { 0%, 16.5% { background: #1E1E22; transform: none; } 17% { background: #4A4A50; transform: scale(0.9); } 19%, 100% { background: #1E1E22; transform: none; } }
@keyframes mc-k6 { 0%, 41.5% { background: #1E1E22; transform: none; } 42% { background: #4A4A50; transform: scale(0.9); } 44%, 100% { background: #1E1E22; transform: none; } }
@keyframes mc-k3 { 0%, 49.5% { background: #1E1E22; transform: none; } 50% { background: #4A4A50; transform: scale(0.9); } 52%, 100% { background: #1E1E22; transform: none; } }
@keyframes mc-kc { 0%, 20.5% { transform: none; } 21% { transform: scale(0.88); } 23%, 53.5% { transform: none; } 54% { transform: scale(0.88); } 56%, 100% { transform: none; } }
/* ---------- photo missions: header, viewfinder, status, shutter ---------- */
.clip .ph-need { position: absolute; top: 26px; left: 0; right: 0; text-align: center; font-weight: 600; font-size: 8px; line-height: 11px; color: #DAB67A; }
.clip .ph-tgt { position: absolute; top: 37px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 13px; line-height: 17px; }
.clip .vf { position: absolute; top: 60px; left: 8px; width: 148px; height: 104px; border-radius: 12px; overflow: hidden; background: #000; }
.clip .vfin { position: absolute; left: 0; top: 0; width: 342px; height: 240px; overflow: hidden; transform: scale(0.43275); transform-origin: 0 0; }
.clip .vffl { position: absolute; inset: 0; background: #fff; opacity: 0; }
.clip .st { position: absolute; top: 170px; left: 4px; right: 4px; height: 14px; }
.clip .st div { position: absolute; left: 0; right: 0; text-align: center; font-weight: 600; font-size: 8px; line-height: 14px; white-space: nowrap; opacity: 0; }
.clip .st .hint { color: #98989D; }
.clip .st .fail span { display: inline-block; padding: 0 7px; border-radius: 7px; background: rgba(255,69,58,0.85); color: #fff; }
.clip .sh { position: absolute; top: 188px; left: 68px; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
.clip .sh i { width: 20px; height: 20px; border-radius: 50%; background: #fff; }
/* toothbrush: aim at the soap, refused, aim at the brush */
.clip .tb-scene { position: absolute; left: -12px; top: -12px; width: 366px; height: 264px; transform-origin: 183px 132px; animation: mc-tb-pan 7s infinite; }
.clip .tb-scene svg { display: block; width: 366px; height: 264px; }
.clip .tb-fl { animation: mc-tb-fl 7s infinite; }
.clip .tb-sh { animation: mc-tb-sh 7s infinite; }
.clip .tb-h { animation: mc-tb-h 7s infinite; }
.clip .tb-k { animation: mc-tb-k 7s infinite; }
.clip .tb-x { animation: mc-tb-x 7s infinite; }
@keyframes mc-tb-pan { 0% { transform: translate(84px, 6px) scale(1.18); } 10%, 34% { transform: translate(90px, 0px) scale(1.18); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 44%, 100% { transform: translate(-50px, -6px) scale(1.18); } }
@keyframes mc-tb-fl { 0%, 12.5% { opacity: 0; } 13% { opacity: 0.85; } 16%, 49.5% { opacity: 0; } 50% { opacity: 0.85; } 53%, 100% { opacity: 0; } }
@keyframes mc-tb-sh { 0%, 12% { transform: none; } 13% { transform: scale(0.78); } 15%, 49% { transform: none; } 50% { transform: scale(0.78); } 52%, 100% { transform: none; } }
@keyframes mc-tb-h { 0%, 12% { opacity: 1; } 13%, 35% { opacity: 0; } 37%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes mc-tb-k { 0%, 13% { opacity: 0; } 14%, 22% { opacity: 1; } 23%, 50% { opacity: 0; } 51%, 100% { opacity: 1; } }
@keyframes mc-tb-x { 0%, 23% { opacity: 0; transform: translateX(0); } 24% { opacity: 1; transform: translateX(-4px); } 25% { transform: translateX(4px); } 26% { transform: translateX(-2px); } 27%, 34% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; } }
/* bed: made in the viewfinder, then shot */
.clip .bd-pil { animation: mc-bd-pil 7s infinite; }
.clip .bd-mess { animation: mc-bd-mess 7s infinite; }
.clip .bd-neat { animation: mc-bd-neat 7s infinite; }
.clip .bd-fl { animation: mc-bd-fl 7s infinite; }
.clip .bd-sh { animation: mc-bd-sh 7s infinite; }
.clip .bd-h { animation: mc-bd-h 7s infinite; }
.clip .bd-k { animation: mc-bd-k 7s infinite; }
@keyframes mc-bd-pil {
  0%, 10% { transform: translate(172px, -26px) rotate(-28deg); animation-timing-function: cubic-bezier(0.45,0,0.55,1); }
  19% { transform: translate(90px, -58px) rotate(-12deg); animation-timing-function: cubic-bezier(0.45,0,0.55,1); }
  27% { transform: translate(-2px, 2px) rotate(4deg); animation-timing-function: ease-out; }
  31%, 100% { transform: none; }
}
@keyframes mc-bd-mess { 0%, 16% { transform: scaleX(1); opacity: 1; animation-timing-function: cubic-bezier(0.45,0,0.55,1); } 36%, 100% { transform: scaleX(0.4); opacity: 0; } }
@keyframes mc-bd-neat { 0%, 16% { transform: scaleX(0.12); opacity: 0; animation-timing-function: cubic-bezier(0.22,1,0.36,1); } 20% { opacity: 1; } 40%, 100% { transform: scaleX(1); opacity: 1; } }
@keyframes mc-bd-fl { 0%, 51.5% { opacity: 0; } 52% { opacity: 0.85; } 55%, 100% { opacity: 0; } }
@keyframes mc-bd-sh { 0%, 51% { transform: none; } 52% { transform: scale(0.78); } 54%, 100% { transform: none; } }
@keyframes mc-bd-h { 0%, 51.5% { opacity: 1; } 52.5%, 100% { opacity: 0; } }
@keyframes mc-bd-k { 0%, 52.5% { opacity: 0; } 53.5%, 100% { opacity: 1; } }
/* sky: up to the window, sunrise, shot */
.clip .sk-sky { position: absolute; inset: 0; transform-origin: 171px 120px; background: linear-gradient(180deg, #24365e 0%, #4a5c90 36%, #b9837a 70%, #efae79 88%, #f6cd92 100%); animation: mc-sk-sky 7s infinite; }
.clip .sk-sun { position: absolute; left: 206px; top: 186px; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle, #fff6dc 0%, #ffd893 60%, #ffc979 100%); animation: mc-sk-sun 7s infinite; }
.clip .sk-cl { position: absolute; left: 0; top: 0; width: 420px; height: 240px; animation: mc-sk-cl 7s linear infinite; }
.clip .sk-room { position: absolute; inset: 0; transform-origin: 171px 120px; animation: mc-sk-room 7s infinite; }
.clip .full { position: absolute; left: 0; top: 0; width: 342px; height: 240px; display: block; }
.clip .sk-fl { animation: mc-sk-fl 7s infinite; }
.clip .sk-sh { animation: mc-sk-sh 7s infinite; }
.clip .sk-h { animation: mc-sk-h 7s infinite; }
.clip .sk-k { animation: mc-sk-k 7s infinite; }
@keyframes mc-sk-sky { 0%, 8% { transform: scale(1.35); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 36%, 100% { transform: scale(1); } }
@keyframes mc-sk-sun { 0%, 30% { top: 186px; box-shadow: 0 0 30px 10px rgba(255,196,120,0.35); animation-timing-function: cubic-bezier(0.22,1,0.36,1); } 68%, 100% { top: 150px; box-shadow: 0 0 56px 24px rgba(255,200,130,0.55); } }
@keyframes mc-sk-cl { from { transform: translateX(0); } to { transform: translateX(-40px); } }
@keyframes mc-sk-room { 0%, 8% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 24% { opacity: 1; } 34%, 100% { transform: scale(4.2); opacity: 0; } }
@keyframes mc-sk-fl { 0%, 53.5% { opacity: 0; } 54% { opacity: 0.85; } 57%, 100% { opacity: 0; } }
@keyframes mc-sk-sh { 0%, 53% { transform: none; } 54% { transform: scale(0.78); } 56%, 100% { transform: none; } }
@keyframes mc-sk-h { 0%, 53.5% { opacity: 1; } 54.5%, 100% { opacity: 0; } }
@keyframes mc-sk-k { 0%, 54.5% { opacity: 0; } 55.5%, 100% { opacity: 1; } }
/* ---------- modeh ani ---------- */
.clip .vs-pr { position: absolute; top: 30px; left: 0; right: 0; text-align: center; font-weight: 600; font-size: 9px; line-height: 12px; color: #98989D; }
.clip .vs-lines { position: absolute; top: 50px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
.clip .vs-l { position: relative; white-space: nowrap; font-weight: 700; font-size: 15px; line-height: 22px; color: rgba(255,255,255,0.3); }
.clip .vs-b { position: absolute; inset: 0; color: #fff; clip-path: inset(0 0 0 100%); }
.clip .vs-1 { animation: mc-vs-1 7s linear infinite; }
.clip .vs-2 { animation: mc-vs-2 7s linear infinite; }
.clip .vs-3 { animation: mc-vs-3 7s linear infinite; }
.clip .vs-4 { animation: mc-vs-4 7s linear infinite; }
.clip .vs-wave { position: absolute; top: 152px; left: 0; right: 0; height: 18px; display: flex; justify-content: center; align-items: center; gap: 3px; transform: scaleY(0.12); animation: mc-vs-env 7s infinite; }
.clip .vs-wave i { width: 3px; height: 18px; border-radius: 99px; background: #DAB67A; transform: scaleY(0.3); animation: mc-vs-eq 0.9s ease-in-out infinite; }
.clip .vs-wave i:nth-child(2n) { animation-delay: -0.35s; }
.clip .vs-wave i:nth-child(3n) { animation-delay: -0.6s; }
.clip .vs-wave i:nth-child(5n) { animation-delay: -0.15s; }
.clip .vs-wave i:nth-child(7n) { animation-delay: -0.75s; }
.clip .vs-st { position: absolute; top: 180px; left: 0; right: 0; height: 16px; }
.clip .vs-st div { position: absolute; left: 0; right: 0; text-align: center; }
.clip .vs-s1 { font-weight: 600; font-size: 9px; line-height: 16px; color: #98989D; animation: mc-vs-s1 7s infinite; }
.clip .vs-s2 { font-weight: 800; font-size: 13px; line-height: 16px; opacity: 0; animation: mc-vs-s2 7s infinite; }
@keyframes mc-vs-1 { 0%, 3% { clip-path: inset(0 0 0 100%); } 16%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes mc-vs-2 { 0%, 16% { clip-path: inset(0 0 0 100%); } 30%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes mc-vs-3 { 0%, 30% { clip-path: inset(0 0 0 100%); } 44%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes mc-vs-4 { 0%, 44% { clip-path: inset(0 0 0 100%); } 58%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes mc-vs-eq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes mc-vs-env { 0%, 3% { transform: scaleY(0.12); } 6%, 57% { transform: scaleY(1); } 62%, 100% { transform: scaleY(0.12); } }
@keyframes mc-vs-s1 { 0%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes mc-vs-s2 { 0%, 59% { opacity: 0; transform: scale(0.9); animation-timing-function: cubic-bezier(0.34,1.56,0.64,1); } 63%, 100% { opacity: 1; transform: none; } }
/* ---------- random: the roulette ---------- */
.clip .rd-k { position: absolute; top: 28px; left: 0; right: 0; text-align: center; font-weight: 700; font-size: 9px; line-height: 12px; color: #DAB67A; }
.clip .rd-t { position: absolute; top: 41px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 15px; line-height: 20px; }
.clip .rd-win { position: absolute; top: 72px; left: 12px; width: 140px; height: 90px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent); animation: mc-rd-dim 7s infinite; }
.clip .rd-reel { animation: mc-rd-spin 7s infinite; }
.clip .rd-reel span { display: block; height: 30px; font-weight: 700; font-size: 15px; line-height: 30px; text-align: center; color: rgba(244,235,220,0.6); }
.clip .rd-line { position: absolute; left: 30px; width: 104px; height: 1px; background: rgba(255,255,255,0.14); }
.clip .rd-land { position: absolute; top: 102px; left: 0; right: 0; height: 30px; text-align: center; font-weight: 700; font-size: 15px; line-height: 30px; color: #fff; opacity: 0; animation: mc-rd-land 7s infinite; }
.clip .rd-res { position: absolute; top: 172px; left: 0; right: 0; text-align: center; opacity: 0; animation: mc-rd-res 7s infinite; }
.clip .rd-res span { display: block; font-weight: 600; font-size: 8.5px; line-height: 12px; color: #98989D; }
.clip .rd-res b { display: block; font-weight: 800; font-size: 17px; line-height: 22px; color: #FAD07C; }
@keyframes mc-rd-spin {
  0%, 6% { transform: translateY(0); filter: blur(0); animation-timing-function: cubic-bezier(0.15,0.55,0.1,1); }
  14% { filter: blur(1.2px); }
  34% { filter: blur(0.5px); }
  46% { filter: blur(0); }
  48% { transform: translateY(-634px); animation-timing-function: ease-in-out; }
  51%, 100% { transform: translateY(-630px); }
}
@keyframes mc-rd-dim { 0%, 50% { opacity: 1; } 54%, 100% { opacity: 0.35; } }
@keyframes mc-rd-land { 0%, 50% { opacity: 0; } 53%, 100% { opacity: 1; } }
@keyframes mc-rd-res { 0%, 53% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(0.22,1,0.36,1); } 58%, 100% { opacity: 1; transform: none; } }
/* ---------- all: six missions, one after another ---------- */
.clip .al-g { position: absolute; top: 27px; left: 0; right: 0; text-align: center; font-weight: 700; font-size: 9px; line-height: 12px; color: #DAB67A; }
.clip .al-bars { top: 43px; left: 30px; right: 30px; }
.clip .al-sl { position: absolute; top: 58px; left: 0; right: 0; height: 160px; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; }
.clip .al-tt { font-weight: 800; font-size: 14px; line-height: 18px; }
.clip .al-1 { animation: mc-al-1 7s infinite; }
.clip .al-2 { animation: mc-al-2 7s infinite; }
.clip .al-3 { animation: mc-al-3 7s infinite; }
.clip .al-4 { animation: mc-al-4 7s infinite; }
.clip .al-5 { animation: mc-al-5 7s infinite; }
.clip .al-6 { animation: mc-al-6 7s infinite; }
.clip .al-b1 { animation: mc-al-b1 7s infinite; }
.clip .al-b2 { animation: mc-al-b2 7s infinite; }
.clip .al-b3 { animation: mc-al-b3 7s infinite; }
.clip .al-b4 { animation: mc-al-b4 7s infinite; }
.clip .al-b5 { animation: mc-al-b5 7s infinite; }
.clip .al-b6 { animation: mc-al-b6 7s infinite; }
@keyframes mc-al-1 { 0%, 9.5% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 11%, 100% { opacity: 0; transform: translateX(40px); } }
@keyframes mc-al-2 { 0%, 9.5% { opacity: 0; transform: translateX(-40px); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 11%, 20% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 21.5%, 100% { opacity: 0; transform: translateX(40px); } }
@keyframes mc-al-3 { 0%, 20% { opacity: 0; transform: translateX(-40px); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 21.5%, 30.5% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 32%, 100% { opacity: 0; transform: translateX(40px); } }
@keyframes mc-al-4 { 0%, 30.5% { opacity: 0; transform: translateX(-40px); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 32%, 41% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 42.5%, 100% { opacity: 0; transform: translateX(40px); } }
@keyframes mc-al-5 { 0%, 41% { opacity: 0; transform: translateX(-40px); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 42.5%, 51.5% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 53%, 100% { opacity: 0; transform: translateX(40px); } }
@keyframes mc-al-6 { 0%, 51.5% { opacity: 0; transform: translateX(-40px); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 53%, 100% { opacity: 1; transform: none; } }
@keyframes mc-al-b1 { 0%, 9.5% { background: rgba(255,255,255,0.22); } 10.5%, 100% { background: #34C759; } }
@keyframes mc-al-b2 { 0%, 20% { background: rgba(255,255,255,0.22); } 21%, 100% { background: #34C759; } }
@keyframes mc-al-b3 { 0%, 30.5% { background: rgba(255,255,255,0.22); } 31.5%, 100% { background: #34C759; } }
@keyframes mc-al-b4 { 0%, 41% { background: rgba(255,255,255,0.22); } 42%, 100% { background: #34C759; } }
@keyframes mc-al-b5 { 0%, 51.5% { background: rgba(255,255,255,0.22); } 52.5%, 100% { background: #34C759; } }
@keyframes mc-al-b6 { 0%, 63% { background: rgba(255,255,255,0.22); } 64%, 100% { background: #34C759; } }
/* ---------- the card the clip sits in ---------- */
.m-screen { position: relative; aspect-ratio: 342 / 240; overflow: hidden; border-radius: 16px; }
.m-screen .clip { position: absolute; top: 0; left: 0; transform-origin: 0 0; }

/* With reduced motion, each clip holds one telling frame mid-mission. */
@media (prefers-reduced-motion: reduce) {
.clip *, .clip *::after { animation: none !important; }
.clip .pu-warn { opacity: 0; }
.clip .pu-go { opacity: 1; }
.clip .mt-d1, .clip .mt-d2 { opacity: 1; }
.clip .vs-1, .clip .vs-2 { clip-path: inset(0 0 0 0); }
.clip .st .hint { opacity: 1; }
.clip .bd-mess { opacity: 0; }
.clip .sk-room { opacity: 0; }
}