/* Shared design tokens (colors, radii, fonts) for every Rollo webapp page.
   Union of what each page needed — an unused var on a given page is harmless. */

@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/geist-cyrillic.woff2') format('woff2-variations');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/geist-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Digits only, same family name as the latin rule above — when @font-face
   unicode-ranges overlap, Chromium/WebKit give priority to whichever rule
   was declared LAST (confirmed empirically — this is the opposite of what
   you'd guess from normal CSS cascade order), so this must stay declared
   after the latin rule for the override to actually win. 0-9 render in
   Geist Mono everywhere var(--font-family) is used; every other character
   keeps using Geist Sans. Geist Sans/Mono share vertical metrics by design,
   so digits sit cleanly inline with surrounding Sans text. */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/geist-mono-digits.woff2') format('woff2-variations');
  unicode-range: U+0030-0039;
}

:root {
  --bg-base: #05090D;
  --bg-surface: #12151A;
  --bg-elevated: #1C2026;
  --border-subtle: #2A2E33;
  --text-muted: #4D4E50;
  --text-secondary: #6E6E6E;
  --text-tertiary: #959398;
  --text-primary: #F5F5F3;
  --accent-lime: #C6A667;
  --accent-lime-muted: #8C7442;

  --card-bg: #F5F4F1;
  --card-text: #1A1B18;
  --card-text-secondary: #6B6B66;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --font-family: 'Geist Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==================== MOTION ====================
   Motion primitives shared by every page. The behaviour is ported by hand
   from react-bits (AnimatedContent / FadeContent / SplitText / PillNav) —
   that library is React-only, this app is plain multi-page HTML, so only the
   feel was taken. Driven from app.js (revealIn / revealTitle). */

/* Content rises into place as it enters the viewport. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Screen titles arrive word by word. */
.word-reveal {
  display: inline-block;
  animation: word-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes word-rise {
  from { opacity: 0; transform: translateY(0.35em); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Cross-document view transitions turn every tab switch from a white flash
   into a fade. Chromium-based Telegram webviews honour this; everywhere else
   it is simply ignored and navigation stays exactly as it was. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  .reveal, .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .word-reveal { animation: none; }
}