/* Optional motion layer. Geometry and content stay in landing.css. */
.hero-art { animation: none; }

html.motion-ready:not(.motion-off) .hero-art {
  animation: playbox-hero-float 9s ease-in-out infinite;
}
html.motion-ready:not(.motion-off) .floating-label {
  animation: playbox-label-float 6.5s ease-in-out infinite;
}
html.motion-ready:not(.motion-off) .sample-token {
  animation: playbox-token-drift 7s ease-in-out infinite;
}
html.motion-ready:not(.motion-off) .sample-token.token-a { --token-angle: 12deg; }
html.motion-ready:not(.motion-off) .sample-token.token-b {
  --token-angle: 0deg;
  animation-duration: 8.5s;
  animation-delay: -2.3s;
}

/* The duplicate is decorative and is created only when JS is available. */
.ticker.motion-ticker-ready { display: flex; }
.ticker.motion-ticker-ready > div { flex-shrink: 0; min-width: 100%; }
html.motion-ready:not(.motion-off) .ticker.motion-ticker-ready > div {
  animation: playbox-ticker var(--ticker-duration, 48s) linear infinite;
}
.ticker.motion-ticker-ready:hover > div,
.ticker.motion-ticker-ready:focus-within > div {
  animation-play-state: paused !important;
}

/* Sections are visible by default. Only JS can opt an offscreen section in. */
html.motion-ready:not(.motion-off) .section.motion-reveal {
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.65,.3,1);
}
html.motion-ready:not(.motion-off) .section.motion-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(22px);
}
.section.motion-reveal:target,
.section.motion-reveal:focus-within {
  opacity: 1 !important;
  transform: none !important;
}

/* Off means a completely still page, including the original mascot loop. */
html.motion-off .hero-art,
html.motion-off .floating-label,
html.motion-off .sample-token,
html.motion-off .sample-mascot,
html.motion-off .sample-mascot.celebrate,
html.motion-off .ticker.motion-ticker-ready > div {
  animation: none !important;
}
html.motion-off .hero-art { transform: none; }
html.motion-off .section.motion-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
html.motion-off .motion-ticker-copy { display: none; }
html.motion-off { scroll-behavior: auto; }

/* Do not spend animation work while the browser tab is in the background. */
html.motion-hidden .hero-art,
html.motion-hidden .floating-label,
html.motion-hidden .sample-token,
html.motion-hidden .sample-mascot,
html.motion-hidden .ticker.motion-ticker-ready > div {
  animation-play-state: paused !important;
}

@keyframes playbox-hero-float {
  0%, 100% { transform: translate3d(var(--hero-pointer-x, 0px), var(--hero-pointer-y, 0px), 0); }
  50% { transform: translate3d(var(--hero-pointer-x, 0px), calc(var(--hero-pointer-y, 0px) - 10px), 0); }
}
@keyframes playbox-label-float {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-7px) rotate(-3deg); }
}
@keyframes playbox-token-drift {
  0%, 100% { transform: translateY(0) rotate(var(--token-angle, 0deg)); }
  50% { transform: translateY(-8px) rotate(calc(var(--token-angle, 0deg) + 15deg)); }
}
@keyframes playbox-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art, .floating-label, .sample-token,
  .ticker.motion-ticker-ready > div { animation: none !important; }
  .hero-art { transform: none !important; }
  .section.motion-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .motion-ticker-copy { display: none !important; }
}