/* Загрузка → вылет телефона → Paycryp → экран оплаты → отдельные монеты и пуши. */
html { scrollbar-gutter: stable; }
html[data-page-intro] { overflow: hidden; }
.page-preloader { display: none; }
[data-page-intro] .page-preloader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 12;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.page-preloader-mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 23px;
  background: #161b11;
  box-shadow: inset 0 0 0 1px #d7f94b1c, 0 0 70px #d7f94b18;
  animation: preload-mark .85s ease-in-out infinite alternate;
}
.page-preloader-mark svg { width: 58px; height: 58px; fill: var(--lime); }
.page-preloader-wordmark { margin-top: 16px; font-size: 25px; font-weight: 750; letter-spacing: -.9px; color: #f4f6ef; }
.page-preloader-wordmark span { color: var(--lime); }
.page-preloader-progress { display: flex; gap: 5px; margin-top: 23px; }
.page-preloader-progress span { width: 13px; height: 6px; border-radius: 3px; background: var(--lime); animation: preload-block .75s ease-in-out infinite alternate; }
.page-preloader-progress span:nth-child(2) { animation-delay: .15s; }
.page-preloader-progress span:nth-child(3) { animation-delay: .3s; }
[data-page-intro='running'] .page-preloader { animation: intro-loader .16s ease both; }
@keyframes preload-mark { from { transform: scale(.94); } to { transform: scale(1); } }
@keyframes preload-block { from { opacity: .2; } to { opacity: 1; } }

.product-page .hero-cinema { isolation: isolate; }
.hero-cinema .hero-copy { position: relative; z-index: 5; }
.hero-cinema .hero-visual { overflow: visible; z-index: 3; }
.hero-cinema .phone-flight { position: relative; flex-shrink: 0; will-change: transform; }
.hero-cinema .phone-stage { position: relative; width: 248px; isolation: isolate; overflow: visible; container-type: inline-size; }
.hero-cinema .phone-stage .hero-phone { width: 100%; }
.hero-cinema .phone-rig { position: relative; width: 100%; isolation: isolate; }
.hero-cinema .hero-phone { transform: none; }
.hero-cinema .hero-coins { position: absolute; inset: 0; width: 100%; height: 100%; filter: none; pointer-events: none; }
.hero-cinema .hero-coin-slot { position: absolute; will-change: transform, opacity; }
.hero-cinema .hero-coin { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 12px 14px #0006); will-change: transform; }
.hero-cinema .hero-coin--btc { width: 94px; left: max(0px, calc(50% - 222px)); top: 24%; --coin-lift: -14px; --coin-turn: -6deg; --coin-drift: 5px; --coin-cycle: 6.4s; }
.hero-cinema .hero-coin--usdt { width: 80px; right: max(0px, calc(50% - 225px)); top: 49%; --coin-lift: -10px; --coin-turn: -5deg; --coin-drift: -7px; --coin-cycle: 5.6s; }
.hero-cinema .hero-coin--ton { width: 74px; left: max(0px, calc(50% - 210px)); top: 75%; --coin-lift: -17px; --coin-turn: 7deg; --coin-drift: 6px; --coin-cycle: 7.2s; }
[data-page-intro] .hero-coin-slot { opacity: 0; }
[data-cinema-phase='ambient'] .hero-coin { animation: coin-breathe var(--coin-cycle) ease-in-out infinite; }
@keyframes coin-breathe {
  0%, 100% { transform: translate(0,0) rotate(0deg) scale(1); }
  50% { transform: translate(var(--coin-drift),var(--coin-lift)) rotate(var(--coin-turn)) scale(1.025); }
}

.hero-cinema .phone-loader {
  display: flex;
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 48%, #caff240a, transparent 58%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.phone-loader-logo { width: 66px; height: 66px; fill: var(--lime); }
.phone-loader-wordmark { margin-top: 17px; color: #f1f5ed; font-size: 24px; letter-spacing: -.9px; font-weight: 750; }
.phone-loader-wordmark span { color: var(--lime); }
.phone-loader-track { margin-top: 28px; width: 64px; height: 5px; border-radius: 4px; overflow: hidden; background: #caff241c; }
.phone-loader-track span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--lime); transform-origin: left; }

/* Одинаковая последовательность на компьютере и телефоне, без изменения геометрии контента. */
[data-page-intro='preloading'] .hero-copy,
[data-page-intro='preloading'] .hero-visual,
[data-page-intro='preloading'] main > section:not(.hero),
[data-page-intro='preloading'] .footer,
[data-page-intro='armed'] .hero-copy,
[data-page-intro='armed'] .hero-visual,
[data-page-intro='armed'] main > section:not(.hero),
[data-page-intro='armed'] .footer { opacity: 0; }
/* Переходы устройства и дисплея управляются одной шкалой Web Animations. */
[data-page-intro='running'] .phone-loader { visibility: visible; }
[data-page-intro='running'] .cinema-payments { visibility: hidden; }
@keyframes intro-loader { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

/* Баннеры живут в дисплее: общий наклон устройства, обрезка по стеклу. */
.hero-cinema .cinema-payments {
  position: absolute;
  inset: 8.2% 2.4% auto;
  z-index: 4;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.cinema-payment {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 10.5cqw minmax(0, 1fr);
  align-items: center;
  gap: 3cqw;
  padding: 3.4cqw;
  border-radius: 7cqw;
  color: #171719;
  text-align: left;
  isolation: isolate;
  box-shadow: inset 0 0 0 .5px #ffffffb3, 0 2cqw 6cqw #00000024;
  opacity: 0;
  transform: translate3d(0, -150%, 0);
  will-change: transform, opacity;
}
/* Стекло отделено от содержимого: 3D-композиция не обрезает текст вместе с blur. */
.cinema-payment::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgb(245 245 247 / 84%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}
.hero-cinema .cinema-push-icon { width: 100%; height: auto; border-radius: 2.5cqw; }
.cinema-push-content { min-width: 0; }
.cinema-push-head { display: flex; align-items: baseline; gap: 2cqw; margin-bottom: .5cqw; }
.cinema-push-head b { font-size: 4.2cqw; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.cinema-push-head span { margin-left: auto; color: #737377; font-size: 3.3cqw; line-height: 1.25; }
.cinema-payment strong { display: block; font-size: 3.9cqw; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.cinema-payment p { margin: .25cqw 0 0; font-size: 3.9cqw; font-weight: 400; line-height: 1.3; letter-spacing: -.01em; }
.cinema-payment p span { color: #606064; }
[data-cinema-phase='ambient'] .cinema-payment { animation: phone-push 12s cubic-bezier(.2,.85,.2,1) infinite both; }
[data-cinema-phase='ambient'] .cinema-payment:nth-child(1) { animation-delay: .4s; }
[data-cinema-phase='ambient'] .cinema-payment:nth-child(2) { animation-delay: 4.4s; }
[data-cinema-phase='ambient'] .cinema-payment:nth-child(3) { animation-delay: 8.4s; }
[data-cinema-suspended='true'] *, [data-cinema-suspended='true'] *::after { animation-play-state: paused !important; }
@keyframes phone-push {
  0% { opacity: 0; transform: translate3d(0, -150%, 0); }
  5% { opacity: 1; transform: translate3d(0, 1cqw, 0); }
  7%, 24% { opacity: 1; transform: translate3d(0, 0, 0); }
  29%, 100% { opacity: 0; transform: translate3d(0, -150%, 0); }
}

@media (min-width: 981px) {
  /* В перспективе готовая матовая заливка избегает артефактов backdrop-filter. */
  .cinema-payment::before {
    background: linear-gradient(135deg, #f4f4f7, #e8e8ed);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .product-page .hero-cinema { min-height: max(650px, 100svh); padding-block: 80px; }
  .product-page .hero-cinema .hero-visual { min-height: 540px; height: 540px; }
  .hero-cinema .phone-stage { width: 246px; transform: translateY(28px); }
  .hero-cinema .phone-rig {
    transform: perspective(1000px) rotateY(-9deg) rotateZ(5deg);
  }
  .hero-cinema .phone-display::after {
    content: '';
    position: absolute;
    z-index: 6;
    inset: -30% -90%;
    background: linear-gradient(110deg, transparent 44%, #ffffff13 49%, transparent 54%);
    transform: translateX(-75%);
    pointer-events: none;
  }
  .hero-cinema .hero-img-glow { width: 100%; height: 110%; opacity: .5; }
  /* Корпус и пуши остаются в одной системе координат; монеты двигаются отдельно. */
  [data-cinema-phase='ambient'] .phone-stage { animation: phone-float 8s ease-in-out infinite; }
  [data-cinema-phase='ambient'] .phone-display::after { animation: phone-glint 10s ease-in-out infinite; }
  @keyframes phone-float { 0%, 100% { transform: translateY(28px); } 50% { transform: translateY(20px); } }
  @keyframes phone-glint { 0%, 45% { transform: translateX(-75%); } 70%, 100% { transform: translateX(75%); } }
}
@media (max-width: 980px) {
  .hero-cinema .phone-stage { width: clamp(220px, 60vw, 320px); }
  .product-page .hero-cinema .hero-visual {
    max-width: 600px;
    height: auto;
    min-height: 0;
    margin-top: 24px;
    padding-block: 16px;
  }
  .hero-cinema .hero-coin--btc { width: clamp(76px, 16vw, 126px); left: 3%; top: 18%; }
  .hero-cinema .hero-coin--usdt { width: clamp(70px, 15vw, 116px); right: 2%; top: 45%; }
  .hero-cinema .hero-coin--ton { width: clamp(68px, 14vw, 108px); left: 4%; top: 73%; }
}
@media (max-width: 640px) {
  .hero-cinema .hero-coin--btc { left: -3%; }
  .hero-cinema .hero-coin--usdt { right: -3%; }
  .hero-cinema .hero-coin--ton { left: -2%; }
}
@media (prefers-reduced-motion: reduce) {
  .page-preloader { display: none !important; }
  .product-page .hero-cinema .hero-visual { margin-top: 0; }
  .hero-cinema .cinema-payments, .hero-cinema .phone-loader { display: none !important; }
  .hero-cinema *, .hero-cinema *::after { animation: none !important; transition: none !important; }
}