/* ============================================================
   Furkatovna — анкета.
   Фон: кадр из тап-линка (bg.jpg). Поверх — liquid glass
   по референсу IMG_2914: прозрачность, блики по краю,
   внутреннее свечение, мягкие тени.
   Палитра и шрифты — те же, что в furkatovna-tap-link.
   Всё настраиваемое — в :root.
   ============================================================ */
:root{
  --bg:#0B0F0E;
  --pink:#FF2D78;
  --green:#17925F;
  --red:#E8342B;
  --cream:#F2EDE4;

  --font-body:'Space Grotesk','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Archivo Black','Arial Black','Segoe UI Black',Impact,sans-serif;

  --radius-card:26px;
  --radius-el:18px;
  --tap:58px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  min-height:100vh;min-height:100dvh;
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- Фоновая сцена ---------- */
.scene{
  position:fixed;inset:0;z-index:0;
  background-color:var(--bg);
  overflow:hidden;
  transform:scale(1.07);
  /* наезд при загрузке, дальше — очень медленное дыхание кадра */
  animation:
    sceneIn 2.4s cubic-bezier(.16,.75,.24,1) .05s forwards,
    drift 26s ease-in-out 2.5s infinite;
  will-change:transform;
}
/* Кадрирование то же, что было у фона в стилях */
.scene picture,
.scene img{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  object-fit:cover;
  object-position:50% 6%;
}

@keyframes sceneIn{to{transform:scale(1);}}
@keyframes drift{
  0%,100%{transform:scale(1) translate3d(0,0,0);}
  50%    {transform:scale(1.045) translate3d(0,-8px,0);}
}

/* Затемнение к низу: под карточкой фото должно уходить в темноту,
   иначе текст в полях теряется на бликах пола. */
.scene::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(11,15,14,0)   0%,
    rgba(11,15,14,0)   34%,
    rgba(11,15,14,.18) 48%,
    rgba(11,15,14,.42) 62%,
    rgba(11,15,14,.66) 76%,
    rgba(11,15,14,.80) 90%,
    rgba(11,15,14,.86) 100%);
}

/* ---------- Каркас: фото сверху, карточка внизу ---------- */
.page{
  position:relative;z-index:1;
  min-height:100vh;min-height:100dvh;
  padding:0 16px calc(22px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;
}

/* «Окно», в котором видно охрану */
.hero-space{flex:1 1 auto;min-height:clamp(120px,22vh,300px);}

.wrap{width:100%;max-width:400px;margin:0 auto;flex:0 0 auto;}

/* ---------- Появление: всё всплывает по очереди ----------
   Одна кривая на весь интерфейс — движение читается как единое. */
@keyframes rise{
  from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px);}
  to  {opacity:1;transform:none;filter:blur(0);}
}
.rv{opacity:0;animation:rise .8s cubic-bezier(.18,.72,.24,1) forwards;}

/* Тайминг каскада. Шаг ~80мс — глаз успевает за каждым элементом,
   но общее появление укладывается в секунду. */
/* У карточки своя кривая без blur: filter поверх backdrop-filter
   даёт заметный провал по производительности на телефонах. */
@keyframes riseCard{
  from{opacity:0;transform:translateY(22px) scale(.98);}
  to  {opacity:1;transform:none;}
}
.card.rv   {animation-name:riseCard;animation-delay:.05s;}
.name      {animation-delay:.20s;}
.tagline   {animation-delay:.28s;}
.promise   {animation-delay:.34s;}
.divider   {animation-delay:.40s;}
.field:nth-child(1){animation-delay:.47s;}
.field:nth-child(2){animation-delay:.55s;}
.btn.primary{animation-delay:.63s;}
.note      {animation-delay:.71s;}
.foot      {animation-delay:.78s;}

/* ---------- Стекло ----------
   Тонкое и прозрачное: солдаты должны просвечивать сквозь карточку. */
