/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; }

/* ── Hero animations ── */
.hero-sub { animation: fadeUp 1s 0.2s both ease-out; }
.hero-head { animation: fadeUp 1s 0.4s both ease-out; }
.hero-body { animation: fadeUp 1s 0.6s both ease-out; }
.hero-cta { animation: fadeUp 1s 0.8s both ease-out; }
.hero-scroll { animation: fadeUp 1s 1.2s both ease-out; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scroll reveal (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Nav scroll state ── */
.nav-scrolled #nav {
  background: rgba(26, 20, 16, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Nav links underline on scroll ── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* ── Selection ── */
::selection { background: rgba(229, 79, 40, 0.2); }

/* ── Focus visible ── */
:focus-visible { outline: 1px solid rgba(229, 79, 40, 0.5); outline-offset: 4px; }

/* ── Smooth image loading ── */
img { display: block; max-width: 100%; }