:root {
  --fx-dur:1s; --fx-ease:cubic-bezier(.16,.84,.24,1); --fx-ease-io:cubic-bezier(.76,0,.22,1);
  --fx-rise:38px; --fx-slide:40px; --fx-blur:7px;
  --fx-step:.08s;
  
  --fx-cap:8;
  
  --fx-failsafe:2.5s;
}


@property --fx-at { syntax:'<time>'; inherits:false; initial-value:0s; }
@property --fx-soft { syntax:'*'; inherits:false; }
.fx [data-fx] { --fx-d:calc(min(var(--fx-i, 0), var(--fx-cap)) * var(--fx-step) + var(--fx-at, 0s)); }
.fx [data-fx]:not(.in, [data-fx-lit] *) { opacity:0; }
.fx:not(.fx-live) [data-fx]:not(.in, [data-fx-lit] *) { animation:fx-show 0s var(--fx-failsafe) forwards; }
@keyframes fx-show { to { opacity:1; } }

.fx [data-fx].fx-now { animation:none !important; }


.fx [data-fx~=rise]:is(.in, [data-fx-lit] *)  { animation:fx-rise  var(--fx-dur) var(--fx-ease) var(--fx-d) backwards; }
.fx [data-fx~=slide]:is(.in, [data-fx-lit] *) { animation:fx-slide var(--fx-dur) var(--fx-ease) var(--fx-d) backwards; }
.fx [data-fx~=fade]:is(.in, [data-fx-lit] *)  { animation:fx-fade  var(--fx-dur) var(--fx-ease) var(--fx-d) backwards; }

.fx [data-fx~=stamp]:is(.in, [data-fx-lit] *) { animation:fx-stamp .5s cubic-bezier(.3,1.45,.5,1) var(--fx-d) backwards; }

.fx [data-fx~=draw]:is(.in, [data-fx-lit] *)  { animation:fx-draw  1.2s var(--fx-ease) var(--fx-d) backwards; }
.fx [data-fx~=print]:is(.in, [data-fx-lit] *) { animation:fx-print .7s var(--fx-ease) var(--fx-d) backwards; }

@keyframes fx-rise  { from { opacity:0; translate:0 var(--fx-rise); filter:var(--fx-soft, none); } }
@keyframes fx-slide { from { opacity:0; translate:calc(-1 * var(--fx-slide)) 0; filter:var(--fx-soft, none); } }
@keyframes fx-fade  { from { opacity:0; filter:var(--fx-soft, none); } }
@keyframes fx-stamp { from { opacity:0; scale:.55; } }



@keyframes fx-draw  { from { clip-path:inset(-12px 100% -12px 0); } to { clip-path:inset(-12px 0 -12px 0); } }
@keyframes fx-print { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0); } }

html[data-gpu="yes"] [data-fx~=soft] { --fx-soft:blur(var(--fx-blur)); }