/* =========================================================
   Hero: telefón + platobná obrazovka v CSS (postupné vykreslenie)
   Všetky animácie = len transform / opacity (GPU, Firefox-safe).
   Rozmery displeja vychádzajú z 301×653 (second-page.svg);
   1cqw = 1 % šírky displeja, 1cqh = 1 % výšky.
   ========================================================= */

.mobile-anim-wrap {
  --screen-top: 1%;
  --screen-left-mobile: 1%;
  --screen-width-mobile: 98%;
  --screen-height-mobile: 97%;

  --screen-left: 2.9%;
  --screen-width: 94%;
  --screen-height: 98%;

  --screen-radius-mobile: 22px;
  --screen-radius-desktop: 32px;

  --phone-max-w-mobile: 10rem;
  --phone-max-w: 14rem;

  --logo-top: 9%;
  --logo-width: 40%;

  --screen-bg: #16161e;
  --field-bg: #242424;
  --brand: #3d42df;
}
.mobile-anim-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 3rem 0;
}

/* ---------- Telefón ---------- */
.mobile-anim-phone {
  position: relative;
  width: min(100%, var(--phone-max-w-mobile));
  left: 0;
  overflow: hidden;
  contain: paint;
}
.phone-frame {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  z-index: 55;
  position: relative;
}
.screen-viewport {
  position: absolute;
  top: var(--screen-top);
  left: var(--screen-left-mobile);
  width: var(--screen-width-mobile);
  height: var(--screen-height-mobile);
  overflow: hidden;
  z-index: 1;
  contain: paint;
  border-radius: var(--screen-radius-mobile);
  container-type: size;
  background: var(--screen-bg);
  font-family: var(--font-family-poppins, Poppins, system-ui, sans-serif);
  color: #fff;
}
.pay-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}
.mobile-anim-logo {
  position: absolute;
  top: var(--logo-top);
  left: 50%;
  width: var(--logo-width);
  height: auto;
  transform: translate(-50%, 6px);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

/* ---------- Platobná obrazovka ---------- */
/* každý krok začína neviditeľný; JS ho odhalí (transform+opacity) */
.js-step {
  opacity: 0;
  transform: scale(0.9);
  transform-origin: 50% 50%;
}

.pay-card {
  position: absolute;
  top: 19.6cqh; /* 128/653 */
  left: 7.3cqw; /* 22/301  */
  width: 85.4cqw; /* 257/301 */
  height: auto;
  border-radius: 3.3cqw;
  pointer-events: none;
}

.pay-field {
  display: flex;
  padding: 1rem; /* z Figmy – v cq jednotkách nižšie */
  padding: 3.3cqw;
  align-items: center;
  gap: 0.5rem;
  gap: 1.66cqw;
  align-self: stretch;
  border-radius: 2.66cqw; /* 8/301 */
  background: var(--field-bg);
  height: 7.5cqh; /* 49/653 */
  box-sizing: border-box;
  font-size: 4.3cqw; /* ≈13px */
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
}
.pay-field--number {
  position: absolute;
  top: 46.55cqh; /* 304/653 */
  left: 5.3cqw; /* 16/301  */
  width: 89.4cqw; /* 269/301 */
}
.pay-row {
  position: absolute;
  top: 55.3cqh; /* 361/653 */
  left: 5.3cqw;
  width: 89.4cqw;
  display: flex;
  gap: 2.66cqw; /* 8/301 */
}
.pay-row .pay-field {
  flex: 1 0 0;
}

.pay-field__value {
  position: relative;
  color: #fff;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.pay-field__value:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0;
}
/* blikajúci kurzor počas vypisovania */
.pay-field.is-typing .pay-field__value::after {
  content: "";
  display: inline-block;
  width: 0.4cqw;
  height: 1em;
  margin-left: 0.6cqw;
  vertical-align: -0.15em;
  background: #fff;
  animation: caret 0.9s steps(1) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}

.pay-btn {
  position: absolute;
  left: 5.3cqw;
  width: 89.4cqw;
  height: 7cqh; /* 46/653 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5cqw;
  border: 0;
  border-radius: 2.66cqw; /* 0.5rem @ 301 */
  font: inherit;
  font-size: 4.6cqw; /* ≈14px */
  font-weight: 600;
  line-height: 1;
  color: #fff;
  cursor: default;
  pointer-events: none;
  box-sizing: border-box;
  padding: 0 3.3cqw;
}
.pay-btn--primary {
  top: 66.9cqh; /* 437/653 */
  background: var(--brand);
  box-shadow: 0 8px 24px 0 rgba(61, 66, 223, 0.32);
}
.pay-btn__check {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.6);
}
.pay-btn__check svg {
  width: 5.5cqw;
  height: 5.5cqw;
}
.pay-btn--primary.is-loading .pay-btn__label {
  opacity: 0.55;
}
.pay-btn--primary.is-paid {
  background: #0c0c0c;
  /* zelená žiara: tenký prstenec + mäkký tieň pod + rozptýlený glow okolo */
  box-shadow:
    0 0 0 1px rgba(31, 191, 117, 0.7),
    0 1.5cqw 4cqw rgba(31, 191, 117, 0.45),
    0 0 8cqw rgba(31, 191, 117, 0.3);
  transition:
    background 0.35s ease,
    box-shadow 0.45s ease;
}
.pay-btn--primary.is-paid .pay-btn__label {
  opacity: 0;
}
.pay-btn--primary.is-paid .pay-btn__check {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pay-btn--apple {
  top: 77.6cqh; /* 507/653 */
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-weight: 500;
}
.pay-btn--apple img {
  width: 16.3cqw;
  height: auto;
} /* 49/301 */

.pay-btn--google {
  top: 85.9cqh; /* 561/653 */
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-weight: 500;
}
.pay-btn--google img {
  width: 18.9cqw;
  height: auto;
} /* 57/301 */

/* ---------- Reduced motion → hotová obrazovka, bez pohybu ---------- */
@media (prefers-reduced-motion: reduce) {
  .mobile-anim-logo {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .js-step {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Breakpoints ---------- */
@media (min-width: 767px) {
  .mobile-anim-phone {
    width: min(100%, var(--phone-max-w));
  }
  .mobile-anim-wrap {
    padding: 0;
  }
  .screen-viewport {
    left: var(--screen-left);
    width: var(--screen-width);
    height: var(--screen-height);
    border-radius: var(--screen-radius-desktop);
  }
}
@media (min-width: 992px) {
  .mobile-anim-phone {
    left: -2rem;
  }
}