/* =============================================================================
 *  GRAMS SMS-лендинг (варианты A и B). Макет: Figma «Retention-Megaaffs»,
 *  секция GramsSMS. Карточка формы и футер — в signup.css (копия grams).
 *
 *  Сцена (фон, машина, персонаж, телефон) рисуется в координатах макета и
 *  масштабируется одной переменной --k, которую считает sms.js:
 *    мобилка (< 992px) — макет 360px, точка отсчёта .stage = центр экрана
 *                        по X и верх блока кнопок/SMS (.ui) по Y;
 *    десктоп (>= 992px) — макет 1920×720, .stage прижат к низу экрана.
 * ========================================================================== */

:root {
  --font-display: "Poppins", sans-serif;
  --font-lcd: "Azeret Mono", ui-monospace, monospace;
  --k: 1;
  --anchor: 480px;
  --lcd-ink: #0e1a13;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-display);
  background: #1a0b2e;
  color: #fff;
  overflow-x: hidden;
}

button {
  font-family: inherit;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

/* ------------------------------- страница -------------------------------- */

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* clip, а не только hidden: hidden-контейнер браузер может прокрутить
     (фокус, scrollIntoView) — и слой телефона уезжал вверх от кнопок */
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

/* Подложка на случай, если сцена не покрыла экран (очень высокий/широкий) */
.page__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("img/bg-mob.webp") center 30% / cover no-repeat;
}

.page__bg,
.art {
  transition: filter 0.6s ease;
}

/* B: после «Get SMS bonus» сцена уходит в размытие, поверх выезжает телефон */
.b-phone .page__bg,
.b-phone .art {
  filter: blur(7px) brightness(0.55) saturate(1.1);
}

.stage {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.stage > * {
  position: absolute;
}

.art {
  position: absolute;
  inset: 0;
}

.art > * {
  position: absolute;
  max-width: none;
}

.art__bg {
  object-fit: cover;
}

.art__car {
  object-fit: cover;
}

/* Тень под машиной (Vector 3222 в макете) */
.art__shadow {
  border-radius: 50%;
  background: radial-gradient(closest-side, #000c, #0000);
}

/* -------------------------------- логотип -------------------------------- */

.logo {
  position: relative;
  z-index: 3;
  display: block;
  width: 136px;
  height: 40px;
  margin-top: clamp(16px, 6svh, 54px);
  filter: drop-shadow(0 4px 10px #0008);
}

.logo img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ------------------------------ блок кнопок ------------------------------ */

.ui {
  position: relative;
  z-index: 3;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  /* .ui шире и выше кнопок и лежит над телефоном — без этого он глотал
     нажатия на клавиши. Кликабельны только сами кнопки и SMS. */
  pointer-events: none;
}

.buttons,
.sms-slot {
  pointer-events: auto;
}

.buttons {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 286px;
  max-width: 100%;
}

.btn {
  width: 100%;
  height: 56px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 24px;
  transition: transform 0.12s, filter 0.12s;
}

.btn:hover {
  filter: brightness(1.08);
}

.btn:active {
  transform: translateY(2px);
}

.btn--main {
  background: #ffdc23;
  box-shadow: 0 -2px 0 #fff09f inset, 0 6px 18px #0006;
  color: #2a2a2a;
  font-size: 24px;
  font-weight: 600;
}

.btn--ghost {
  background: #4a0115;
  box-shadow: 0 -2px 0 #a3275d inset, 0 6px 18px #0006;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.btn--pulse {
  animation: btn-pulse 1.6s ease-in-out infinite;
}

@keyframes btn-pulse {
  0%,
  100% {
    box-shadow: 0 -2px 0 #fff09f inset, 0 6px 18px #0006, 0 0 0 0 #ffdc2399;
  }
  50% {
    box-shadow: 0 -2px 0 #fff09f inset, 0 6px 18px #0006, 0 0 0 10px #ffdc2300;
  }
}

.btn:disabled {
  cursor: default;
  filter: saturate(0.6) brightness(0.85);
}

/* Лёгкий «пинок» главной кнопки в варианте A, пока её не нажали */
.btn--nudge {
  animation: btn-nudge 3.2s ease-in-out 1.2s infinite;
}

@keyframes btn-nudge {
  0%,
  86%,
  100% {
    transform: none;
  }
  89% {
    transform: rotate(-2deg) scale(1.03);
  }
  92% {
    transform: rotate(2deg) scale(1.03);
  }
  95% {
    transform: rotate(-1deg);
  }
}

/* ------------------------------ SMS-плашка ------------------------------- */

/* Все размеры в em: на мобилке шрифт 15.7px (плашка 318×95),
   на десктопе 22.59px (449×134) — как в макете. */
.sms-box {
  position: relative;
  width: 20.25em;
  max-width: calc(100vw - 32px);
  min-height: 6.05em;
  padding: 1.55em 1.1em 0.75em;
  margin-bottom: 30px;
  font: 400 15.7px/1.4 var(--font-lcd);
  color: var(--lcd-ink);
  text-align: center;
  border-radius: 0.64em;
  background: #90b18480;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 5px 10px #00000040, 0 0 24px #b9f5a233;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Градиентная рамка #66825C → #CEEDC3 поверх полупрозрачного фона */
.sms-box::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, #66825c, #ceedc3);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.sms-box p {
  margin: 0;
}

.sms-box__signal,
.sms-box__battery {
  position: absolute;
  top: 0.64em;
  height: 0.8em;
}

.sms-box__signal {
  left: 0.95em;
  width: 1.34em;
}

.sms-box__battery {
  right: 0.95em;
  width: 1.4em;
}

.sms-box--in {
  animation: sms-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes sms-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.85);
  }
}

/* B: пришедшее SMS. Отдельный блок над кнопками. */
.sms-box--msg {
  flex-direction: column;
  gap: 0.25em;
}

.sms-box__from {
  font-weight: 600;
  opacity: 0.75;
  font-size: 0.85em;
}

.sms-box__text strong {
  font-weight: 700;
  white-space: nowrap;
}

.sms-slot {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.sms-slot[hidden] {
  display: none;
}

.sms-slot .sms-box {
  margin: 0;
}

.sms-box--intro {
  transition: opacity 0.35s, visibility 0.35s;
}

.b-phone .sms-box--intro {
  opacity: 0;
  visibility: hidden;
}

/* --------------------------------- футер --------------------------------- */

.footer {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-top: clamp(20px, 6svh, 111px);
}

/* ------------------------------ телефон (B) ------------------------------ */

/* Слой телефона поверх сцены. Место и ширину .phone считает sms.js
   (layoutPhone): ряд 7-8-9 всегда выше кнопок, чтобы его можно было нажать. */
.phone-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.phone-layer .phone {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40%);
  transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1),
    visibility 0.6s;
}

