/* A few living illustrations between otherwise quiet scenes.
   The loops use inner artwork and pseudo-elements, leaving scroll transforms intact. */
.home-page .page-scene { --ambient-play-state: paused; }
.home-page .page-scene.is-in-view { --ambient-play-state: running; }
:is(.ambient-paused, .page-background) .home-page .page-scene,
.home-page:is(.ambient-paused, .page-background) .page-scene {
  --ambient-play-state: paused;
}

/* A small point follows the globe's connection orbit. */
.home-page .connection-visual::before,
.home-page .connection-visual::after {
  content: "";
  position: absolute;
  top: 11%;
  left: 15%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}
.home-page .connection-visual::before {
  border: 1px solid rgba(91, 131, 237, .12);
  border-top-color: rgba(71, 116, 236, .48);
  animation: journey-orbit 8s linear infinite;
}
.home-page .connection-visual::after {
  background: radial-gradient(circle at 50% 1.5%, #7099f3 0 3px, rgba(112, 153, 243, .14) 3.5px 8px, transparent 8.5px);
  animation: journey-orbit 8s linear infinite;
}

/* The tiny video landscape continues gently while its surrounding cards rest. */
.home-page .story-video__sun {
  animation: journey-sun-drift 7s ease-in-out infinite;
}
.home-page .story-video__hill {
  animation: journey-landscape-drift 7s ease-in-out infinite;
}
.home-page .story-video__hill--back {
  animation-direction: reverse;
  animation-delay: -1.5s;
}
.home-page .story-video__play::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  pointer-events: none;
  animation: journey-video-ripple 5s ease-out infinite;
}

/* Each network has its own slowly repeating signal. */
.home-page .story-network__orbit::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 1.5%, #6c94ef 0 3px, transparent 3.5px);
  pointer-events: none;
  animation: journey-orbit 8s linear infinite;
}
.home-page .story-network__servers i {
  animation: journey-signal 6s ease-in-out infinite;
}
.home-page .story-network__servers > span:nth-child(2) i { animation-delay: -2s; }
.home-page .story-network__servers > span:nth-child(3) i { animation-delay: -4s; }

/* A soft circular accent gives the trial's large number a little life. */
.home-page .trial-stat::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(100%, 270px);
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-top-color: rgba(255, 255, 255, .68);
  border-right-color: rgba(255, 255, 255, .13);
  border-radius: 50%;
  pointer-events: none;
  animation: journey-orbit 8s linear infinite;
}
.home-page .trial-stat::before {
  animation: journey-trial-breathe 6s ease-in-out infinite;
}

.home-page .connection-visual::before,
.home-page .connection-visual::after,
.home-page .story-video__sun,
.home-page .story-video__hill,
.home-page .story-video__play::after,
.home-page .story-network__orbit::after,
.home-page .story-network__servers i,
.home-page .trial-stat::before,
.home-page .trial-stat::after {
  animation-play-state: var(--ambient-play-state, paused);
}

@keyframes journey-orbit {
  to { transform: rotate(360deg); }
}
@keyframes journey-sun-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(14px, -6px); }
}
@keyframes journey-landscape-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 10px -3px; }
}
@keyframes journey-video-ripple {
  0%, 25% { transform: scale(1); opacity: 0; }
  40% { opacity: .65; }
  85%, 100% { transform: scale(1.45); opacity: 0; }
}
@keyframes journey-signal {
  0%, 100% { opacity: .7; box-shadow: 0 0 0 4px #eff4ff; }
  45% { opacity: 1; box-shadow: 0 0 0 7px rgba(96, 144, 241, .16); }
}
@keyframes journey-trial-breathe {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

@media (max-width: 900px) {
  .home-page .trial-stat::after { width: min(100%, 218px); }
}
@media (max-width: 640px) {
  .home-page .connection-visual::before,
  .home-page .connection-visual::after {
    top: 4%;
    left: calc(50% - 105px);
    width: 210px;
  }
  .home-page .trial-stat::after { width: 140px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce), print {
  .home-page .connection-visual::before,
  .home-page .connection-visual::after,
  .home-page .story-video__sun,
  .home-page .story-video__hill,
  .home-page .story-video__play::after,
  .home-page .story-network__orbit::after,
  .home-page .story-network__servers i,
  .home-page .trial-stat::before,
  .home-page .trial-stat::after { animation: none !important; }
  .home-page .story-video__play::after { opacity: 0; }
}