/* ===================================================================
   VDR Metal — shared styles
   Tailwind utility classes are loaded via the CDN script in header.php.
   This file only contains the small set of custom styles that Tailwind's
   utility classes don't cover (fonts, base layout, scroll-reveal, etc).
=================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  overflow-x: clip;
}

.site-shell {
  font-family: "Inter", system-ui, sans-serif;
  background-color: #f6f1e7;
  color: #1d1712;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: "Barlow Condensed", "Inter", sans-serif;
}

.caption-rail {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Scroll-reveal animation (replaces the React "Reveal" wrapper) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Simple spinner used on the contact form's submit button while sending */
.spin {
  animation: vdr-spin 0.8s linear infinite;
}

@keyframes vdr-spin {
  to {
    transform: rotate(360deg);
  }
}