/* ==========================================================================
   Nota — landing page
   Палитра и шрифты объявлены как CSS-переменные и подключены в tailwind.config
   (см. index.html) через theme.extend.colors / fontFamily — так Tailwind
   utility-классы (bg-bg, text-ink, font-display…) остаются единственным
   способом верстки, а здесь только то, что классами не выразить.

   Переменные хранят RGB-каналы через пробел (не готовый hex/rgb()), потому
   что так их читает и tailwind.config (rgb(var(--x) / <alpha-value>) —
   официальный паттерн Tailwind для CSS-переменных, поддерживающий модификаторы
   прозрачности вроде bg-coral/70), и обычный CSS ниже — оборачивая в rgb(...).
   ========================================================================== */

:root {
  --bg: 247 248 252;
  --bg-alt: 238 241 251;
  --card: 255 255 255;
  --ink: 30 34 51;
  --ink-soft: 92 97 120;
  --ink-faint: 146 150 171;
  --line: 227 230 243;

  --violet: 108 99 242;
  --violet-soft: 237 235 254;
  --mint: 34 183 149;
  --mint-soft: 223 247 239;
  --coral: 255 122 89;
  --coral-soft: 255 231 222;
  --amber: 238 171 46;
  --amber-soft: 255 243 218;
}

/* Прогресс-бар прокрутки = тот же язык, что и индикатор уровня записи в
   приложении: зелёная → жёлтая → красная зона. Читаешь страницу — как будто
   диктуешь. */
@view-transition {
  navigation: auto;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  font-feature-settings: "ss01" 1, "cv05" 1;
}

::selection {
  background: rgb(var(--violet));
  color: #fff;
}

/* -------------------------------------------------------------------- */
/* Скролл-прогресс — метр в шапке страницы                              */
/* -------------------------------------------------------------------- */
#scroll-meter {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(
    90deg,
    rgb(var(--mint)) 0%,
    rgb(var(--mint)) 55%,
    rgb(var(--amber)) 78%,
    rgb(var(--coral)) 100%
  );
  will-change: transform;
}

/* -------------------------------------------------------------------- */
/* Reveal-on-scroll                                                      */
/* -------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.avatar-stage {
  background: radial-gradient(120% 95% at 15% 0%, #313a6e 0%, #1d1c36 48%, #0e0e17 100%);
}
.avatar-state {
  width: 100%;
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.5rem;
  text-align: left;
  padding: 0.45rem 0.75rem;
  border-radius: 0.75rem;
  color: rgb(var(--ink-soft));
  transition: background-color 0.2s, color 0.2s;
}
.avatar-state b {
  font-weight: 500;
  color: rgb(var(--ink));
}
.avatar-state:hover {
  background: rgb(var(--bg-alt));
}
/* Вкладки прячут списки атрибутом hidden, а `grid` из Tailwind его перебивает. */
#avatar [data-panel][hidden] {
  display: none;
}
.avatar-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 0.9rem;
  background: rgb(var(--bg-alt));
}
.avatar-tab {
  padding: 0.35rem 0.85rem;
  border-radius: 0.7rem;
  font-size: 0.8125rem;
  color: rgb(var(--ink-soft));
  transition: background-color 0.2s, color 0.2s;
}
.avatar-tab.is-current {
  background: rgb(var(--card));
  color: rgb(var(--ink));
  box-shadow: 0 1px 2px rgb(var(--ink) / 0.08);
}
.avatar-state.is-current {
  background: rgb(var(--mint-soft));
  color: rgb(var(--ink));
}

/* Печатающийся transcript в hero-мокапе */
.typewriter-caret {
  display: inline-block;
  width: 2px;
  background: rgb(var(--violet));
  animation: caret-blink 1s step-end infinite;
}
@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .typewriter-caret { animation: none; }
}

/* -------------------------------------------------------------------- */
/* Placeholder-скриншоты                                                */
/* -------------------------------------------------------------------- */
.shot-frame {
  position: relative;
  background:
    linear-gradient(135deg, rgb(var(--bg-alt)) 0%, rgb(var(--card)) 60%);
  background-image:
    repeating-linear-gradient(135deg, rgba(108,99,242,0.05) 0 2px, transparent 2px 14px);
}
.shot-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.shot-frame img:not([src]),
.shot-frame img.img-missing {
  display: none;
}

/* -------------------------------------------------------------------- */
/* Swiper — точечная настройка под палитру                              */
/* -------------------------------------------------------------------- */
.shots-swiper {
  padding: 8px 8px 56px;
  overflow: visible;
}
.shots-swiper .swiper-slide {
  width: auto;
  height: auto;
  opacity: 0.45;
  transform: scale(0.94);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.shots-swiper .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}
.shots-swiper .swiper-pagination-bullet {
  background: rgb(var(--ink-faint));
  opacity: 0.5;
  width: 7px;
  height: 7px;
}
.shots-swiper .swiper-pagination-bullet-active {
  background: rgb(var(--violet));
  opacity: 1;
  width: 20px;
  border-radius: 4px;
}
.shots-swiper .swiper-button-next,
.shots-swiper .swiper-button-prev {
  width: 44px;
  height: 44px;
  background: rgb(var(--card));
  border-radius: 999px;
  box-shadow: 0 10px 30px -12px rgba(30, 34, 51, 0.25);
  color: rgb(var(--ink));
}
.shots-swiper .swiper-button-next::after,
.shots-swiper .swiper-button-prev::after {
  font-size: 16px;
  font-weight: 700;
}

/* -------------------------------------------------------------------- */
/* Доступность                                                          */
/* -------------------------------------------------------------------- */
:focus-visible {
  outline: 2.5px solid rgb(var(--violet));
  outline-offset: 3px;
  border-radius: 4px;
}

/* Плавный якорь с учётом фиксированной шапки */
section[id] {
  scroll-margin-top: 84px;
}

/* -------------------------------------------------------------------- */
/* Лайтбокс — скриншот крупно                                           */
/* -------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px 72px;
  background: rgba(20, 22, 34, 0.78);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
}
/* Размер от окна, а не от родителя: проценты от grid-ячейки не
   разрешались, и высокий снимок («Основные») обрезался снизу. */
.lightbox-figure img {
  max-width: calc(100vw - 144px);
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox-caption {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}
.lightbox-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.26); }
.lightbox-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-close { right: 14px; top: 14px; font-size: 26px; }
@media (max-width: 640px) {
  .lightbox { padding: 16px; }
  .lightbox-figure img { max-width: calc(100vw - 32px); max-height: calc(100dvh - 140px); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 16px; transform: none; }
}