/**
 * FrenzyGo — global page navigation loader (top bar + ring overlay).
 */

:root {
  --fg-loader-z: 10250;
  --fg-loader-bar-h: 3px;
  --fg-loader-accent: var(--fg-brand-accent, #16a34a);
  --fg-loader-accent-2: var(--fg-brand-accent-2, #22c55e);
  --fg-loader-ink: var(--fg-brand-ink, #0c0f0e);
  --fg-loader-muted: var(--fg-brand-muted, #5f6562);
}

.fg-page-loader {
  pointer-events: none;
}

.fg-page-loader__bar {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: var(--fg-loader-bar-h);
  z-index: calc(var(--fg-loader-z) + 2);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    rgba(34, 197, 94, 0) 0%,
    var(--fg-loader-accent-2) 22%,
    #5ee58b 48%,
    var(--fg-loader-accent) 76%,
    rgba(22, 163, 74, 0) 100%
  );
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.5);
  transition: opacity 0.2s ease;
}

.fg-page-loader.is-active .fg-page-loader__bar {
  opacity: 1;
  animation: fg-loader-bar-indeterminate 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.fg-page-loader.is-finishing .fg-page-loader__bar {
  animation: none;
  transform: scaleX(1);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.fg-page-loader.is-done .fg-page-loader__bar {
  opacity: 0;
  transform: scaleX(1);
}

@keyframes fg-loader-bar-indeterminate {
  0% {
    transform: scaleX(0.08);
    transform-origin: left center;
  }
  45% {
    transform: scaleX(0.72);
    transform-origin: left center;
  }
  55% {
    transform: scaleX(0.72);
    transform-origin: right center;
  }
  100% {
    transform: scaleX(0.08);
    transform-origin: right center;
  }
}

.fg-page-loader__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--fg-loader-z);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(34, 197, 94, 0.12), transparent 32%),
    rgba(248, 249, 248, 0.82);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.fg-page-loader.is-overlay .fg-page-loader__overlay {
  opacity: 1;
  visibility: visible;
}

.fg-page-loader__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px;
  transform: translateY(4px) scale(0.98);
  transition: transform 0.22s ease;
}

.fg-page-loader.is-overlay .fg-page-loader__brand {
  transform: translateY(0) scale(1);
}

.fg-page-loader__spinner {
  position: relative;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 14px 28px rgba(15, 20, 18, 0.12));
}

.fg-page-loader__spinner::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0 34%, transparent 35%),
    radial-gradient(circle, rgba(34, 197, 94, 0.18) 0%, transparent 72%);
  box-shadow:
    inset 0 0 0 1px rgba(22, 163, 74, 0.1),
    0 0 28px rgba(34, 197, 94, 0.18);
  animation: fg-loader-breathe 1.8s ease-in-out infinite;
}

.fg-page-loader__spinner::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  top: 3px;
  left: 50%;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.18),
    0 0 16px rgba(34, 197, 94, 0.75);
  transform: translateX(-50%);
  transform-origin: 50% 31px;
  animation: fg-loader-orbit 1.05s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

.fg-page-loader__ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from -60deg,
    rgba(22, 163, 74, 0.06) 0deg,
    rgba(22, 163, 74, 0.08) 84deg,
    var(--fg-loader-accent-2) 112deg,
    #8cf2ac 150deg,
    var(--fg-loader-accent) 210deg,
    rgba(22, 163, 74, 0.12) 248deg,
    rgba(22, 163, 74, 0.06) 360deg
  );
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)),
    linear-gradient(#000, #000);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  animation: fg-loader-spin 1.05s linear infinite;
  box-shadow:
    inset 0 0 0 1px rgba(22, 163, 74, 0.1),
    0 0 24px rgba(34, 197, 94, 0.2);
}

.fg-page-loader__label {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-loader-muted);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

@keyframes fg-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fg-loader-breathe {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes fg-loader-orbit {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}

/* Brief tap feedback on bottom nav */
.fixed-footer.fg-bottom-nav .item.fg-nav-tap-active {
  transform: scale(0.94);
  opacity: 0.88;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
  .fg-page-loader.is-active .fg-page-loader__bar {
    animation: none;
    transform: scaleX(0.35);
  }

  .fg-page-loader__ring {
    animation: none;
    background: conic-gradient(
      from 0deg,
      var(--fg-loader-accent-2) 0deg,
      var(--fg-loader-accent) 120deg,
      rgba(22, 163, 74, 0.2) 121deg,
      rgba(22, 163, 74, 0.2) 360deg
    );
  }

  .fg-page-loader__spinner::before,
  .fg-page-loader__spinner::after {
    animation: none;
  }

  .fg-page-loader__overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}