/* ═══════════════════════════════════════════════════════
   STILLNESS — MOBILE PERFORMANCE PATCH
   Подключить ПОСЛЕ всех остальных CSS файлов:
   <link rel="stylesheet" href="mobile-perf.css">
   ═══════════════════════════════════════════════════════ */

/* ── 1. Убираем некрасивое выделение при тапе ─────────
   Глобально отключаем системное выделение на всех
   интерактивных элементах мобильного браузера.        */

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;        /* iOS: убирает попап при долгом тапе на ссылках */
}

/* Оставляем выделение текста там, где нужно */
p, h1, h2, h3, h4, h5, h6, li, span, .testi-quote, .feature-desc {
  -webkit-user-select: text;
  user-select: text;
}

/* Убираем outline на тач-устройствах, но СОХРАНЯЕМ для клавиатуры */
@media (hover: none) and (pointer: coarse) {
  button:focus:not(:focus-visible),
  a:focus:not(:focus-visible),
  [role="button"]:focus:not(:focus-visible) {
    outline: none;
  }
}

/* ── 2. GPU-слои для элементов с анимацией ────────────
   contain: strict изолирует layout/paint каждого блока —
   браузер не перерисовывает соседей при изменениях.   */

.blob {
  will-change: transform;
  transform: translateZ(0);           /* форсируем GPU-слой */
  contain: strict;
}

.glass-card,
.feature-card,
.media-card,
.testi-card {
  will-change: transform;
  transform: translateZ(0);
  contain: layout style;
}

.reveal {
  will-change: opacity, transform;
}

.reveal.visible {
  will-change: auto;                  /* освобождаем после анимации */
}

.btn {
  transform: translateZ(0);
}

/* ── 3. Мобильные блобы — критическая оптимизация ─────
   На мобильных filter:blur(72px) на больших элементах —
   главная причина лагов. Уменьшаем blur и размер.     */

@media (max-width: 768px) {

  /* Уменьшаем blur в 2+ раза — визуально почти незаметно,
     производительность улучшается кардинально           */
  .blob {
    filter: blur(40px);               /* было 72px */
  }

  /* Уменьшаем размеры блобов — меньше пикселей для blur */
  .blob-1 {
    width: min(480px, 80vw);
    height: min(480px, 80vw);
  }
  .blob-2 {
    width: min(320px, 60vw);
    height: min(320px, 60vw);
  }
  .blob-3 {
    width: min(380px, 70vw);
    height: min(380px, 70vw);
  }
  .blob-4 {
    width: min(200px, 40vw);
    height: min(200px, 40vw);
  }

  /* Замедляем дрейф — меньше repaints в секунду */
  .blob-1 { animation-duration: 1.8s, 36s; }
  .blob-2 { animation-duration: 1.8s, 44s; }
  .blob-3 { animation-duration: 1.8s, 30s; }
  .blob-4 { animation-duration: 1.8s, 52s; }

  /* Снижаем амплитуду движения блобов */
  @keyframes drift1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(28px, 36px) scale(1.06); }
  }
  @keyframes drift2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-32px, 26px) scale(1.05); }
  }
  @keyframes drift3 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-22px, -30px) scale(1.07); }
  }
  @keyframes drift4 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(36px, -20px) scale(1.09); }
  }
}

/* ── 4. Уважаем prefers-reduced-motion ────────────────
   Для пользователей с вестибулярными нарушениями и
   тех, кто отключил анимации в настройках устройства  */

@media (prefers-reduced-motion: reduce) {
  .blob {
    animation: fadeInBlob 1.8s var(--ease-out) forwards !important;
    /* drift-анимации полностью отключаются */
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .glass-card,
  .feature-card,
  .media-card,
  .btn-primary,
  .btn-glass {
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease) !important;
  }

  /* Убираем transform-анимации hover — оставляем только цветовые */
  .glass-card:hover,
  .feature-card[role="link"]:hover,
  .btn-primary:hover,
  .btn-glass:hover {
    transform: none !important;
  }

  .hero-scroll-hint {
    animation: none !important;
  }

  .badge-dot {
    animation: none !important;
  }
}

/* ── 5. backdrop-filter на мобильных — градуирование ──
   Самый дорогой эффект. На слабых мобильных упрощаем.  */

