/* App feel for the public pages. Palette is the same as every page (see PROJECT.md). */
:root { --af-accent: #3DDC6B; --af-ink: #14201A; --af-card: #FFFFFF; --af-muted: #46544B; --af-note: #E6ECE7; }
html { -webkit-tap-highlight-color: transparent; }
body { touch-action: manipulation; }
:where(nav, button, [role="button"]) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (display-mode: standalone) { html { overscroll-behavior-y: none; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Moving between pages: the tab bar stays put and the page slides in, like switching screens in an app. */
  @view-transition { navigation: auto; }
  nav:has(a[href="/services/"]):has(a[href="/work/"]) { view-transition-name: af-tabbar; }
  ::view-transition-old(root) { animation: af-out .14s ease-in both; }
  ::view-transition-new(root) { animation: af-in .24s cubic-bezier(.2, .8, .2, 1) both; }
  /* Press feedback. :where() keeps this weaker than any style the pages already set. */
  :where(a[href], button, summary, [role="button"]) { transition: transform .12s ease-out; }
  :where(a[href], button, summary, [role="button"]):active { transform: scale(.97); }
  .af-sheet { transform: translateY(24px); opacity: 0; transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
  .af-sheet.open { transform: none; opacity: 1; }
  .af-toast { transition: transform .24s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
  @keyframes af-out { to { opacity: 0; } }
  @keyframes af-in { from { opacity: 0; transform: translateX(14px); } }
}

.af-sheet { position: fixed; z-index: 40; left: 12px; right: 12px; max-width: 28rem; margin: 0 auto;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)); background: var(--af-card); color: var(--af-ink);
  border-radius: 18px; padding: 18px 16px 16px; box-shadow: 0 8px 32px rgba(20, 32, 26, .28); }
.af-sheet:not(.open) { pointer-events: none; }
.af-sheet h2 { font-size: 1.1rem; margin: 0 0 8px; }
.af-sheet p, .af-sheet ol { margin: 0 0 14px; color: var(--af-muted); }
.af-sheet ol { padding-left: 1.2rem; }
.af-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; border: 0; border-radius: 12px;
  background: var(--af-accent); color: var(--af-ink); font: 700 1rem/1 inherit; font-family: inherit; cursor: pointer; }
.af-btn + .af-btn { margin-top: 8px; }
.af-quiet { background: var(--af-note); }
.af-btn:focus-visible { outline: 3px solid var(--af-ink); outline-offset: 2px; }
.af-toast { position: fixed; z-index: 41; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); max-width: calc(100% - 24px);
  background: var(--af-ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: .95rem; text-align: center;
  transform: translate(-50%, -140%); opacity: 0; pointer-events: none; }
.af-toast.show { transform: translate(-50%, 0); opacity: 1; }