/* Hypernova — FX layers, cursor, ambient motion */

.mh-hypernova-canvas {
  position: fixed;
  inset: 0;
  z-index: -5;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

.mh-hypernova-aurora {
  position: fixed;
  inset: -20%;
  z-index: -4;
  pointer-events: none;
  opacity: 0;
  background:
    conic-gradient(from 0deg at 30% 20%, rgba(0, 240, 255, 0.14), transparent 35%, rgba(255, 45, 149, 0.12), transparent 65%, rgba(124, 58, 237, 0.1)),
    radial-gradient(ellipse 80% 50% at 70% 80%, rgba(255, 214, 10, 0.06), transparent 55%);
  filter: blur(48px) saturate(1.4);
  animation: hn-aurora-spin 28s linear infinite;
  transition: opacity 1s ease;
}

.mh-hypernova-grid {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 20%, transparent 75%);
  transition: opacity 1s ease;
}

.mh-hypernova-noise {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  transition: opacity 0.8s ease;
}

.mh-hypernova-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 100% 90% at 50% -20%, rgba(0, 240, 255, 0.08), transparent 50%),
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(0, 0, 0, 0.85), transparent 45%);
  transition: opacity 1s ease;
}

.mh-hypernova-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 1px solid rgba(0, 240, 255, 0.55);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.25), inset 0 0 12px rgba(255, 45, 149, 0.15);
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.35s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease;
  mix-blend-mode: screen;
}

.mh-hypernova-cursor::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #00f0ff;
}

.mh-hypernova-cursor--active {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-color: rgba(255, 45, 149, 0.7);
}

.mh-hypernova-sweep {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

.mh-hypernova-sweep::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 40%;
  height: 180%;
  background: linear-gradient(105deg, transparent 40%, rgba(0, 240, 255, 0.06) 50%, transparent 60%);
  transform: skewX(-12deg);
  animation: hn-sweep 9s ease-in-out infinite;
}

/* Second canvas — flowing warp lines */
.mh-hypernova-warp {
  position: fixed;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 1s ease;
}

/* Chromatic aberration veil (subtle full-screen) */
.mh-hypernova-chroma {
  position: fixed;
  inset: 0;
  z-index: 9995;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--hn-chroma-x, 50%) var(--hn-chroma-y, 40%), rgba(255, 45, 149, 0.04), transparent 42%),
    radial-gradient(circle at calc(var(--hn-chroma-x, 50%) + 3%) calc(var(--hn-chroma-y, 40%) + 2%), rgba(0, 240, 255, 0.035), transparent 38%);
  transition: opacity 0.8s ease;
}

/* Floating ambient flares */
.mh-hypernova-flares {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 1s ease;
}

.mh-hypernova-flare {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  animation: hn-flare-drift 18s ease-in-out infinite;
}

.mh-hypernova-flare--a {
  width: 280px;
  height: 280px;
  top: 8%;
  left: -4%;
  background: rgba(0, 240, 255, 0.14);
}

.mh-hypernova-flare--b {
  width: 220px;
  height: 220px;
  top: 55%;
  right: -6%;
  background: rgba(255, 45, 149, 0.12);
  animation-delay: -6s;
}

.mh-hypernova-flare--c {
  width: 180px;
  height: 180px;
  bottom: 10%;
  left: 35%;
  background: rgba(124, 58, 237, 0.14);
  animation-delay: -12s;
}

.mh-hypernova-flare--d {
  width: 140px;
  height: 140px;
  top: 30%;
  right: 28%;
  background: rgba(255, 214, 10, 0.08);
  animation-delay: -9s;
}

/* Cursor trail dots */
.mh-hypernova-trail {
  position: fixed;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  background: rgba(0, 240, 255, 0.7);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.9);
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.15s;
}

html[data-theme="hypernova"] .mh-hypernova-warp,
html[data-theme="hypernova"] .mh-hypernova-chroma,
html[data-theme="hypernova"] .mh-hypernova-flares {
  opacity: 1;
}

html[data-theme="hypernova"] .mh-hypernova-chroma {
  opacity: 0.9;
}

