/* Hero effects on the existing one-phone artwork. Loaded after all older homepage styles. */
html body:has(.ar-hero) .ar-actions .ar-cta-icon {
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;
  width:20px;height:20px;margin-left:2px;line-height:0;
}
html body:has(.ar-hero) .ar-actions .ar-cta-icon svg {
  display:block;width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
html body:has(.ar-hero) .ar-actions .ar-secondary .ar-cta-icon svg {
  width:21px;height:21px;
}

/* The PNG/AVIF has a transparent background, so drop-shadow hugs the actual
   tilted handset silhouette, rather than drawing a false rectangular border. */
html body:has(.ar-hero) .ar-visual .ar-device .ar-phone-art {
  animation:ar-handset-edge-glow 4.8s ease-in-out infinite;
  transform:translateZ(0);
}
@keyframes ar-handset-edge-glow {
  0%,100% {
    filter:drop-shadow(14px 23px 19px rgba(0,0,0,.37))
      drop-shadow(0 0 6px rgba(76,153,255,.73))
      drop-shadow(0 0 23px rgba(54,99,255,.35));
  }
  50% {
    filter:drop-shadow(14px 23px 19px rgba(0,0,0,.37))
      drop-shadow(0 0 11px rgba(100,184,255,.92))
      drop-shadow(0 0 39px rgba(76,81,255,.49));
  }
}

/* Keep each icon's original perspective/tilt (set by the reference sheet).
   Animating the independent rotate/translate properties works even with its
   legacy transform:... !important; the label and its anchor stay stationary. */
html body:has(.ar-hero) .ar-visual .ar-float-icon {
  animation:ar-icon-rock-a 6.1s ease-in-out infinite;
  transform-origin:50% 55%;
}
html body:has(.ar-hero) .ar-visual [data-app-icon="sber"] .ar-float-icon {animation-name:ar-icon-rock-a;animation-delay:-1.4s;}
html body:has(.ar-hero) .ar-visual [data-app-icon="max"] .ar-float-icon {animation-name:ar-icon-rock-b;animation-duration:5.7s;animation-delay:-3.2s;}
html body:has(.ar-hero) .ar-visual [data-app-icon="vk"] .ar-float-icon {animation-name:ar-icon-rock-c;animation-duration:6.6s;animation-delay:-.7s;}
html body:has(.ar-hero) .ar-visual [data-app-icon="tbank"] .ar-float-icon {animation-name:ar-icon-rock-b;animation-duration:6.3s;animation-delay:-4.1s;}
html body:has(.ar-hero) .ar-visual [data-app-icon="psb"] .ar-float-icon {animation-name:ar-icon-rock-c;animation-duration:5.9s;animation-delay:-2.4s;}
html body:has(.ar-hero) .ar-visual [data-app-icon="alfa"] .ar-float-icon {animation-name:ar-icon-rock-a;animation-duration:7.1s;animation-delay:-5.3s;}
@keyframes ar-icon-rock-a {
  0%,100% {rotate:-3deg;translate:0 0;}
  50% {rotate:4deg;translate:0 -5px;}
}
@keyframes ar-icon-rock-b {
  0%,100% {rotate:4deg;translate:0 -2px;}
  50% {rotate:-4deg;translate:0 4px;}
}
@keyframes ar-icon-rock-c {
  0%,100% {rotate:-4deg;translate:0 2px;}
  50% {rotate:3deg;translate:0 -4px;}
}

/* Position the inscription inside the painted SCREEN, not inside the full
   transparent image box. Its four deliberate lines avoid the overflowing
   single-line "снова с тобой ♡" on compact iPhones. */
html body:has(.ar-hero) .ar-visual .ar-device .ar-device-content,
html body:has(.ar-hero) .ar-visual .ar-device.has-art .ar-device-content {
  box-sizing:border-box !important;
  inset:33.5% 28% auto 28% !important;
  width:44% !important;
  max-width:44% !important;
  margin:0 !important;
  padding:0 !important;
  font-size:clamp(14px,1.16vw,18px) !important;
  line-height:1.2 !important;
  letter-spacing:-.025em;
  transform:rotate(7deg) !important;
  white-space:normal !important;
  overflow:visible;
  pointer-events:none;
}
html body:has(.ar-hero) .ar-device-content .ar-copy-line {
  display:block;white-space:nowrap;max-width:100%;
}
html body:has(.ar-hero) .ar-device-content .ar-copy-heart {
  display:block;font-size:1.05em;line-height:1.05;margin-top:2px;
}
@media(max-width:1109px) {
  html body:has(.ar-hero) .ar-visual .ar-device .ar-device-content,
  html body:has(.ar-hero) .ar-visual .ar-device.has-art .ar-device-content {
    font-size:clamp(10px,1.3vw,12px) !important;
  }
}
@media(max-width:679px) {
  html body:has(.ar-hero) .ar-visual .ar-device .ar-device-content,
  html body:has(.ar-hero) .ar-visual .ar-device.has-art .ar-device-content {
    inset:34.5% 28% auto 28% !important;
    font-size:clamp(8px,2.2vw,9px) !important;
    line-height:1.17 !important;
    letter-spacing:-.045em;
  }
  html body:has(.ar-hero) .ar-visual .ar-float-icon {animation-duration:7.2s;}
}
@media(prefers-reduced-motion:reduce) {
  html body:has(.ar-hero) .ar-visual .ar-device .ar-phone-art,
  html body:has(.ar-hero) .ar-visual .ar-float-icon {animation:none !important;}
}