/* ==========================================================================
   Poelstraat 38 — Oostkamp
   Basis, typografie, reveal-animaties en fotogalerij
   ========================================================================== */

:root {
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: #f7f5f1;
  color: #1f1e1d;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
}

h1,
h2,
h3,
.font-display {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
}

h1,
h2 {
  font-weight: 400;
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
}

::selection {
  background-color: #d9e9f8;
  color: #1f1e1d;
}

/* Iconen ---------------------------------------------------------------- */

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  line-height: 1;
  vertical-align: middle;
}

/* Ankers onder de sticky header ----------------------------------------- */

section[id] {
  scroll-margin-top: 5.5rem;
}

/* Cijfers in de woonfiche ----------------------------------------------- */

.fact-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Reveal op scroll ------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 {
  transition-delay: 0.12s;
}

.reveal-delay-2 {
  transition-delay: 0.24s;
}

/* Fotogalerij ----------------------------------------------------------- */

.gallery a {
  display: block;
  overflow: hidden;
  background-color: #e9e6e0;
  border-radius: 0.75rem;
}

.gallery a img {
  transition: transform 0.6s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.gallery a:hover img,
.gallery a:focus-visible img {
  transform: scale(1.04);
}

/* Verfijningen ---------------------------------------------------------- */

address {
  font-style: normal;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #2f6699;
  outline-offset: 3px;
}

/* Minder beweging ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .gallery a img {
    transition: none;
  }

  .gallery a:hover img,
  .gallery a:focus-visible img {
    transform: none;
  }
}

/* Sitekiln: icons stay ligatures inside uppercase or letter-spaced text */
.material-symbols-outlined{font-family:'Material Symbols Outlined' !important;font-weight:normal;font-style:normal;text-transform:none !important;letter-spacing:normal !important;text-decoration:none;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';white-space:nowrap;direction:ltr;}