/*
  SlashingEdge Animation Library

  Add Animated and one animation class to an element:
  class="Animated FadeIn"

  Animation classes temporarily own transform and opacity. Animate a wrapper
  when the target already uses transform for layout or movement.
*/

.Animated {
  --se-animation-duration:400ms;
  --se-animation-delay:0ms;
  animation-duration:var(--se-animation-duration);
  animation-delay:var(--se-animation-delay);
  animation-fill-mode:both;
  animation-timing-function:ease;
  backface-visibility:hidden;
}

.Animated.Instant{--se-animation-duration:100ms; }
.Animated.Faster{--se-animation-duration:200ms; }
.Animated.Fast{--se-animation-duration:300ms; }
.Animated.Normal{--se-animation-duration:400ms; }
.Animated.Slow{--se-animation-duration:700ms; }
.Animated.Slower{--se-animation-duration:1000ms; }
.Animated.DelayS{--se-animation-delay:100ms; }
.Animated.DelayM{--se-animation-delay:250ms; }
.Animated.DelayL{--se-animation-delay:500ms; }
.Animated.Linear{animation-timing-function:linear; }
.Animated.EaseIn{animation-timing-function:ease-in; }
.Animated.EaseOut{animation-timing-function:ease-out; }
.Animated.EaseInOut{animation-timing-function:ease-in-out; }
.Animated.Infinite{animation-iteration-count:infinite; }
.Animated.Alternate{animation-direction:alternate; }
.Animated.Paused{animation-play-state:paused; }

/* ===== FADE ===== */

.Animated.FadeIn{animation-name:SEFadeIn; }
.Animated.FadeOut{animation-name:SEFadeOut; }
.Animated.FadeInUp{animation-name:SEFadeInUp; }
.Animated.FadeInDown{animation-name:SEFadeInDown; }
.Animated.FadeInLeft{animation-name:SEFadeInLeft; }
.Animated.FadeInRight{animation-name:SEFadeInRight; }
.Animated.FadeOutUp{animation-name:SEFadeOutUp; }
.Animated.FadeOutDown{animation-name:SEFadeOutDown; }
.Animated.FadeOutLeft{animation-name:SEFadeOutLeft; }
.Animated.FadeOutRight{animation-name:SEFadeOutRight; }

@keyframes SEFadeIn {
  from{opacity:0; }
  to{opacity:1; }
}

@keyframes SEFadeOut {
  from{opacity:1; }
  to{opacity:0; }
}

@keyframes SEFadeInUp {
  from{opacity:0; transform:translate3d(0, 24px, 0); }
  to{opacity:1; transform:translate3d(0, 0, 0); }
}

@keyframes SEFadeInDown {
  from{opacity:0; transform:translate3d(0, -24px, 0); }
  to{opacity:1; transform:translate3d(0, 0, 0); }
}

@keyframes SEFadeInLeft {
  from{opacity:0; transform:translate3d(-24px, 0, 0); }
  to{opacity:1; transform:translate3d(0, 0, 0); }
}

@keyframes SEFadeInRight {
  from{opacity:0; transform:translate3d(24px, 0, 0); }
  to{opacity:1; transform:translate3d(0, 0, 0); }
}

@keyframes SEFadeOutUp {
  from{opacity:1; transform:translate3d(0, 0, 0); }
  to{opacity:0; transform:translate3d(0, -24px, 0); }
}

@keyframes SEFadeOutDown {
  from{opacity:1; transform:translate3d(0, 0, 0); }
  to{opacity:0; transform:translate3d(0, 24px, 0); }
}

@keyframes SEFadeOutLeft {
  from{opacity:1; transform:translate3d(0, 0, 0); }
  to{opacity:0; transform:translate3d(-24px, 0, 0); }
}

@keyframes SEFadeOutRight {
  from{opacity:1; transform:translate3d(0, 0, 0); }
  to{opacity:0; transform:translate3d(24px, 0, 0); }
}

/* ===== SLIDE ===== */