.b-phone .phone-layer .phone {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Координаты внутри — в единицах компонента Phone (561×1546), в процентах.
   Раскладку клавиш и свечения строит sms.js из тех же чисел, что в макете. */
.phone {
  pointer-events: auto;
  container-type: inline-size;
  aspect-ratio: 561 / 1546;
}

.phone__body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.phone__glow {
  position: absolute;
  border-radius: 50%;
  background: #4d9f2f;
  filter: blur(2.5cqw);
  pointer-events: none;
  animation: glow 1.8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes glow {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.phone__key {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.1s, filter 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.phone__key img {
  display: block;
  width: 100%;
  height: 100%;
}

.phone__key:hover {
  filter: brightness(1.12);
}

.phone__key--pressed {
  transform: translateY(0.6cqw) scale(0.94);
  filter: brightness(0.8) drop-shadow(0 0 2cqw #7dff4d);
}

/* Клавиши погасли, когда номер уже выбран */
.phone--done .phone__glow {
  animation: none;
  opacity: 0;
  transition: opacity 0.4s;
}

.phone--done .phone__glow--hit {
  opacity: 1;
  background: #7dff4d;
}

.phone--done .phone__key {
  cursor: default;
}

.phone--done .phone__key:hover {
  filter: none;
}

.phone--buzz {
  animation: buzz 0.09s linear 8;
}

@keyframes buzz {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  25% {
    translate: -1.2cqw 0;
    rotate: -1.2deg;
  }
  75% {
    translate: 1.2cqw 0;
    rotate: 1.2deg;
  }
}

/* Экран. Область между индикаторами сети и батареи, нарисованными на корпусе. */
.phone__screen {
  position: absolute;
  left: 25%;
  top: 40.2%;
  width: 49.9%;
  height: 14.8%;
  color: #1d2a18;
  font: 400 5.7cqw/1.25 var(--font-lcd);
  text-align: center;
  overflow: hidden;
}

.lcd {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2.5cqw 0 1cqw;
}

.phone[data-state="idle"] .lcd--idle,
.phone[data-state="sending"] .lcd--sending,
.phone[data-state="incoming"] .lcd--incoming,
.phone[data-state="message"] .lcd--message {
  display: flex;
}

.lcd p {
  margin: 0;
}

.lcd__frame {
  width: 17cqw;
  height: 17cqw;
  flex: none;
  border: 0.7cqw dashed #32402c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11cqw;
  font-weight: 600;
  line-height: 1;
}

.lcd__cursor {
  width: 1.2cqw;
  height: 9cqw;
  background: #32402c;
  animation: blink 1s steps(1) infinite;
}

.lcd__dots::after {
  content: "";
  animation: dots 0.9s steps(4) infinite;
}

@keyframes dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}

.lcd__envelope {
  width: 12cqw;
  height: 9cqw;
}

.lcd__blink {
  animation: blink 0.8s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.lcd--message {
  justify-content: center;
  gap: 1cqw;
}

.lcd__from {
  font-size: 4.6cqw;
  font-weight: 600;
  border-bottom: 0.5cqw solid #32402c;
  padding: 0 1cqw 0.5cqw;
}

.lcd__amount {
  font-size: 10cqw;
  font-weight: 700;
  line-height: 1.05;
}

.lcd__label {
  font-size: 5cqw;
}

/* ============================== мобилка ================================= */

@media (max-width: 991.98px) {
  .stage {
    left: 50%;
    top: var(--anchor);
    width: 0;
    height: 0;
    transform: scale(var(--k));
    transform-origin: 0 0;
  }

  .stage .art {
    inset: auto;
  }

  /* Все координаты — от точки отсчёта (центр по X, верх .ui по Y), px макета 360 */
  .art__bg {
    left: -1040px;
    top: -680px;
    width: 2076px;
    height: 1159px;
  }
  .art__car {
    left: -477px;
    top: -198px;
    width: 1130px;
    height: 529px;
  }
  .art__shadow {
    left: -480px;
    top: 252px;
    width: 1107px;
    height: 74px;
  }
  .art__man {
    left: -194px;
    top: -393px;
    width: 388px;
    height: 820px;
  }

  .art__nokia {
    display: none;
  }

  /* SMS в варианте B на мобилке всплывает над кнопками, поверх клавиатуры */
  .sms-slot {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    width: max-content;
    transform: translateX(-50%);
  }
}

@media (max-width: 991.98px) {
  /* Футер grams на узком экране встаёт в три ряда и съедает сцену —
     ужимаем до двух */
  .footer {
    gap: 12px 20px !important;
    padding: 14px 10px;
  }
}

@media (max-width: 991.98px) and (max-height: 700px) {
  .footer {
    margin-top: 18px;
    padding: 10px 8px;
  }
  .sms-box {
    margin-bottom: 18px;
  }
}

@media (max-width: 380px) {
  .sms-box {
    font-size: 14.5px;
  }
}

/* ============================== десктоп ================================= */

@media (min-width: 992px) {
  .page {
    height: 100vh;
    height: 100svh;
  }

  .page__bg {
    background-image: url("img/bg.webp");
  }

  /* Макет 1920×720, прижат к низу экрана и отмасштабирован на --k */
  .stage {
    left: 50%;
    bottom: 0;
    width: 1920px;
    height: 720px;
    margin-left: -960px;
    transform: scale(var(--k));
    transform-origin: 50% 100%;
  }

  .art__bg {
    left: -79px;
    top: -203px;
    width: 2076px;
    height: 1159px;
  }
  .art__car {
    left: 394px;
    top: 276px;
    width: 1130px;
    height: 529px;
  }
  .art__shadow {
    left: 391px;
    top: 726px;
    width: 1107px;
    height: 74px;
  }
  .art__nokia {
    left: 453px;
    top: 181px;
    width: 377px;
    height: 357px;
    animation: nokia-float 4s ease-in-out infinite;
  }
  .art__man {
    left: 1136px;
    top: 36px;
    width: 388px;
    height: 820px;
  }

  .logo {
    position: absolute;
    left: calc(75px * var(--k));
    top: calc(60px * var(--k));
    width: calc(222px * var(--k));
    height: calc(65.3px * var(--k));
    margin: 0;
  }

  /* .ui живёт в координатах макета: верх SMS-плашки на y=219 */
  .ui {
    position: absolute;
    left: 50%;
    top: calc(100% - (720px - var(--ui-top)) * var(--k));
    width: 449px;
    margin: 0 0 0 -224.5px;
    padding: 0;
    transform: scale(var(--k));
    transform-origin: 50% 0;
  }

  .ui {
    --ui-top: 219px;
  }

  .sms-box {
    font-size: 22.59px;
    max-width: none;
    margin-bottom: 61px;
  }

  /* SMS в B на десктопе — справа от телефона */
  .sms-slot {
    position: absolute;
    left: 100%;
    bottom: 100%;
    width: max-content;
    margin: 0 0 20px 24px;
  }

  .sms-slot .sms-box {
    font-size: 17px;
  }

  .footer {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 12px 20px;
    gap: 16px 48px;
  }
}

@keyframes nokia-float {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -10px;
    rotate: -2deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .art__nokia,
  .phone__glow,
  .btn--nudge,
  .btn--pulse {
    animation: none;
  }
}