/* ============================================================
   Товшик 2.0 — промо-тизер. Фирменная палитра, тёмная тема.
   ============================================================ */

:root {
  /* Бренд-цвета (см. оригинальную палитру) */
  --bg:        #1D2F31;   /* тёмный сине-бирюзовый — основа */
  --bg-deep:   #152224;   /* глубже фона для виньетки */
  --slate:     #42575A;   /* серо-бирюзовый */
  --brown:     #4A3B31;   /* коричневый */
  --beige:     #E0D7C4;   /* бежевый */
  --cream:     #F4F0E8;   /* светло-бежевый */

  /* Семантика */
  --logo-color: var(--cream);
  --text:       var(--cream);
  --text-muted: rgba(224, 215, 196, 0.62);
  --hairline:   rgba(224, 215, 196, 0.14);

  /* DIN-геометрия в тон леттерингу «ТОВШИК»; Bahnschrift несёт кириллицу */
  --font: "Bahnschrift", "Avenir Next", Futura, "Segoe UI", system-ui,
          -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Размеры лого (нативные пропорции PNG) */
  --symbol-w:   clamp(64px, 8vw, 96px);
  --wordmark-w: clamp(230px, 40vw, 430px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Один экран без скролла, но на очень низких экранах контент доступен */
  overflow-x: hidden;
  overflow-y: auto;
}

/* Многослойный фон: тёплое свечение под лого + виньетка по краям */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(115% 75% at 50% 30%, rgba(66, 87, 90, 0.55), transparent 58%),
    radial-gradient(60% 42% at 50% 38%, rgba(74, 59, 49, 0.30), transparent 72%),
    radial-gradient(80% 50% at 50% 40%, rgba(244, 240, 232, 0.06), transparent 70%),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, var(--bg-deep)),
    var(--bg);
}

/* Тонкая зернистость — «дорогая» фактура, без внешних файлов */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Фоновый canvas с сетью связей — проявляется после контента:
   сначала бренд, затем вокруг него собирается сеть */
#mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  animation: mesh-in 1.8s var(--ease) 1.1s forwards;
}

@keyframes mesh-in {
  to { opacity: 1; }
}

/* ---------- Каркас страницы ---------- */
.page {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 5vw, 56px);
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(28px, 4vh, 44px);
}

/* ---------- Eyebrow «Скоро» ---------- */
.eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 1.15em;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: clamp(0.72rem, 1.5vw, 0.84rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(66, 87, 90, 0.18);
  backdrop-filter: blur(2px);
}

/* Трекинг добавляет пробел после последней буквы — компенсируем,
   чтобы текст стоял в пилюле оптически по центру */
.eyebrow > span:last-child {
  margin-right: -0.32em;
}

.eyebrow__dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--beige);
  box-shadow: 0 0 0 0 rgba(224, 215, 196, 0.6);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 215, 196, 0.5); }
  70%  { box-shadow: 0 0 0 0.7em rgba(224, 215, 196, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 215, 196, 0); }
}

/* ---------- Лок-ап логотипа ---------- */
.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vh, 30px);
}

/* Лого — кремовые PNG со сквозной альфой (прямой <img>, без маски) */
.logo {
  display: block;
  height: auto;
}

.logo--symbol {
  width: var(--symbol-w);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

.logo--wordmark {
  width: var(--wordmark-w);
}

.wordmark-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

/* Бейдж версии «2.0» — плоский, спокойный */
.version {
  font-size: clamp(0.85rem, 1.8vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.34em 0.6em;
  border-radius: 7px;
  color: var(--cream);
  background: rgba(66, 87, 90, 0.45);
  border: 1px solid rgba(244, 240, 232, 0.16);
  transform: translateY(0.15em);
}

/* ---------- Слоган: жирная теза + светлый антитезис ---------- */
.tagline {
  margin: 0;
  max-width: 42ch;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  line-height: 1.4;
}

.tagline__strong {
  color: var(--cream);
  font-size: 1.08em;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tagline__accent {
  color: var(--beige);
  font-size: 0.94em;
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* ---------- Футер ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6em;
  padding-top: clamp(20px, 4vh, 36px);
  font-size: clamp(0.7rem, 1.4vw, 0.8rem);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.foot__sep { opacity: 0.5; }

.foot__mail {
  color: var(--beige);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.foot__mail:hover {
  color: var(--cream);
  border-bottom-color: currentColor;
}

/* ---------- Доступность ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

:where(a, button):focus-visible,
.eyebrow:focus-visible {
  outline: 2px solid var(--beige);
  outline-offset: 3px;
}

/* ---------- Анимация появления ---------- */
.eyebrow, .lockup, .tagline {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 0.9s var(--ease) forwards;
}
.eyebrow  { animation-delay: 0.1s; }
.lockup   { animation-delay: 0.28s; }
.tagline  { animation-delay: 0.5s; }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Уважение к настройкам движения ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .eyebrow, .lockup, .tagline { opacity: 1; transform: none; }
  #mesh { opacity: 1; }
}