html[data-theme="hypernova"] .mh-starfield,
html[data-theme="hypernova"] .mh-vignette,
html[data-theme="hypernova"] .mh-scanlines,
html[data-theme="hypernova"] .mh-bg,
html[data-theme="hypernova"] .mh-grid,
html[data-theme="hypernova"] .mh-pixel-field,
html[data-theme="hypernova"] .mh-arcade-marquee,
html[data-theme="hypernova"] .mh-obsidian-mesh,
html[data-theme="hypernova"] .mh-obsidian-vignette,
html[data-theme="hypernova"] .mh-obsidian-grain,
html[data-theme="hypernova"] .mh-obsidian-shards,
html[data-theme="hypernova"] .mh-neotokyo-rain,
html[data-theme="hypernova"] .mh-neotokyo-glow,
html[data-theme="hypernova"] .mh-neotokyo-scan,
html[data-theme="hypernova"] .mh-prism-mesh,
html[data-theme="hypernova"] .mh-prism-shimmer,
html[data-theme="hypernova"] .mh-prism-rays {
  opacity: 0 !important;
  visibility: hidden;
}

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

html[data-theme="hypernova"] .mh-hypernova-canvas,
html[data-theme="hypernova"] .mh-hypernova-aurora,
html[data-theme="hypernova"] .mh-hypernova-grid,
html[data-theme="hypernova"] .mh-hypernova-vignette,
html[data-theme="hypernova"] .mh-hypernova-sweep {
  opacity: 1;
}

html[data-theme="hypernova"] .mh-hypernova-noise {
  opacity: 0.045;
}

html[data-theme="hypernova"].hn-cursor-on .mh-hypernova-cursor {
  opacity: 1;
}

html[data-theme="hypernova"] {
  color-scheme: dark;
}

html[data-theme="hypernova"] body {
  background: #030508;
  cursor: none;
}

html[data-theme="hypernova"] a,
html[data-theme="hypernova"] button,
html[data-theme="hypernova"] input,
html[data-theme="hypernova"] select,
html[data-theme="hypernova"] label.nav-block-alerts {
  cursor: none;
}

@keyframes hn-aurora-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hn-sweep {
  0%,
  100% {
    transform: translateX(-120%) skewX(-12deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  45% {
    transform: translateX(320%) skewX(-12deg);
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
}

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

@keyframes hn-pulse-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.35));
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(255, 45, 149, 0.45));
  }
}

@keyframes hn-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes hn-shimmer-text {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes hn-hero-scan {
  0%,
  100% {
    top: 12%;
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  50% {
    top: 88%;
  }
  92% {
    opacity: 0.9;
  }
}

@keyframes hn-glitch-skew {
  0% {
    transform: skew(0deg);
  }
  25% {
    transform: skew(-2deg);
  }
  75% {
    transform: skew(2deg);
  }
  100% {
    transform: skew(0deg);
  }
}

@keyframes hn-flare-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(28px, -22px) scale(1.08);
  }
  66% {
    transform: translate(-18px, 16px) scale(0.94);
  }
}

.hn-reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hn-reveal--in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="hypernova"] body,
  html[data-theme="hypernova"] a,
  html[data-theme="hypernova"] button,
  html[data-theme="hypernova"] input,
  html[data-theme="hypernova"] select {
    cursor: auto;
  }

  html[data-theme="hypernova"] .mh-hypernova-cursor {
    display: none !important;
  }

  html[data-theme="hypernova"] .mh-hypernova-aurora,
  html[data-theme="hypernova"] .mh-hypernova-sweep::before,
  html[data-theme="hypernova"] .mh-hypernova-flare,
  html[data-theme="hypernova"] .hero__visual .hn-hero-scan {
    animation: none !important;
  }

  html[data-theme="hypernova"] .mh-hypernova-trail {
    display: none !important;
  }

  html[data-theme="hypernova"] .mh-hypernova-warp {
    display: none !important;
  }

  .hn-reveal {
    opacity: 1;
    transform: none;
  }
}

@media (pointer: coarse) {
  html[data-theme="hypernova"] body,
  html[data-theme="hypernova"] a,
  html[data-theme="hypernova"] button,
  html[data-theme="hypernova"] input,
  html[data-theme="hypernova"] select {
    cursor: auto;
  }

  html[data-theme="hypernova"] .mh-hypernova-cursor {
    display: none !important;
  }
}