/* filatov.page: a deck of cards you flip through */

@property --brand { syntax: "<color>"; inherits: true; initial-value: #d98d03; }
@property --scene-ink { syntax: "<color>"; inherits: true; initial-value: #1d1d1d; }

:root {
  /* card surfaces */
  --light: oklch(0.985 0 0);
  --light-ink: oklch(0.17 0 0);
  --light-muted: oklch(0.44 0 0);
  --light-rule: oklch(0.17 0 0 / 0.1);
  --dark: oklch(0.165 0 0);
  --dark-ink: oklch(0.96 0 0);
  --dark-muted: oklch(0.76 0 0);
  --dark-rule: oklch(1 0 0 / 0.12);
  --amber: oklch(0.705 0.151 71);
  --amber-ink: oklch(0.16 0 0);
  --amber-muted: oklch(0.3 0.045 71);
  --amber-rule: oklch(0.16 0 0 / 0.16);
  --qr-ink: oklch(0.17 0 0);

  --sans: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --card-w: min(392px, calc(100vw - 32px));
  --peek: 24px;
  --card-h: clamp(420px, calc(100dvh - 128px - var(--peek) * 3), 640px);
  --radius: 26px;

  --shadow:
    0 1px 1px oklch(0.2 0 0 / 0.08),
    0 16px 32px -12px oklch(0.2 0 0 / 0.38),
    0 44px 80px -44px oklch(0.2 0 0 / 0.5);

  /* the page takes its colour from the card in front: JS sets --brand and --scene-ink */
  --brand: #d98d03;
  --scene-ink: #1d1d1d;
  --scene-top: color-mix(in oklch, var(--brand) 60%, white);
  --scene-bottom: color-mix(in oklch, var(--brand) 78%, black);
  --glow: color-mix(in oklch, color-mix(in oklch, var(--brand) 35%, white) 70%, transparent);
  transition: --brand 700ms ease, --scene-ink 700ms ease;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --light: oklch(0.27 0 0);
    --light-ink: oklch(0.96 0 0);
    --light-muted: oklch(0.78 0 0);
    --light-rule: oklch(1 0 0 / 0.1);
    --dark: oklch(0.115 0 0);
    --shadow:
      0 1px 1px oklch(0 0 0 / 0.3),
      0 24px 50px -20px oklch(0 0 0 / 0.75);
    --scene-top: color-mix(in oklch, var(--brand) 48%, black);
    --scene-bottom: color-mix(in oklch, var(--brand) 14%, black);
    --glow: color-mix(in oklch, var(--brand) 40%, transparent);
    color-scheme: dark;
  }
}
@media (min-width: 720px) and (min-height: 820px) { :root { --peek: 28px; } }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
/* The page never scrolls: cards moving past the edges are clipped by body, so the document
   is never taller than the window and the browser has nothing to scroll or restore on reload.
   The canvas gets the gradient's end colour, so any area outside body (e.g. behind the
   floating Safari toolbar on iOS) continues the gradient instead of repeating it. */
html {
  overflow: hidden;
  background-color: var(--scene-bottom);
}
body {
  overflow: hidden;
  overflow: clip;
  background: linear-gradient(180deg, var(--scene-top), var(--scene-bottom)) no-repeat;
  color: var(--scene-ink);
  font-family: var(--sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0 36px;
}
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
svg.i { width: 1em; height: 1em; flex: none; stroke-width: 1.75; }

/* ---------- Atmosphere ---------- */
.glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 42% at 50% 44%, var(--glow), transparent 72%);
}
.grain {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Top bar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: max(10px, env(safe-area-inset-top)) 12px 0;
}
.home-btn {
  justify-self: start;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  padding: 0; border: 0; background: none;
}
/* a small tile tilted like the cards, in the same ink as the language mini-cards */
.home-btn__tile {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--scene-ink);
  color: var(--scene-top);
  font-size: 21px;
  transform: rotate(-5deg);
  box-shadow: 0 6px 14px -6px oklch(0 0 0 / 0.45);
  transition: transform 320ms cubic-bezier(0.2, 0.9, 0.25, 1.12), background-color 300ms ease, color 300ms ease;
}
.home-btn__tile svg.i { stroke-width: 2; }
.home-btn:active .home-btn__tile { transform: rotate(-5deg) scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .home-btn:hover .home-btn__tile { transform: rotate(0deg) scale(1.04); }
}
.headline {
  margin: 0;
  font-size: 15px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  opacity: 0.88;
  transition: opacity 150ms ease, filter 150ms ease, transform 200ms var(--ease-out);
}
.headline.is-out { opacity: 0; filter: blur(4px); transform: translateY(-4px); }