.Animated.SlideInUp{animation-name:SESlideInUp; }
.Animated.SlideInDown{animation-name:SESlideInDown; }
.Animated.SlideInLeft{animation-name:SESlideInLeft; }
.Animated.SlideInRight{animation-name:SESlideInRight; }
.Animated.SlideOutUp{animation-name:SESlideOutUp; }
.Animated.SlideOutDown{animation-name:SESlideOutDown; }
.Animated.SlideOutLeft{animation-name:SESlideOutLeft; }
.Animated.SlideOutRight{animation-name:SESlideOutRight; }

@keyframes SESlideInUp {
  from{visibility:visible; transform:translate3d(0, 100%, 0); }
  to{transform:translate3d(0, 0, 0); }
}

@keyframes SESlideInDown {
  from{visibility:visible; transform:translate3d(0, -100%, 0); }
  to{transform:translate3d(0, 0, 0); }
}

@keyframes SESlideInLeft {
  from{visibility:visible; transform:translate3d(-100%, 0, 0); }
  to{transform:translate3d(0, 0, 0); }
}

@keyframes SESlideInRight {
  from{visibility:visible; transform:translate3d(100%, 0, 0); }
  to{transform:translate3d(0, 0, 0); }
}

@keyframes SESlideOutUp {
  from{transform:translate3d(0, 0, 0); }
  to{visibility:hidden; transform:translate3d(0, -100%, 0); }
}

@keyframes SESlideOutDown {
  from{transform:translate3d(0, 0, 0); }
  to{visibility:hidden; transform:translate3d(0, 100%, 0); }
}

@keyframes SESlideOutLeft {
  from{transform:translate3d(0, 0, 0); }
  to{visibility:hidden; transform:translate3d(-100%, 0, 0); }
}

@keyframes SESlideOutRight {
  from{transform:translate3d(0, 0, 0); }
  to{visibility:hidden; transform:translate3d(100%, 0, 0); }
}

/* ===== SCALE AND ZOOM ===== */

.Animated.ZoomIn{animation-name:SEZoomIn; }
.Animated.ZoomOut{animation-name:SEZoomOut; }
.Animated.PopIn{animation-name:SEPopIn; }
.Animated.BounceIn{animation-name:SEBounceIn; }
.Animated.DropIn{animation-name:SEDropIn; }
.Animated.RiseOut{animation-name:SERiseOut; }
.Animated.Collect{animation-name:SECollect; }

@keyframes SEZoomIn {
  from{opacity:0; transform:scale3d(0.7, 0.7, 1); }
  to{opacity:1; transform:scale3d(1, 1, 1); }
}

@keyframes SEZoomOut {
  from{opacity:1; transform:scale3d(1, 1, 1); }
  to{opacity:0; transform:scale3d(0.7, 0.7, 1); }
}

@keyframes SEPopIn {
  0%{opacity:0; transform:scale3d(0.4, 0.4, 1); }
  70%{opacity:1; transform:scale3d(1.12, 1.12, 1); }
  100%{opacity:1; transform:scale3d(1, 1, 1); }
}

@keyframes SEBounceIn {
  0%{opacity:0; transform:scale3d(0.3, 0.3, 1); }
  50%{opacity:1; transform:scale3d(1.08, 1.08, 1); }
  70%{transform:scale3d(0.94, 0.94, 1); }
  100%{opacity:1; transform:scale3d(1, 1, 1); }
}

@keyframes SEDropIn {
  0%{opacity:0; transform:translate3d(0, -80px, 0) scale3d(0.9, 0.9, 1); }
  70%{opacity:1; transform:translate3d(0, 8px, 0) scale3d(1, 1, 1); }
  100%{opacity:1; transform:translate3d(0, 0, 0) scale3d(1, 1, 1); }
}

@keyframes SERiseOut {
  0%{opacity:1; transform:translate3d(0, 0, 0) scale3d(1, 1, 1); }
  100%{opacity:0; transform:translate3d(0, -80px, 0) scale3d(0.8, 0.8, 1); }
}

