/* Экран «Подписка» — премиум-пейволл BEATLY Premium.
   Плюшки скроллятся, покупка зафиксирована внизу (.sub__foot — сиблинг .scroll
   внутри .screen-флекса, естественно прижат к низу; padding-bottom клирит док).
   Функциональный цвет — синий из токенов (адаптив под темы); золото — только на
   слове «Premium» (осознанный премиум-акцент, единственное место). База — мобайл;
   десктоп-клиренс дока — в responsive.css. Наследует общий .cta (overlays.css). */

.sub {
  max-width: 520px; margin: 0 auto; padding: 0 var(--gutter);
  /* Scrub-геометрия (высоты считает subscribe-scrub.js): lift центрирует хиро на
     старте, hold — «полоса сборки». --p (0→1) — прогресс скраба, --rp — на строку. */
  --sub-stick-top: 6px; --sub-lift: 0px; --sub-hold: 0px; --p: 0;
}
.sub__stage { position: relative; }
.sub__leadpad { height: var(--sub-lift); }
.sub__holdpad { height: var(--sub-hold); }

/* ---------- Хиро (первый экран, центр) ---------- */
/* Высоту первого экрана меряет JS (--sub-vp = высота скролла) — надёжнее
   percentage-цепочки на iOS. Хиро центрирует группу; план/плюшки — под сгибом. */
/* Хиро ПИНИТСЯ (sticky) на композиторе — нативный пин, гладкий на iOS-momentum;
   JS не хайджекает touch. Отлипает сам, когда .sub__stage доскроллен (≈ lift+hold).
   Высоту первого экрана держат leadpad/holdpad, не min-height. */
.sub__hero {
  position: sticky; top: var(--sub-stick-top); z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; text-align: center; padding: 8px 0;
  /* Непрозрачная подложка под цвет страницы: подъезжающая карта «Текущий план»
     уходит ПОД запиненный хиро (z-index:2), а не сталкивается с ним поверх. */
  background: rgb(var(--bg-rgb));
}
/* Мягкая кромка снизу хиро (scroll-edge): контент втекает под хиро без жёсткой линии. */
.sub__hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 24px;
  background: linear-gradient(rgb(var(--bg-rgb)), rgba(var(--bg-rgb), 0));
  pointer-events: none;
}
/* Группа контента хиро двигается «жестом-подначкой»: два кивка → пауза → снова,
   так очевиднее «листни меня», чем ровный синус. Диск качается вместе (и крутится). */
.sub__heroin {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  animation: hero-beckon 3.6s ease-in-out infinite; will-change: transform;
}
/* Юзер вовлёкся (заскроллил / показалась карта плана) — подначка останавливается
   (JS вешает класс на СЛЕДУЮЩЕЙ итерации, поэтому текущий цикл доигрывает). */
.sub__heroin--rest { animation: none; }
/* Жест-подначка ВВЕРХ («листни вверх»): два мягких подъёма → пауза. */
@keyframes hero-beckon {
  0%, 10% { transform: translateY(0); }
  20% { transform: translateY(-7px); }
  30% { transform: translateY(0); }
  40% { transform: translateY(-7px); }
  50%, 100% { transform: translateY(0); }
}

/* Явный намёк «свайпни вверх»: шеврон (повёрнут вверх) + подпись у нижней кромки
   первого экрана; мягко бобает, исчезает при вовлечении (класс is-gone из JS). */
/* Минимал-нудж: только иконка-шеврон под хиро, СКРЫТА по умолчанию. Появляется через
   пауза бездействия (JS вешает is-shown ~2.5с без свайпа), прячется на первый скролл. */
