/* LargoVPN — мини-приложение. Та же система, что у сайта: тёмный фон, один зелёный акцент,
   Unbounded для крупных цифр и заголовков, Onest для текста. Только телефон: оно открывается в Telegram. */

/* Шрифты — те же файлы, что у сайта (site/fonts), отдаются нашим сервером */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/onest-latin.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/unbounded-latin.woff2") format("woff2");
  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;
}

:root {
  --bg: #0b0f0c;
  --bg-2: #121813;
  --text: #f1f4ef;
  --muted: #8d998f;
  --line: rgba(241, 244, 239, .1);
  --accent: #7deb9a;
  --warn: #ffc266;

  --display: "Unbounded", system-ui, sans-serif;
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  min-height: 100vh;
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, p, dl, dd { margin: 0; }
[hidden] { display: none !important; }

.app {
  max-width: 480px;
  margin: 0 auto;
  /* Отступы от выреза экрана и полосок Telegram (переменные задаёт сам Telegram) */
  padding:
    calc(16px + var(--tg-content-safe-area-inset-top, 0px)) 20px
    calc(24px + var(--tg-content-safe-area-inset-bottom, 0px) + var(--tg-safe-area-inset-bottom, 0px));
}
.view { display: flex; flex-direction: column; }

/* --- Главная */

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.hello { font-size: 15px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip {
  display: inline-flex; flex: none; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  font: 500 13px/1 var(--sans);
  color: var(--accent); background: rgba(125, 235, 154, .12);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--warn { color: var(--warn); background: rgba(255, 194, 102, .12); }
.chip--off { color: var(--muted); background: rgba(241, 244, 239, .06); }

.days { display: flex; align-items: baseline; gap: 12px; margin-top: 28px; }
.days b {
  font: 600 clamp(88px, 31vw, 128px)/.86 var(--display);
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}
.days span { font: 500 20px/1 var(--display); letter-spacing: -.02em; color: var(--muted); }
.headline { margin-top: 28px; font: 600 clamp(34px, 10vw, 44px)/1.02 var(--display); letter-spacing: -.035em; }
.note { margin-top: 14px; color: var(--muted); }

.frog { position: relative; display: flex; justify-content: center; margin: 26px 0 18px; }
.frog::before {
  content: ""; position: absolute; inset: 15% 12% 0;
  background: radial-gradient(closest-side, rgba(125, 235, 154, .13), transparent);
  pointer-events: none;
}
.frog img { position: relative; width: min(86%, 340px); transform-origin: 50% 92%; animation: sway 6s ease-in-out infinite; }
/* Подписка закончилась — лягушка свешивается вниз головой и тихо раскачивается */
.frog--flip img { width: min(44%, 170px); transform-origin: 50% 0; animation: hang 3.4s ease-in-out infinite alternate; }
@keyframes sway {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}
@keyframes hang { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

.facts { border-top: 1px solid var(--line); }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Появление после загрузки: по очереди снизу вверх */
.view[data-view="home"] [data-in] { opacity: 0; transform: translateY(14px); }
.is-shown .view[data-view="home"] [data-in] { opacity: 1; transform: none; transition: opacity .6s, transform .7s var(--ease); }
.is-shown [data-in]:nth-child(2) { transition-delay: .06s; }
.is-shown [data-in]:nth-child(3), .is-shown [data-in]:nth-child(4) { transition-delay: .12s; }
.is-shown [data-in]:nth-child(5) { transition-delay: .18s; }
.is-shown [data-in]:nth-child(6) { transition-delay: .24s; }

/* --- Загрузка */

.sk {
  display: block; border-radius: 12px;
  background: linear-gradient(90deg, rgba(241, 244, 239, .05) 25%, rgba(241, 244, 239, .1) 50%, rgba(241, 244, 239, .05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
.sk--line { width: 110px; height: 14px; }
.sk--chip { width: 92px; height: 30px; border-radius: 999px; }
.sk--days { width: 180px; height: 100px; margin-top: 28px; border-radius: 18px; }
.sk--wide { width: 70%; margin-top: 18px; }
.sk--frog { width: 78%; height: 220px; margin: 34px auto 0; border-radius: 28px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --- Сообщения: ошибка и «откройте в Telegram» */

.view--message { align-items: center; justify-content: center; gap: 12px; min-height: 80vh; text-align: center; }
.view--message h1 { font: 600 28px/1.1 var(--display); letter-spacing: -.03em; }
.view--message p { max-width: 22em; color: var(--muted); }
.message-frog { width: 120px; margin-bottom: 12px; transform-origin: 50% 0; animation: hang 3.4s ease-in-out infinite alternate; }
.message-frog--wide { width: 220px; transform-origin: 50% 92%; animation: sway 6s ease-in-out infinite; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; margin-top: 12px; padding: 0 28px; border: 0; border-radius: 999px;
  font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer;
  color: var(--bg); background: var(--accent);
  transition: transform .2s var(--ease);
}
.btn:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .view[data-view="home"] [data-in] { opacity: 1; transform: none; }
}