@keyframes SECollect {
  0%{opacity:1; transform:translate3d(0, 0, 0) scale3d(1, 1, 1); }
  45%{opacity:1; transform:translate3d(0, -12px, 0) scale3d(1.2, 1.2, 1); }
  100%{opacity:0; transform:translate3d(0, -48px, 0) scale3d(0.2, 0.2, 1); }
}

/* ===== ATTENTION AND FEEDBACK ===== */

.Animated.Pulse{animation-name:SEPulse; }
.Animated.Heartbeat{animation-name:SEHeartbeat; }
.Animated.Bounce{animation-name:SEBounce; transform-origin:center bottom; }
.Animated.ShakeX{animation-name:SEShakeX; }
.Animated.ShakeY{animation-name:SEShakeY; }
.Animated.Wobble{animation-name:SEWobble; }
.Animated.Swing{animation-name:SESwing; transform-origin:center top; }
.Animated.RubberBand{animation-name:SERubberBand; }
.Animated.Jello{animation-name:SEJello; transform-origin:center; }
.Animated.Tada{animation-name:SETada; }
.Animated.Flash{animation-name:SEFlash; }
.Animated.TextPulse{animation-name:SETextPulse; }
.Animated.Flicker{animation-name:SEFlicker; }
.Animated.Recoil{animation-name:SERecoil; }
.Animated.Hit{animation-name:SEHit; }

@keyframes SEPulse {
  0%, 100%{transform:scale3d(1, 1, 1); }
  50%{transform:scale3d(1.08, 1.08, 1); }
}

@keyframes SEHeartbeat {
  0%, 35%, 70%, 100%{transform:scale3d(1, 1, 1); }
  15%, 50%{transform:scale3d(1.16, 1.16, 1); }
}

@keyframes SEBounce {
  0%, 20%, 53%, 80%, 100%{transform:translate3d(0, 0, 0); }
  40%, 43%{transform:translate3d(0, -24px, 0); }
  70%{transform:translate3d(0, -12px, 0); }
  90%{transform:translate3d(0, -4px, 0); }
}

@keyframes SEShakeX {
  0%, 100%{transform:translate3d(0, 0, 0); }
  20%, 60%{transform:translate3d(-8px, 0, 0); }
  40%, 80%{transform:translate3d(8px, 0, 0); }
}

@keyframes SEShakeY {
  0%, 100%{transform:translate3d(0, 0, 0); }
  20%, 60%{transform:translate3d(0, -8px, 0); }
  40%, 80%{transform:translate3d(0, 8px, 0); }
}

@keyframes SEWobble {
  0%, 100%{transform:translate3d(0, 0, 0) rotate(0deg); }
  15%{transform:translate3d(-18px, 0, 0) rotate(-5deg); }
  30%{transform:translate3d(14px, 0, 0) rotate(4deg); }
  45%{transform:translate3d(-10px, 0, 0) rotate(-3deg); }
  60%{transform:translate3d(6px, 0, 0) rotate(2deg); }
  75%{transform:translate3d(-3px, 0, 0) rotate(-1deg); }
}

@keyframes SESwing {
  0%, 100%{transform:rotate(0deg); }
  20%{transform:rotate(12deg); }
  40%{transform:rotate(-9deg); }
  60%{transform:rotate(5deg); }
  80%{transform:rotate(-3deg); }
}

@keyframes SERubberBand {
  0%, 100%{transform:scale3d(1, 1, 1); }
  30%{transform:scale3d(1.25, 0.75, 1); }
  40%{transform:scale3d(0.75, 1.25, 1); }
  50%{transform:scale3d(1.15, 0.85, 1); }
  65%{transform:scale3d(0.95, 1.05, 1); }
  75%{transform:scale3d(1.05, 0.95, 1); }
}

