/* Landing-page motion.
   --orbit-time : seconds for one full lap of the app tiles around the headline (smaller = faster)
   --motion-speed : speed-up for the other decorative motion (1 = original speed)
   Reduced-motion visitors (and browsers without offset-path) keep the original still layout. */
:root{--orbit-time:18s;--motion-speed:2.5}

/* tile tilt / shine, glow and the community section: faster everywhere */
.welcome-app-tile{animation-duration:calc(12s / var(--motion-speed))}
.welcome-app-tile .tile-sheen{animation-duration:calc(9s / var(--motion-speed))}
.welcome-glow{animation-duration:calc(14s / var(--motion-speed))}
.welcome-community-art .community-loop{animation-duration:calc(28s / var(--motion-speed))}
.welcome-community-art .loop-two{animation-duration:calc(35s / var(--motion-speed))}
.welcome-community-art .loop-three{animation-duration:calc(42s / var(--motion-speed))}
.welcome-symbol{animation-duration:calc(8s / var(--motion-speed))}
.community-orbit-icon{animation-duration:calc(7s / var(--motion-speed))}
.community-orbit-icon.two{animation-duration:calc(9s / var(--motion-speed))}
.community-orbit-icon.three{animation-duration:calc(11s / var(--motion-speed))}

/* hero: app tiles circle around "Great apps start with great feedback." */
@media (prefers-reduced-motion:no-preference){
  @supports (offset-path:ellipse(50% 50% at 50% 50%)){
    .welcome-icons .welcome-float{
      top:0;left:0;right:auto;bottom:auto;
      offset-path:ellipse(41% 39% at 50% 50%) border-box;
      offset-anchor:center;
      offset-rotate:0deg;
      animation:hero-icon-orbit var(--orbit-time) linear infinite,
                welcome-drift calc(var(--float-time,8s) / var(--motion-speed)) ease-in-out infinite;
    }
    /* evenly spaced starting points, big tiles alternating with small blurred ones */
    .welcome-icons .float-leaf{animation-delay:0s,var(--float-delay,0s)}
    .welcome-icons .float-zap{animation-delay:calc(var(--orbit-time) * -0.1429),var(--float-delay,0s)}
    .welcome-icons .float-audio{animation-delay:calc(var(--orbit-time) * -0.2857),var(--float-delay,0s)}
    .welcome-icons .float-chat{animation-delay:calc(var(--orbit-time) * -0.4286),var(--float-delay,0s)}
    .welcome-icons .float-mountain{animation-delay:calc(var(--orbit-time) * -0.5714),var(--float-delay,0s)}
    .welcome-icons .float-book{animation-delay:calc(var(--orbit-time) * -0.7143),var(--float-delay,0s)}
    .welcome-icons .float-camera{animation-delay:calc(var(--orbit-time) * -0.8571),var(--float-delay,0s)}
  }
}