.sub__cue {
  position: absolute; left: 50%; top: 100%; margin-top: 16px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  color: var(--t3); pointer-events: none; opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.sub__cue svg { transform: rotate(-90deg); opacity: 0.9; }
.sub__cue.is-shown { opacity: 1; transform: translate(-50%, 0); animation: cue-bob 1.9s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }
/* Крутящийся диск из таб-бара, крупно, акцентом, с мягким свечением. */
.sub__disc { display: inline-flex; color: var(--accent); filter: drop-shadow(0 12px 30px var(--accent-glow)); }
.sub__disc .tab-vinyl { width: 74px; height: 74px; }

.sub__title { font-size: clamp(27px, 8.2vw, 33px); font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; }
/* «BEATLY» как на главной: первая буква — акцент, остальное белое (.wordmark). */
.sub__title .wordmark { font-size: inherit; font-weight: 800; letter-spacing: -0.02em; }
/* «Premium» — синий перелив в цвет бренда (тот же акцент, что «B»). Бесшовно:
   образ 300% шириной, блик в середине, по краям — базовый акцент; на обоих концах
   цикла видно только базу → стык невидим (жалоба «видно, где цикл кончается»). */
.sub__prem {
  background-image: linear-gradient(100deg,
    var(--accent) 0%, var(--accent) 42%, #EAF2FF 50%, var(--accent) 58%, var(--accent) 100%);
  background-size: 300% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: prem-shine 3.4s linear infinite;
}
@keyframes prem-shine { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sub__prem { color: var(--accent-hi); -webkit-text-fill-color: currentColor; }
}
@media (prefers-reduced-motion: reduce) { .sub__prem { animation: none; background-position: 50% 0; } }

.sub__lead { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--t2); max-width: 300px; }

/* ---------- Текущий план ---------- */
.sub__plan {
  display: flex; flex-direction: column; gap: 3px; margin-top: 22px;
  padding: 14px var(--card-pad); border-radius: var(--r-card);
  /* Бесплатный — намеренно НЕВЗРАЧНЫЙ: плоский серый, только тонкая кромка (контраст = иерархия). */
  background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sub__plan--on { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-glow), var(--shadow-1); }
.sub__plan-cap { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t4); }
.sub__plan-name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--t2); }
.sub__plan--on .sub__plan-name { color: var(--accent-soft); }
.sub__plan-meta { font-size: 12.5px; font-weight: 500; color: var(--t3); font-variant-numeric: tabular-nums; }
/* Статус подписки: «Осталось N дней» (герой) + прогресс подарочного месяца — видны только
   у активного Premium (JS снимает hidden). */
.sub__plan-days { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--accent-soft); font-variant-numeric: tabular-nums; margin-top: 3px; }
.sub__plan-track { position: relative; height: 4px; margin: 9px 0 3px; border-radius: 999px; overflow: hidden; background: rgba(234, 242, 255, 0.12); }
.sub__plan-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); transition: width 0.6s var(--ease-cine); }
/* Последние 3 дня без автопродления — апселл-варнинг красным («не теряй выгоду»). */
.sub__plan--warn .sub__plan-days { color: #ff9a9a; }
.sub__plan--warn .sub__plan-fill { background: linear-gradient(90deg, #ff5a5a, #ff9a9a); }
.sub__cta--warn { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 28px var(--accent-glow), 0 0 0 1.5px rgba(255, 110, 110, 0.6); }
/* Тестовый сброс к «Базовому» — незаметная ссылка. */
.sub__reset { margin-top: 6px; color: var(--t4); font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) { .sub__plan-fill { transition: none; } }

/* ---------- Плюшки ---------- */
.sub__seclabel { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t4); margin: 26px 2px 12px; }
.sub__perks { display: flex; flex-direction: column; gap: 4px; }
.perk { display: flex; align-items: center; gap: 14px; padding: 8px 2px; }
.perk__ic {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 13px; color: var(--accent); background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.perk__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perk__text b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--t1); }
.perk__text span { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--t3); }

/* ---------- Мелкий текст + документы (конец скролла) ---------- */
.sub__fine { font-size: 11.5px; font-weight: 500; line-height: 1.55; color: var(--t4); text-align: center; margin-top: 26px; }
.sub__docs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sub__docs .linkbtn { font-size: 12.5px; }
.sub__dot { color: var(--t4); }

/* ---------- Зафиксированный низ: периоды + покупка ---------- */
/* Поднос покупки — СТЕКЛЯННЫЙ материал ПОВЕРХ скролла (контент блюрит сквозь него,
   как таб-бар), а не чёрный слэб: мягкий градиент-скрим сверху → плотнее к низу.
   Скролл получает padding-bottom = высоте подноса (relayout в JS). Отступ до таб-бара
   (--dock-h из JS) = зазору сверху над кнопкой (--sub-gap) → кнопка не «наезжает». */
.sub__foot {
  --sub-gap: 14px;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: var(--sub-gap) var(--gutter) calc(var(--dock-h, calc(var(--tabbar-h) + var(--safe-b))) + var(--sub-gap));
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), 0.5) 26%, rgba(var(--bg-rgb), 0.66) 100%);
  /* Без верхнего hairline: это был «остаток» бывшей чёрной подложки — светлая
     полоска над сегментом. Материал подноса теперь читается бесшовно. */
  pointer-events: none;   /* прозрачные зоны подноса пропускают скролл; интерактив включает сам себя */
}
.sub__foot-in { max-width: 520px; margin: 0 auto; pointer-events: auto; }

