/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light; }
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }

/* ── Design tokens ── */
:root,
html {
  --max-w: 1120px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --bg: #fff;
  --text: #111;
  --muted: rgba(0, 0, 0, 0.5);
  --faint: rgba(0, 0, 0, 0.3);
  --border: rgba(0, 0, 0, 0.1);
  --surface: rgba(0, 0, 0, 0.03);
  --link: rgba(0, 0, 0, 0.85);
  --scrollbar-track: #f5f5f5;
  --scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
}

/* App landings — always light, gray background */
html[data-surface="app"] {
  color-scheme: light;
  --app-surface: var(--app-light-surface, #F5F5F7);
  --app-text: var(--app-light-text, #111);
  --app-muted: var(--app-light-muted, rgba(0, 0, 0, 0.55));
  --app-border: var(--app-light-border, rgba(0, 0, 0, 0.08));
  --app-primary-soft: var(--app-light-primary-soft, #FFFFFF);
  --app-gradient: var(--app-light-gradient, #F5F5F7);
  --app-card: var(--app-light-card, #FFFFFF);
  --app-input: var(--app-light-input, #FFFFFF);
  --bg: var(--app-surface);
  --text: var(--app-text);
  --muted: var(--app-muted);
  --faint: color-mix(in srgb, var(--app-text) 35%, transparent);
  --border: var(--app-border);
  --surface: var(--app-primary-soft);
  --link: var(--app-primary);
  --scrollbar-track: var(--app-surface);
  --scrollbar-thumb: color-mix(in srgb, var(--app-text) 18%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--app-text) 28%, transparent);
  --app-photo-border: #C7C7CC;
  background-color: var(--app-surface);
  min-height: 100%;
}

html[data-surface="app"] body,
html[data-surface="app"] .app-body {
  background-color: var(--app-surface);
  min-height: 100vh;
}

html[data-surface="app"] .app-shot {
  display: block;
  box-sizing: border-box;
  border: 4px solid var(--app-photo-border);
}

html[data-surface="app"] img.app-shot {
  height: auto;
  object-fit: contain;
}

html[data-surface="app"] .app-shot--placeholder {
  background: #DCDCE1;
  aspect-ratio: 9 / 19.5;
}

/* App landing — staggered entry children */
html[data-surface="app"] .reveal-child {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   .75s cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * .09s + var(--sd, 0ms)),
    transform .75s cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * .09s + var(--sd, 0ms));
}

html[data-surface="app"] .pg-item.reveal-child,
html[data-surface="app"] .trio-item.reveal-child {
  transform: translateY(calc(var(--y, 0px) + 40px));
}

html[data-surface="app"] .reveal-stagger.on .pg-item.reveal-child,
html[data-surface="app"] .reveal-stagger.on .trio-item.reveal-child {
  transform: translateY(var(--y, 0px));
}

html[data-surface="app"] .reveal-immediate {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   .85s cubic-bezier(.22,1,.36,1) var(--d, 0s),
    transform .85s cubic-bezier(.22,1,.36,1) var(--d, 0s);
}

html[data-surface="app"] .reveal-stagger.on .reveal-child,
html[data-surface="app"] .reveal.on .reveal-child,
html[data-surface="app"] .reveal-immediate.on {
  opacity: 1;
  transform: none;
}

html[data-surface="app"] .reveal-fade {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.22,1,.36,1) var(--d, 0s);
}

html[data-surface="app"] .reveal-fade.on {
  opacity: 1;
}

/* ── Base ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Scroll-reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity   .8s cubic-bezier(.22,1,.36,1) var(--d, 0s),
    transform .8s cubic-bezier(.22,1,.36,1) var(--d, 0s);
}
.reveal.on { opacity: 1; transform: none; }

/* ── Scrollbar ── */
::-webkit-scrollbar             { width: 5px; height: 5px; }
::-webkit-scrollbar-track       { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb       { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }