/* Animation Duration System - matches EverWeb transition timing */
/*
  USAGE INSTRUCTIONS:
  
  1. Automatic: Elements with inline transition styles will use that duration
     Example: <div style="transition: all 0.38s ease-in-out" class="ewt-d-scale-up">
     
  2. Manual override: Set --animation-duration on any element
     Example: <div style="--animation-duration: 0.5s" class="ewt-d-scale-up">
     
  3. Global override: Change the :root values to affect all animations
     
  4. Different animation types use multipliers for appropriate timing:
     - Basic animations: 1x duration
     - Bounces: 2x duration  
     - Flips: 2x duration
     - Jiggles: 2.5x duration
*/
:root {
  --default-animation-duration: 0.38s; /* Default EverWeb timing */
  --bounce-duration-multiplier: 2; /* Bounces need more time */
  --flip-duration-multiplier: 2; /* Flips need more time */
  --jiggle-duration-multiplier: 2.5; /* Jiggles need more time */
}

/* Inherit timing from elements with inline transition styles */
[style*="transition"] {
  --animation-duration: var(--default-animation-duration);
}

/* Scale up */
@keyframes click-scale-up {
  0%   { transform: none; }
  50%  { transform: scale(1.15); }
  100% { transform: none; }
}

.ewt-h-scale-up:hover, .ewt-h-scale-up:focus {
  transform: scale(1.15);
}

.ewt-d-scale-up:active {
  animation: click-scale-up var(--animation-duration, 0.6s) ease-in-out;
}

/* Scale down */
@keyframes click-scale-down {
  0%   { transform: none; }
  50%  { transform: scale(0.85); }
  100% { transform: none; }
}

.ewt-h-scale-down:hover, .ewt-h-scale-down:focus {
  transform: scale(0.85);
}

.ewt-d-scale-down:active {
  animation: click-scale-down var(--animation-duration, 0.6s) ease-in-out;
}

/* Pulsate */
@keyframes ewt-pulsate {
  25% {
	transform: scale(1.15);
  }
  75% {
	transform: scale(0.85);
  }
}

