/* Ai Reels v2 — главная и страница стилей поверх `style.css`.

   ⛔ Язык тот же — Аура: стеклянные острова, пилюли, Unbounded 300 в заголовках,
   Manrope в тексте, один акцент. Новых цветов, шрифтов и радиусов здесь нет:
   только токены из `:root` файла `style.css`. Тема светлая (Джон 17.10).

   Почему отдельным файлом: `style.css` с отпечатком `?v=675bbb07` подключают
   оферта, политика, согласие и оплата (их собирает `собрать-документы.py`).
   Тронь его — у документов поменяется отпечаток, и их пришлось бы пересобирать,
   а это юридический текст. Правила прежних блоков в нём (телефон первого
   экрана, конвейер, липкие сцены) на главной больше не используются.

   Редизайн 17.10 (Джон с телефона: «ужасно, неудобно… долистать долго, много
   воды, непонятно, что делать»). Порядок главной: первый экран (заголовок,
   лента лучших роликов, «Выбрать стиль») → стили → три шага → тарифы →
   свёрнутое (работы, вопросы). Прокрутка двигает только страницу. */

h2{text-wrap:balance}

/* поля ленты — по краю `.обёртка`: первый ролик стоит под заголовком,
   а лента уходит под край экрана (видно, что листается) */
.главная,.страница-стилей{--край:max(var(--поле),calc((100% - 1280px) / 2 + var(--поле)))}
.главная section{padding:clamp(40px,6vw,88px) 0;scroll-margin-top:70px}
.главная section.ещё{padding-top:0}

/* ── первый экран ───────────────────────────────────────────────────────── */
.главная .герой2{padding:calc(78px + clamp(18px,4vw,48px)) 0 8px}
.герой2 h1{font-size:clamp(31px,5.2vw,66px);max-width:16ch;text-wrap:balance}
.герой2 .заг .сл{display:inline-block;white-space:pre}
.герой2 .лид{margin-top:12px;font-size:clamp(15.5px,1.35vw,18.5px);line-height:1.5;max-width:46ch}
.лента-героя{position:relative;margin-top:clamp(16px,2.4vw,28px);--гс-поля:var(--край);
 --гс-лента-ширина:clamp(136px,40vw,212px)}
/* место под ленту, пока стили не загрузились: те же размеры, экран не прыгает */
.лента-заготовка{display:flex;gap:10px;overflow:hidden;padding:4px var(--край) 8px}
.лента-заготовка i{flex:0 0 var(--гс-лента-ширина);aspect-ratio:9/16;border-radius:20px;
 background:linear-gradient(160deg,rgba(124,92,255,.14),rgba(79,182,255,.10));box-shadow:inset 0 0 0 1px var(--обводка)}
.герой2 .кнопки{display:flex;margin-top:18px}
.пилюля.большая{height:56px;padding:0 30px;font-size:17px;gap:10px;width:100%;max-width:420px}
.пилюля.большая svg{width:18px;height:18px}
.плюсы{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:13.5px;color:var(--чернила2)}
.плюсы li{display:flex;align-items:center;gap:7px}
.плюсы li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--акцент);flex:none}

/* вход первого экрана: слова и блоки поднимаются по очереди — чистым CSS,
   с первой отрисовки (без размытия: на телефоне оно дорогое) */
