/* r.css – общий стиль рилс-лендингов /r/<skin>/.
   Скин задаёт на :root:
     --acc/--acc2/--vig  – палитра и виньетка низа
     --pod-b / --pod-b-d – насколько кнопка поднята над низом экрана (моб/десктоп);
                           подобрано так, чтобы она стояла ПОД НОГАМИ персонажа
     --obj-d             – object-position ландшафтного видео на десктопе */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
/* ДИСПЛЕЙНОЕ начертание, не «с засечками». Georgia стояла у хука, числа аркана,
   эха вопроса и оффера – серифный дисплей рядом с гротеском и есть та «подпись
   машинного дизайна», на которую пришли три фидбека (#site-readability).
   Иерархию держат вес, кегль и разрядка. Держали до замеров 08.09, чтобы смена
   вида раскрытия не смешала числа; замеры сняты – трафика на /r/ нет. */
:root{--disp:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif}
body{
  font-family:Inter,-apple-system,system-ui,sans-serif;
  background:#0A0810;color:#F2EDE2;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* видео-фон: моб – портретный кроп (кадр уже собран при кодировании),
   десктоп – ландшафт с object-position под фигуру */
#bgv{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--obj-m,50% 50%);z-index:-2;transition:opacity .9s ease}
#bgv.off{opacity:0}

/* ЗАПАСНОЙ ФОН – живой кадр вместо видео (11.08). Часть телефонов не держит
   фоновое видео после сворачивания: браузер гасит его снова и снова, и первый
   экран воронки дёргается. Дёрганый фон хуже спокойного, поэтому после второй
   осечки уходим сюда навсегда и обратно не возвращаемся: тот же кадр (poster
   видео), медленный наплыв – движение есть, декодера не нужно. */
/* Наплыв ЧИТАЕМЫЙ: 30 с от края до края выглядели как «анимация не работает» –
   на глаз такое движение неотличимо от статики. 16 с и вдвое больший размах
   видно сразу, при этом кадр не «едет» на глазах и не мешает читать хук. */
#bgs{position:fixed;inset:0;z-index:-2;background-size:cover;
  background-position:var(--obj-m,50% 50%);opacity:0;transition:opacity .9s ease;
  will-change:transform;animation:kenb 16s ease-in-out infinite alternate}
#bgs.on{opacity:1}
@keyframes kenb{
  from{transform:scale(1.06) translate3d(2.2%,1.6%,0)}
  to  {transform:scale(1.24) translate3d(-2.6%,-2.4%,0)}}
