/* cleave shadow element fx */
.c4-cleave .c4-shadow-fx{position:absolute;inset:0;pointer-events:none;overflow:visible}
.c4-cleave .c4-shadow-fx .fx-bit{position:absolute;display:block;pointer-events:none;
  width:18px;height:18px;transform:translate(-50%,-50%)}
.c4-cleave .c4-shadow-fx.el-0 .fx-bit{border-radius:50% 50% 50% 0;
  background:radial-gradient(circle at 40% 40%,#fff3d6 0%,#ffb257 40%,rgba(255,90,20,0) 72%);
  box-shadow:0 0 14px #ff8a3c,0 0 26px rgba(255,120,40,.6);
  animation:c4-fx-flame .34s ease-out both;animation-delay:calc(var(--k,0)*20ms)}
.c4-cleave .c4-shadow-fx.el-1 .fx-bit{width:12px;height:12px;clip-path:polygon(50% 0%,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0% 50%,38% 38%);
  background:linear-gradient(180deg,#ffffff,#bfeaff);box-shadow:0 0 12px #cfeaff,0 0 22px rgba(150,215,240,.7);
  animation:c4-fx-shard .3s ease-out both;animation-delay:calc(var(--k,0)*18ms)}
.c4-cleave .c4-shadow-fx.el-2 .fx-bit{width:3px;height:26px;border-radius:2px;
  background:linear-gradient(180deg,rgba(220,240,220,0),#bfe0b8 40%,rgba(160,210,160,0));
  box-shadow:0 0 10px rgba(160,210,160,.7);animation:c4-fx-ribbon .32s ease-out both;animation-delay:calc(var(--k,0)*22ms)}
.c4-cleave .c4-shadow-fx.el-3 .fx-bit{width:2px;height:22px;
  background:linear-gradient(180deg,transparent,#e6dcff 30%,#ffffff 50%,#b79ee8 70%,transparent);
  box-shadow:0 0 10px #c9a2ff,0 0 20px rgba(180,150,255,.7);
  transform:translate(-50%,-50%) skewX(-18deg);animation:c4-fx-arc .24s steps(2,end) both;animation-delay:calc(var(--k,0)*16ms)}
@keyframes c4-fx-flame{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}30%{opacity:1;transform:translate(-50%,-120%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-190%) scale(.4)}}
@keyframes c4-fx-shard{0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.4)}35%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + 10px),calc(-50% + 16px)) rotate(120deg) scale(1)}}
@keyframes c4-fx-ribbon{0%{opacity:0;transform:translate(-50%,-50%) rotate(-30deg) scaleY(.4)}35%{opacity:.95}100%{opacity:0;transform:translate(calc(-50% + 14px),calc(-50% - 26px)) rotate(24deg) scaleY(1.4)}}
@keyframes c4-fx-arc{0%{opacity:0}20%{opacity:1}50%{opacity:0}70%{opacity:.9}100%{opacity:0}}
.c4-cleave .c4-shadow.el-0 img{filter:sepia(.16) saturate(1.4) brightness(1.06)}
.c4-cleave .c4-shadow.el-1 img{filter:saturate(.95) brightness(1.14)}
.c4-cleave .c4-shadow.el-2 img{filter:sepia(.10) saturate(1.1) brightness(1.05)}
.c4-cleave .c4-shadow.el-3 img{filter:saturate(1.25) brightness(1.08)}
/* element wash along the giant blade */
.c4-cleave .c4-shadow-fx::before{content:"";position:absolute;inset:-14% -8%;opacity:.55;mix-blend-mode:screen;pointer-events:none;border-radius:14px}
.c4-cleave .c4-shadow-fx.el-0::before{background:linear-gradient(90deg,rgba(255,90,20,0),rgba(255,150,60,.55) 35%,rgba(255,210,140,.75) 55%,rgba(255,120,40,.4) 80%,rgba(255,90,20,0))}
.c4-cleave .c4-shadow-fx.el-1::before{background:linear-gradient(90deg,rgba(120,200,230,0),rgba(200,240,255,.65) 40%,rgba(255,255,255,.85) 55%,rgba(170,225,245,.5) 80%,rgba(120,200,230,0))}
.c4-cleave .c4-shadow-fx.el-2::before{background:linear-gradient(90deg,rgba(120,180,120,0),rgba(190,225,190,.5) 40%,rgba(235,250,235,.7) 55%,rgba(150,200,150,.4) 80%,rgba(120,180,120,0))}
.c4-cleave .c4-shadow-fx.el-3::before{background:linear-gradient(90deg,rgba(140,110,200,0),rgba(200,175,255,.55) 40%,rgba(255,255,255,.8) 55%,rgba(175,145,235,.5) 80%,rgba(140,110,200,0))}