html { scroll-behavior: smooth; }

/* 1. Card/section entrance — slides in from the right, reverses on scroll up.
   Scoped to html.reveal-js so the page is never left invisible if the
   script cannot run. */
html.reveal-js [data-reveal] {
  opacity: 0;
  transform: translateX(90px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-index, 0) * 100ms);
  will-change: transform, opacity;
}
html.reveal-js [data-reveal].is-visible {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* 2. Card hover — shadow + accent outline */
.card, .lift {
  transition: box-shadow 0.25s ease, outline-color 0.25s ease, transform 0.2s ease;
  outline: 2px solid transparent;
  outline-offset: 3px;
}
/* Cards set box-shadow inline, which beats an external rule — force it. */
.card:hover, .lift:hover {
  box-shadow: 0 24px 40px color-mix(in oklch, var(--color-text) 22%, transparent) !important;
  outline-color: var(--color-neutral-800);
  transform: translateY(-10px) !important;
}
.btn {
  border-radius: 14px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.btn:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-3px) !important; }
.btn:active { transform: translateY(0); }

.input { border-radius: 10px; }

.blueprint { border: 0 !important; }
.corner { display: none !important; }

/* 3. Parallax image wrapper — the image needs slack to move within */
.parallax-wrap {
  overflow: hidden;
  position: relative;
}
.parallax-wrap img {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  will-change: transform;
}


/* ---- Mobile / reflow (WCAG 1.4.10) ------------------------------------ */
/* clip, not hidden: `hidden` on body makes body its own scroll container,
   which kills document scrolling (and with it reveal.js + parallax). */
html, body { overflow-x: clip; }
img { max-width: 100%; }

/* The nav wraps at any width rather than relying on a breakpoint. */
nav.nav { flex-wrap: wrap; }

/* Homepage credential strip: cells divide vertically once they stack. */
.stat-strip > div { border-right: 1px solid var(--color-divider); }
.stat-strip > div:last-child { border-right: 0; }
@media (max-width: 780px) {
  .stat-strip { grid-template-columns: 1fr !important; }
  .stat-strip > div { border-right: 0; }
  .stat-strip > div + div { border-top: 1px solid var(--color-divider); }
}

@media (max-width: 780px) {
  nav.nav { flex-wrap: wrap; row-gap: 4px; column-gap: 18px; padding-top: 14px !important; padding-bottom: 14px !important; }
  nav.nav > a.nav-brand { flex: 1 0 100%; }
  nav.nav > a { min-height: 44px; display: inline-flex; align-items: center; }
  nav.nav > a.btn { margin-left: 0 !important; }
  footer > div:first-child { flex-direction: column; }
}

@media (max-width: 520px) {
  html.reveal-js [data-reveal] { transform: translateX(40px); }
  nav.nav > a.btn { width: 100%; justify-content: center; text-align: center; }
  .parallax-wrap { border-radius: 12px; }
}