/* Первый экран главной /apple/ = вариант G «Маскот крупно» (с 2026-11-11; превью было /apple/hero2/g.html).
   Подключается только на главной, после style.css. База .hx — из hero2/hero2.css, остальное — hero2/g.css. */
.hx{position:relative}
.hx .hv-chips{position:absolute;inset:0;z-index:5;pointer-events:none}
.hx .hv-chip{position:absolute}
.hx .hv-mascot{position:absolute;z-index:6}
.hx .hello{z-index:7}
.js .hx{animation:sceneIn 1.4s var(--spring) .25s both}
@media (max-width:734px){
  .hero .scene.hx{width:100%}
  .hx .hv-chips,.hx .hello{display:none}
}
.hx-g__stage{position:relative;aspect-ratio:1/1}
.hx-g__orb{position:absolute;left:7%;top:4%;width:86%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#FFF1F5 0%,#FFD3E0 26%,#FDA9C4 52%,#FC8DB2 70%,#FEA58D 100%);
  box-shadow:0 60px 120px -50px rgba(252,20,93,.45),inset 0 -30px 60px rgba(254,143,117,.35),inset 0 20px 50px rgba(255,255,255,.55)}
.hx-g__orb::after{content:"";position:absolute;inset:-18px;border-radius:50%;padding:2px;
  background:conic-gradient(from 0deg,rgba(252,20,93,0) 0deg,rgba(252,20,93,.5) 70deg,rgba(254,143,117,.55) 150deg,rgba(96,155,253,.45) 230deg,rgba(252,20,93,0) 300deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.js .hx-g__orb{animation:hxOrb 1.6s var(--spring) .2s both}
.js .hx-g__orb::after{animation:spin 14s linear infinite}
@keyframes hxOrb{from{opacity:0;scale:.82}}
.hx-g__glow{position:absolute;right:-6%;top:-4%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(96,155,253,.38),transparent);filter:blur(10px)}
.hx-g__floor{position:absolute;left:25%;right:25%;bottom:5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(30,35,110,.34),transparent);filter:blur(5px)}
.js .hx-g__floor{animation:hxFloor 3.4s ease-in-out 3.5s infinite}
@keyframes hxFloor{50%{scale:.9;opacity:.8}}
.hx-g__dot{position:absolute;z-index:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,rgba(255,255,255,.35) 45%,rgba(252,108,156,.25));box-shadow:0 10px 24px -10px rgba(252,20,93,.45)}
.hx-g__dot:nth-of-type(1){width:6%;left:4%;top:20%}
.hx-g__dot:nth-of-type(2){width:3.5%;left:16%;top:8%}
.hx-g__dot:nth-of-type(3){width:4.5%;right:5%;top:46%}
.hx-g__dot:nth-of-type(4){width:2.8%;right:14%;top:12%}
.js .hx-g__dot{animation:pop .9s var(--spring) 1.4s both,float 6s ease-in-out 2.3s infinite}
.js .hx-g__dot:nth-of-type(2n){animation-delay:1.6s,2.9s}
.hx-g .hv-mascot{left:9%;bottom:7%;width:84%;z-index:3;--md:.6s;filter:drop-shadow(0 30px 30px rgba(30,40,120,.25))}
.hx-g .hello{left:-4%;right:auto;top:3%;bottom:auto;max-width:240px;border-radius:22px 22px 22px 6px;font-size:16px}
.hx-g .hv-chip:nth-child(1){right:-5%;top:10%}
.hx-g .hv-chip:nth-child(2){left:-6%;top:56%}
.hx-g .hv-chip:nth-child(3){right:-3%;top:74%}
@media (min-width:735px) and (max-width:1068px){
  .hero .scene.hx-g{max-width:560px}
}
@media (max-width:734px){
  .hero .scene.hx-g{width:100%}
  .hx-g__stage{aspect-ratio:1/.86}
  .hx-g__orb{left:14%;top:2%;width:72%}
  .hx-g .hv-mascot{left:13%;bottom:4%;width:74%}
  .hx-g__floor{bottom:2%}
}