/* Shared ICITY page background */

:root {
  --icity-bg-top: #d5dff1;
  --icity-bg-center: #a9bdeb;
  --icity-bg-bottom: #7e98e1;
}

body.icity-page,
body.explore-page,
body.categories-page,
body.products-page,
body.contact-page,
body.font-sans {
  overflow-x: hidden;
  background: var(--icity-bg-bottom);
}

.icity-page__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(213, 223, 241, 0.85), transparent 58%),
    radial-gradient(ellipse 70% 48% at 0% 85%, rgba(169, 189, 235, 0.45), transparent 55%),
    radial-gradient(ellipse 65% 45% at 100% 40%, rgba(126, 152, 225, 0.35), transparent 52%),
    linear-gradient(
      180deg,
      #d5dff1 0%,
      #a9bdeb 48%,
      #7e98e1 100%
    );
}

.icity-page__particles {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(213, 223, 241, 0.95), transparent),
    radial-gradient(1px 1px at 28% 62%, rgba(169, 189, 235, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 72% 28%, rgba(126, 152, 225, 0.75), transparent),
    radial-gradient(1px 1px at 88% 72%, rgba(169, 189, 235, 0.65), transparent),
    radial-gradient(1px 1px at 48% 88%, rgba(255, 255, 255, 0.5), transparent);
  animation: icity-page-float 12s ease-in-out infinite alternate;
}

.icity-page__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}

.icity-page__glow--tl {
  width: min(500px, 70vw);
  height: min(400px, 55vw);
  top: 10%;
  left: -12%;
  background: rgba(213, 223, 241, 0.55);
}

.icity-page__glow--br {
  width: min(420px, 60vw);
  height: min(380px, 50vw);
  bottom: 15%;
  right: -8%;
  background: rgba(126, 152, 225, 0.4);
}

@keyframes icity-page-float {
  from { opacity: 0.25; transform: translateY(0); }
  to { opacity: 0.4; transform: translateY(-8px); }
}

body.icity-page > :not(.icity-page__bg):not(.explore-page__bg),
body.explore-page > :not(.icity-page__bg):not(.explore-page__bg),
body.categories-page > :not(.icity-page__bg):not(.explore-page__bg),
body.products-page > :not(.icity-page__bg):not(.explore-page__bg),
body.contact-page > :not(.icity-page__bg):not(.explore-page__bg) {
  position: relative;
  z-index: 1;
}

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