/* ggnomz — borderless page intros: feathered sky wash (Creators, Contests, …) */

.page-intro-sky.panel {
  position: relative;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 16px 0 28px !important;
  overflow: visible;
}

.page-intro-sky::before {
  content: "";
  position: absolute;
  inset: -28px -12% -12px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 52% at 6% 28%, rgba(255, 143, 212, 0.45), transparent 58%),
    radial-gradient(ellipse 58% 48% at 94% 14%, rgba(155, 140, 255, 0.42), transparent 56%),
    radial-gradient(ellipse 54% 46% at 42% 95%, rgba(212, 255, 122, 0.32), transparent 54%),
    radial-gradient(ellipse 42% 38% at 78% 72%, rgba(110, 231, 255, 0.28), transparent 52%),
    radial-gradient(ellipse 36% 30% at 22% 68%, rgba(255, 143, 212, 0.22), transparent 50%),
    linear-gradient(
      128deg,
      rgba(90, 45, 180, 0.38) 0%,
      rgba(55, 28, 120, 0.12) 42%,
      rgba(120, 70, 200, 0.28) 100%
    );
  -webkit-mask-image: radial-gradient(
    ellipse 92% 78% at 50% 42%,
    #000 28%,
    rgba(0, 0, 0, 0.55) 52%,
    transparent 76%
  );
  mask-image: radial-gradient(
    ellipse 92% 78% at 50% 42%,
    #000 28%,
    rgba(0, 0, 0, 0.55) 52%,
    transparent 76%
  );
  filter: blur(18px);
}

.page-intro-sky::after {
  content: "";
  position: absolute;
  inset: -20px -10% -8px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(
    ellipse 88% 72% at 50% 45%,
    #000 22%,
    rgba(0, 0, 0, 0.45) 48%,
    transparent 74%
  );
  mask-image: radial-gradient(
    ellipse 88% 72% at 50% 45%,
    #000 22%,
    rgba(0, 0, 0, 0.45) 48%,
    transparent 74%
  );
  filter: blur(6px);
  background-image:
    radial-gradient(2px 2px at 14% 24%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 82% 12%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(2px 2px at 68% 58%, rgba(212, 255, 122, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 28% 72%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 48% 32%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(2px 2px at 90% 78%, rgba(155, 140, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 6% 52%, rgba(255, 143, 212, 0.5), transparent),
    radial-gradient(1px 1px at 58% 8%, rgba(255, 255, 255, 0.38), transparent);
  background-size: 100% 100%;
}

.page-intro-deco {
  position: absolute;
  inset: -24px -8% -8px;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  -webkit-mask-image: radial-gradient(
    ellipse 85% 70% at 50% 38%,
    #000 26%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 72%
  );
  mask-image: radial-gradient(
    ellipse 85% 70% at 50% 38%,
    #000 26%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 72%
  );
}

.page-intro-deco span {
  position: absolute;
  font-size: clamp(15px, 2.2vw, 24px);
  line-height: 1;
  opacity: 0.32;
  filter: drop-shadow(0 0 14px rgba(212, 255, 122, 0.4));
  animation: page-intro-float 8s ease-in-out infinite;
}

.page-intro-deco span:nth-child(1) {
  left: 7%;
  top: 20%;
  animation-delay: 0s;
}

.page-intro-deco span:nth-child(2) {
  right: 10%;
  top: 14%;
  animation-delay: 1.2s;
  font-size: clamp(12px, 1.8vw, 18px);
}

.page-intro-deco span:nth-child(3) {
  right: 22%;
  bottom: 18%;
  animation-delay: 2.4s;
}

.page-intro-deco span:nth-child(4) {
  left: 18%;
  bottom: 12%;
  animation-delay: 0.6s;
  opacity: 0.28;
}

.page-intro-deco span:nth-child(5) {
  left: 48%;
  top: 8%;
  animation-delay: 1.8s;
  font-size: clamp(11px, 1.5vw, 16px);
}

.page-intro-deco span:nth-child(6) {
  right: 4%;
  top: 48%;
  animation-delay: 3s;
}

.page-intro-sky > *:not(.page-intro-deco) {
  position: relative;
  z-index: 1;
}

.page-intro-sky h1 {
  margin-top: 0;
  text-shadow:
    0 0 28px rgba(212, 255, 122, 0.35),
    0 0 48px rgba(155, 140, 255, 0.2);
}

.contests-hero.page-intro-sky h1 {
  font-size: clamp(28px, 4.5vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.page-intro-sky .filters {
  margin-top: 16px;
}

@keyframes page-intro-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-6deg);
  }
  50% {
    transform: translate3d(0, -10px, 0) rotate(8deg);
  }
}

html[data-theme="light"] .page-intro-sky::before {
  /* Soft color blooms only — no opaque fill that reads as a box */
  background:
    radial-gradient(ellipse 72% 58% at 8% 32%, rgba(232, 94, 184, 0.16), transparent 62%),
    radial-gradient(ellipse 68% 52% at 92% 16%, rgba(117, 96, 255, 0.14), transparent 60%),
    radial-gradient(ellipse 64% 50% at 44% 98%, rgba(127, 200, 0, 0.1), transparent 58%),
    radial-gradient(ellipse 48% 40% at 76% 70%, rgba(60, 184, 212, 0.08), transparent 56%);
  filter: blur(26px);
  -webkit-mask-image: radial-gradient(
    ellipse 100% 88% at 50% 42%,
    #000 12%,
    rgba(0, 0, 0, 0.28) 42%,
    transparent 70%
  );
  mask-image: radial-gradient(
    ellipse 100% 88% at 50% 42%,
    #000 12%,
    rgba(0, 0, 0, 0.28) 42%,
    transparent 70%
  );
}

html[data-theme="light"] .page-intro-sky::after {
  opacity: 0.22;
  background-image:
    radial-gradient(2px 2px at 14% 24%, rgba(117, 96, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 82% 12%, rgba(232, 94, 184, 0.5), transparent),
    radial-gradient(2px 2px at 68% 58%, rgba(127, 200, 0, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 28% 72%, rgba(117, 96, 255, 0.42), transparent),
    radial-gradient(1px 1px at 48% 32%, rgba(232, 94, 184, 0.38), transparent),
    radial-gradient(2px 2px at 90% 78%, rgba(127, 200, 0, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 6% 52%, rgba(60, 184, 212, 0.42), transparent),
    radial-gradient(1px 1px at 58% 8%, rgba(117, 96, 255, 0.4), transparent);
}

html[data-theme="light"] .page-intro-deco span {
  opacity: 0.2;
  color: rgba(90, 60, 160, 0.55);
  filter: drop-shadow(0 0 10px rgba(117, 96, 255, 0.35));
}

html[data-theme="light"] .contests-hero.page-intro-sky h1 {
  text-shadow:
    0 0 20px rgba(127, 200, 0, 0.28),
    0 0 36px rgba(232, 94, 184, 0.18);
}

/* Beat inline + theme-light-ux panel fills on intro heroes */
html[data-theme="light"] .panel.page-intro-sky,
html[data-theme="light"] .page-intro-sky.panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .page-intro-deco span {
    animation: none;
  }
}