/* Glass objects, v1. Animate only transforms and opacity. */
.hero-art{perspective:1100px}
@keyframes gem-suspend{
  0%,100%{transform:perspective(850px) translate3d(0,3px,0) rotateX(-5deg) rotateY(-12deg) rotate(-4deg)}
  50%{transform:perspective(850px) translate3d(3px,-10px,0) rotateX(7deg) rotateY(13deg) rotate(5deg)}
}
@keyframes gem-star-turn{
  0%,100%{transform:perspective(650px) translate3d(0,2px,0) rotateY(-18deg) rotate(-9deg)}
  50%{transform:perspective(650px) translate3d(-3px,-9px,0) rotateY(19deg) rotate(10deg)}
}
@keyframes gem-bolt-turn{
  0%,100%{transform:perspective(650px) translate3d(0,3px,0) rotateY(15deg) rotate(10deg)}
  50%{transform:perspective(650px) translate3d(3px,-10px,0) rotateY(-17deg) rotate(-6deg)}
}
@keyframes glass-infinity-suspend{
  0%,100%{transform:perspective(1100px) translate3d(-3px,5px,0) rotateX(3deg) rotateY(-9deg) rotate(-3deg)}
  50%{transform:perspective(1100px) translate3d(4px,-11px,0) rotateX(-5deg) rotateY(10deg) rotate(3deg)}
}
@keyframes glass-light-pass{
  0%,18%{opacity:0;transform:translate3d(-105%,0,0)}
  28%{opacity:.52}
  47%{opacity:.35}
  60%,100%{opacity:0;transform:translate3d(105%,0,0)}
}
/* The mask stays aligned with the PNG-shaped WebP; only light moves inside it. */
.infinity-light{position:absolute;inset:0;pointer-events:none;mask:url('https://fitstars-landing-prod.storage.yandexcloud.net/landings/30/v10/img/infinity-hero.webp') center/contain no-repeat;-webkit-mask:url('https://fitstars-landing-prod.storage.yandexcloud.net/landings/30/v10/img/infinity-hero.webp') center/contain no-repeat;overflow:hidden;opacity:0}
.infinity-light::after{content:'';position:absolute;inset:-15% -35%;background:linear-gradient(110deg,transparent 35%,#ffffff24 43%,#fff 50%,#ffffff24 57%,transparent 65%);opacity:0}
.glass-motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;background:#ffffffb8;border:1px solid #c5a4d7;border-radius:24px;color:#633272;font:inherit;font-size:11px;padding:7px 11px;cursor:pointer;min-height:32px;margin-left:auto}
.glass-motion-toggle:focus-visible{outline:2px solid #8923b9;outline-offset:3px}
@media(prefers-reduced-motion:no-preference){
  .hero-gem,.section-gem,.benefit-gem,.plan-gem,.glass-crown,.device-gem,.guarantee-gem,.final-gems img,.bundle-star{
    animation:gem-suspend 7.5s var(--ease-in-out) infinite;
    animation-play-state:paused;will-change:auto;transform-origin:50% 55%;
  }
  .hero-star,.family .plan-gem,.bundle-star,.glass-crown,.final-star{animation-name:gem-star-turn;animation-duration:8.5s;animation-delay:-2s}
  .hero-bolt,.side .plan-gem,.device-gem,.final-bolt{animation-name:gem-bolt-turn;animation-duration:6.8s;animation-delay:-3.4s}
  .benefit-gem,.section-gem{animation-duration:8.5s;animation-delay:-4s}
  .infinity-float{animation:glass-infinity-suspend 8.5s var(--ease-in-out) infinite;animation-play-state:paused}
  .infinity-light{opacity:1}
  .infinity-light::after{animation:glass-light-pass 8.5s linear infinite;animation-play-state:paused}
  .infinity-float.glass-in-view .infinity-light::after{animation-play-state:running}
  .glass-in-view{will-change:transform}
}
/* Explicit pause wins over the existing in-view rule, including its !important. */
body.glass-user-paused .glass-in-view,body.glass-user-paused .infinity-float,
body.glass-user-paused .infinity-light::after,body.motion-paused .glass-in-view,
body.motion-paused .infinity-light::after,.hero-art.motion-offscreen .infinity-light::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  .infinity-light{display:none}.glass-motion-toggle{display:none}
  .hero-gem,.section-gem,.benefit-gem,.plan-gem,.glass-crown,.device-gem,.guarantee-gem,.final-gems img,.bundle-star,.infinity-float{animation:none!important;transform:none!important;will-change:auto!important}
}
@media(max-width:767px){.hero-ribbon{flex-wrap:wrap;gap:10px 13px}.glass-motion-toggle{font-size:10px;min-height:32px}}