/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }

/* ── Hero fade-in (above-the-fold — always visible) ──────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  opacity: 0;
  animation: fadeUp .9s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: .1s;
}
.fade-in:nth-child(2)  { animation-delay: .2s; }
.fade-in:nth-child(3)  { animation-delay: .3s; }
.fade-in:nth-child(4)  { animation-delay: .4s; }
.fade-in:nth-child(5)  { animation-delay: .5s; }

/* ── Scroll-reveal (below the fold only — progressive enhancement) ─ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .8s cubic-bezier(.22,.61,.36,1),
                transform .8s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Fallback: if JS is disabled, all content is already visible (opacity:1 default). */

/* ── Nav scroll state ─────────────────────────────────────────────── */
#nav.scrolled {
  background: rgba(254, 252, 248, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(192, 168, 136, 0.2);
  box-shadow: 0 1px 20px rgba(82, 62, 47, 0.06);
}

/* ── Input focus styles ───────────────────────────────────────────── */
input:focus, textarea:focus {
  outline: none;
}

/* ── Selection ────────────────────────────────────────────────────── */
::selection {
  background: rgba(217, 79, 46, 0.15);
  color: inherit;
}