body {
  margin: 0;
}

html {
  overflow: hidden scroll;
}

#loading-bg {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg, #fff);
  block-size: 100%;
  inline-size: 100%;
}

/* Flight path wrapper — large sweeping kite trajectory (8s) */
.loading-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fin-fly 8s ease-in-out infinite;
}

/* Icon — rapid wind flutter overlaid on flight path (1.2s) */
.loading-icon {
  width: 48px;
  height: 48px;
  animation: fin-flutter 1.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(101, 13, 191, 0.15));
}

/*
 * Kite flight path — organic trajectory
 *
 * The kite rises from anchor, sweeps through broad arcs at altitude,
 * dips once (wind lull), recovers, then descends back to anchor.
 * Spends ~80% of the cycle above center (realistic kite behavior).
 * Rotation follows horizontal direction (tilt into the wind).
 */
@keyframes fin-fly {
  0%   { transform: translate(0, 0) rotate(0deg); }
  8%   { transform: translate(10px, -20px) rotate(5deg); }
  18%  { transform: translate(20px, -36px) rotate(10deg); }
  28%  { transform: translate(0, -40px) rotate(0deg); }
  38%  { transform: translate(-18px, -32px) rotate(-8deg); }
  48%  { transform: translate(-22px, -18px) rotate(-12deg); }
  56%  { transform: translate(-12px, -28px) rotate(-5deg); }
  66%  { transform: translate(6px, -36px) rotate(3deg); }
  78%  { transform: translate(16px, -22px) rotate(8deg); }
  88%  { transform: translate(6px, -8px) rotate(3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Wind flutter — rapid micro-oscillation simulating wind buffet */
@keyframes fin-flutter {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  30%      { transform: rotate(3deg) scale(1.02); }
  70%      { transform: rotate(-3deg) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .loading-logo {
    animation: none;
  }

  .loading-icon {
    animation: fin-pulse 1.5s ease-in-out infinite;
    filter: none;
  }

  @keyframes fin-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }
}