/* cjgun.ru: стили заглушки. Цвета, шрифты и размеры только через токены. */
:root {
  --cj-bg: #F4F3EF;
  --cj-ink: #1B1B1A;
  --cj-muted: #6B6A66;
  --cj-line: #D9D7D0;
  --cj-accent: #C4521F;

  --cj-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cj-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --cj-pad: clamp(24px, 6vw, 72px);
  --cj-measure: 38rem;
  --cj-logo-w: clamp(200px, 38vw, 380px);
  --cj-t-in: 0.8s;
  --cj-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cj-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cj-fs-text: clamp(1.0625rem, 1.6vw, 1.25rem);
  --cj-fs-small: 0.875rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cj-bg: #151514;
    --cj-ink: #ECEAE4;
    --cj-muted: #9A9892;
    --cj-line: #2E2D2A;
    --cj-accent: #E07A45;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--cj-bg);
  color: var(--cj-ink);
  font-family: var(--cj-font-ui);
  font-size: var(--cj-fs-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Одна колонка по центру: на ПК посреди экрана, на телефоне во всю ширину */
  width: 100%;
  max-width: calc(var(--cj-measure) + 2 * var(--cj-pad));
  margin: 0 auto;
  padding: var(--cj-pad);
}

.logo { margin: 0; line-height: 0; text-align: center; }

/* Логотип G△N: шесть фигур собираются по очереди, потом верхушка парит, а глаз моргает */
.logo__svg {
  width: var(--cj-logo-w);
  height: auto;
  overflow: visible;
  fill-rule: evenodd;
  cursor: default;
}

.lg { fill: var(--cj-ink); transform-box: fill-box; transform-origin: center; }
.lg--eye { fill: var(--cj-accent); }

.lg--g     { animation: cj-from-left  var(--cj-t-in) var(--cj-ease) 0.05s both; }
.lg--n     { animation: cj-from-right var(--cj-t-in) var(--cj-ease) 0.05s both; }
.lg--tri-l { animation: cj-rise var(--cj-t-in) var(--cj-ease) 0.25s both; }
.lg--tri-r { animation: cj-rise var(--cj-t-in) var(--cj-ease) 0.35s both; }
.lg--eye {
  animation:
    cj-eye-in 0.9s var(--cj-ease-back) 0.6s both,
    cj-blink 6s ease-in-out 3s infinite;
}
.lg--apex {
  animation:
    cj-drop 0.8s var(--cj-ease-back) 1.1s backwards,
    cj-float 3.2s ease-in-out 1.9s infinite alternate;
}

.logo__svg:hover .lg--apex { animation: cj-hop 0.6s var(--cj-ease-back); }

@keyframes cj-from-left  { from { opacity: 0; transform: translateX(-60%) rotate(-12deg); } }
@keyframes cj-from-right { from { opacity: 0; transform: translateX(60%) rotate(12deg); } }
@keyframes cj-rise       { from { opacity: 0; transform: translateY(70%); } }
@keyframes cj-eye-in {
  from { opacity: 0; transform: scale(0) rotate(-270deg); }
  70%  { opacity: 1; transform: scale(1.12) rotate(10deg); }
}
@keyframes cj-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } }
@keyframes cj-drop {
  from { opacity: 0; transform: translateY(-160%) rotate(-20deg); }
  60%  { opacity: 1; transform: translateY(8%); }
}
@keyframes cj-float { to { transform: translateY(-9%); } }
@keyframes cj-hop   { 40% { transform: translateY(-35%) rotate(8deg); } }

/* Текст появляется после логотипа */
.intro, .sign, .status { animation: cj-fade-up 0.7s var(--cj-ease) both; }
.intro:nth-of-type(1) { animation-delay: 1.3s; }
.intro:nth-of-type(2) { animation-delay: 1.4s; }
.intro:nth-of-type(3) { animation-delay: 1.5s; }
.intro:nth-of-type(4) { animation-delay: 1.6s; }
.intro:nth-of-type(n+5) { animation-delay: 1.7s; }
.sign, .status { animation-delay: 1.8s; }

@keyframes cj-fade-up { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  .lg, .intro, .sign, .status { animation: none; }
  .logo__svg:hover .lg--apex { animation: none; }
}

.intro { margin: 1em 0 0; }
.logo + .intro { margin-top: 2em; }

.sign {
  margin: 1.25em 0 0;
  color: var(--cj-muted);
  font-style: italic;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 2em;
  font-family: var(--cj-font-mono);
  font-size: var(--cj-fs-small);
  color: var(--cj-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.status__dot {
  width: 0.55em;
  height: 0.55em;
  flex: none;
  border-radius: 50%;
  background: var(--cj-accent);
  animation: cj-pulse 2.4s ease-in-out infinite;
}

@keyframes cj-pulse { 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  .status__dot { animation: none; }
}

.foot {
  padding-top: 1.25em;
  border-top: 1px solid var(--cj-line);
  font-size: var(--cj-fs-small);
  color: var(--cj-muted);
}

.nowrap { white-space: nowrap; }

/* Текст для поисковиков и экранных дикторов, глазами не виден */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Служебные страницы (404) без анимации появления: логотипа там нет, ждать нечего */
.page--plain .intro { animation: none; }

.link { color: var(--cj-accent); text-underline-offset: 0.2em; }