static/css/animation/style.css

/*
 * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
 * SPDX-License-Identifier: Apache-2.0
 */

.loading {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid #999;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pulse-animation {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.floating-animation {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.gradient-text {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.typing-animation::after {
  content: "|";
  animation: blink 1s infinite;
  margin-left: 2px;
}

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

.shine-effect {
  position: relative;
  overflow: hidden;
}

.shine-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.shine-effect:hover::before {
  left: 100%;
}

.bounce-in {
  animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.slide-in-left {
  animation: slideInLeft 0.5s ease-out;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-right {
  animation: slideInRight 0.5s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.zoom-in {
  animation: zoomIn 0.4s ease-out;
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.flip-in {
  animation: flipIn 0.6s ease-out;
}

@keyframes flipIn {
  from {
    transform: rotateY(90deg);
    opacity: 0;
  }
  to {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade-in-down {
  animation: fadeInDown 0.5s ease-out;
}

@keyframes fadeInDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.rotate-in {
  animation: rotateIn 0.6s ease-out;
}

@keyframes rotateIn {
  from {
    transform: rotate(15deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}

.scale-pulse {
  animation: scalePulse 1.5s infinite;
}

@keyframes scalePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.wave-animation {
  animation: wave 2s infinite linear;
}

@keyframes wave {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.glow-effect {
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  transition: box-shadow 0.3s ease;
}

.glow-effect:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
}

.neon-glow {
  text-shadow: 0 0 5px #3b82f6, 0 0 10px #3b82f6, 0 0 15px #3b82f6, 0 0 20px #3b82f6;
  animation: neonPulse 2s infinite alternate;
}

@keyframes neonPulse {
  from {
    text-shadow: 0 0 5px #3b82f6, 0 0 10px #3b82f6, 0 0 15px #3b82f6, 0 0 20px #3b82f6;
  }
  to {
    text-shadow: 0 0 10px #3b82f6, 0 0 20px #3b82f6, 0 0 30px #3b82f6, 0 0 40px #3b82f6;
  }
}

.rainbow-text {
  background: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbow 3s linear infinite;
}

@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.hologram-effect {
  position: relative;
  overflow: hidden;
}

.hologram-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, transparent 75%, transparent);
  background-size: 20px 20px;
  animation: hologram 1s linear infinite;
  pointer-events: none;
}

@keyframes hologram {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 20px;
  }
}

.matrix-effect {
  position: relative;
  overflow: hidden;
}

.matrix-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 255, 0, 0.1) 50%, transparent 50%);
  background-size: 100% 4px;
  animation: matrix 0.5s linear infinite;
  pointer-events: none;
}

@keyframes matrix {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 4px;
  }
}

.glass-effect {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-hover {
  transition: all 0.3s ease;
  transform: translateY(0);
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.text-glow {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  transition: text-shadow 0.3s ease;
}

.text-glow:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.border-glow {
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s ease;
}

.border-glow:hover {
  border-color: rgba(59, 130, 246, 0.5);
}

.shadow-glow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.shadow-glow:hover {
  box-shadow: 0 8px 15px rgba(59, 130, 246, 0.3);
}

.pulse-glow {
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.floating-glow {
  animation: floatingGlow 3s ease-in-out infinite;
}

@keyframes floatingGlow {
  0% {
    transform: translateY(0);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}

.rotate-glow {
  animation: rotateGlow 4s linear infinite;
}

@keyframes rotateGlow {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
  }
  25% {
    box-shadow: 5px 0 5px rgba(59, 130, 246, 0.5);
  }
  50% {
    box-shadow: 0 -5px 5px rgba(59, 130, 246, 0.5);
  }
  75% {
    box-shadow: -5px 0 5px rgba(59, 130, 246, 0.5);
  }
  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
  }
}

.wave-glow {
  position: relative;
  overflow: hidden;
}

.wave-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
  animation: waveGlow 2s linear infinite;
}

@keyframes waveGlow {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.sparkle {
  position: relative;
}

.sparkle::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff;
  animation: sparkle 1.5s infinite;
}

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

.shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  opacity: 0;
}

.ripple:active::after {
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: width 0.3s, height 0.3s, opacity 0.3s;
}

.morph {
  transition: all 0.3s ease;
  border-radius: 10px;
}

.morph:hover {
  border-radius: 20px;
}

.tilt {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.tilt:hover {
  transform: rotateY(10deg) rotateX(10deg);
}

.pop {
  transition: all 0.2s ease;
}

.pop:active {
  transform: scale(0.95);
}

.skew {
  transition: transform 0.3s ease;
}

.skew:hover {
  transform: skew(-5deg);
}

.stretch {
  transition: all 0.3s ease;
}

.stretch:hover {
  transform: scaleX(1.05);
}

.compress {
  transition: all 0.3s ease;
}

.compress:hover {
  transform: scaleY(0.95);
}

.swing {
  transition: transform 0.3s ease;
  transform-origin: top center;
}

.swing:hover {
  transform: rotate(5deg);
}

.wobble {
  animation: wobble 1s ease-in-out;
}

@keyframes wobble {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}

.jello {
  animation: jello 0.6s ease;
}

@keyframes jello {
  0%, 100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1.1, 0.9);
  }
  50% {
    transform: scale(0.9, 1.1);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
}

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.flip {
  animation: flip 1s ease;
}

@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.roll {
  animation: roll 1s ease;
}

@keyframes roll {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rubberBand {
  animation: rubberBand 1s ease;
}

@keyframes rubberBand {
  0%, 100% {
    transform: scale(1, 1);
  }
  30% {
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    transform: scaleX(0.75) scaleY(1.25);
  }
  60% {
    transform: scaleX(1.15) scaleY(0.85);
  }
}

.shake {
  animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

.tada {
  animation: tada 1s ease;
}

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

.lightSpeedIn {
  animation: lightSpeedIn 0.5s ease-out;
}

@keyframes lightSpeedIn {
  0% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedOut {
  animation: lightSpeedOut 0.5s ease-in;
}

@keyframes lightSpeedOut {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.rotateInDownLeft {
  animation: rotateInDownLeft 0.6s ease-out;
}

@keyframes rotateInDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0deg);
    opacity: 1;
  }
}

.rotateInDownRight {
  animation: rotateInDownRight 0.6s ease-out;
}

@keyframes rotateInDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(0deg);
    opacity: 1;
  }
}

