/*
 * Lobby sunburst slowly turning behind the page, the Battle Bus flying across
 * the sky, a shimmering shield bar in the topbar, and a bobbing llama on login.
 * Transform/opacity only. Sky effects stay out of hosted apps.
 */
@keyframes fn-sunburst-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fn-bus-fly {
  0% { transform: translate3d(-260px, 0, 0) rotate(-3deg); }
  45% { transform: translate3d(calc(100vw + 40px), -40px, 0) rotate(-3deg); }
  100% { transform: translate3d(calc(100vw + 40px), -40px, 0) rotate(-3deg); }
}

@keyframes fn-shield-shine {
  from { transform: translate3d(-120px, 0, 0) skewX(-20deg); }
  to { transform: translate3d(calc(100vw + 120px), 0, 0) skewX(-20deg); }
}

@keyframes fn-llama-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-3deg); }
}

/* Sunburst rays, centred high on the screen. */
html[data-theme="fortnite"] body:not(.hub-chrome-hosted)::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 22%;
  width: 220vmax;
  height: 220vmax;
  z-index: -1;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.075) 0deg 7deg,
    rgba(255, 255, 255, 0) 7deg 18deg
  );
  transform: translate(-50%, -50%);
  animation: fn-sunburst-spin 160s linear infinite;
  will-change: transform;
}

/* Battle Bus crosses the sky, then the sky stays clear for a while. */
html[data-theme="fortnite"] body:not(.hub-chrome-hosted)::after {
  content: "";
  position: fixed;
  left: 0;
  top: 18vh;
  width: 190px;
  height: 138px;
  z-index: -1;
  pointer-events: none;
  background: url("assets/bus.svg") center / contain no-repeat;
  transform: translate3d(-260px, 0, 0);
  animation: fn-bus-fly 50s linear infinite;
  animation-delay: 3s;
  will-change: transform;
}

/* Shield bar along the top of the topbar. */
html[data-theme="fortnite"] .hub-motif {
  height: 7px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(11, 29, 85, 0.85) 46px 48px),
    linear-gradient(180deg, #8fe6ff, #2fa8ff 60%, #1873d6);
  box-shadow: 0 1px 0 var(--fn-ink);
}

html[data-theme="fortnite"] .hub-motif::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  animation: fn-shield-shine 3.5s ease-in-out infinite;
  will-change: transform;
}

html[data-theme="fortnite"] .hub-login::after {
  transform-origin: 50% 100%;
  animation: fn-llama-bob 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="fortnite"] body:not(.hub-chrome-hosted)::before,
  html[data-theme="fortnite"] .hub-motif::before,
  html[data-theme="fortnite"] .hub-login::after {
    animation: none;
  }

  html[data-theme="fortnite"] body:not(.hub-chrome-hosted)::after {
    display: none;
  }
}