/* Prism — ambient FX layers */

@property --prism-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes prism-spin {
  to {
    --prism-angle: 360deg;
  }
}

@keyframes prism-shimmer-slide {
  0% {
    transform: translateX(-120%) skewX(-12deg);
  }
  100% {
    transform: translateX(220%) skewX(-12deg);
  }
}

.mh-prism-mesh {
  position: fixed;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.mh-prism-shimmer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 80% 60% at var(--prism-mx, 22%) var(--prism-my, 12%), rgba(168, 85, 247, 0.16), transparent 52%),
    radial-gradient(ellipse 70% 50% at calc(100% - var(--prism-mx, 22%)) 18%, rgba(34, 211, 238, 0.12), transparent 48%),
    radial-gradient(ellipse 60% 45% at 50% 92%, rgba(244, 114, 182, 0.1), transparent 50%);
  transition: opacity 0.8s ease;
}

.mh-prism-rays {
  position: fixed;
  inset: -20%;
  z-index: -3;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    from var(--prism-angle) at 50% 45%,
    transparent 0deg,
    rgba(168, 85, 247, 0.04) 40deg,
    transparent 80deg,
    rgba(34, 211, 238, 0.035) 140deg,
    transparent 180deg,
    rgba(244, 114, 182, 0.03) 240deg,
    transparent 300deg,
    rgba(52, 211, 153, 0.025) 340deg,
    transparent 360deg
  );
  filter: blur(28px);
  transition: opacity 0.8s ease;
}

html[data-theme="prism"] .mh-starfield,
html[data-theme="prism"] .mh-vignette,
html[data-theme="prism"] .mh-scanlines,
html[data-theme="prism"] .mh-bg,
html[data-theme="prism"] .mh-grid,
html[data-theme="prism"] .mh-obsidian-mesh,
html[data-theme="prism"] .mh-obsidian-vignette,
html[data-theme="prism"] .mh-obsidian-grain,
html[data-theme="prism"] .mh-obsidian-shards,
html[data-theme="prism"] .mh-neotokyo-rain,
html[data-theme="prism"] .mh-neotokyo-glow,
html[data-theme="prism"] .mh-neotokyo-scan,
html[data-theme="prism"] .mh-vault-spotlight,
html[data-theme="prism"] .mh-vault-grain,
html[data-theme="prism"] .mh-vault-vignette {
  opacity: 0 !important;
  visibility: hidden;
}

html[data-theme="prism"] .brand-mark__ring,
html[data-theme="prism"] .brand-mark__ghost {
  display: none !important;
}

html[data-theme="prism"] {
  color-scheme: dark;
  --prism-angle: 0deg;
  --prism-mx: 22%;
  --prism-my: 12%;
  animation: prism-spin 24s linear infinite;
}

html[data-theme="prism"] .mh-prism-mesh,
html[data-theme="prism"] .mh-prism-shimmer,
html[data-theme="prism"] .mh-prism-rays {
  opacity: 1;
}

html[data-theme="prism"] body {
  background: #06050c;
}

html[data-theme="prism"] .pool-card-glow {
  display: block;
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--prism-angle),
    rgba(168, 85, 247, 0.35),
    rgba(34, 211, 238, 0.25),
    rgba(244, 114, 182, 0.3),
    rgba(52, 211, 153, 0.2),
    rgba(168, 85, 247, 0.35)
  );
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

html[data-theme="prism"] .pool-card:hover .pool-card-glow {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="prism"] {
    animation: none;
  }

  html[data-theme="prism"] .mh-prism-mesh,
  html[data-theme="prism"] .mh-prism-rays {
    display: none;
  }

  html[data-theme="prism"] .hero--brand::after,
  html[data-theme="prism"] .pool-card::after {
    animation: none !important;
  }
}