.glass{
  position:relative;
  background:linear-gradient(180deg,
    rgba(255,255,255,.075) 0%,
    rgba(255,255,255,.02)  45%,
    rgba(10,8,9,.16)       100%);
  -webkit-backdrop-filter:blur(13px) saturate(140%);
          backdrop-filter:blur(13px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 0 0 30px rgba(255,255,255,.05),
    0 22px 48px rgba(0,0,0,.45);
}

/* Блик по краю: ярко сверху-слева и снизу-справа — как на референсе.
   Градиентная рамка через mask, обычный border так не умеет. */
.glass::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1.2px;
  background:linear-gradient(135deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.30) 12%,
    rgba(255,255,255,.05) 36%,
    rgba(255,255,255,.05) 62%,
    rgba(255,255,255,.35) 86%,
    rgba(255,255,255,.90) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;z-index:2;
}

/* Нет backdrop-filter — гасим фон под карточкой заливкой, чтобы читалось */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(11,15,14,.72);}
}

/* ---------- Карточка ---------- */
.card{
  position:relative;z-index:2;
  padding:26px 18px 20px;
  border-radius:var(--radius-card);
}
.card > *{position:relative;z-index:3;}

/* ---------- Тексты ---------- */
.name{
  font-family:var(--font-display);font-weight:400;
  font-size:min(6.4vw,23px);
  line-height:1.14;letter-spacing:-.015em;
  text-align:center;
  color:var(--cream);
  text-shadow:0 2px 16px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.6);
}

.tagline{
  margin:9px auto 0;
  text-align:center;
  font-size:min(3.4vw,14px);
  line-height:1.42;
  color:rgba(242,237,228,.84);
  text-shadow:0 1px 12px rgba(0,0,0,.9), 0 0 24px rgba(0,0,0,.6);
}

/* Что человек получит за свой номер */
.promise{
  margin:8px auto 0;
  text-align:center;
  font-size:min(3.1vw,13px);
  line-height:1.45;
  color:rgba(242,237,228,.62);
  text-shadow:0 1px 10px rgba(0,0,0,.9);
}

/* Что произойдёт после отправки */
.note{
  margin:10px auto 0;
  text-align:center;
  font-size:12px;line-height:1.4;
  color:rgba(242,237,228,.5);
  text-shadow:0 1px 8px rgba(0,0,0,.85);
}

/* Согласие на обработку данных.
   Тише подписи под кнопкой: человек должен его видеть, но оно не должно
   тянуть внимание на себя — иначе превращается в предупреждение
   и отпугивает ровно тех, кто и так сомневается. */
/* Вдвое мельче подписи «перезвоним за 15 минут»: это формальность,
   а не то, что человек должен читать перед звонком. */
.consent{
  margin:6px auto 0;
  text-align:center;
  font-size:6px;line-height:1.3;letter-spacing:.02em;
  color:rgba(242,237,228,.2);
  text-shadow:0 1px 5px rgba(0,0,0,.8);
}
.consent a{
  color:rgba(242,237,228,.3);
  text-decoration:underline;
  text-decoration-thickness:.4px;
  text-underline-offset:2px;
  /* Шрифт крошечный, но попасть пальцем всё равно надо */
  display:inline-block;padding:5px 3px;margin:-5px 0;
}
.consent a:active{color:rgba(242,237,228,.85);}

.divider{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:14px 0 0;
}
.divider .ln{height:1px;width:46px;background:linear-gradient(90deg,transparent,rgba(242,237,228,.26),transparent);}
.divider .dot{width:3px;height:3px;border-radius:50%;background:rgba(242,237,228,.3);}

form{margin-top:16px;}

/* ---------- Поля ---------- */
.field{margin-bottom:11px;}

