/* Original tube and ball sprites create a quiet game world around the content. */
.world-section { position: relative; isolation: isolate; }
.world-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.world-section.container > .world-scene { inset-inline: calc((100% - var(--world-width, 100vw)) / 2); }
.world-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .55;
  background: radial-gradient(ellipse at 0 40%, #c9eaf54d, transparent 32%), radial-gradient(ellipse at 100% 75%, #e9d5fa55, transparent 30%);
}
.world-tube-anchor { position: absolute; left: 8px; top: 36%; opacity: .42; }
.world-section:nth-of-type(even) .world-tube-anchor { left: auto; right: 12px; top: 56%; --tilt: 19deg; }
.world-tube {
  --tube-width: 66px;
  --tilt: -18deg;
  position: relative;
  width: var(--tube-width);
  height: calc(var(--tube-width) * 3.466667);
  animation: world-hover 11s ease-in-out infinite;
  filter: drop-shadow(0 12px 14px #3280bf20);
}
.world-section:nth-of-type(even) .world-tube { --tilt: 19deg; animation-delay: -5s; }
.world-tube::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/game-tubes.png');
  background-repeat: no-repeat;
  background-size: calc(var(--tube-width) * 15.216667) calc(var(--tube-width) * 16.65);
  background-position: calc(var(--tube-width) * var(--tube-x)) calc(var(--tube-width) * var(--tube-y));
}
.world-tube-straight { --tube-x: -9.133333; --tube-y: -7.858333; }
.world-tube-wavy { --tube-x: -9.15; --tube-y: -11.341667; }
.world-tube-ribbed { --tube-x: -11.108333; --tube-y: 0; height: calc(var(--tube-width) * 3.275); }
.world-tube .game-ball {
  --ball-size: calc(var(--tube-width) * .68);
  position: absolute;
  left: 16%;
  bottom: calc(var(--tube-width) * (.18 + var(--slot) * .72));
  opacity: .9;
}
.world-orbit {
  position: absolute;
  right: -105px;
  top: 24%;
  width: 260px;
  aspect-ratio: 1;
  border: 1px dashed #98b7cb48;
  border-radius: 50%;
  animation: world-orbit 65s linear infinite;
}
.world-orbit::before { content: ''; position: absolute; inset: 30px; border: 1px solid #c5b2d52b; border-radius: inherit; }
.world-orbit > .game-ball { --ball-size: 34px; position: absolute; left: 28px; top: 20px; opacity: .6; }
.world-section:nth-of-type(even) .world-orbit { right: auto; left: -105px; top: 25%; animation-direction: reverse; }
.world-mote { position: absolute; opacity: .65; animation: world-hover 9s ease-in-out infinite; --tilt: -12deg; }
.world-mote .game-ball { --ball-size: 34px; display: block; filter: drop-shadow(0 8px 7px #47432918); }
.world-mote-one { left: 14%; top: 24px; }
.world-mote-two { right: 16%; top: 32px; animation-delay: -3s; }
.world-mote-two .game-ball { --ball-size: 23px; }
.world-mote-three { left: 28%; bottom: 20px; animation-delay: -6s; }
.world-mote-three .game-ball { --ball-size: 25px; }
.world-mote-four { right: 7%; bottom: 24px; animation-delay: -2s; }
.world-mote-four .game-ball { --ball-size: 48px; }
.world-spark { position: absolute; color: #d7a657; font-size: 25px; line-height: 1; animation: world-shimmer 6s ease-in-out infinite; }
.world-spark-one { left: 7%; top: 18px; }
.world-spark-two { right: 8%; top: 30%; color: #a896c9; font-size: 17px; animation-delay: -3s; }
.world-spark-three { right: 25%; bottom: 18px; color: #91b9b7; font-size: 19px; animation-delay: -1s; }
/* Keep the compact download card's art clear of its QR codes and copy. */
.download-section.world-section > .world-scene { inset: 0; }
.download-section .world-tube-anchor { opacity: .2; right: -20px; }
.download-section .world-mote-three, .download-section .world-mote-four { display: none; }
@keyframes world-hover {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--tilt)); }
  50% { transform: translate3d(10px, -22px, 0) rotate(calc(var(--tilt) + 9deg)); }
}
@keyframes world-orbit { to { transform: rotate(360deg); } }
@keyframes world-shimmer {
  0%, 100% { opacity: .3; transform: scale(.8) rotate(0); }
  50% { opacity: .75; transform: scale(1.1) rotate(30deg); }
}
@media (min-width: 1500px) {
  .world-tube-anchor { left: max(25px, calc((100vw - 1380px) / 2)); opacity: .65; }
  .world-section:nth-of-type(even) .world-tube-anchor { right: max(25px, calc((100vw - 1380px) / 2)); }
  .world-tube { --tube-width: 82px; }
}
@media (max-width: 850px) {
  .world-tube { --tube-width: 48px; }
  .world-tube-anchor { left: -20px; opacity: .24; }
  .world-section:nth-of-type(even) .world-tube-anchor { right: -20px; }
  .world-orbit { width: 160px; right: -115px; opacity: .55; }
  .world-section:nth-of-type(even) .world-orbit { left: -115px; }
  .world-mote .game-ball { --ball-size: 23px; }
  .world-mote { opacity: .5; }
}
@media (max-width: 620px) {
  .world-mote-one { top: 12px; left: 12%; }
  .world-mote-two { top: 15px; right: 13%; }
  .world-mote-three { bottom: 10px; left: 8%; }
  .world-mote-four { bottom: 12px; right: 8%; }
  .world-spark-two, .world-spark-three { display: none; }
  .world-spark-one { font-size: 17px; left: 50%; top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .world-scene * { animation: none !important; }
  html:not([data-motion="full"]) .world-spark { opacity: .4; }
}