/* language: a two-card mini deck, the current language in front */
.lang {
  justify-self: end;
  position: relative;
  width: 68px; height: 46px;
  padding: 0; border: 0; background: none;
  color: var(--scene-ink);
}
.lang__card {
  position: absolute; left: 8px; top: 10px;
  width: 36px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  transform-origin: 50% 100%;
  transition:
    transform 460ms cubic-bezier(0.2, 0.9, 0.25, 1.12),
    background-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.lang__card.is-front {
  z-index: 2;
  transform: rotate(-5deg);
  background: var(--scene-ink);
  color: var(--scene-top);
  box-shadow: 0 6px 14px -6px oklch(0 0 0 / 0.45);
}
.lang__card:not(.is-front) {
  z-index: 1;
  transform: translate(19px, -3px) rotate(11deg) scale(0.92);
  background: oklch(from var(--scene-ink) l c h / 0.12);
  color: oklch(from var(--scene-ink) l c h / 0.75);
  box-shadow: inset 0 0 0 1.5px oklch(from var(--scene-ink) l c h / 0.35);
}
.lang:active .lang__card.is-front { transform: rotate(-5deg) scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .lang:hover .lang__card:not(.is-front) { transform: translate(23px, -5px) rotate(15deg) scale(0.92); }
}

/* ---------- Deck ---------- */
.deck {
  position: relative;
  z-index: 10;
  flex: none;
  width: var(--card-w);
  height: calc(var(--card-h) + var(--peek) * 3);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.deck a, .deck img { -webkit-user-drag: none; }
@media (prefers-reduced-motion: no-preference) {
  .deck { animation: deck-in 380ms ease-out both; }
  @keyframes deck-in { from { opacity: 0; } }
}
.deck.is-dragging { cursor: grabbing; }

.card {
  --bg: var(--light); --ink: var(--light-ink); --muted: var(--light-muted); --rule: var(--light-rule);
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--peek) * 3);
  height: var(--card-h);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  display: flex; flex-direction: column;
  transform-origin: 50% 50%;
  background: var(--surface, var(--bg));
  color: var(--ink);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.14), var(--shadow);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.card.ink-dark  { --ink: oklch(0.13 0 0); --muted: oklch(0.13 0 0 / 0.8); --rule: oklch(0.13 0 0 / 0.16); }
.card.ink-light { --ink: oklch(0.98 0 0); --muted: oklch(0.98 0 0 / 0.82); --rule: oklch(1 0 0 / 0.16); }
.card:not(.is-front) { cursor: pointer; }
.card:not(.is-front) .card__body { pointer-events: none; }

/* Full-bleed layers carry the card's radius themselves: iOS Safari composites layers whose
   opacity changes separately and then ignores the parent's rounded overflow clip. */
.card__dim, .card__sheen, .home__photo, .home__shade { border-radius: inherit; }

/* depth: cards further back sit in shade */
.card__dim {
  position: absolute; inset: 0; z-index: 8;
  background: oklch(0.1 0 0);
  opacity: 0;
  pointer-events: none;
}
/* light that follows the pointer on the front card */
.card__sheen {
  position: absolute; inset: 0; z-index: 7;
  pointer-events: none;
  opacity: var(--sheen, 0);
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 30%), oklch(1 0 0 / 0.32), transparent 48%);
  mix-blend-mode: soft-light;
}

.card__head {
  position: relative; z-index: 3;
  flex: none;
  display: flex; align-items: center;
  height: 44px;
  padding: 0 18px;
}
.card__tab {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none;
  margin-top: -4px;
}
.card__tab svg.i { font-size: 17px; }
.card.is-front .card__tab { pointer-events: none; }