.sr{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

.field input{
  width:100%;
  height:var(--tap);
  padding:0 18px;
  border:none;
  border-radius:var(--radius-el);
  font-family:var(--font-body);
  font-size:16px;              /* меньше 16px — iOS зумит страницу при фокусе */
  font-weight:500;
  color:var(--cream);
  background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
          backdrop-filter:blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(255,255,255,.08),
    inset 0 -10px 20px rgba(0,0,0,.14),
    0 6px 16px rgba(0,0,0,.28);
  outline:none;
  transition:box-shadow .3s cubic-bezier(.18,.72,.24,1),
             background .3s ease,
             transform .3s cubic-bezier(.18,.72,.24,1);
}

/* Поле чуть приподнимается к пальцу при фокусе */
.field input:focus{transform:translateY(-2px);}

/* ---------- Флаг распознанной страны ---------- */
.input-wrap{position:relative;}

/* место под флаг, чтобы номер под него не заезжал */
.input-wrap input{padding-right:52px;}

.flag{
  position:absolute;right:16px;top:50%;
  transform:translateY(-50%) scale(.6);
  font-size:21px;line-height:1;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,
             transform .35s cubic-bezier(.2,1.3,.4,1),
             margin-top .3s cubic-bezier(.18,.72,.24,1);
}
.flag:not(:empty){opacity:1;transform:translateY(-50%) scale(1);}

/* флаг едет вместе с полем, когда оно приподнимается на фокусе */
.input-wrap:focus-within .flag{margin-top:-2px;}

.field input::placeholder{color:rgba(242,237,228,.42);font-weight:400;}

.field input:focus{
  background:linear-gradient(180deg, rgba(255,255,255,.19) 0%, rgba(255,255,255,.07) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 0 0 1.5px rgba(255,45,120,.7),
    0 8px 22px rgba(255,45,120,.28);
}

.field.invalid input{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 0 0 1.5px rgba(232,52,43,.8);
}

/* Ошибка выезжает, а не появляется рывком: высота и прозрачность вместе */
.error{
  display:block;overflow:hidden;
  max-height:0;opacity:0;
  margin:0 0 0 4px;
  font-size:12.5px;line-height:1.35;
  color:#FF8B84;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
  transform:translateY(-4px);
  transition:max-height .3s cubic-bezier(.18,.72,.24,1),
             opacity .25s ease,
             margin .3s cubic-bezier(.18,.72,.24,1),
             transform .3s cubic-bezier(.18,.72,.24,1);
}
.field.invalid .error{
  max-height:44px;opacity:1;
  margin-top:7px;
  transform:none;
}

/* Короткая встряска поля — заметно, но не раздражает */
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-5px);}
  40%{transform:translateX(4px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(2px);}
}
.field.shake input{animation:shake .38s cubic-bezier(.36,.07,.19,.97);}

/* Honeypot — вне экрана, но для бота выглядит обычным полем */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- Кнопки ---------- */
.btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:var(--tap);
  margin-top:14px;
  border:none;
  border-radius:var(--radius-el);
  font-family:var(--font-body);
  font-size:16px;font-weight:700;
  letter-spacing:.01em;
  color:var(--cream);
  text-decoration:none;
  cursor:pointer;
  isolation:isolate;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),
             box-shadow .4s ease,
             background .4s ease;
}
.btn > *{position:relative;z-index:3;}

/* Главная кнопка — красное стекло в цвет формы охраны, как в тап-линке */
.btn.primary{
  background:linear-gradient(180deg,
    rgba(233,74,64,.92) 0%,
    rgba(216,49,41,.86) 52%,
    rgba(178,32,27,.92) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -1.5px 0 rgba(120,16,12,.5),
    inset 0 -14px 24px rgba(110,14,10,.28),
    0 14px 32px rgba(0,0,0,.48),
    0 0 30px rgba(232,52,43,.4);
}
.btn.primary::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;
  background:linear-gradient(135deg,
    rgba(255,255,255,1) 0%, rgba(255,220,215,.55) 14%,
    rgba(255,150,140,.22) 40%, rgba(255,150,140,.22) 62%,
    rgba(255,215,210,.6) 88%, rgba(255,255,255,.95) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;z-index:2;
}
/* Верхняя «линза» — глянцевый купол сверху */
.btn::after{
  content:"";position:absolute;left:2%;right:2%;top:0;height:48%;
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  background:linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.09) 48%, rgba(255,255,255,0) 100%);
  pointer-events:none;z-index:1;
}

.btn:active{transform:scale(.975);}
.btn:focus-visible{outline:3px solid var(--pink);outline-offset:3px;}
.btn:disabled{opacity:.65;cursor:default;}