.rotateInUpLeft {
  animation: rotateInUpLeft 0.6s ease-out;
}

@keyframes rotateInUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0deg);
    opacity: 1;
  }
}

.rotateInUpRight {
  animation: rotateInUpRight 0.6s ease-out;
}

@keyframes rotateInUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(0deg);
    opacity: 1;
  }
}

.hinge {
  animation: hinge 2s ease;
}

@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    transform: rotate(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    transform: rotate(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  100% {
    transform: translateY(700px);
    opacity: 0;
  }
}

.jackInTheBox {
  animation: jackInTheBox 0.7s ease;
}

@keyframes jackInTheBox {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }
  50% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.rollIn {
  animation: rollIn 0.7s ease;
}

@keyframes rollIn {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

.rollOut {
  animation: rollOut 0.7s ease;
}

@keyframes rollOut {
  0% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}

.zoomInDown {
  animation: zoomInDown 0.6s ease;
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    transform: scale(0.1) translateY(-1000px);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale(0.475) translateY(60px);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  animation: zoomInLeft 0.6s ease;
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    transform: scale(0.1) translateX(-1000px);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale(0.475) translateX(10px);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  animation: zoomInRight 0.6s ease;
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    transform: scale(0.1) translateX(1000px);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale(0.475) translateX(-10px);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  animation: zoomInUp 0.6s ease;
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    transform: scale(0.1) translateY(1000px);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale(0.475) translateY(-60px);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOut {
  animation: zoomOut 0.6s ease;
}

@keyframes zoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
  }
}

.zoomOutDown {
  animation: zoomOutDown 0.6s ease;
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale(0.475) translateY(-60px);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    opacity: 0;
    transform: scale(0.1) translateY(2000px);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutLeft {
  animation: zoomOutLeft 0.6s ease;
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale(0.475) translateX(42px);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    opacity: 0;
    transform: scale(0.1) translateX(-2000px);
    transform-origin: left center;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutRight {
  animation: zoomOutRight 0.6s ease;
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale(0.475) translateX(-42px);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    opacity: 0;
    transform: scale(0.1) translateX(2000px);
    transform-origin: right center;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  animation: zoomOutUp 0.6s ease;
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale(0.475) translateY(60px);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    opacity: 0;
    transform: scale(0.1) translateY(-2000px);
    transform-origin: center top;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.slideInDown {
  animation: slideInDown 0.5s ease-out;
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slideInLeft {
  animation: slideInLeft 0.5s ease-out;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slideInRight {
  animation: slideInRight 0.5s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slideInUp {
  animation: slideInUp 0.5s ease-out;
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slideOutDown {
  animation: slideOutDown 0.5s ease-out;
}

@keyframes slideOutDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.slideOutLeft {
  animation: slideOutLeft 0.5s ease-out;
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.slideOutRight {
  animation: slideOutRight 0.5s ease-out;
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.slideOutUp {
  animation: slideOutUp 0.5s ease-out;
}

@keyframes slideOutUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.fadeIn {
  animation: fadeIn 0.5s ease-out;
}

.fadeOut {
  animation: fadeOut 0.5s ease-out;
}

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

.fadeInDown {
  animation: fadeInDown 0.5s ease-out;
}

.fadeOutDown {
  animation: fadeOutDown 0.5s ease-out;
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

.fadeInDownBig {
  animation: fadeInDownBig 0.5s ease-out;
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    transform: translateY(-2000px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeOutDownBig {
  animation: fadeOutDownBig 0.5s ease-out;
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(2000px);
  }
}

.fadeInLeft {
  animation: fadeInLeft 0.5s ease-out;
}

.fadeOutLeft {
  animation: fadeOutLeft 0.5s ease-out;
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

.fadeInLeftBig {
  animation: fadeInLeftBig 0.5s ease-out;
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    transform: translateX(-2000px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeOutLeftBig {
  animation: fadeOutLeftBig 0.5s ease-out;
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(-2000px);
  }
}

.fadeInRight {
  animation: fadeInRight 0.5s ease-out;
}

.fadeOutRight {
  animation: fadeOutRight 0.5s ease-out;
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.fadeInRightBig {
  animation: fadeInRightBig 0.5s ease-out;
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    transform: translateX(2000px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeOutRightBig {
  animation: fadeOutRightBig 0.5s ease-out;
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(2000px);
  }
}

.fadeInUp {
  animation: fadeInUp 0.5s ease-out;
}

.fadeOutUp {
  animation: fadeOutUp 0.5s ease-out;
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

.fadeInUpBig {
  animation: fadeInUpBig 0.5s ease-out;
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    transform: translateY(2000px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeOutUpBig {
  animation: fadeOutUpBig 0.5s ease-out;
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-2000px);
  }
}

.flipInX {
  animation: flipInX 0.6s ease;
}

@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInY {
  animation: flipInY 0.6s ease;
}

@keyframes flipInY {
  0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipOutX {
  animation: flipOutX 0.6s ease;
}

@keyframes flipOutX {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutY {
  animation: flipOutY 0.6s ease;
}

@keyframes flipOutY {
  0% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.lightSpeedInRight {
  animation: lightSpeedInRight 0.5s ease-out;
}

@keyframes lightSpeedInRight {
  0% {
    transform: translateX(-100%) skewX(30deg);
    opacity: 0;
  }
  60% {
    transform: translateX(20%) skewX(-30deg);
    opacity: 1;
  }
  80% {
    transform: translateX(0%) skewX(15deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedOutLeft {
  animation: lightSpeedOutLeft 0.5s ease-in;
}

@keyframes lightSpeedOutLeft {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOutRight {
  animation: lightSpeedOutRight 0.5s ease-in;
}

@keyframes lightSpeedOutRight {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.rotateOut {
  animation: rotateOut 0.6s ease;
}

@keyframes rotateOut {
  0% {
    transform-origin: center;
    opacity: 1;
  }
  100% {
    transform-origin: center;
    transform: rotate(200deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  animation: rotateOutDownLeft 0.6s ease;
}

@keyframes rotateOutDownLeft {
  0% {
    transform-origin: left bottom;
    opacity: 1;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  animation: rotateOutDownRight 0.6s ease;
}

@keyframes rotateOutDownRight {
  0% {
    transform-origin: right bottom;
    opacity: 1;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(-45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  animation: rotateOutUpLeft 0.6s ease;
}

@keyframes rotateOutUpLeft {
  0% {
    transform-origin: left bottom;
    opacity: 1;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(-45deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  animation: rotateOutUpRight 0.6s ease;
}

@keyframes rotateOutUpRight {
  0% {
    transform-origin: right bottom;
    opacity: 1;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(45deg);
    opacity: 0;
  }
}