/* WTF — design tokens + base */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand palette — option 3, warm with restraint */
  --cream: #F5F3EE;
  --cream-2: #EDE9DF;
  --cream-3: #E8E2D2;
  --ink: #1F1B16;
  --ink-2: #3A332B;
  --ink-3: #6B6258;
  --ink-4: #9B9286;

  /* Halo tonal warm scale (NOT tier=color; same hues across tiers, rendered with varying weight/saturation) */
  --halo-outer: #F2C66A;   /* gold */
  --halo-mid:   #E89548;   /* amber */
  --halo-inner: #D9531E;   /* ember */

  --accent: #D9531E;
  --accent-soft: #E8B04C;

  /* Map */
  --map-bg: #F1ECE0;
  --map-street: #FFFFFF;
  --map-street-2: #F8F4EA;
  --map-park: #DDE3CB;
  --map-water: #C9D6DC;
  --map-line: rgba(31,27,22,0.08);

  --radius-card: 22px;
  --radius-chip: 999px;

  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
}

.dark {
  --cream: #0F0D0A;
  --cream-2: #181410;
  --cream-3: #221C16;
  --ink: #F2EBDD;
  --ink-2: #D6CDBC;
  --ink-3: #9B9286;
  --ink-4: #6B6258;

  --map-bg: #14110D;
  --map-street: #221C16;
  --map-street-2: #1A1612;
  --map-park: #1F2418;
  --map-water: #1A2026;
  --map-line: rgba(242,235,221,0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: #1A1714;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
}

/* Typography utilities */
.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.serif-i { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; letter-spacing: -0.01em; }

/* Halo tier animations — top-tier-only shimmer */
@keyframes halo-pulse-u4 {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes halo-shimmer-u4 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes halo-breath-u3 {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
@keyframes sheet-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after {
  animation: none !important;
  transition-duration: 0.001ms !important;
}

/* Hide scrollbars on phone scroll containers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Page layout — two phones side by side on a stage */
.stage {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 96px;
  gap: 36px;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(217,83,30,0.08), transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(232,176,76,0.06), transparent 60%),
    #14110D;
}

.stage-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  z-index: 100;
  pointer-events: none;
}
.stage-header > * { pointer-events: auto; }

.stage-wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  color: rgba(242,235,221,0.92);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.stage-wordmark .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFD27A, #D9531E 60%, #8B2A05 100%);
  box-shadow: 0 0 10px rgba(217,83,30,0.5);
}
.stage-wordmark .tag {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(242,235,221,0.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid rgba(242,235,221,0.18);
}

.phone-label {
  position: absolute;
  top: -28px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,235,221,0.4);
  white-space: nowrap;
}

.phone-wrap { position: relative; }

/* Wordmark notes shown below phones */
.stage-footer {
  position: fixed;
  bottom: 24px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.stage-footer .note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,235,221,0.32);
}