@keyframes SEJello {
  0%, 100%{transform:skewX(0deg) skewY(0deg); }
  22%{transform:skewX(-10deg) skewY(-10deg); }
  33%{transform:skewX(7deg) skewY(7deg); }
  44%{transform:skewX(-4deg) skewY(-4deg); }
  55%{transform:skewX(2deg) skewY(2deg); }
  66%{transform:skewX(-1deg) skewY(-1deg); }
}

@keyframes SETada {
  0%, 100%{transform:scale3d(1, 1, 1) rotate(0deg); }
  10%, 20%{transform:scale3d(0.9, 0.9, 1) rotate(-3deg); }
  30%, 50%, 70%, 90%{transform:scale3d(1.1, 1.1, 1) rotate(3deg); }
  40%, 60%, 80%{transform:scale3d(1.1, 1.1, 1) rotate(-3deg); }
}

@keyframes SEFlash {
  0%, 50%, 100%{opacity:1; }
  25%, 75%{opacity:0; }
}

@keyframes SETextPulse {
  0%, 100%{opacity:1; }
  50%{opacity:0.45; }
}

@keyframes SEFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100%{opacity:1; }
  20%, 24%, 55%{opacity:0.25; }
}

@keyframes SERecoil {
  0%, 100%{transform:translate3d(0, 0, 0) rotate(0deg); }
  30%{transform:translate3d(-12px, 0, 0) rotate(-2deg); }
  60%{transform:translate3d(4px, 0, 0) rotate(1deg); }
}

@keyframes SEHit {
  0%, 100%{transform:translate3d(0, 0, 0) scale3d(1, 1, 1); }
  20%{transform:translate3d(-7px, 0, 0) scale3d(0.96, 0.96, 1); }
  40%{transform:translate3d(7px, 0, 0) scale3d(1.04, 1.04, 1); }
  60%{transform:translate3d(-4px, 0, 0) scale3d(0.98, 0.98, 1); }
  80%{transform:translate3d(4px, 0, 0) scale3d(1.02, 1.02, 1); }
}

/* ===== CONTINUOUS MEDIA AND GAME LOOPS ===== */

.Animated.Spin{animation-name:SESpin; }
.Animated.SpinReverse{animation-name:SESpinReverse; }
.Animated.Float{animation-name:SEFloat; }
.Animated.Bob{animation-name:SEBob; }
.Animated.Blink{animation-name:SEBlink; }
.Animated.CoinSpin{animation-name:SECoinSpin; }
.Animated.FlipX{animation-name:SEFlipX; }
.Animated.FlipY{animation-name:SEFlipY; }
.Animated.Glow{animation-name:SEGlow; }

@keyframes SESpin {
  from{transform:rotate(0deg); }
  to{transform:rotate(360deg); }
}

@keyframes SESpinReverse {
  from{transform:rotate(360deg); }
  to{transform:rotate(0deg); }
}

@keyframes SEFloat {
  0%, 100%{transform:translate3d(0, 0, 0); }
  50%{transform:translate3d(0, -12px, 0); }
}

@keyframes SEBob {
  0%, 100%{transform:translate3d(0, -4px, 0) rotate(-1deg); }
  50%{transform:translate3d(0, 4px, 0) rotate(1deg); }
}

@keyframes SEBlink {
  0%, 49%{opacity:1; }
  50%, 100%{opacity:0; }
}

@keyframes SECoinSpin {
  from{transform:perspective(400px) rotateY(0deg); }
  to{transform:perspective(400px) rotateY(360deg); }
}

@keyframes SEFlipX {
  from{transform:perspective(500px) rotateX(0deg); }
  to{transform:perspective(500px) rotateX(360deg); }
}

@keyframes SEFlipY {
  from{transform:perspective(500px) rotateY(0deg); }
  to{transform:perspective(500px) rotateY(360deg); }
}

@keyframes SEGlow {
  0%, 100%{filter:brightness(1); }
  50%{filter:brightness(1.6); }
}

@media (prefers-reduced-motion:reduce) {
  .Animated {
    --se-animation-duration:1ms;
    --se-animation-delay:0ms;
    animation-iteration-count:1;
  }
}