/* Блик, пробегающий по кнопке — как на кнопках тап-линка */
.sheen{
  position:absolute;top:-20%;bottom:-20%;left:0;width:34%;
  z-index:4;pointer-events:none;
  transform:translateX(-160%) skewX(-18deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  animation:sweep 7s cubic-bezier(.3,.5,.4,1) 2.2s infinite;
}
@keyframes sweep{
  0%{transform:translateX(-160%) skewX(-18deg);}
  16%{transform:translateX(420%) skewX(-18deg);}
  100%{transform:translateX(420%) skewX(-18deg);}
}
.btn.loading .sheen{display:none;}

/* Лейбл и спиннер лежат друг на друге и перетекают один в другой */
.btn-label{transition:opacity .22s ease, transform .28s cubic-bezier(.18,.72,.24,1);}
.btn.loading .btn-label{opacity:0;transform:translateY(-6px);}

.spinner{
  position:absolute;left:50%;top:50%;
  width:19px;height:19px;
  margin:-9.5px 0 0 -9.5px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  opacity:0;
  transition:opacity .22s ease .06s;
  /* вращение задаёт animation, поэтому transform здесь не трогаем */
  animation:spin .7s linear infinite;
  z-index:5;
}
.btn.loading .spinner{opacity:1;}
@keyframes spin{to{transform:rotate(360deg);}}

.form-error{
  max-height:0;opacity:0;overflow:hidden;
  margin-top:0;
  font-size:13px;line-height:1.4;text-align:center;
  color:#FF8B84;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
  transform:translateY(-4px);
  transition:max-height .3s cubic-bezier(.18,.72,.24,1),
             opacity .25s ease,
             margin .3s cubic-bezier(.18,.72,.24,1),
             transform .3s cubic-bezier(.18,.72,.24,1);
}
.form-error.show{max-height:60px;opacity:1;margin-top:11px;transform:none;}

/* ---------- Дверь в бота ----------
   Появляется после отправки. Раньше страница уводила человека сама, но
   во встроенном браузере Instagram переход без нажатия не проходит — и
   человек оставался с принятой заявкой и без бота. Нажатие пускают
   везде, поэтому теперь кнопка. */
.after{ margin-top:13px; animation:doorIn .4s ease both; }
@keyframes doorIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
.after .btn{ width:100%; }
.after-hint{
  margin:8px auto 0;text-align:center;
  font-size:11.5px;line-height:1.4;
  color:rgba(242,237,228,.55);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}

.foot{
  margin-top:14px;text-align:center;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,237,228,.34);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}

/* ---------- Состояние «отправлено» ----------
   Отдельного экрана подтверждения нет. Кнопка перекрашивается в зелёное,
   на ней рисуется галочка — и человек уходит в Telegram. */
.btn-sent{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:9px;
  opacity:0;transform:translateY(8px);
  transition:opacity .28s ease .1s, transform .38s cubic-bezier(.18,.72,.24,1) .1s;
  z-index:5;pointer-events:none;
}
.btn.sent .btn-sent{opacity:1;transform:none;}
.btn.sent .btn-label{opacity:0;transform:translateY(-6px);}
.btn.sent .sheen{display:none;}

/* Перекраска в зелёное — плавная, вместе с проявлением галочки */
.btn.primary.sent{
  background:linear-gradient(180deg,
    rgba(35,176,116,.95) 0%,
    rgba(23,146,95,.92) 52%,
    rgba(15,110,71,.95) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.5),
    inset 0 -1.5px 0 rgba(8,70,45,.5),
    0 14px 32px rgba(0,0,0,.48),
    0 0 34px rgba(23,146,95,.5);
}

.btn-sent svg{width:21px;height:21px;overflow:visible;}
.btn-sent path{
  fill:none;stroke:#fff;stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:36;stroke-dashoffset:36;
}
/* Линия рисуется только когда кнопка перешла в «отправлено» */
.btn.sent .btn-sent path{animation:draw .45s cubic-bezier(.65,0,.35,1) .16s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}

