/* main.css */

/* --- Font Definitions --- */
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.font-playfair {
  font-family: 'Playfair Display', serif;
}
.font-bebas {
  font-family: "Bebas Neue", sans-serif !important;
  letter-spacing: 0.03em;
}


/* --- Navigation --- */
.nav-link {
  color: #111827; /* Equivalent to text-gray-900 */
  opacity: 0.9;
  position: relative;
  transition: color .2s ease, opacity .2s ease;
}

.nav-link:hover {
  opacity: 1;
}

/* Underline effect for nav links */
.nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: #111827;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}


/* --- Scroll Animation --- */
/*
  This class is added by JS to elements with [data-animate].
  It starts the element off as invisible and slightly moved down.
*/
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/*
  This class is added by the Intersection Observer when the element
  is in view, triggering the transition to a visible state.
*/
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.font-playfair {
  font-family: "Playfair Display", serif;
}