/* ==========================================================================
   Mrrpu · interface refinements (Apple HIG-inspired)
   Loaded after the page's own styles. Additive only: no layout rewrites.
   ========================================================================== */

:root {
  /* One motion vocabulary for the whole site.
     --ease-spring ≈ critically damped spring (no overshoot), Apple's default for UI. */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --press: 90ms;
  --settle: 420ms;
  font-optical-sizing: auto;
}

/* --------------------------------------------------------------------------
   1. Response: feedback on press, no tap delay
   -------------------------------------------------------------------------- */
a, button, input, textarea, label { touch-action: manipulation; }
a, button { -webkit-tap-highlight-color: transparent; }

button.submit, .navbtn, .databand-cta, .cta, .modal-close {
  transition:
    transform var(--settle) var(--ease-spring),
    background-color 160ms ease, border-color 160ms ease, color 160ms ease,
    box-shadow 160ms ease;
  will-change: transform;
}
/* Instant, on pointer-down (not on release) */
button.submit:active, .navbtn:active, .databand-cta:active, .cta:active, .modal-close:active {
  transform: scale(0.97);
  transition-duration: var(--press);
}

/* Clear, consistent keyboard focus everywhere */
.navbtn:focus-visible, .databand-cta:focus-visible, .cta:focus-visible,
.modal-close:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 9px;
}

/* --------------------------------------------------------------------------
   2. Translucent navigation: content scrolls under a material, not a slab
   -------------------------------------------------------------------------- */
nav.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease, padding 300ms var(--ease-spring);
}
/* Scroll-edge effect: the edge only appears once content actually goes under it */
nav.top.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -18px rgba(22, 19, 15, 0.35);
}
@media (max-width: 640px) {
  nav.top { padding: 14px 0; }
}

/* --------------------------------------------------------------------------
   3. Typography: size-specific tracking and leading, balanced headings
   -------------------------------------------------------------------------- */
h1 {
  line-height: 1.07;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h2 {
  line-height: 1.15;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h3 {
  letter-spacing: -0.012em;
  text-wrap: balance;
}
p, .lede, .lede2 { text-wrap: pretty; }
/* Small text reads better with a touch of positive tracking */
.microcopy, .micro, .field label, .p-label, .appwin-col-label, .scen-tag, .pill {
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   4. Forms: continuous feedback, inline validation, clear status
   -------------------------------------------------------------------------- */
.field input, .field textarea, .signup-form input {
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 200ms ease;
}
.field input:focus, .field textarea:focus, .signup-form input:focus {
  box-shadow: 0 0 0 4px var(--accent-soft);
}
/* Only flag a field after the person has interacted with it */
.field input.is-invalid, .signup-form input.is-invalid {
  border-color: var(--accent);
}
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
}

/* Busy state while a signup is being sent */
button.submit[aria-busy="true"], .cta[aria-busy="true"] {
  cursor: progress;
  opacity: 0.85;
}
button.submit[aria-busy="true"]::after, .cta[aria-busy="true"]::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 10px;
  vertical-align: -0.12em;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mrrpu-spin 700ms linear infinite;
}
@keyframes mrrpu-spin { to { transform: rotate(360deg); } }

/* Success message materialises rather than popping in */
.confirm.show, #trainConfirm[style*="block"] {
  animation: mrrpu-materialize var(--settle) var(--ease-spring) both;
}
@keyframes mrrpu-materialize {
  from { opacity: 0; transform: translateY(6px) scale(0.98); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* --------------------------------------------------------------------------
   5. Modal: grows from the button that opened it (motion handled in apple.js)
   -------------------------------------------------------------------------- */
.modal-overlay {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal-box { will-change: transform, opacity; }

/* --------------------------------------------------------------------------
   6. Scroll reveals: shorter travel, spring-like settle
   -------------------------------------------------------------------------- */
.reveal {
  transform: translateY(12px);
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-spring);
}
.reveal-item {
  transition: opacity 450ms var(--ease-out), transform 550ms var(--ease-spring);
}

/* --------------------------------------------------------------------------
   7. Accessibility preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  button.submit:active, .navbtn:active, .databand-cta:active, .cta:active, .modal-close:active {
    transform: none;
  }
  button.submit[aria-busy="true"]::after, .cta[aria-busy="true"]::after { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  nav.top { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .modal-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 16, 10, 0.7); }
}
@media (prefers-contrast: more) {
  nav.top { background: var(--bg); border-bottom-color: var(--ink); }
  .field input, .field textarea, .signup-form input { border-color: var(--ink-soft); }
}