.card__body {
  position: relative; z-index: 3;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 2px 20px 20px;
}

/* big outline glyph bleeding off the corner, gives each card its own mark */
.card__mark {
  position: absolute; z-index: 1;
  right: -22%; top: 6%;
  width: 78%; aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.07;
}
.card__mark svg { width: 100%; height: 100%; stroke-width: 1.1; }

/* ---------- Home ---------- */
.card--home { --bg: oklch(0.12 0 0); --ink: oklch(0.98 0 0); --muted: oklch(0.86 0 0); color: var(--ink); }
.home__photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 16%;
  pointer-events: none;
}
.home__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, oklch(0.08 0 0 / 0.55) 62%, oklch(0.07 0 0 / 0.92) 100%);
}
.card--home .card__head { color: var(--amber-ink); }
.home__body { justify-content: flex-end; }
.home__name {
  margin: 0;
  font-size: clamp(44px, 13.5vw, 58px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 750;
  font-variation-settings: "SHRP" 100;
}
.home__first {
  display: block;
  margin-bottom: 0.1em;
  font-size: 0.4em;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 600;
  font-variation-settings: "SHRP" 0;
}
.home__desc {
  margin: 10px 0 0;
  max-width: 30ch;
  font-size: 15.5px; line-height: 1.4;
  color: var(--muted);
  text-wrap: pretty;
}
.home__nav {
  margin-top: 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.home__nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 72px;
  border-radius: 16px;
  font-size: 12px; font-weight: 550;
  text-decoration: none;
  color: oklch(0.98 0 0);
  background: oklch(1 0 0 / 0.1);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.16), inset 0 1px 0 oklch(1 0 0 / 0.14);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.home__nav a svg.i { font-size: 23px; }
.home__nav a:active { transform: scale(0.96); }
.home__nav a.is-donate { background: var(--amber); color: var(--amber-ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .home__nav a:not(.is-donate):hover { background: oklch(1 0 0 / 0.18); }
}

/* ---------- Shared card content ---------- */
.big {
  margin: 4px 0 0;
  font-size: clamp(31px, 9.4vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 720;
  font-variation-settings: "SHRP" 70;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.sub { margin: 8px 0 0; font-size: 15px; line-height: 1.4; color: var(--muted); }

.qr {
  margin: auto;
  width: min(226px, 29dvh, 100%);
  padding: 14px;
  border-radius: 22px;
  background: oklch(1 0 0);
  box-shadow: 0 12px 28px -14px oklch(0 0 0 / 0.55);
  color: var(--qr-ink);
}
.qr__code { aspect-ratio: 1; }
.qr svg { display: block; width: 100%; height: 100%; }
.qr figcaption { margin: 9px 0 -3px; text-align: center; font-size: 12px; line-height: 1.3; color: oklch(0.42 0 0); }

.btn {
  position: relative;
  margin-top: 16px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px;
  border: 0; border-radius: 16px;
  background: var(--ink); color: var(--bg);
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 220ms ease, color 220ms ease;
}
.btn:active { transform: scale(0.97); }
.btn svg.i { font-size: 19px; }

.tag {
  align-self: flex-start;
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--ink); color: var(--bg);
  font-size: 13px; font-weight: 600;
}

.addr {
  margin: 12px auto 0;
  max-width: 30ch;
  font-family: var(--mono);
  font-size: 13.5px; line-height: 1.55;
  text-align: center;
  text-wrap: balance;
  font-variant-ligatures: none;
  font-feature-settings: "zero" 1;
  word-spacing: -0.1em;
  user-select: all; -webkit-user-select: all;
  transition: color 220ms ease;
}
.addr.is-flash { color: var(--ink); }

/* copy button morphs into a confirmation */
.btn--copy .btn__icons { position: relative; width: 19px; height: 19px; }
.btn--copy .btn__icons svg { position: absolute; inset: 0; transition: opacity 180ms ease, transform 240ms var(--ease-out); }
.btn--copy .i-check { opacity: 0; transform: scale(0.6); }
.btn--copy.is-done { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--copy.is-done .i-copy { opacity: 0; transform: scale(0.6); }
.btn--copy.is-done .i-check { opacity: 1; transform: none; }

/* ---------- Donate list ---------- */
.list { margin: 18px 0 0; padding: 0; list-style: none; }
.list a {
  display: flex; align-items: center; gap: 14px;
  min-height: 60px;
  padding: 6px 4px 6px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: transform 160ms var(--ease-out);
}
.list li:first-child a { border-top: 1px solid var(--rule); }
.list a:active { transform: scale(0.985); }
.list__icon {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--chip, oklch(from var(--ink) l c h / 0.08));
  color: var(--chip-ink, inherit);
  font-size: 20px;
}
.list b { display: block; font-size: 16px; font-weight: 600; }
.list small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.list .chev { margin-left: auto; font-size: 18px; color: var(--muted); transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .list a:hover .chev { transform: translateX(3px); }
}

/* ---------- Dock ---------- */
/* desktop: a vertical rail on the right, in the direction the deck flips */
.dock {
  position: fixed; right: max(20px, env(safe-area-inset-right)); top: 50%; z-index: 40;
  translate: 0 -50%;
  display: flex; flex-direction: column; align-items: center;
  padding: 3px;
  border-radius: 999px;
  color: var(--scene-ink);
  background: oklch(from var(--scene-ink) l c h / 0.1);
  box-shadow: inset 0 0 0 1px oklch(from var(--scene-ink) l c h / 0.14), 0 10px 30px -12px oklch(0 0 0 / 0.35);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
.arrow {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: none;
  font-size: 20px;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.arrow:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) {
  .arrow:hover { background: oklch(from var(--scene-ink) l c h / 0.08); }
}
.dots { display: flex; flex-direction: column; }
.dot {
  width: 44px; height: 17px;
  padding: 0; border: 0; background: none;
  display: grid; place-items: center;
}
.dot::before {
  content: ""; display: block;
  width: 6px; height: 6px; border-radius: 3px;
  background: currentColor; opacity: 0.32;
  transition: height 320ms var(--ease-out), opacity 220ms ease;
}
.dot[aria-current="true"]::before { height: 18px; opacity: 1; }
/* phones: swipe is the navigation, the rail stays only for screen readers */
@media (max-width: 719px) {
  .dock {
    position: fixed; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- No-JS fallback ---------- */
.nojs { position: relative; z-index: 20; width: var(--card-w); padding: 24px; border-radius: var(--radius); background: var(--light); color: var(--light-ink); }
.nojs a { display: block; padding: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  .card { transition: opacity 200ms ease; }
}

/* short phones: tighter chrome so the whole card still fits between top bar and dock */
@media (max-height: 700px) {
  :root { --peek: 18px; --card-h: clamp(350px, calc(100dvh - 100px - var(--peek) * 3), 640px); --radius: 22px; }
  body { padding: 62px 0 26px; }
  .home-btn__tile { width: 34px; height: 34px; font-size: 19px; border-radius: 10px; }
  .card__head { height: 38px; }
  .big { font-size: 28px; }
  .sub { margin-top: 5px; font-size: 14px; }
  .tag { margin-top: 8px; }
  .qr { width: min(212px, 23dvh, 100%); padding: 11px; border-radius: 18px; }
  .qr figcaption { margin-top: 6px; font-size: 11px; }
  .addr { margin-top: 8px; font-size: 12.5px; }
  .btn { min-height: 48px; margin-top: 10px; }
  .card__body { padding: 0 16px 16px; }
  .home__name { font-size: 40px; }
  .home__nav { margin-top: 14px; }
  .home__nav a { min-height: 60px; }
  .list { margin-top: 12px; }
  .list a { min-height: 50px; }
}
@media (max-height: 600px) {
  .qr { width: min(212px, 17dvh, 100%); padding: 8px; border-radius: 14px; }
  .qr figcaption { display: none; }
  .sub { font-size: 13.5px; line-height: 1.3; }
  .list { margin-top: 10px; }
  .list a { min-height: 44px; gap: 12px; padding: 3px 4px 3px 0; }
  .list__icon { width: 32px; height: 32px; border-radius: 10px; font-size: 18px; }
  .list small { font-size: 12px; }
}