@media (prefers-reduced-motion:reduce){#bgs{animation:none;transform:scale(1.08)}}
#veil{position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,6,14,.42) 0%,rgba(8,6,14,.12) 32%,rgba(8,6,14,.18) 58%,var(--vig,rgba(8,6,14,.82)) 100%)}

/* ── экран-гейт: хук сверху, кнопка – под ногами персонажа ── */
#gate{position:fixed;inset:0;z-index:2}
.g-top{position:absolute;left:0;right:0;top:calc(26px + env(safe-area-inset-top));
  padding:0 22px;text-align:center}
.g-kick{font-size:11px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;
  color:var(--acc,#E8DCC8);opacity:.9;padding-left:.42em}
.g-hook{font-family:var(--disp);font-weight:600;font-size:clamp(25px,6.8vw,38px);line-height:1.18;
  margin:12px 0 8px;white-space:pre-line;text-wrap:balance;
  text-shadow:0 2px 26px rgba(0,0,0,.6)}
.g-sub{font-size:13px;color:rgba(242,237,226,.72);text-shadow:0 1px 14px rgba(0,0,0,.6)}

/* «под» – блок кнопки. Прибит НИЗОМ: раскрытая форма растёт вверх,
   а кнопка остаётся ровно там, куда её поставили (под ногами фигуры). */
#pod{position:absolute;left:var(--pod-x,50%);bottom:var(--pod-b,22%);
  transform:translateX(-50%);width:min(340px,86vw);
  transition:bottom .32s cubic-bezier(.22,1,.36,1)}

.g-form{max-height:0;opacity:0;overflow:hidden;transform:translateY(14px);
  transition:max-height .26s ease, opacity .2s ease .04s, transform .26s cubic-bezier(.22,1,.36,1);}
/* Высота раскрытой формы: дата + строка пола + место под ошибку.
   Забудешь поднять при новой строке – блок обрежется молча. */
#pod.open .g-form{max-height:250px;opacity:1;transform:none}
.g-note{font-size:11px;color:rgba(242,237,226,.62);margin-bottom:10px;
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
.g-date{display:flex;gap:10px;justify-content:center;margin-bottom:6px}
.g-date input{
  width:74px;height:58px;text-align:center;font:600 22px Inter,sans-serif;color:#F5EFDF;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24);border-radius:14px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.g-date input:focus{border-color:var(--acc,#E8DCC8);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc,#E8DCC8) 22%,transparent)}
.g-date input::placeholder{color:rgba(242,237,226,.38);font-weight:500}
.g-date .y{width:104px}

/* Пол: три пилюли под датой – то же стекло, что у полей, чтобы строка читалась
   продолжением формы, а не вторым вопросом. Подсвеченного заранее варианта нет:
   догадка о поле и есть то, что здесь чинится. Выбранная берёт акцент скина. */
.g-sex{display:flex;gap:6px;margin-bottom:8px}
.g-sex button{
  flex:1;min-width:0;height:38px;padding:0 2px;cursor:pointer;
  font:600 12.5px Inter,sans-serif;color:rgba(242,237,226,.74);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:11px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:color .18s, background .18s, border-color .18s;
}
.g-sex button.on{color:#141019;border-color:transparent;
  background:linear-gradient(135deg,var(--acc,#E8DCC8),var(--acc2,#CBB98F));
  box-shadow:0 6px 20px -8px color-mix(in srgb,var(--acc,#E8DCC8) 60%,transparent)}
@media (max-width:360px){ .g-sex button{font-size:11.5px} }
#rerr{font-size:12.5px;color:#F0A48A;min-height:16px;margin-bottom:4px}

#rgo{
  display:block;width:100%;height:56px;border:none;border-radius:16px;
  font:700 16.5px Inter,sans-serif;color:#141019;cursor:pointer;
  background:linear-gradient(135deg,var(--acc,#E8DCC8),var(--acc2,#CBB98F));
  box-shadow:0 10px 34px -10px color-mix(in srgb,var(--acc,#E8DCC8) 65%,transparent);
  animation:breath 3.4s ease-in-out infinite;
}
#pod.open #rgo{animation:none}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}

/* десктоп: ландшафтное видео + своя высота кнопки */
@media (min-width:821px), (orientation:landscape) and (min-width:640px){
  #bgv{object-position:var(--obj-d,50% 50%)}
  #pod{bottom:var(--pod-b-d,var(--pod-b,22%))}
  .g-top{top:calc(40px + env(safe-area-inset-top))}
}

/* хук-анимация */
/* width/height ОБЯЗАТЕЛЬНЫ: canvas – replaced-элемент, и при inset:0 без них
   браузер берёт CSS-размер из атрибутов width/height, а они в device-пикселях
   (×3 на телефоне). Канвас становился втрое больше экрана, центр звезды уезжал
   за правый нижний угол – на телефоне была видна только россыпь искр оттуда. */
#hookC{position:fixed;inset:0;width:100%;height:100%;z-index:50;display:none;
  background:rgba(8,6,14,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* ── сцена показа расчёта ── */
/* крупное число аркана в центре – первый кадр после взрыва звезды */
#bigArc{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%) scale(.3);z-index:60;
  font-family:var(--disp);font-weight:600;font-size:min(30vw,160px);line-height:1;color:#FBF6EA;
  opacity:0;pointer-events:none;text-shadow:0 0 60px rgba(255,246,225,.45)}
#bigArc.in{opacity:1;transform:translate(-50%,-50%) scale(1);
  transition:transform .78s cubic-bezier(.16,1.5,.3,1), opacity .3s ease}

/* превью результата */
#result{display:none;position:relative;padding:26px 20px calc(40px + env(safe-area-inset-bottom));
  max-width:430px;margin:0 auto;z-index:3}
#result.on{display:block}
.rv-card{background:rgba(14,11,22,.72);border:1px solid rgba(255,255,255,.13);border-radius:18px;
  padding:20px 18px;margin-bottom:12px;text-align:center;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
/* блоки въезжают по очереди (класс .in вешает сценарий) */
.rv-step{opacity:0;transform:translateY(26px);
  transition:opacity .42s ease, transform .52s cubic-bezier(.22,1,.36,1)}
.rv-step.in{opacity:1;transform:none}
.rv-kick{font-size:10.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--acc,#E8DCC8);padding-left:.3em}
/* эхо вопроса с рилса: человек должен узнать, на ЧТО ему сейчас ответят */
.rv-q{font-size:15px;line-height:1.4;
  color:rgba(242,237,226,.72);margin-bottom:12px}
.rv-q::before{content:'«'} .rv-q::after{content:'»'}
/* мост от открытого к закрытому – только там, где скин его задал */
.rv-note{font-size:12.5px;line-height:1.55;color:rgba(242,237,226,.6);margin-top:12px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.rv-num{font-family:var(--disp);font-weight:600;font-size:54px;line-height:1;margin-top:10px;color:#FBF6EA;
  opacity:0;transition:opacity .2s ease}
.rv-num.on{opacity:1}
.rv-name{font-family:var(--disp);font-weight:600;font-size:24px;margin-top:2px}
.rv-ess{font-size:14px;line-height:1.6;color:rgba(242,237,226,.85);margin-top:10px}
/* Схождение систем (27.08): наверху утверждение, под ним – кто за него ручается.
   Строки-источники намеренно мельче и тише самого утверждения: они доказательство,
   а не второй текст для чтения. */
.rv-pow{font-size:15.5px;font-weight:600;margin-top:10px}
.rv-pow span{font-size:12px;font-weight:500;color:rgba(242,237,226,.6)}
.rv-syn{font-size:16px;font-weight:600;line-height:1.45;margin-top:10px}
.rv-src{font-size:11.5px;font-weight:600;letter-spacing:.02em;margin-top:6px;
  color:rgba(242,237,226,.72)}
.rv-src:before{content:'\2726';margin-right:6px;opacity:.6}
.rv-src span{font-weight:500;color:rgba(242,237,226,.55)}
/* Шесть двойников (27.08): ряд flex рвал строку по-разному на каждой ширине –
   сетка 3×2 держит два ровных ряда на телефоне и один ряд из шести на десктопе. */
.rv-twins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px;
  justify-items:center;margin-top:12px}
.tw1{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px;
  line-height:1.25;color:rgba(242,237,226,.85);width:100%;max-width:82px}
.tw1 img{width:62px;height:62px;border-radius:50%;object-fit:cover;
  border:2px solid var(--acc,#E8DCC8)}
/* Совпавшие точки – подпись, а не второе имя: тон ниже имени звезды, иначе ряд
   читается как два списка сразу. Первая карточка (самое глубокое совпадение)
   держит акцентную рамку и счёт «5 из 6». */
.tw1 i{font-style:normal;font-size:9.5px;line-height:1.2;letter-spacing:.01em;
  color:rgba(242,237,226,.52)}
.tw-top{position:relative}
.tw-top img{border-color:#FBF6EA;box-shadow:0 0 0 3px rgba(251,246,234,.14)}
.tw-top i{color:var(--acc,#E8DCC8)}
/* Счёт совпадений – бейджем на аватаре: строкой он делал первую карточку на
   две строки выше соседей, и ряд сетки 3×2 разъезжался. */
.tw-top b{position:absolute;top:44px;left:50%;transform:translateX(14px);
  font:600 10px/1 Inter,sans-serif;letter-spacing:.02em;color:#100A0E;
  background:var(--acc,#E8DCC8);border-radius:9px;padding:3px 5px;
  box-shadow:0 1px 5px rgba(0,0,0,.4)}
/* Редкость сочетания – одна строка под именем аркана, мерка, а не абзац. */
.rv-rare{font-size:11.5px;line-height:1.35;margin-top:6px;letter-spacing:.02em;
  color:rgba(242,237,226,.58)}
.rv-rare:empty{display:none}
@media(min-width:821px){ .rv-twins{grid-template-columns:repeat(6,minmax(0,1fr))} }
.rv-locked{text-align:left}
.rv-locked .rv-kick{display:block;text-align:center;margin-bottom:4px}
.rv-lrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:13.5px}
.rv-lrow:last-child{border-bottom:none}
.rv-lrow b{font-family:var(--disp);font-weight:600;color:#FBF6EA;white-space:nowrap}
.rv-lrow b.soft{font-size:11.5px;font-weight:500;font-family:Inter,sans-serif;
  color:rgba(242,237,226,.42)}
.blur{filter:blur(5px);user-select:none}

/* ── ОФФЕР ДОМИНАНТОЙ (условие 5 воронки, 09.08) ──────────────────────────
   «7 дней полного доступа» стояли строкой в 12px под кнопкой, ниже значков
   оплаты – то есть главное предложение воронки читалось сноской. Теперь это
   блок над кнопкой: сперва срок, потом цена, и только потом действие.       */
.rv-offer{border:1px solid color-mix(in srgb,var(--acc,#E8DCC8) 40%,transparent);
  border-radius:16px;padding:14px 16px 13px;margin-bottom:10px;text-align:center;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--acc,#E8DCC8) 11%,transparent),rgba(14,11,22,.5))}
.rv-odays{font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.25;color:#FBF6EA}
.rv-oprice{display:flex;align-items:baseline;justify-content:center;gap:9px;
  flex-wrap:wrap;margin-top:6px;font:700 26px Inter,sans-serif;color:var(--acc,#E8DCC8)}
.rv-oprice span{font:500 12px Inter,sans-serif;color:rgba(242,237,226,.62)}
.rv-cta{
  display:flex;align-items:center;justify-content:center;width:100%;height:58px;margin-top:6px;
  border-radius:16px;text-decoration:none;font:700 16.5px Inter,sans-serif;color:#141019;
  background:linear-gradient(135deg,var(--acc,#E8DCC8),var(--acc2,#CBB98F));
  box-shadow:0 10px 34px -10px color-mix(in srgb,var(--acc,#E8DCC8) 65%,transparent);
  animation:breath 3.4s ease-in-out infinite;
}
.rv-fine{font-size:12px;color:rgba(242,237,226,.65);text-align:center;margin-top:10px}
.rv-fine2{font-size:11px;color:rgba(242,237,226,.45);text-align:center;margin-top:4px}

/* ── УСЛОВИЕ 7: вертикаль главная, десктоп плотный ────────────────────────
   Гейт собран под вертикаль изначально (портретный кроп видео, кнопка под
   ногами фигуры) – его не трогаем. А результат оставался колонкой 430px и на
   27 дюймах выглядел телефоном посреди пустого поля: пять карточек уезжали
   вниз, оффер требовал прокрутки. На широком экране раскладываем в две
   колонки – центральный аркан слева во всю высоту, ответ и оффер справа,
   всё решение помещается в один экран без прокрутки.                        */
@media (min-width:900px) and (min-height:620px){
  #result.on{max-width:900px;padding:44px 24px 56px;
    display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-content:start}
  .rv-step[data-s="0"]{grid-column:1;grid-row:1 / span 4;align-self:start;margin-bottom:0}
  .rv-step[data-s="1"],.rv-step[data-s="2"],
  .rv-step[data-s="3"],.rv-step[data-s="4"]{grid-column:2}
  .rv-step[data-s="0"]{padding:30px 26px}
  .rv-step[data-s="0"] .rv-num{font-size:76px}
  .rv-step[data-s="0"] .rv-name{font-size:30px}
  .rv-step[data-s="0"] .rv-ess{font-size:15px}
  .rv-step[data-s="4"]{margin-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  #rgo,.rv-cta{animation:none}
  .rv-step{opacity:1;transform:none;transition:none}
  #bigArc{transition:none}
}