/* ================================================
   BASE — global reset + small utility classes still
   used across all pages (scroll-reveal animation,
   work.html pagination, contact form success toggle).
   Everything else lives in the per-page css/{home,services,work,contact}.css
   files and the shared css/nc.css, on top of css/design-tokens.css.
   ================================================ */

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* === SCROLL REVEAL ANIMATIONS (js/main.js IntersectionObserver) === */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-left.active { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-right.active { opacity: 1; transform: translateX(0); }

/* === WORK PAGE PAGINATION (built dynamically by js/portfolio.js) === */
.pagination {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.pagination__info { font: var(--text-body-sm); color: var(--color-text-tertiary); }
.pagination__controls { display: flex; align-items: center; gap: 6px; }
.pagination__page,
.pagination__prev,
.pagination__next {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-secondary);
  font: var(--text-label-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
}
.pagination__page:hover,
.pagination__prev:hover,
.pagination__next:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination__page.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination__prev:disabled,
.pagination__next:disabled { opacity: 0.35; pointer-events: none; }
.pagination__ellipsis { color: var(--color-text-tertiary); font: var(--text-label-sm); padding: 0 4px; }

/* === CONTACT FORM SUCCESS TOGGLE (js/main.js) ===
   Only the display:none/block toggle lives here — the visual
   styling of the success state is .contact-success (contact.css). */
.form-success { display: none; }
.form-success.show { display: block; }