@media (max-width: 768px) {

  /* Nav — оставляем, он маленький и важен для дизайна */
  .nav {
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
  }

  /* Карточки — уменьшаем blur до минимума */
  .glass,
  .glass-medium,
  .glass-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Модальное окно — важно сохранить, но упростить */
  .modal {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  /* Менее критичные элементы — убираем blur совсем,
     заменяем более непрозрачным фоном               */
  .hero-social-proof {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.22);
  }

  html[data-theme="dark"] .hero-social-proof {
    background: rgba(255, 255, 255, 0.10);
  }

  .pricing-toggle {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.18);
  }

  html[data-theme="dark"] .pricing-toggle {
    background: rgba(255, 255, 255, 0.08);
  }

  .badge-accent {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .locked-overlay {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* ── 6. Scroll performance ────────────────────────────
   overscroll-behavior предотвращает chain-scroll и
   rubber-band эффект, который вызывает зависания.
   touch-action оптимизирует обработку жестов.         */

html {
  /* Отключаем JS-smooth scroll — передаём браузеру */
  scroll-behavior: auto;
}

/* Плавный скролл только когда не тач */
@media (hover: hover) {
  html { scroll-behavior: smooth; }
}

body {
  overscroll-behavior-y: contain;     /* предотвращает pull-to-refresh лаги */
  -webkit-overflow-scrolling: touch;  /* momentum scrolling на iOS */
}

/* Секции со скроллом внутри */
.library-grid,
.features-grid,
.testimonials-grid,
.pricing-grid {
  /* contain предотвращает layout thrashing при скролле */
  contain: layout style;
}

/* ── 7. Touch targets — минимум 44px ──────────────────
   Apple HIG и WCAG требуют 44×44px для touch-целей.
   Маленькие кнопки на мобильных промахиваются.        */

@media (hover: none) and (pointer: coarse) {

  .nav-links a {
    padding: 8px 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .nav-login,
  .nav-logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .nav-burger {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
  }

  .modal-close {
    width: 44px;
    height: 44px;
  }

  .faq-question {
    min-height: 52px;
  }

  /* Карточки — убираем hover-transform на тач
     (он всё равно не работает, но может мешать) */
  .glass-card:hover,
  .feature-card[role="link"]:hover,
  .btn-primary:hover,
  .btn-glass:hover,
  .btn-ghost:hover {
    transform: none;
  }

  /* Карточки — добавляем активное состояние вместо hover */
  .glass-card:active {
    transform: scale(0.98);
    transition: transform 0.12s var(--ease);
  }

  .feature-card[role="link"]:active,
  .media-card:active,
  .testi-card:active {
    transform: scale(0.99);
    transition: transform 0.12s var(--ease);
  }

  .btn-primary:active {
    transform: scale(0.97);
    background: var(--accent-dark);
    transition: transform 0.10s var(--ease);
  }

  .btn-glass:active {
    transform: scale(0.97);
    background: var(--glass-bg-heavy);
    transition: transform 0.10s var(--ease);
  }

  .btn-ghost:active {
    background: var(--accent-pale);
    transform: scale(0.97);
    transition: transform 0.10s var(--ease);
  }
}

/* ── 8. Font rendering & layout stability ─────────────
   font-display:swap уже в Google Fonts URL —
   дополнительно предотвращаем CLS (layout shift).    */

.hero-title,
.display-1,
.display-2,
.heading-1,
.heading-2 {
  text-rendering: optimizeSpeed;      /* быстрее чем optimizeLegibility на мобиле */
  -webkit-font-smoothing: antialiased;
}

/* Предотвращаем CLS от шрифтов — резервируем место */
.hero-title {
  min-height: 1lh;                    /* минимум одна строка */
}

/* ── 9. Image & SVG optimization ──────────────────────*/

img {
  content-visibility: auto;          /* браузер пропускает off-screen rendering */
  decoding: async;
}

/* SVG-иконки — не нужен GPU-слой */
.feature-icon svg,
.hero-trust-item svg,
.testi-stars svg,
.btn svg {
  will-change: auto;
}

/* ── 10. Contain для секций — предотвращаем reflow ────
   Каждая секция изолирована: изменение контента внутри
   не вызывает пересчёт layout всей страницы.          */

#hero,
#stats,
#features,
#preview,
#testimonials,
#pricing {
  contain: layout style;
}

/* blob-scene фиксированная — изолируем */
.blob-scene {
  contain: strict;
}

/* ── 11. Passive scroll listeners hint ────────────────
   CSS-подсказка браузеру что элементы не блокируют скролл */

/* Только декоративные non-interactive слои */
.blob-scene {
  touch-action: none;
  pointer-events: none;  /* уже стоит в animations.css, дублируем для надёжности */
}

/* Модальный оверлей: pointer-events управляется JS-классом .open */
.modal-overlay:not(.open) {
  pointer-events: none;
}

/* Интерактивные элементы — явно разрешаем tap */
button,
a,
[role="button"],
[role="link"],
input,
select,
textarea {
  touch-action: manipulation;         /* убирает 300ms click delay на мобиле */
}