/* ============================================================
   Анкета v2 — анимации как на Open House, поверх старой страницы.
   Логика полей (маска номера, флаги стран, проверки) — в app.js,
   здесь только то, как буквы появляются.
   ============================================================ */

/* ---------- Фон: вертикальное видео с Open House ---------- */
.scene video{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;
}

/* ---------- Заголовок по буквам ---------- */
.name.split{opacity:1;animation:none}
.name .ch{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(5px);
  animation:chIn .75s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--c) * 42ms + .3s)}
.name .pk{color:var(--pink)}
@keyframes chIn{to{opacity:1;transform:none;filter:none}}

/* ---------- Имя и телефон: каждая буква «впрыгивает» ---------- */
.fx-on{color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:var(--cream)}
/* автозаполнение iPhone красит текст сам — тоже прячем, рисует слой */
.fx-on:-webkit-autofill{-webkit-text-fill-color:transparent!important}
.typer{position:absolute;pointer-events:none;display:flex;align-items:center;overflow:hidden;white-space:pre;
  color:var(--cream);transition:transform .25s ease}
.typer .in{display:inline-block;will-change:transform}
.typer .t{display:inline-block}
.typer .t.new{animation:tPop .38s cubic-bezier(.2,.9,.3,1.25)}
@keyframes tPop{
  0%{opacity:0;transform:translateY(55%) scale(.55);text-shadow:0 0 14px rgba(255,45,120,.95);color:#ff8fb6}
  60%{opacity:1;text-shadow:0 0 10px rgba(255,45,120,.6)}
  100%{transform:none;text-shadow:none}}
/* поле при нажатии больше не приподнимается: на iPhone курсор не успевал за сдвигом
   и оказывался ниже текста */
.field input:focus,.field textarea:focus{transform:none!important}
/* поле цели — несколько строк: слой переносит текст по словам, как само поле */
.typer.multi{display:block;white-space:pre-wrap;overflow-wrap:break-word}
.typer.multi .in{display:block}
/* в многострочном поле буквы строчные (inline), а не блоки — иначе высота строк
   чуть другая и текст слоя уползает от настоящего; появление — вспышкой, без прыжка */
.typer.multi .w{display:inline;white-space:nowrap}
.typer.multi .t{display:inline}
.typer.multi .t.new{animation:tGlow .5s ease-out}
@keyframes tGlow{0%{opacity:0;color:#ff8fb6;text-shadow:0 0 14px rgba(255,45,120,.95)}
  60%{opacity:1;text-shadow:0 0 8px rgba(255,45,120,.5)}100%{text-shadow:none}}

/* поле, которое заполнено правильно, коротко подсвечивается */
.field.fx-ok input{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1.5px rgba(23,146,95,.75)}

/* ---------- Демо: метка в углу ---------- */
.demo-tag{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:10px;z-index:30;
  padding:4px 9px;border-radius:999px;background:rgba(255,45,120,.9);color:#fff;
  font:700 11px/1 var(--font-body);letter-spacing:.08em}

@media (prefers-reduced-motion: reduce){
  .name .ch{animation:none;opacity:1;transform:none;filter:none}
  .typer .t.new{animation:none}
}

/* ---------- Стекло почти без размытия: видео за карточкой видно чётко ----------
   Размытие 13–14px превращало зал в пятна. Вместо него — лёгкое затемнение,
   чтобы текст читался на ярких кадрах. */
.glass{
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
  background:linear-gradient(180deg,rgba(11,15,14,.42) 0%,rgba(11,15,14,.52) 45%,rgba(11,15,14,.66) 100%);
}
.field input,.field textarea{
  -webkit-backdrop-filter:none!important;
          backdrop-filter:none!important;
  background-color:rgba(11,15,14,.55);
}

/* ---------- Живые доказательства (сначала в демо) ---------- */
.proof{display:flex;justify-content:center;margin:10px 0 2px;animation:rise .8s cubic-bezier(.18,.72,.24,1) both}
.proof span{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 10px;border-radius:999px;
  background:rgba(11,15,14,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font:500 13px/1 var(--font-body);color:rgba(242,237,228,.85)}
.proof b{font-family:var(--font-display);font-weight:400;color:var(--cream);font-variant-numeric:tabular-nums}
.proof i{width:7px;height:7px;border-radius:50%;background:#35d07f;box-shadow:0 0 0 0 rgba(53,208,127,.6);animation:pping 1.6s infinite}
@keyframes pping{0%{box-shadow:0 0 0 0 rgba(53,208,127,.55)}70%{box-shadow:0 0 0 7px rgba(53,208,127,0)}100%{box-shadow:none}}
.ticker{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 44px);z-index:5;height:34px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  opacity:0;transition:opacity .8s ease}
.ticker.on{opacity:1}
.ticker .tr{display:flex;width:max-content;gap:8px;height:100%;align-items:center;animation:tick var(--dur,60s) linear infinite}
.ticker .c{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 4px;border-radius:999px;
  background:rgba(11,15,14,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  font:600 12.5px/1 var(--font-body);color:var(--cream);white-space:nowrap}
.ticker .c em{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font:800 9.5px/1 var(--font-body);color:#fff;background:linear-gradient(135deg,#ff2d78,#a8124a)}
.ticker .c small{font-size:11px;color:rgba(242,237,228,.6);font-weight:500}
@keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* без размытия текст держится на тени: на светлых кадрах (белая студия) он не теряется */
.card .tagline,.card .promise,.card .note,.goal-q,.card .name{text-shadow:0 1px 10px rgba(0,0,0,.55)}

/* ---------- На ноутбуке — тот же телефонный вид ----------
   Широкого варианта нет: страница — колонка шириной телефона по центру,
   видео, карточка и лента живут внутри неё, вокруг — тёмный фон. */
@media (min-width:600px){
  html{background:#050706}
  body{background:#050706}
  .scene{left:calc(50% - 215px);right:auto;width:430px}
  .page{max-width:430px;margin:0 auto}
  .ticker{left:calc(50% - 215px);right:auto;width:430px}
  .demo-tag{left:calc(50% - 205px)}
  /* края колонки — мягкая тень, чтобы она читалась как экран телефона */
  .page::before{content:"";position:fixed;top:0;bottom:0;left:calc(50% - 215px);width:430px;pointer-events:none;z-index:-1;
    box-shadow:0 0 0 1px rgba(255,255,255,.05),0 0 80px rgba(0,0,0,.8)}
}

/* низкий экран (iPhone SE и т.п.): плашка компактнее, разделитель под ней не нужен —
   иначе низ карточки уходил за край экрана */
@media (max-height:700px){
  .proof{margin:6px 0 0}
  .proof span{padding:4px 11px 4px 8px;font-size:12px}
  .proof + .divider{display:none}
}