/* Единый трек-сегмент: одна поверхность, опции прозрачные, выбор — плитка
   .sub__thumb (тинт+кольцо) едет ПРУЖИНОЙ (overshoot) между слотами — перелив,
   а не «в тупую». Плитка под контентом (z-index 0), текст поверх (z-index 1). */
.sub__opts {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 5px; margin-bottom: var(--sub-gap); border-radius: 18px;
  /* Материал как таб-бар: полупрозрачная поверхность + блюр контента за ней. */
  background: rgba(var(--surface-1-rgb), 0.6);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  /* Только контур-кольцо (очертание сегмента) + тень; убран верхний inset-блик —
     он давал вторую светлую линию по верхней кромке рядом с полоской подноса. */
  box-shadow: inset 0 0 0 1px var(--line-soft), var(--shadow-1);
}
.sub__thumb {
  position: absolute; left: 5px; right: 5px; top: 5px; z-index: 0; pointer-events: none;
  height: calc((100% - 10px - 6px) / 2); border-radius: 13px;
  background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px var(--accent);
  transition: transform 0.44s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.sub__opts.is-month .sub__thumb { transform: translateY(calc(100% + 6px)); }
.sopt {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 12px; text-align: left; padding: 11px 14px; border-radius: 13px; background: transparent;
  transition: transform var(--dur-press) var(--ease);
}
.sopt:active { transform: scale(0.985); }
.sopt__head { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 8px; }
.sopt__label { font-size: 15px; font-weight: 700; color: var(--t2); transition: color var(--dur) var(--ease); }
.sopt--on .sopt__label { color: var(--accent-soft); }
.sopt__badge {
  padding: 2px 7px; border-radius: var(--pill); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.02em; color: var(--on-accent); background: var(--accent); font-variant-numeric: tabular-nums;
}
.sopt__sub { grid-column: 1; grid-row: 2; font-size: 12px; font-weight: 500; color: var(--t3); font-variant-numeric: tabular-nums; margin-top: 1px; transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.24, 1), opacity 0.3s var(--ease), filter 0.3s var(--ease); will-change: transform; }
.sopt__price { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: baseline; gap: 3px; color: var(--t1); white-space: nowrap; }
.sopt__price b { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sopt__price i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--t3); }

.sub__cta {
  position: relative; overflow: hidden; width: 100%; margin-top: 0; padding: 16px 22px;
  /* Кнопка — тоже материал: почти сплошной акцент, но фон чуть просвечивает/блюрит
     (незначительно). color-mix — где поддержан; иначе сплошной акцент (фоллбэк выше). */
  background: var(--accent);
  background: color-mix(in srgb, var(--accent) 90%, transparent);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 28px var(--accent-glow);
  animation: cta-breathe 2.8s ease-in-out infinite; will-change: transform;
}
.sub__cta > * { position: relative; z-index: 1; }
/* Тихое «дыхание» кнопки — приглашение «нажми на меня»; амплитуда крошечная. */
@keyframes cta-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } }
/* Пресс перебивает дыхание — !important важнее анимации. */
.sub__cta:active { transform: scale(0.97) !important; animation-play-state: paused; }
/* Блик-перелив кнопки: полоса света проходит по пилюле и отдыхает за краем.
   Ритм (4.6s) и движение (translate) НАМЕРЕННО иные, чем у «Premium» (bg-sweep
   3.4s) и «дыхания» (2.8s) — все анимации дрейфуют и друг на друга не наезжают. */
.sub__cta::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: translateX(-160%); pointer-events: none;
  animation: cta-sheen 4.6s ease-in-out infinite;
}
@keyframes cta-sheen {
  0% { transform: translateX(-160%); }
  45% { transform: translateX(320%); }
  100% { transform: translateX(320%); }
}
.sub__cancel { margin-top: 12px; color: var(--t3); }
/* Подпись о комиссии СБП под кнопкой оплаты — мелкая, приглушённая, по центру.
   Ставку удерживает Platega со стороны плательщика (в коде не считаем). */