.ewt-h-pulsate:hover, .ewt-h-pulsate:focus {
  animation-name: ewt-pulsate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

.ewt-d-pulsate:active {
  animation-name: ewt-pulsate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

/* Pulsate Scale Up */
@keyframes ewt-pulse-scale-up {
  to {
	transform: scale(1.15);
  }
}

.ewt-h-pulsate-scale-up:hover, .ewt-h-pulsate-scale-up:focus {
  animation-name: ewt-pulse-scale-up;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.ewt-d-pulsate-scale-up:active {
  animation-name: ewt-pulse-scale-up;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Pulse Scale Down */

@keyframes ewt-pulsate-scale-down {
  to {
	transform: scale(0.9);
  }
}

.ewt-h-pulsate-scale-down:hover, .ewt-h-pulsate-scale-down:focus {
  animation-name: ewt-pulsate-scale-down;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.ewt-d-pulsate-scale-down:active {
  animation-name: ewt-pulsate-scale-down;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Push */
@keyframes ewt-push {
  50% {
	transform: scale(0.8);
  }
  100% {
	transform: scale(1);
  }
}

.ewt-h-push:hover, .ewt-h-push:focus {
  animation-name: ewt-push;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.ewt-d-push:active {
  animation-name: ewt-push;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

/* Pop */
@keyframes ewt-pop {
  50% {
	transform: scale(1.2);
  }
}

.ewt-h-pop:hover, .ewt-h-pop:focus {
  animation-name: ewt-pop;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.ewt-d-pop:active {
  animation-name: ewt-pop;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

/* Bounce In */
@keyframes click-bounce-in {
  0%   { transform: none; }
  50%  { transform: scale(1.2); }
  100% { transform: none; }
}

.ewt-h-bounce-in:hover, .ewt-h-bounce-in:focus {
  transform: scale(1.2);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36) !important;
}

.ewt-d-bounce-in:active {
  animation: click-bounce-in calc(var(--animation-duration, 0.8s) * var(--bounce-duration-multiplier)) cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* Bounce Out */
@keyframes click-bounce-out {
  0%   { transform: none; }
  50%  { transform: scale(0.8); }
  100% { transform: none; }
}

.ewt-h-bounce-out:hover, .ewt-h-bounce-out:focus {
  transform: scale(0.8);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36) !important;
}

.ewt-d-bounce-out:active {
  animation: click-bounce-out calc(var(--animation-duration, 0.8s) * var(--bounce-duration-multiplier)) cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* Rotate Right */
@keyframes click-rotate-right {
  0%   { transform: none; }
  50%  { transform: rotate(6deg); }
  100% { transform: none; }
}

.ewt-h-rotate-right:hover, .ewt-h-rotate-right:focus {
  transform: rotate(6deg);
}

.ewt-d-rotate-right:active {
  animation: click-rotate-right var(--animation-duration, 0.6s) ease-in-out;
}

/* Rotate Left */
@keyframes click-rotate-left {
  0%   { transform: none; }
  50%  { transform: rotate(-6deg); }
  100% { transform: none; }
}

.ewt-h-rotate-left:hover, .ewt-h-rotate-left:focus {
  transform: rotate(-6deg);
}

.ewt-d-rotate-left:active {
  animation: click-rotate-left var(--animation-duration, 0.6s) ease-in-out;
}

/* Rotate Scale Up*/
@keyframes click-rotate-scale-up {
  0%   { transform: none; }
  50%  { transform: scale(1.1) rotate(6deg); }
  100% { transform: none; }
}

.ewt-h-rotate-scale-up:hover, .ewt-h-rotate-scale-up:focus {
  transform: scale(1.1) rotate(6deg);
}

.ewt-d-rotate-scale-up:active {
  animation: click-rotate-scale-up 0.7s ease-in-out;
}

/* Float */
@keyframes click-float {
  0%   { transform: none; }
  50%  { transform: translateY(-10px); }
  100% { transform: none; }
}

.ewt-h-float:hover, .ewt-h-float:focus {
  transform: translateY(-10px);
}

.ewt-d-float:active {
  animation: click-float var(--animation-duration, 0.6s) ease-in-out;
}

/* Sink */
@keyframes click-sink {
  0%   { transform: none; }
  50%  { transform: translateY(8px); }
  100% { transform: none; }
}

.ewt-h-sink:hover, .ewt-h-sink:focus {
  transform: translateY(8px);
}

.ewt-d-sink:active {
  animation: click-sink 0.6s ease-in-out;
}

/* Bob */
@keyframes ewt-bob {
  0% {
	transform: translateY(-8px);
  }
  50% {
	transform: translateY(-4px);
  }
  100% {
	transform: translateY(-8px);
  }
}

@keyframes ewt-bob-float {
  100% {
	transform: translateY(-8px);
  }
}

.ewt-h-bob:hover, .ewt-h-bob:focus {
  animation-name: ewt-bob-float, ewt-bob;
  animation-duration: .3s, 1.5s;
  animation-delay: 0s, .3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}

.ewt-d-bob:active {
  animation-name: ewt-bob-float, ewt-bob;
  animation-duration: .3s, 1.5s;
  animation-delay: 0s, .3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}

/* Hang */
@keyframes ewt-hang {
  0% {
	transform: translateY(10px);
  }
  50% {
	transform: translateY(5px);
  }
  100% {
	transform: translateY(10px);
  }
}

@keyframes ewt-hang-sink {
  100% {
	transform: translateY(8px);
  }
}

.ewt-h-hang:hover, .ewt-h-hang:focus {
  animation-name: ewt-hang-sink, ewt-hang;
  animation-duration: .3s, 1.5s;
  animation-delay: 0s, .3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}

.ewt-d-hang:active {
  animation-name: ewt-hang-sink, ewt-hang;
  animation-duration: .3s, 1.5s;
  animation-delay: 0s, .3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}

/* Skew */
@keyframes click-skew {
  0%   { transform: none; }
  50%  { transform: skew(-10deg); }
  100% { transform: none; }
}

.ewt-h-skew:hover, .ewt-h-skew:focus {
  transform: skew(-10deg);
}

.ewt-d-skew:active {
  animation: click-skew 0.6s ease-in-out;
}

/* Skew Forward */
@keyframes click-skew-forward {
  0%   { transform: none; }
  50%  { transform: skew(-10deg); }
  100% { transform: none; }
}

.ewt-h-skew-forward {
	transform-origin: 0 100%;
}
.ewt-h-skew-forward:hover, .ewt-h-skew-forward:focus {
  transform: skew(-10deg);
}

.ewt-d-skew-forward:active {
  animation: click-skew-forward 0.6s ease-in-out;
  transform-origin: 0 100%;
}

/* Skew Backward */
@keyframes click-skew-backward {
  0%   { transform: none; }
  50%  { transform: skew(10deg); }
  100% { transform: none; }
}

.ewt-h-skew-backward {
	transform-origin: 0 100%;
}

.ewt-h-skew-backward:hover, .ewt-h-skew-backward:focus {
  transform: skew(10deg);
}

.ewt-d-skew-backward:active {
  animation: click-skew-backward 0.6s ease-in-out;
  transform-origin: 0 100%;
}

/* jiggle Vertical */
@keyframes ewt-jiggle-vertical {
  16.65% {
	transform: translateY(8px);
  }
  33.3% {
	transform: translateY(-6px);
  }
  49.95% {
	transform: translateY(4px);
  }
  66.6% {
	transform: translateY(-2px);
  }
  83.25% {
	transform: translateY(1px);
  }
  100% {
	transform: translateY(0);
  }
}

.ewt-h-jiggle-vertical:hover, .ewt-h-jiggle-vertical:focus {
  animation-name: ewt-jiggle-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

.ewt-d-jiggle-vertical:active {
  animation-name: ewt-jiggle-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

/* jiggle Horizontal */
@keyframes ewt-jiggle-horizontal {
  16.65% {
	transform: translateX(8px);
  }
  33.3% {
	transform: translateX(-6px);
  }
  49.95% {
	transform: translateX(4px);
  }
  66.6% {
	transform: translateX(-2px);
  }
  83.25% {
	transform: translateX(1px);
  }
  100% {
	transform: translateX(0);
  }
}

.ewt-h-jiggle-horizontal:hover, .ewt-h-jiggle-horizontal:focus {
  animation-duration: 1s;
  animation-name: ewt-jiggle-horizontal;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

.ewt-d-jiggle-horizontal:active {
  animation-duration: 1s;
  animation-name: ewt-jiggle-horizontal;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

/* jiggle To Bottom Right */
@keyframes ewt-jiggle-to-bottom-right {
  16.65% {
	transform: translate(8px, 8px);
  }
  33.3% {
	transform: translate(-6px, -6px);
  }
  49.95% {
	transform: translate(4px, 4px);
  }
  66.6% {
	transform: translate(-2px, -2px);
  }
  83.25% {
	transform: translate(1px, 1px);
  }
  100% {
	transform: translate(0, 0);
  }
}

.ewt-h-jiggle-to-bottom-right:hover, .ewt-h-jiggle-to-bottom-right:focus {
  animation-name: ewt-jiggle-to-bottom-right;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

.ewt-d-jiggle-to-bottom-right:active {
  animation-name: ewt-jiggle-to-bottom-right;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

/* jiggle To Top Right */
@keyframes ewt-jiggle-to-top-right {
  16.65% {
	transform: translate(8px, -8px);
  }
  33.3% {
	transform: translate(-6px, 6px);
  }
  49.95% {
	transform: translate(4px, -4px);
  }
  66.6% {
	transform: translate(-2px, 2px);
  }
  83.25% {
	transform: translate(1px, -1px);
  }
  100% {
	transform: translate(0, 0);
  }
}

.ewt-h-jiggle-to-top-right:hover, .ewt-h-jiggle-to-top-right:focus {
  animation-name: ewt-jiggle-to-top-right;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

.ewt-d-jiggle-to-top-right:active {
  animation-name: ewt-jiggle-to-top-right;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

/* jiggle Top */

@keyframes ewt-jiggle-top {
  16.65% {
	transform: skew(-12deg);
  }
  33.3% {
	transform: skew(10deg);
  }
  49.95% {
	transform: skew(-6deg);
  }
  66.6% {
	transform: skew(4deg);
  }
  83.25% {
	transform: skew(-2deg);
  }
  100% {
	transform: skew(0);
  }
}

.ewt-h-jiggle-top {
	transform-origin: 0 100%;
}

.ewt-h-jiggle-top:hover, .ewt-h-jiggle-top:focus {
  animation-name: ewt-jiggle-top;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

.ewt-d-jiggle-top:active {
  animation-name: ewt-jiggle-top;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

/* jiggle Bottom */

@keyframes ewt-jiggle-bottom {
  16.65% {
	transform: skew(-12deg);
  }
  33.3% {
	transform: skew(10deg);
  }
  49.95% {
	transform: skew(-6deg);
  }
  66.6% {
	transform: skew(4deg);
  }
  83.25% {
	transform: skew(-2deg);
  }
  100% {
	transform: skew(0);
  }
}

.ewt-h-jiggle-bottom {
	transform-origin: 100% 0;
}

.ewt-h-jiggle-bottom:hover, .ewt-h-jiggle-bottom:focus {
  animation-name: ewt-jiggle-bottom;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

.ewt-d-jiggle-bottom:active {
  animation-name: ewt-jiggle-bottom;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

/* jiggle Skew */

@keyframes ewt-jiggle-skew {
  16.65% {
	transform: skew(-12deg);
  }
  33.3% {
	transform: skew(10deg);
  }
  49.95% {
	transform: skew(-6deg);
  }
  66.6% {
	transform: skew(4deg);
  }
  83.25% {
	transform: skew(-2deg);
  }
  100% {
	transform: skew(0);
  }
}

.ewt-h-jiggle-skew:hover, .ewt-h-jiggle-skew:focus {
  animation-name: ewt-jiggle-skew;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

.ewt-d-jiggle-skew:active {
  animation-name: ewt-jiggle-skew;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

/* Buzz */

@keyframes ewt-buzz {
  50% {
	transform: translateX(3px) rotate(2deg);
  }
  100% {
	transform: translateX(-3px) rotate(-2deg);
  }
}

.ewt-h-buzz:hover, .ewt-h-buzz:focus {
  animation-name: ewt-buzz;
  animation-duration: 0.15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.ewt-d-buzz:active {
  animation-name: ewt-buzz;
  animation-duration: 0.15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* Buzz Out */
@keyframes ewt-buzz-out {
  10% {
	transform: translateX(3px) rotate(2deg);
  }
  20% {
	transform: translateX(-3px) rotate(-2deg);
  }
  30% {
	transform: translateX(3px) rotate(2deg);
  }
  40% {
	transform: translateX(-3px) rotate(-2deg);
  }
  50% {
	transform: translateX(2px) rotate(1deg);
  }
  60% {
	transform: translateX(-2px) rotate(-1deg);
  }
  70% {
	transform: translateX(2px) rotate(1deg);
  }
  80% {
	transform: translateX(-2px) rotate(-1deg);
  }
  90% {
	transform: translateX(1px) rotate(0);
  }
  100% {
	transform: translateX(-1px) rotate(0);
  }
}

.ewt-h-buzz-out:hover, .ewt-h-buzz-out:focus {
  animation-name: ewt-buzz-out;
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

.ewt-d-buzz-out:active {
  animation-name: ewt-buzz-out;
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

/* Forward */
@keyframes click-forward {
  0%   { transform: none; }
  50%  { transform: translateX(8px); }
  100% { transform: none; }
}

.ewt-h-forward:hover, .ewt-h-forward:focus {
  transform: translateX(8px);
}

.ewt-d-forward:active {
  animation: click-forward var(--animation-duration, 0.5s) ease-in-out;
}

/* Backward */
@keyframes click-backward {
  0%   { transform: none; }
  50%  { transform: translateX(-8px); }
  100% { transform: none; }
}

.ewt-h-backward:hover, .ewt-h-backward:focus {
  transform: translateX(-8px);
}

.ewt-d-backward:active {
  animation: click-backward var(--animation-duration, 0.5s) ease-in-out;
}

/* Sway */
@keyframes ewt-sway {
  50% {
	transform: translateX(3px) rotate(2deg);
  }
  100% {
	transform: translateX(-3px) rotate(-2deg);
  }
}

.ewt-h-sway:hover, .ewt-h-sway:focus {
  animation-name: ewt-sway;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

.ewt-d-sway:active {
  animation-name: ewt-sway;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

/* Sway Out */
@keyframes ewt-sway-out {
  50% {
	transform: translateX(3px) rotate(2deg);
  }
  100% {
	transform: translateX(-3px) rotate(-2deg);
  }
}

.ewt-h-sway-out:hover, .ewt-h-sway-out:focus {
  animation-name: ewt-sway-out;
  animation-duration: 1s;
  animation-iteration-count: 5;
  animation-timing-function: ease;
}

.ewt-d-sway-out:active {
  animation-name: ewt-sway-out;
  animation-duration: 1s;
  animation-iteration-count: 5;
  animation-timing-function: ease;
}

/* Swing */
@keyframes ewt-swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0); }
}

.ewt-h-swing:hover, .ewt-h-swing:focus {
  animation-name: ewt-swing;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

.ewt-d-swing:active {
  animation-name: ewt-swing;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

/* Flip */
@keyframes click-flip {
  0%   { transform: none; }
  50%  { transform: rotateY(180deg); }
  100% { transform: none; }
}

.ewt-h-flip:hover, .ewt-h-flip:focus {
  transform: rotateY(180deg);
}

.ewt-d-flip:active {
  animation: click-flip calc(var(--animation-duration, 0.8s) * var(--flip-duration-multiplier)) ease-in-out;
}

/* Flip Up */
@keyframes click-flip-up {
  0%   { transform: none; }
  50%  { transform: rotateX(180deg); }
  100% { transform: none; }
}

.ewt-h-flip-up:hover, .ewt-h-flip-up:focus {
  transform: rotateX(180deg);
  perspective: 1000px;
}

.ewt-d-flip-up:active {
  animation: click-flip-up 0.8s ease-in-out;
  perspective: 1000px;
}

/* Flip Down */
@keyframes click-flip-down {
  0%   { transform: none; }
  50%  { transform: rotateX(-180deg); }
  100% { transform: none; }
}

.ewt-h-flip-down:hover, .ewt-h-flip-down:focus {
  transform: rotateX(-180deg);
  perspective: 1000px;
}

.ewt-d-flip-down:active {
  animation: click-flip-down 0.8s ease-in-out;
  perspective: 1000px;
}

/* Flip Right */
@keyframes click-flip-right {
  0%   { transform: none; }
  50%  { transform: rotateY(180deg); }
  100% { transform: none; }
}

.ewt-h-flip-right:hover, .ewt-h-flip-right:focus {
  transform: rotateY(180deg);
  perspective: 1000px;
}

.ewt-d-flip-right:active {
  animation: click-flip-right 0.8s ease-in-out;
  perspective: 1000px;
}

/* Flip Left */
@keyframes click-flip-left {
  0%   { transform: none; }
  50%  { transform: rotateY(-180deg); }
  100% { transform: none; }
}

.ewt-h-flip-left:hover, .ewt-h-flip-left:focus {
  transform: rotateY(-180deg);
  perspective: 1000px;
}

.ewt-d-flip-left:active {
  animation: click-flip-left 0.8s ease-in-out;
  perspective: 1000px;
}

/* Twist */
@keyframes click-twist {
  0%   { transform: none; }
  50%  { transform: rotateZ(10deg) rotateY(10deg); }
  100% { transform: none; }
}

.ewt-h-twist:hover, .ewt-h-twist:focus {
  transform: rotateZ(10deg) rotateY(10deg);
  perspective: 1000px;
}

.ewt-d-twist:active {
  animation: click-twist 0.7s ease-in-out;
  perspective: 1000px;
}

/* Shrink Width */
@keyframes click-shrink-width {
  0%   { transform: none; }
  50%  { transform: scaleX(0.8); }
  100% { transform: none; }
}

.ewt-h-shrink-width:hover, .ewt-h-shrink-width:focus {
  transform: scaleX(0.8);
}

.ewt-d-shrink-width:active {
  animation: click-shrink-width 0.6s ease-in-out;
}

/* Shrink Height */
@keyframes click-shrink-height {
  0%   { transform: none; }
  50%  { transform: scaleY(0.8); }
  100% { transform: none; }
}

.ewt-h-shrink-height:hover, .ewt-h-shrink-height:focus {
  transform: scaleY(0.8);
}

.ewt-d-shrink-height:active {
  animation: click-shrink-height 0.6s ease-in-out;
}

/* Tilt Skew */
@keyframes click-tilt-skew {
  0%   { transform: none; }
  50%  { transform: rotate(5deg) skewX(5deg); }
  100% { transform: none; }
}

.ewt-h-tilt-skew:hover, .ewt-h-tilt-skew:focus {
  transform: rotate(5deg) skewX(5deg);
}

.ewt-d-tilt-skew:active {
  animation: click-tilt-skew 0.6s ease-in-out;
}

/* Perspective Pop */
@keyframes click-perspective-pop {
  0%   { transform: perspective(800px) scale(1); }
  50%  { transform: perspective(800px) scale(1.2); }
  100% { transform: perspective(800px) scale(1); }
}

.ewt-h-perspective-pop:hover, .ewt-h-perspective-pop:focus {
  transform: perspective(800px) scale(1.2);
}

.ewt-d-perspective-pop:active {
  animation: click-perspective-pop 0.7s ease-in-out;
}