:root {
  --bg-page: #1a1a1a;
  --font: #e99841;
}


/* Tailwind size-16 equivalent */
.size-16 {
  width: 4rem;
  height: 4rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}

/* Animation Classes */
.animation-slide-up {
  animation: slideUp 0.8s ease-out forwards;
}

.animation-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.animation-delay-100 {
  animation-delay: 0.1s;
}

.animation-delay-200 {
  animation-delay: 0.2s;
}

.animation-delay-300 {
  animation-delay: 0.3s;
}

.animation-delay-400 {
  animation-delay: 0.4s;
}

.animation-delay-500 {
  animation-delay: 0.5s;
}

.animation-delay-600 {
  animation-delay: 0.6s;
}

.animation-delay-700 {
  animation-delay: 0.7s;
}

/* Animation Keyframes */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Animation Reset */
.hero-slide.active .animation-slide-up,
.hero-slide.active .animation-fade-in {
  animation: none;
}

.hero-slide.active .animation-slide-up {
  animation: slideUp 0.8s ease-out forwards;
}

.hero-slide.active .animation-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.hero-slide.active .animation-delay-100 {
  animation-delay: 0.1s;
}

.hero-slide.active .animation-delay-200 {
  animation-delay: 0.2s;
}

.hero-slide.active .animation-delay-300 {
  animation-delay: 0.3s;
}

.hero-slide.active .animation-delay-400 {
  animation-delay: 0.4s;
}

.hero-slide.active .animation-delay-500 {
  animation-delay: 0.5s;
}

.hero-slide.active .animation-delay-600 {
  animation-delay: 0.6s;
}

.hero-slide.active .animation-delay-700 {
  animation-delay: 0.7s;
}