@font-face {
      font-family: 'AwesomeSerif';
      src: url('../fonts/AwesomeSerif-MediumExtraTall.woff') format('w0ff');
      font-weight: 200;
      font-style: normal;
    }

    .font-awesome {
      font-family: 'AwesomeSerif', san-serif;
    }

#navbar_sm #nav_sm {
    transform: translateX(100%);
    transition: all 0.6s ease-out;
}

#navbar_sm #nav_sm.show {
    transform: translateX(0%);
    transition: 
    all 0.6s ease-out;
}

@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 10s linear infinite;
}

/* Base fade styles */
.fade, .long-fade {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Specific translate for .fade only */
.long-fade {
    transform: translateY(90px);
    opacity: 1;
}

.slide-l {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.slide-r {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.slide-r2 {
    opacity: 0;
    transform: translateX(-60%);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Show class triggers animation */
.fade.show,
.long-fade.show,
.slide-l.show,
.slide-r.show,
.slide-r2.show {
    opacity: 1;
    transform: translateY(0);
}

.fade-blur {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(5px);
  transition: 
    opacity 0.8s ease-out, 
    transform 0.8s ease-out, 
    filter 0.8s ease-out;
}

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

.uncover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #080A1B;
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 1s ease-out;
}

.uncover.show::before {
    transform: scaleY(0);
}


/* Delay classes – now apply to both fade and blur */
.delay-sm { transition-delay: 0.2s; }
.delay-md { transition-delay: 0.4s; }
.delay-lg { transition-delay: 0.6s; }
.delay-xl { transition-delay: 0.8s; }
.delay-2xl { transition-delay: 1s; }
.delay-3xl { transition-delay: 1.2s; }
.delay-4xl { transition-delay: 1.4s; }
.delay-5xl { transition-delay: 1.8s; }
.delay-6xl { transition-delay: 2s; }



.scale-down {
    opacity: 0;
    transform: scale(1.2);
    transition: opacity 0.8s 0.6s ease-out, transform 0.8s 0.6s ease-out;
}

/* When element is in view, it becomes visible */
.scale-down.show {
    opacity: 1;
    transform: scale(0);
}

@media only screen and (max-height: 700px) {
    .home-content section .test-section .content .story {
        border: 1px solid #ccc;
    }
}