.sub__fee { margin-top: 8px; text-align: center; font-size: 12px; line-height: 1.3; color: var(--t3); }
/* Смена цены CTA «прокатом» (beUI roll+blur): старое ВНЯТНО укатывается ВНИЗ ЗА свою
   строку с блюром, новое вкатывается из верха — симметрия, оба направления вниз.
   Уход (0.22с, ease-in accelerate) короче входа (0.3с, ease-out) — apple-design/motion. */
#sub-cta-label { display: inline-block; transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.24, 1), opacity 0.3s var(--ease), filter 0.3s var(--ease); }
#sub-cta-label.is-swapout { transform: translateY(115%); opacity: 0; filter: blur(4px); transition: transform 0.22s cubic-bezier(0.5, 0, 0.9, 0.4), opacity 0.22s ease-in, filter 0.22s ease-in; }
#sub-cta-label.is-swapin { transform: translateY(-90%); opacity: 0; filter: blur(4px); transition: none; }
/* Инфо-карусель активного тарифа: ролл СВЕРХУ-ВНИЗ — новое из верха, старое ВНЯТНО ВНИЗ. */
.sopt__sub.is-rd-out { transform: translateY(115%); opacity: 0; filter: blur(3px); transition: transform 0.22s cubic-bezier(0.5, 0, 0.9, 0.4), opacity 0.22s ease-in, filter 0.22s ease-in; }
.sopt__sub.is-rd-in { transform: translateY(-90%); opacity: 0; filter: blur(3px); transition: none; }

/* ---------- Плавное проявление по мере прокрутки (одноразовое) ---------- */
/* «Прячем старт» только когда JS жив (класс reveal-armed ставит subscribe.js) —
   иначе контент всегда виден. Медленнее и заметнее прежнего + стаггер по DOM-порядку
   (--rv-i из JS) → плюшки «подъезжают» друг за дружкой. Проявился — остался (JS только
   добавляет .in и снимает наблюдение); сброс — при входе на экран (armReveal). */
/* Проявление ОДНОРАЗОВОЕ по видимости (IntersectionObserver в subscribe.js, rootMargin
   −footH → срабатывает в ВИДИМОЙ полосе шапка↔поднос, не за подносом). Проявился —
   остался (скролл назад НЕ переигрывает); сброс — при входе на экран (armReveal).
   Заметный подъём translate+opacity, ступенчато (--rv-i). БЕЗ blur (jank на iPhone). */
.sub .sub-reveal {
  will-change: opacity, transform;
  transition: opacity 0.34s ease, transform 0.44s cubic-bezier(0.22, 1, 0.32, 1);
  transition-delay: min(calc(var(--rv-i, 0) * 34ms), 200ms);   /* каскад держим бодрым: суммарно <~0.6с даже на 11 строках */
}
.sub.reveal-armed .sub-reveal { opacity: 0; transform: translateY(20px) scale(0.985); }
.sub .sub-reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sub__heroin, .sub__cue, .sub__cta, .sub__cta::before, .sub__disc .tab-vinyl__face { animation: none; }
  .sub__thumb, .sub .sub-reveal, #sub-cta-label, .sopt__label, .sopt__sub { transition: none; }
  /* Без scrub: хиро не пинится, полос-заглушек нет, блок виден и просто скроллится. */
  .sub__hero { position: static; }
  .sub__leadpad, .sub__holdpad { height: 0; }
  .sub .sub-reveal { opacity: 1; transform: none; }
  .sub__lead { opacity: 1; }
}

/* Пилюля скидки «−50% на первый месяц» — ТОЛЬКО стадия gift (renderSubscribe прячет иначе).
   По просьбе Артёма НЕ на кнопке, а отдельной плашкой над сегментом. Появляется поп'ом,
   потом редкий тихий шиммер (сделка, не строб). Зелёная — семантика выгоды. */
.sub__deal {
  display: flex; align-items: center; gap: 7px; width: max-content; max-width: 100%;
  margin: 0 auto 10px; padding: 6px 13px; border-radius: var(--pill);
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em; color: #34d399;
  background: rgba(16, 185, 129, 0.12); position: relative; overflow: hidden;
  transform: scale(0.92); opacity: 0;
  animation: sub-deal-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}
.sub__deal-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; flex: none; }
.sub__deal::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: sub-deal-shimmer 3.4s var(--ease) 1.4s infinite;
}
@keyframes sub-deal-pop { to { transform: scale(1); opacity: 1; } }
@keyframes sub-deal-shimmer { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .sub__deal { animation: none; transform: none; opacity: 1; }
  .sub__deal::after { animation: none; }
}