/* Короткий импульс кольцом — подтверждение читается мгновенно */
.btn.sent::before{animation:sentPulse .7s cubic-bezier(.18,.72,.24,1) .1s;}
@keyframes sentPulse{
  0%  {opacity:1;}
  35% {opacity:.35;}
  100%{opacity:1;}
}

/* ---------- Низкие экраны ---------- */
@media (max-height:700px){
  .hero-space{min-height:clamp(90px,14vh,160px);}
  .card{padding:22px 15px 17px;border-radius:22px;}
  .field{margin-bottom:9px;}
  .field input,.field textarea,.btn{--tap:54px;}
  .divider{margin-top:12px;}
  form{margin-top:13px;}
}

/* Совсем короткий экран. Так открывается ссылка из Telegram: сверху его
   собственная панель, снизу иногда своя, и до кнопки остаётся заметно
   меньше, чем на той же модели в обычном браузере. Форма выросла на строку
   вопроса — без этого кнопка уходит за нижний край, и человек её не видит.
   Место забираем у кадра: он тут украшение, а кнопка — смысл страницы. */
@media (max-height:640px){
  .hero-space{min-height:clamp(34px,6vh,80px);}
  .card{padding:17px 15px 13px;}
  .field{margin-bottom:8px;}
  .goal-q{font-size:12.5px;margin:1px 0 6px 4px;}
  .divider{margin-top:9px;}
  form{margin-top:11px;}
  .btn{margin-top:11px;}
  .note{margin-top:9px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .rv{opacity:1;}
  .scene{transform:none;}
  /* галочка рисуется анимацией — без неё её просто не видно */
  .btn.sent .btn-sent path{stroke-dashoffset:0;}
}

/* ---------- Вопрос о задаче ----------
   Есть не на всех страницах. Вопрос виден целиком, а не подсказкой внутри
   поля: подсказка исчезает, как только человек начинает печатать, и он
   забывает, о чём его спросили. Стекло то же, что у остальных полей. */
.goal-q{
  display:block;
  margin:3px 0 8px 4px;
  font-family:var(--font-body);
  font-size:13px;line-height:1.4;
  font-weight:400;
  color:rgba(242,237,228,.74);
  text-shadow:0 1px 10px rgba(0,0,0,.55);
  text-wrap:pretty;
}

/* На старте — ровно такое же поле, как имя и телефон: три одинаковые
   строки читаются спокойнее, чем две строки и яма под ними. Растёт само,
   пока человек пишет, и дальше 190px уходит в прокрутку. */
.field textarea{
  width:100%;
  height:var(--tap);
  min-height:var(--tap);
  max-height:190px;
  overflow-y:auto;
  padding:17px 18px;
  border:none;
  border-radius:var(--radius-el);
  font-family:var(--font-body);
  font-size:16px;              /* меньше 16px — iOS зумит страницу при фокусе */
  font-weight:500;
  line-height:1.45;
  color:var(--cream);
  background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
          backdrop-filter:blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(255,255,255,.08),
    inset 0 -10px 20px rgba(0,0,0,.14),
    0 6px 16px rgba(0,0,0,.28);
  outline:none;
  resize:none;                 /* тянуть угол на телефоне всё равно нечем */
  transition:box-shadow .3s cubic-bezier(.18,.72,.24,1),
             background .3s ease,
             transform .3s cubic-bezier(.18,.72,.24,1);
}

.field textarea::placeholder{color:rgba(242,237,228,.42);font-weight:400;}

.field textarea:focus{
  transform:translateY(-2px);
  background:linear-gradient(180deg, rgba(255,255,255,.19) 0%, rgba(255,255,255,.07) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 0 0 1.5px rgba(255,45,120,.7),
    0 8px 22px rgba(255,45,120,.28);
}

.field.invalid textarea{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 0 0 1.5px rgba(232,52,43,.8);
}

.field.shake textarea{animation:shake .38s cubic-bezier(.36,.07,.19,.97);}

/* Появляется третьим, между телефоном и кнопкой */
.field:nth-child(3){animation-delay:.61s;}