.header .card-1,
.header .card-2,
.header .card-3,
.header .card-4 {
  opacity: 0;
  animation: cardFadeIn 0.8s ease-out forwards;
}

.header .card-1 {
  animation-delay: 0.2s;
}

.header .card-2 {
  animation-delay: 0.4s;
}

.header .card-3 {
  animation-delay: 0.6s;
}

.header .card-4 {
  animation-delay: 0.8s;
}

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

.header .nail-left {
  opacity: 0;
  animation: nailFlyInLeft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 1.2s;
}

.header .nail-right {
  opacity: 0;
  animation: nailFlyInRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 1.2s;
}

@keyframes nailFlyInLeft {
  0% {
    opacity: 0;
    transform: translate(-100px, -100px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    transform: translate(10px, 10px) rotate(-10deg);
  }
  80% {
    transform: translate(-5px, -5px) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes nailFlyInRight {
  0% {
    opacity: 0;
    transform: translate(100px, -100px) rotate(45deg);
  }
  60% {
    opacity: 1;
    transform: translate(-10px, 10px) rotate(10deg);
  }
  80% {
    transform: translate(5px, -5px) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}

.header .title {
  opacity: 0;
  animation: titleFadeIn 0.8s ease-out forwards;
  animation-delay: 1.8s;
}

@keyframes titleFadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  70% {
    transform: translate(-50%, -50%) scale(0.95);
  }
  85% {
    transform: translate(-50%, -50%) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}