@keyframes подъём{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.герой2 .сл,.герой2 .лид,.лента-героя,.герой2 .кнопки,.плюсы{animation:подъём .62s cubic-bezier(.16,1,.3,1) both}
.герой2 .сл:nth-child(2){animation-delay:.05s}
.герой2 .сл:nth-child(3){animation-delay:.1s}
.герой2 .сл:nth-child(4){animation-delay:.15s}
.герой2 .сл:nth-child(5){animation-delay:.2s}
.герой2 .лид{animation-delay:.22s}
.лента-героя{animation-delay:.3s}
.герой2 .кнопки{animation-delay:.38s}
.плюсы{animation-delay:.44s}

/* ── шапки секций: заголовок и одна-две строки ─────────────────────────── */
.шапка2{display:grid;gap:8px;margin-bottom:clamp(18px,2.4vw,30px);max-width:760px}
.шапка2 h2{font-size:clamp(26px,3.4vw,44px)}
.шапка2 p{font-size:clamp(15px,1.25vw,17px);line-height:1.5}

/* ── стили: модуль `Стили/галерея/` рисует витрину внутри ──────────────── */
/* пока модуля нет — честная заглушка, а не пустая дыра; высота не прыгает */
.галерея-место{position:relative;min-height:240px}
.галерея-скоро{display:grid;gap:6px;place-content:center;text-align:center;min-height:240px;padding:28px}
.галерея-скоро b{font-family:Unbounded,sans-serif;font-weight:300;font-size:22px;letter-spacing:-.02em}
.галерея-скоро span{color:var(--чернила2);font-size:15px;max-width:46ch;margin:0 auto}
/* пришли по ссылке на стиль (`/styles/#ad3d`) — его плитка вспыхивает рамкой */
@keyframes подсветка{0%,100%{box-shadow:0 18px 40px -26px rgba(36,26,61,.45)}
 25%,65%{box-shadow:0 0 0 3px var(--акцент),0 22px 44px -20px rgba(124,92,255,.7)}}
.гс-плитка.подсвечена{animation:подсветка 2.4s ease-in-out 2}

/* ── три шага ──────────────────────────────────────────────────────────── */
.три-шага{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.шаг3{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px 20px;align-items:start}
.шаг3 .номер{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
 font-family:Unbounded,sans-serif;font-weight:400;font-size:15px;color:#fff;background:var(--градиент);
 box-shadow:0 10px 22px -10px rgba(124,92,255,.9)}
.шаг3 b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
.шаг3 span{display:block;font-size:14.5px;color:var(--чернила2);line-height:1.45}

/* ── тарифы: компактно, без списков ────────────────────────────────────── */
.тарифы2 .тарифы{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.тарифы2 .тариф{padding:22px 20px 18px;gap:4px;align-content:start}
.тарифы2 .тариф .цена{font-size:clamp(30px,3vw,42px);margin-top:4px}
.тарифы2 .тариф .цена sup{font-size:.45em}
.тарифы2 .заролик{font-size:13.5px;color:var(--чернила2);margin-bottom:10px}
.тарифы2 .тариф .пилюля{height:46px;margin-top:auto;font-size:15px}
.тарифы-сноска{margin-top:16px;font-size:14px;line-height:1.5;color:var(--чернила2);max-width:70ch}

/* свечение-карточка: светлый ободок по кромке тарифа «Чаще берут». Крутится слой
   под маской-кольцом (не `@property` — у части браузеров молча не заводится) */
.свечение{--ореол:.8;position:absolute;inset:-2px;border-radius:28px;pointer-events:none;z-index:0;
 filter:drop-shadow(0 0 calc(16px * var(--ореол)) rgba(124,92,255,.5))}
.свечение-кольцо{position:absolute;inset:0;border-radius:inherit;padding:2px;overflow:hidden;
 background:color-mix(in srgb,var(--акцент) 22%,transparent);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.свечение-слой{position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;translate:-50% -50%;
 background:conic-gradient(from 0deg,transparent 0deg,transparent 200deg,rgba(124,92,255,.55) 280deg,
  #4fb6ff 330deg,#ff8acd 350deg,#4fb6ff 358deg,transparent 360deg)}

/* ── свёрнутое: работы и вопросы ───────────────────────────────────────── */
.ещё .обёртка{display:grid;gap:12px}
.свёрток{padding:0;overflow:hidden}
.свёрток>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:68px;
 padding:14px 22px}
.свёрток>summary::-webkit-details-marker{display:none}
.свёрток>summary>span{flex:1;min-width:0;display:grid;gap:2px}
.свёрток>summary b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.свёрток>summary small{font-size:13.5px;color:var(--чернила2)}
.свёрток>summary::after{content:"";width:11px;height:11px;flex:none;margin-right:4px;
 border-right:2px solid var(--акцент);border-bottom:2px solid var(--акцент);
 transform:rotate(45deg) translateY(-3px);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.свёрток[open]>summary::after{transform:rotate(225deg) translateY(-3px)}
.свёрток-тело{padding:0 22px 20px}
.свёрток .вопросы{display:grid;gap:0;max-width:none}
.свёрток .вопрос{padding:0;background:none;border:0;box-shadow:none;border-top:1px solid var(--волос);border-radius:0;
 backdrop-filter:none}
.свёрток .вопрос summary{padding:15px 0;font-size:15.5px}

/* работы: лента листается сама — пальцем, тачпадом, Shift+колесом, стрелками */
.лента-работ{position:relative}
.свёрток .бегущая{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
 overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 0 10px;margin:0}
.бегущая::-webkit-scrollbar{display:none}
.свёрток .работа{width:min(190px,44vw);scroll-snap-align:start;border-radius:20px}
.листать{position:absolute;top:50%;z-index:3;width:48px;height:48px;border-radius:50%;
 display:grid;place-items:center;translate:0 -50%;color:var(--акцент);background:var(--стекло);
 border:var(--грань);box-shadow:var(--тень-плитки);transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.листать[hidden]{display:none}
.листать svg{width:20px;height:20px}
.листать.назад{left:-6px}
.листать.вперёд{right:-6px}
.листать:hover{transform:scale(1.06)}
@media (pointer:coarse){.листать{display:none}}

/* ═══ приёмы из нашей библиотеки (Джон 17.10: «мог просто посмотреть всё это
   и применить»). Откуда каждый и его числа — в шапках ui-touch.js и main.js ═══ */

/* меню-стекло (`Интерфейсы/меню-стекло`): подложка ЕДЕТ под выбранный пункт и
   берёт его ширину. Кривая `--hod` .32,.72,.2,1 за 0.38 с; появление — из
   scaleY .55 с перелётом (back.out(1.8) ≈ .34,1.56,.64,1) за 0.42 с; цвет — 0.25 с */
.шапка .меню{position:relative;gap:0;align-items:center}
.шапка .меню a{position:relative;z-index:1;padding:8px 13px;border-radius:999px;transition:color .25s ease}
.шапка .меню a.под-бегунком,.шапка .меню a[aria-current="page"]{color:var(--чернила)}
.бегунок-меню{position:absolute;left:0;top:50%;height:38px;margin-top:-19px;border-radius:999px;
 background:var(--стекло);box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--обводка),0 10px 22px -12px rgba(124,92,255,.55);
 translate:var(--x,0) 0;scale:1 .55;opacity:0;pointer-events:none;
 transition:translate .38s cubic-bezier(.32,.72,.2,1),width .38s cubic-bezier(.32,.72,.2,1),
  scale .42s cubic-bezier(.34,1.56,.64,1),opacity .25s ease}
.бегунок-меню.виден{scale:1;opacity:1}
.бегунок-меню.без-хода{transition:none}

/* волна-от-нажатия (`Переходы/волна-от-нажатия`): круг от точки касания */
.пилюля{position:relative;overflow:hidden;isolation:isolate}
.волна-касания{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
 background:rgba(255,255,255,.34);transform:scale(0)}
.пилюля.тихая .волна-касания{background:rgba(124,92,255,.16)}
.гс-хочу .волна-касания{z-index:0}

/* ── касание: то, что раньше жило только на наведении ────────────────────── */
@media (hover:none){
  .работа .пуск{opacity:1;transform:translate(-50%,-50%) scale(.82)}
  .пилюля:hover,.работа:hover{transform:none}
}
@media (pointer:coarse){
  .лого{min-height:44px}
}

/* ── узкие экраны ──────────────────────────────────────────────────────── */
@media (max-width:980px){
  .три-шага{grid-template-columns:1fr;gap:10px}
  .тарифы2 .тарифы{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  /* кнопка шапки 40 → 44 px: меньше пальцу мало (шапка от этого 62 px) */
  .шапка .пилюля{height:44px}
  .главная .герой2{padding-top:80px}
  .шаг3{padding:14px 16px;grid-template-columns:36px minmax(0,1fr);gap:12px}
  .шаг3 .номер{width:36px;height:36px;border-radius:12px;font-size:14px}
  .шаг3 b{font-size:16px}
  .шаг3 span{font-size:14px}
  .тарифы2 .тарифы{gap:10px}
  .тарифы2 .тариф{padding:16px 14px 14px;border-radius:22px}
  .тарифы2 .тариф .шильд{right:12px;top:-11px;height:24px;padding:0 10px;font-size:11.5px}
  .тарифы2 .тариф .метка{font-size:11px;letter-spacing:.1em}
  .тарифы2 .заролик{font-size:12.5px}
  .тарифы2 .тариф .пилюля{height:44px;padding:0 12px}
  .свёрток>summary{padding:12px 16px;min-height:64px}
  .свёрток-тело{padding:0 16px 16px}
  .свёрток .вопрос summary{font-size:15px}
}

/* «меньше движения»: вход первого экрана и подсветка не играют */
@media (prefers-reduced-motion:reduce){
  .герой2 .сл,.герой2 .лид,.лента-героя,.герой2 .кнопки,.плюсы,.гс-плитка.подсвечена{animation:none}
}

/* разовое появление блоков: блок виден и до него — движение только сдвигом */
.всплыть{opacity:1;transform:none}

/* 17.10 Джон: «каждый клик на любой кнопке делает эффект выделения» — системная плашка касания
   (Android/Telegram) и выделение текста при долгом нажатии. Отклик на нажатие даёт наша волна и сжатие. */
html{-webkit-tap-highlight-color:transparent}
button,a,[role=button],label,summary,.кнопка{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}