@font-face {
  font-family: "Processity";
  src: url("../assets/fonts/processity-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-synthesis: weight;
}

html {
  scroll-behavior: smooth;
  background: var(--cream);
  /* Prevent iOS Safari (and old Android WebKit) from auto-inflating font
     sizes in narrow text columns. Without this, headings render far larger
     on real devices than their CSS clamp() values — invisible in desktop
     Chrome's viewport emulation since that doesn't replicate the WebKit
     text-inflation algorithm. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: "Outfit", sans-serif;
  color: var(--ink);
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}

body.is-ready {
  opacity: 1;
}

/* Freeze transitions/animations on everything inside body until it's
   revealed. Without this, elements that render at their browser-default
   style (e.g. opacity: 1) before their own stylesheet parses will visibly
   animate to their real resting style once it does. */
body:not(.is-ready) *,
body:not(.is-ready) *::before,
body:not(.is-ready) *::after {
  transition: none !important;
  animation: none !important;
}

/* Fallback: reveal even if the component-loading script fails or JS is disabled. */
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: reveal-body 0s 2s forwards;
  }
}

@keyframes reveal-body {
  to {
    opacity: 1;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(31, 35, 41, 0.065) 1.2px,
    transparent 1.2px
  );
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}