/* Cutflux home / mobile motion previews — CSS-only stand-ins for example MP4s.
   Zero network weight, always loops, respects reduced motion. */

.cf-motion{
  position:relative;display:block;width:100%;height:100%;overflow:hidden;
  background:#000;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(90,160,255,.18), transparent 58%),
    linear-gradient(165deg,#0a1220 0%,#030508 62%,#000 100%);
}
.cf-motion--fill{position:absolute;inset:0;}
.cf-motion--sm{min-height:40px;border-radius:8px;}

/* ── Beat / workout ── */
.cf-motion--beat .cf-m-bars{
  position:absolute;left:0;right:0;bottom:0;height:62%;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;gap:4px;padding:0 14px 12px;
}
.cf-motion--beat .cf-m-bars span{
  flex:1;min-width:2px;max-width:12px;height:18%;border-radius:3px;
  background:linear-gradient(180deg,#7cc0ff,#3d8ef0);
  transform-origin:bottom;
  animation:cfBarBeat 1.15s cubic-bezier(.5,.05,.3,1) infinite;
}
.cf-motion--beat .cf-m-bars span:nth-child(1){animation-delay:.00s;--h:28%;}
.cf-motion--beat .cf-m-bars span:nth-child(2){animation-delay:.06s;--h:52%;}
.cf-motion--beat .cf-m-bars span:nth-child(3){animation-delay:.12s;--h:78%;}
.cf-motion--beat .cf-m-bars span:nth-child(4){animation-delay:.18s;--h:94%;}
.cf-motion--beat .cf-m-bars span:nth-child(5){animation-delay:.24s;--h:70%;}
.cf-motion--beat .cf-m-bars span:nth-child(6){animation-delay:.30s;--h:44%;}
.cf-motion--beat .cf-m-bars span:nth-child(7){animation-delay:.36s;--h:62%;}
.cf-motion--beat .cf-m-bars span:nth-child(8){animation-delay:.42s;--h:88%;}
.cf-motion--beat .cf-m-playhead::before{
  content:"";position:absolute;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,#fff 25%,#fff 75%,transparent);
  box-shadow:0 0 10px rgba(124,192,255,.75);
  animation:cfPlayhead 3.2s linear infinite;
}
.cf-motion--beat .cf-m-playhead{position:absolute;inset:0 0 38% 0;pointer-events:none;z-index:3;}
.cf-motion--beat .cf-m-cuts i{
  position:absolute;bottom:62%;width:8px;height:8px;border-radius:50%;
  background:#5AA0FF;box-shadow:0 0 10px rgba(90,160,255,.85);opacity:0;
  animation:cfCutPop 3.2s linear infinite;
}
.cf-motion--beat .cf-m-cuts i:nth-child(1){left:16%;animation-delay:.5s;}
.cf-motion--beat .cf-m-cuts i:nth-child(2){left:34%;animation-delay:1.1s;}
.cf-motion--beat .cf-m-cuts i:nth-child(3){left:52%;animation-delay:1.7s;}
.cf-motion--beat .cf-m-cuts i:nth-child(4){left:70%;animation-delay:2.3s;}
.cf-motion--beat .cf-m-cuts i:nth-child(5){left:86%;animation-delay:2.9s;}
.cf-motion--beat .cf-m-cuts{position:absolute;inset:0;pointer-events:none;z-index:4;}

/* ── Fast cuts / dance ── */
.cf-motion--fast .cf-m-panel{
  position:absolute;inset:0;opacity:0;
  animation:cfFastFlash 1.05s steps(1,end) infinite;
}
.cf-motion--fast .cf-m-panel:nth-child(1){background:linear-gradient(135deg,#ff4d8d,#7c3aed);animation-delay:0s;}
.cf-motion--fast .cf-m-panel:nth-child(2){background:linear-gradient(135deg,#00d4ff,#0066ff);animation-delay:.15s;}
.cf-motion--fast .cf-m-panel:nth-child(3){background:linear-gradient(135deg,#ffe066,#ff6b35);animation-delay:.30s;}
.cf-motion--fast .cf-m-panel:nth-child(4){background:linear-gradient(135deg,#34d399,#059669);animation-delay:.45s;}
.cf-motion--fast .cf-m-panel:nth-child(5){background:linear-gradient(135deg,#f472b6,#db2777);animation-delay:.60s;}
.cf-motion--fast .cf-m-scan{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent 48%,rgba(255,255,255,.35) 50%,transparent 52%);
  animation:cfScanMove 1.05s linear infinite;
}

/* ── Rhythm copy ── */
.cf-motion--rhythm .cf-m-wave{
  position:absolute;left:8%;right:8%;height:3px;border-radius:99px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(90,160,255,.9) 20%,rgba(124,108,255,.9) 50%,rgba(90,160,255,.9) 80%,transparent);
  animation:cfWavePulse 1.4s ease-in-out infinite;
}
.cf-motion--rhythm .cf-m-wave.a{top:38%;}
.cf-motion--rhythm .cf-m-wave.b{top:58%;animation-delay:.35s;opacity:.75;}
.cf-motion--rhythm .cf-m-echo{
  position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 18px);
  animation:cfEchoShift 2.8s linear infinite;
}
.cf-motion--rhythm .cf-m-match{
  position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);
  width:28px;height:28px;border-radius:50%;z-index:3;
  border:2px solid rgba(255,255,255,.5);
  box-shadow:0 0 0 0 rgba(90,160,255,.55);
  animation:cfMatchRing 1.4s ease-out infinite;
}

/* ── Hype / gaming ── */
.cf-motion--hype .cf-m-burst{
  position:absolute;left:50%;top:50%;width:20%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);z-index:2;
  border:2px solid rgba(255,255,255,.65);
  animation:cfBurst 1.8s cubic-bezier(.2,.9,.3,1) infinite;
}
.cf-motion--hype .cf-m-flash{
  position:absolute;inset:0;z-index:1;opacity:0;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.45),transparent 55%);
  animation:cfHypeFlash 1.8s ease-out infinite;
}
.cf-motion--hype .cf-m-grid{
  position:absolute;inset:0;opacity:.35;
  background:
    linear-gradient(rgba(90,160,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,160,255,.12) 1px,transparent 1px);
  background-size:24px 24px;
}

/* ── Slow burn / aesthetic ── */
.cf-motion--slow .cf-m-glow{
  position:absolute;inset:-20%;z-index:1;
  background:
    radial-gradient(circle at 30% 40%,rgba(124,108,255,.45),transparent 45%),
    radial-gradient(circle at 70% 60%,rgba(90,160,255,.35),transparent 50%);
  animation:cfSlowDrift 8s ease-in-out infinite alternate;
}
.cf-motion--slow .cf-m-vignette{
  position:absolute;inset:0;z-index:2;
  box-shadow:inset 0 0 40px rgba(0,0,0,.55);
}
.cf-motion--slow .cf-m-dust{
  position:absolute;inset:0;z-index:3;opacity:.25;
  background-image:radial-gradient(circle,rgba(255,255,255,.8) 1px,transparent 1px);
  background-size:40px 40px;
  animation:cfDust 12s linear infinite;
}

@keyframes cfBarBeat{
  0%,100%{height:16%;opacity:.5;}
  50%{height:var(--h,55%);opacity:1;}
}
@keyframes cfPlayhead{0%{left:6%;}100%{left:94%;}}
@keyframes cfCutPop{
  0%,12%{opacity:0;transform:scale(.4);}
  18%{opacity:1;transform:scale(1.25);}
  35%{opacity:.85;transform:scale(1);}
  65%,100%{opacity:0;}
}
@keyframes cfFastFlash{
  0%,18%{opacity:1;} 20%,100%{opacity:0;}
}
@keyframes cfScanMove{0%{transform:translateX(-120%);}100%{transform:translateX(120%);}}
@keyframes cfWavePulse{
  0%,100%{transform:scaleX(.72);opacity:.55;}
  50%{transform:scaleX(1);opacity:1;}
}
@keyframes cfEchoShift{0%{transform:translateX(0);}100%{transform:translateX(-36px);}}
@keyframes cfMatchRing{
  0%{box-shadow:0 0 0 0 rgba(90,160,255,.65);opacity:1;}
  100%{box-shadow:0 0 0 18px rgba(90,160,255,0);opacity:.4;}
}
@keyframes cfBurst{
  0%{transform:translate(-50%,-50%) scale(.4);opacity:1;}
  70%{transform:translate(-50%,-50%) scale(2.2);opacity:0;}
  100%{opacity:0;}
}
@keyframes cfHypeFlash{
  0%,8%{opacity:.85;} 25%,100%{opacity:0;}
}
@keyframes cfSlowDrift{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(6%,-4%) scale(1.08);}
}
@keyframes cfDust{
  0%{transform:translateY(0);}100%{transform:translateY(-40px);}
}

/* ── Create Edits storyboard (beat-sync portal) ── */
.cf-motion--create-edits{
  --cf-cycle:10s;
  background:
    radial-gradient(ellipse at 30% 10%,rgba(74,139,232,.14),transparent 55%),
    linear-gradient(160deg,#0a1220,#050810) !important;
}
.cf-motion--create-edits .cf-ce-steps,
.cf-motion--copy-edit .cf-cp-steps{
  position:absolute;top:16px;left:16px;right:16px;z-index:8;height:44px;text-align:center;
}
.cf-motion--create-edits .cf-ce-steps > span,
.cf-motion--copy-edit .cf-cp-steps > span{
  position:absolute;left:0;right:0;opacity:0;
}
.cf-motion--create-edits .cf-ce-steps b,
.cf-motion--copy-edit .cf-cp-steps b{
  display:block;font-size:21px;font-weight:700;letter-spacing:-.025em;color:#eef2f8;line-height:1.15;
}
.cf-motion--create-edits .cf-ce-steps i,
.cf-motion--copy-edit .cf-cp-steps i{
  display:block;margin-top:3px;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#5aa0ff;font-style:normal;
}
.cf-motion--create-edits .cf-ce-steps .s1{animation:cfCeStep1 var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;}
.cf-motion--create-edits .cf-ce-steps .s2{animation:cfCeStep2 var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;}
.cf-motion--create-edits .cf-ce-steps .s3{animation:cfCeStep3 var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;}
.cf-motion--create-edits .cf-ce-steps .s4{animation:cfCeStep4 var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;}
.cf-motion--create-edits .cf-ce-stage,
.cf-motion--copy-edit .cf-cp-stage{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:72px 24px 24px;
}

/* Phase 1 — music upload */
.cf-motion--create-edits .cf-ce-drop--music{
  position:absolute;top:88px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;
  background:rgba(10,16,32,.97);border:1px solid rgba(90,160,255,.45);
  box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 26px rgba(90,160,255,.2);
  opacity:0;animation:cfCeMusicDrop var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;
}
.cf-motion--create-edits .cf-ce-drop .ico{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,#5aa0ff,#2e6fd1);font-size:16px;color:#fff;
}
.cf-motion--create-edits .cf-ce-drop .nm{font-size:13px;font-weight:650;color:#eef2f8;letter-spacing:-.015em;}
.cf-motion--create-edits .cf-ce-wave{
  position:absolute;top:148px;left:50%;transform:translateX(-50%);
  width:72%;height:52px;display:flex;align-items:center;gap:3px;
  opacity:0;animation:cfCeWave var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;
}
.cf-motion--create-edits .cf-ce-wave span{
  flex:1;min-width:3px;border-radius:99px;height:18%;
  background:linear-gradient(180deg,#c6eeff,#3a6bff);transform-origin:center;
  animation:cfCeWaveBar 1s ease-in-out infinite;
}
.cf-motion--create-edits .cf-ce-wave span:nth-child(odd){animation-delay:.1s;}
.cf-motion--create-edits .cf-ce-wave span:nth-child(3n){animation-delay:.25s;}

/* Phase 2 — video or template */
.cf-motion--create-edits .cf-ce-pair{
  position:absolute;top:96px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;opacity:0;
  animation:cfCePair var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;
}
.cf-motion--create-edits .cf-ce-vid,
.cf-motion--create-edits .cf-ce-tpl{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 14px;border-radius:14px;
  background:rgba(10,16,32,.92);border:1px solid rgba(255,255,255,.1);min-width:108px;
}
.cf-motion--create-edits .cf-ce-vid .thumb{
  width:72px;height:48px;border-radius:8px;
  background:linear-gradient(135deg,#1a4a8e,#3d8ef0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.cf-motion--create-edits .cf-ce-tpl .grid{
  width:72px;height:48px;border-radius:8px;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:4px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.cf-motion--create-edits .cf-ce-tpl .grid i{
  border-radius:3px;background:linear-gradient(135deg,rgba(90,160,255,.5),rgba(46,111,209,.35));
  animation:cfCeTplPulse 1.2s ease-in-out infinite;
}
.cf-motion--create-edits .cf-ce-tpl .grid i:nth-child(2){animation-delay:.15s;}
.cf-motion--create-edits .cf-ce-tpl .grid i:nth-child(3){animation-delay:.3s;}
.cf-motion--create-edits .cf-ce-tpl .grid i:nth-child(4){animation-delay:.45s;}
.cf-motion--create-edits .cf-ce-vid .nm,
.cf-motion--create-edits .cf-ce-tpl .nm{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#8791a4;
}
.cf-motion--create-edits .cf-ce-or{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:#5aa0ff;opacity:.7;
}

/* Phase 3 — beat analyze */
.cf-motion--create-edits .cf-ce-analyze{
  position:absolute;inset:72px 24px 48px;opacity:0;
  animation:cfCeAnalyze var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;
}
.cf-motion--create-edits .cf-ce-bars{
  position:absolute;left:0;right:0;bottom:0;height:58%;display:flex;align-items:flex-end;
  justify-content:center;gap:5px;padding:0 12px 10px;
}
.cf-motion--create-edits .cf-ce-bars span{
  flex:1;max-width:14px;height:16%;border-radius:3px;
  background:linear-gradient(180deg,#7cc0ff,#3d8ef0);transform-origin:bottom;
  animation:cfCeBarBeat 1.1s cubic-bezier(.5,.05,.3,1) infinite;
}
.cf-motion--create-edits .cf-ce-bars span:nth-child(1){--h:30%;animation-delay:0s;}
.cf-motion--create-edits .cf-ce-bars span:nth-child(2){--h:55%;animation-delay:.06s;}
.cf-motion--create-edits .cf-ce-bars span:nth-child(3){--h:80%;animation-delay:.12s;}
.cf-motion--create-edits .cf-ce-bars span:nth-child(4){--h:95%;animation-delay:.18s;}
.cf-motion--create-edits .cf-ce-bars span:nth-child(5){--h:70%;animation-delay:.24s;}
.cf-motion--create-edits .cf-ce-bars span:nth-child(6){--h:45%;animation-delay:.3s;}
.cf-motion--create-edits .cf-ce-bars span:nth-child(7){--h:65%;animation-delay:.36s;}
.cf-motion--create-edits .cf-ce-bars span:nth-child(8){--h:88%;animation-delay:.42s;}
.cf-motion--create-edits .cf-ce-playhead{
  position:absolute;inset:0 0 42% 0;pointer-events:none;
}
.cf-motion--create-edits .cf-ce-playhead::before{
  content:"";position:absolute;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,#fff 25%,#fff 75%,transparent);
  box-shadow:0 0 10px rgba(124,192,255,.75);
  animation:cfCePlayhead var(--cf-cycle) linear infinite;
}
.cf-motion--create-edits .cf-ce-cuts{position:absolute;inset:0 0 42% 0;pointer-events:none;}
.cf-motion--create-edits .cf-ce-cuts i{
  position:absolute;bottom:0;width:8px;height:8px;border-radius:50%;
  background:#5AA0FF;box-shadow:0 0 10px rgba(90,160,255,.85);opacity:0;
  animation:cfCeCutPop var(--cf-cycle) linear infinite;
}
.cf-motion--create-edits .cf-ce-cuts i:nth-child(1){left:20%;animation-delay:5.4s;}
.cf-motion--create-edits .cf-ce-cuts i:nth-child(2){left:40%;animation-delay:5.9s;}
.cf-motion--create-edits .cf-ce-cuts i:nth-child(3){left:60%;animation-delay:6.4s;}
.cf-motion--create-edits .cf-ce-cuts i:nth-child(4){left:78%;animation-delay:6.9s;}

/* Phase 4 — done */
.cf-motion--create-edits .cf-ce-done{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;
  animation:cfCeDone var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;
}
.cf-motion--create-edits .cf-ce-done .chk{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#3fcb7e,#22a058);color:#fff;font-size:28px;font-weight:700;
  box-shadow:0 12px 32px rgba(63,203,126,.45);
}
.cf-motion--create-edits .cf-ce-done .nm{
  font-size:16px;font-weight:700;color:#eef2f8;letter-spacing:-.02em;
}
.cf-motion--create-edits .cf-ce-mini{
  display:flex;gap:6px;margin-top:4px;
}
.cf-motion--create-edits .cf-ce-mini span{
  width:28px;height:44px;border-radius:6px;
  background:linear-gradient(155deg,#12203c,#0a1226);
  box-shadow:0 4px 12px rgba(46,111,209,.4);
  animation:cfCeMiniFlash 1.2s steps(1,end) infinite;
}
.cf-motion--create-edits .cf-ce-mini span:nth-child(2){animation-delay:.2s;}
.cf-motion--create-edits .cf-ce-mini span:nth-child(3){animation-delay:.4s;}

/* ── Copy an Edit storyboard ── */
.cf-motion--copy-edit{
  --cf-cycle:10s;
  background:
    radial-gradient(ellipse at 70% 10%,rgba(124,92,255,.14),transparent 55%),
    linear-gradient(160deg,#0e0a18,#050408) !important;
}
.cf-motion--copy-edit .cf-cp-steps .s1{animation:cfCpStep1 var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;}
.cf-motion--copy-edit .cf-cp-steps .s2{animation:cfCpStep2 var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;}
.cf-motion--copy-edit .cf-cp-steps .s3{animation:cfCpStep3 var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;}
.cf-motion--copy-edit .cf-cp-steps .s4{animation:cfCpStep4 var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;}
.cf-motion--copy-edit .cf-cp-steps .s5{animation:cfCpStep5 var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;}
.cf-motion--copy-edit .cf-cp-steps i{color:#9b8cff;}

.cf-motion--copy-edit .cf-cp-ref{
  position:absolute;top:82px;left:50%;transform:translateX(-50%);
  width:200px;height:72px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(155,140,255,.35);
  background:linear-gradient(135deg,#1a4a8e,#2a6fd1 52%,#3d8ef0);
  box-shadow:0 14px 36px rgba(0,0,0,.55);
  opacity:0;animation:cfCpRef var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;
}
.cf-motion--copy-edit .cf-cp-ref .tag{
  position:absolute;top:5px;left:5px;z-index:4;
  font-family:'JetBrains Mono',monospace;font-size:6.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:2px 5px;border-radius:4px;
}
.cf-motion--copy-edit .cf-cp-ref .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:0;height:0;border-left:10px solid rgba(255,255,255,.9);
  border-top:6px solid transparent;border-bottom:6px solid transparent;z-index:3;
}
.cf-motion--copy-edit .cf-cp-ref .ruler{
  position:absolute;left:8px;right:8px;bottom:6px;height:4px;display:flex;
  justify-content:space-between;align-items:center;z-index:4;
}
.cf-motion--copy-edit .cf-cp-ref .ruler i{
  width:2px;height:6px;border-radius:1px;background:rgba(255,255,255,.3);
  animation:cfCpTick var(--cf-cycle) ease-in-out infinite;
}
.cf-motion--copy-edit .cf-cp-ref .ruler i:nth-child(1){animation-delay:2.1s;}
.cf-motion--copy-edit .cf-cp-ref .ruler i:nth-child(2){animation-delay:2.3s;}
.cf-motion--copy-edit .cf-cp-ref .ruler i:nth-child(3){animation-delay:2.5s;}
.cf-motion--copy-edit .cf-cp-ref .ruler i:nth-child(4){animation-delay:2.7s;}
.cf-motion--copy-edit .cf-cp-ref .ruler i:nth-child(5){animation-delay:2.9s;}
.cf-motion--copy-edit .cf-cp-ref .ruler i:nth-child(6){animation-delay:3.1s;}

.cf-motion--copy-edit .cf-cp-scan{
  position:absolute;top:82px;left:50%;transform:translateX(-50%);
  width:200px;height:72px;border-radius:12px;overflow:hidden;pointer-events:none;
  opacity:0;animation:cfCpScanWrap var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;
}
.cf-motion--copy-edit .cf-cp-scan::before{
  content:"";position:absolute;top:0;bottom:0;width:2px;background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.85);left:0;
  animation:cfCpScanLine var(--cf-cycle) ease-in-out infinite;
}

.cf-motion--copy-edit .cf-cp-fx{
  position:absolute;top:168px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;opacity:0;
  animation:cfCpFx var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;
}
.cf-motion--copy-edit .cf-cp-fx .fx{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 10px;border-radius:7px;color:#fff;
  transform:translateY(8px);opacity:0;
}
.cf-motion--copy-edit .cf-cp-fx .f1{
  background:linear-gradient(135deg,#ff4d8d,#db2777);
  animation:cfCpFxPop var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;animation-delay:4.1s;
}
.cf-motion--copy-edit .cf-cp-fx .f2{
  background:linear-gradient(135deg,#f0c030,#ff6b35);color:#222;
  animation:cfCpFxPop var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;animation-delay:4.3s;
}
.cf-motion--copy-edit .cf-cp-fx .f3{
  background:linear-gradient(135deg,#9b8cff,#6b5cff);
  animation:cfCpFxPop var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;animation-delay:4.5s;
}

.cf-motion--copy-edit .cf-cp-arrow{
  position:absolute;top:210px;left:50%;transform:translateX(-50%);
  font-size:18px;color:#9b8cff;opacity:0;
  animation:cfCpArrow var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;
}

.cf-motion--copy-edit .cf-cp-yours{
  position:absolute;top:228px;left:50%;transform:translateX(-50%);
  width:200px;height:72px;border-radius:12px;
  border:2px dashed rgba(155,140,255,.45);background:rgba(155,140,255,.06);
  display:grid;place-items:center;opacity:0;
  animation:cfCpYours var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;
}
.cf-motion--copy-edit .cf-cp-yours .tag{
  position:absolute;top:5px;left:5px;
  font-family:'JetBrains Mono',monospace;font-size:6.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#c4b8ff;background:rgba(0,0,0,.45);padding:2px 5px;border-radius:4px;
}
.cf-motion--copy-edit .cf-cp-yours .drop{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#9b8cff;
}

.cf-motion--copy-edit .cf-cp-apply{
  position:absolute;top:228px;left:50%;transform:translateX(-50%);
  width:200px;height:72px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(63,203,126,.4);
  background:linear-gradient(135deg,#12203c,#0a1226);
  opacity:0;animation:cfCpApply var(--cf-cycle) cubic-bezier(.22,1,.36,1) infinite;
}
.cf-motion--copy-edit .cf-cp-strips{
  position:absolute;inset:0;display:flex;gap:2px;padding:8px;
}
.cf-motion--copy-edit .cf-cp-strips span{
  flex:1;border-radius:4px;opacity:.35;
  background:linear-gradient(135deg,rgba(155,140,255,.4),rgba(90,160,255,.25));
  animation:cfCpStripFlash 1.4s steps(1,end) infinite;
}
.cf-motion--copy-edit .cf-cp-strips span:nth-child(2){animation-delay:.15s;}
.cf-motion--copy-edit .cf-cp-strips span:nth-child(3){animation-delay:.3s;}
.cf-motion--copy-edit .cf-cp-strips span:nth-child(4){animation-delay:.45s;}
.cf-motion--copy-edit .cf-cp-strips span:nth-child(5){animation-delay:.6s;}
.cf-motion--copy-edit .cf-cp-apply .chk{
  position:absolute;right:8px;bottom:8px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:#3fcb7e;color:#fff;font-size:14px;font-weight:700;
  box-shadow:0 4px 12px rgba(63,203,126,.5);
}

/* Create Edits keyframes */
@keyframes cfCeStep1{0%{opacity:0;transform:translateY(10px)}3%,22%{opacity:1;transform:translateY(0)}28%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes cfCeStep2{0%,28%{opacity:0;transform:translateY(10px)}33%,47%{opacity:1;transform:translateY(0)}53%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes cfCeStep3{0%,53%{opacity:0;transform:translateY(10px)}58%,72%{opacity:1;transform:translateY(0)}78%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes cfCeStep4{0%,78%{opacity:0;transform:translateY(10px)}83%,96%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-10px)}}
@keyframes cfCeMusicDrop{0%,2%{opacity:0;transform:translate(-50%,-16px)}8%,24%{opacity:1;transform:translate(-50%,0)}30%,100%{opacity:0;transform:translate(-50%,8px)}}
@keyframes cfCeWave{0%,6%{opacity:0}12%,26%{opacity:1}32%,100%{opacity:0}}
@keyframes cfCeWaveBar{0%,100%{height:18%;opacity:.55}50%{height:72%;opacity:1}}
@keyframes cfCePair{0%,30%{opacity:0;transform:translate(-50%,12px)}36%,50%{opacity:1;transform:translate(-50%,0)}56%,100%{opacity:0;transform:translate(-50%,-8px)}}
@keyframes cfCeTplPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes cfCeAnalyze{0%,54%{opacity:0}60%,76%{opacity:1}82%,100%{opacity:0}}
@keyframes cfCeBarBeat{0%,100%{height:14%;opacity:.5}50%{height:var(--h,55%);opacity:1}}
@keyframes cfCePlayhead{0%,54%{left:6%;opacity:0}60%{opacity:1}76%{left:94%;opacity:1}82%,100%{opacity:0}}
@keyframes cfCeCutPop{0%,54%,82%,100%{opacity:0;transform:scale(.4)}60%,76%{opacity:1;transform:scale(1)}}
@keyframes cfCeDone{0%,78%{opacity:0;transform:translate(-50%,-40%)}84%,98%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0}}
@keyframes cfCeMiniFlash{0%,40%{opacity:.5}50%{opacity:1;background:linear-gradient(155deg,#3d8ef0,#1a4a8e)}100%{opacity:.5}}

/* Copy Edit keyframes */
@keyframes cfCpStep1{0%{opacity:0;transform:translateY(10px)}3%,17%{opacity:1;transform:translateY(0)}22%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes cfCpStep2{0%,22%{opacity:0;transform:translateY(10px)}27%,37%{opacity:1;transform:translateY(0)}42%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes cfCpStep3{0%,42%{opacity:0;transform:translateY(10px)}47%,53%{opacity:1;transform:translateY(0)}58%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes cfCpStep4{0%,58%{opacity:0;transform:translateY(10px)}63%,68%{opacity:1;transform:translateY(0)}73%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes cfCpStep5{0%,73%{opacity:0;transform:translateY(10px)}78%,96%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-10px)}}
@keyframes cfCpRef{0%,2%{opacity:0;transform:translate(-50%,-12px)}6%,38%{opacity:1;transform:translate(-50%,0)}42%,100%{opacity:0;transform:translate(-50%,0)}}
@keyframes cfCpScanWrap{0%,20%{opacity:0}24%,38%{opacity:1}42%,100%{opacity:0}}
@keyframes cfCpScanLine{0%,20%{left:0}38%{left:97%}42%,100%{left:97%}}
@keyframes cfCpTick{0%,20%,42%,100%{background:rgba(255,255,255,.28);height:6px}24%,38%{background:#9b8cff;height:10px;box-shadow:0 0 6px #9b8cff}}
@keyframes cfCpFx{0%,40%{opacity:0}44%,56%{opacity:1}60%,100%{opacity:0}}
@keyframes cfCpFxPop{0%,40%,60%,100%{opacity:0;transform:translateY(8px)}44%,56%{opacity:1;transform:translateY(0)}}
@keyframes cfCpArrow{0%,54%{opacity:0}58%,68%{opacity:.85}72%,100%{opacity:0}}
@keyframes cfCpYours{0%,58%{opacity:0;transform:translate(-50%,8px)}62%,70%{opacity:1;transform:translate(-50%,0)}74%,100%{opacity:0}}
@keyframes cfCpApply{0%,72%{opacity:0;transform:translate(-50%,8px) scale(.96)}76%,98%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0}}
@keyframes cfCpStripFlash{0%,30%{opacity:.35}40%{opacity:1;background:linear-gradient(135deg,#9b8cff,#3d8ef0)}100%{opacity:.35}}

@media (prefers-reduced-motion:reduce){
  .cf-motion *,.cf-motion::before,.cf-motion::after{animation:none!important;}
}