/* cleave element weather */
.c4-cleave .c4-weather{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4}
.c4-cleave .c4-weather::before{content:"";position:absolute;inset:0;opacity:0;animation:c4w-wash 1.1s ease-out forwards}
.c4-cleave .c4-weather.el-0::before{background:radial-gradient(circle at 50% 55%,rgba(255,120,30,.38),rgba(255,80,20,.10) 45%,rgba(255,60,10,0) 75%)}
.c4-cleave .c4-weather.el-1::before{background:radial-gradient(circle at 50% 50%,rgba(215,245,255,.55),rgba(160,225,245,.22) 45%,rgba(140,200,230,0) 78%)}
.c4-cleave .c4-weather.el-2::before{background:radial-gradient(circle at 50% 50%,rgba(210,240,210,.45),rgba(160,215,160,.18) 45%,rgba(140,190,140,0) 78%)}
.c4-cleave .c4-weather.el-3::before{background:radial-gradient(circle at 50% 50%,rgba(230,220,255,.55),rgba(180,150,245,.22) 45%,rgba(150,120,210,0) 78%)}
@keyframes c4w-wash{0%{opacity:0}18%{opacity:1}60%{opacity:.55}100%{opacity:0}}
.c4-cleave .w-bit{position:absolute;display:block;pointer-events:none;animation:c4w-bit var(--dur,800ms) ease-out var(--delay,0ms) both}
.c4-cleave .c4-weather.el-0 .w-bit{border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:radial-gradient(circle at 40% 40%,#fff3d6,#ffb257 45%,rgba(255,90,20,0) 75%);box-shadow:0 0 12px #ff8a3c}
.c4-cleave .c4-weather.el-1 .w-bit{clip-path:polygon(50% 0%,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0% 50%,38% 38%);
  background:linear-gradient(180deg,#fff,#dff4ff);box-shadow:0 0 10px #bfeaff}
.c4-cleave .c4-weather.el-2 .w-bit{background:linear-gradient(160deg,#f2fbe9,#9fd8a8);border-radius:1px;box-shadow:0 0 8px rgba(160,210,160,.8)}
.c4-cleave .c4-weather.el-3 .w-bit{background:linear-gradient(180deg,transparent,#fff 35%,#d6c2ff 70%,transparent);
  filter:drop-shadow(0 0 6px #b79ee8)}
@keyframes c4w-bit{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.4)}
  12%{opacity:1}
  70%{opacity:.9}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) rotate(var(--rot,180deg)) scale(.7)}
}
@media (prefers-reduced-motion: reduce){
  .c4-cleave .c4-weather{display:none}
}