.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-down {
  opacity: 0;
  transform: translateY(-30px);
  transition: all 0.8s ease-out;
}
.fade-down.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.8s ease-out;
}
.fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.8s ease-out;
}
.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.fade-slide {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-slide.show {
  opacity: 1;
  transform: translateY(0);
}

.perspective {
  perspective: 1200px;
}

.cube {
  transform-style: preserve-3d;
}

.face {
  backface-visibility: hidden;
}
#page-transition {
  transition: opacity 0.7s ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  border-radius: inherit;
  transition: background 0.3s;
  z-index: 0;
}

.card:hover::before {
  background: rgba(8, 41, 103, 0.8);
}