/* Custom styles live here. Tailwind provides most styling via utility classes. */

/* 
  Thunder Font Configuration 
  Note: Thunder is a custom display font by Rajesh Rajput.
  If you have the .woff2 or .ttf files, you can uncomment and use the @font-face below.
*/
/*
@font-face {
  font-family: 'Thunder';
  src: url('./fonts/Thunder-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
*/

html {
  scroll-behavior: smooth;
}

/* Hero animation */
.hero-bg {
  transform: scale(1.05);
  will-change: transform;
}

.hero-animate {
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
}

body.is-ready .hero-bg {
  animation: hero-kenburns 14s ease-out both;
}

body.is-ready .hero-animate {
  animation: hero-fade-up 800ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body.is-ready .hero-animate[data-delay="1"] {
  animation-delay: 120ms;
}

body.is-ready .hero-animate[data-delay="2"] {
  animation-delay: 240ms;
}

body.is-ready .hero-animate[data-delay="3"] {
  animation-delay: 360ms;
}

body.is-ready .hero-animate[data-delay="4"] {
  animation-delay: 520ms;
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-kenburns {
  from {
    transform: scale(1.05);
  }
  to {
    transform: scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .hero-animate,
  body.is-ready .hero-bg,
  body.is-ready .hero-animate {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}