/* Du Mobil Brothers — extras that don't belong in Tailwind: scroll fade-in + counter base. */

/* ---------------------------------------------------------------
   LOGO FONT (self-hosted)
   TODO: place logo font .woff2 in /fonts/logo-font.woff2 and update
   the font-family name below if the file's internal family differs.
   Self-hosted on Cloudflare Pages — do NOT load from Google Fonts.
   --------------------------------------------------------------- */
@font-face {
  font-family: 'DumobilLogo';
  src: url('/fonts/logo-font.woff2') format('woff2'),
       url('/fonts/logo-font.ttf')   format('truetype'); /* fallback for very old browsers */
  font-weight: 400; /* Luckiest Guy ships as a single weight (400) */
  font-style: normal;
  /* block — brief invisibility is better than rendering in the wrong font.
     If the file 404s (e.g. before launch), browser falls through to the
     next family in the chain after a short timeout. */
  font-display: block;
}

/* Scoped to the logo element only. Saira (already loaded for display H3+)
   is the strongest immediate fallback — it's a bold display sans-serif and
   prevents any chance of the logo dropping to a serif/system-default look. */
.site-logo {
  font-family: 'DumobilLogo', 'Saira', 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 0.95;
}

/* Initial state for elements that fade in on scroll. */
[data-fade] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
  will-change: opacity, transform;
}
[data-fade].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Counter numbers — keep digit width steady while animating. */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* If the user prefers reduced motion, render fades as static. */
@media (prefers-reduced-motion: reduce) {
  [data-fade] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}