/* Ported from Hero.astro + Header.astro scoped styles (now global) */
/* ===== Header ===== */
#header-inner.scrolled {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-line);
  }
  #header-inner {
    border: 1px solid transparent;
  }

  /* Over a dark full-bleed hero: light nav text until the header condenses. */
  #site-header.hero-dark #header-inner:not(.scrolled) nav a {
    color: rgba(255, 255, 255, 0.72);
  }
  #site-header.hero-dark #header-inner:not(.scrolled) nav a:hover,
  #site-header.hero-dark #header-inner:not(.scrolled) nav a[aria-current='page'] {
    color: #fff;
  }
  #site-header.hero-dark #header-inner:not(.scrolled) #menu-toggle {
    color: #fff;
  }

/* ===== Hero ===== */
.hero-canvas {
    opacity: 0;
    transition: opacity 1s ease;
  }
  .hero-canvas.ready {
    opacity: 1;
  }
  .hero-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    filter: blur(55px) saturate(1.3);
  }
  .g {
    position: absolute;
    border-radius: 50%;
    opacity: 0.7;
    mix-blend-mode: screen;
    will-change: transform;
  }
  .g1 {
    width: 60vw; height: 60vw; left: -6%; top: -14%;
    background: radial-gradient(circle, rgba(236, 26, 140, 0.85), transparent 62%);
    animation: g1 22s ease-in-out infinite alternate;
  }
  .g2 {
    width: 56vw; height: 56vw; right: -8%; top: -8%;
    background: radial-gradient(circle, rgba(79, 91, 224, 0.8), transparent 62%);
    animation: g2 27s ease-in-out infinite alternate;
  }
  .g3 {
    width: 64vw; height: 64vw; left: 18%; bottom: -30%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.82), transparent 62%);
    animation: g3 24s ease-in-out infinite alternate;
  }
  @keyframes g1 { to { transform: translate(16%, 12%) scale(1.22); } }
  @keyframes g2 { to { transform: translate(-15%, 10%) scale(1.12); } }
  @keyframes g3 { to { transform: translate(12%, -14%) scale(1.26); } }

  /* Mobile/tablet never run the WebGL plasma, so the fallback IS the hero. A
     full-viewport blur over animated orbs is an expensive first paint on a
     throttled CPU (hurts LCP), so below the desktop breakpoint we bake a cheap,
     static plasma gradient — no blur filter, no animation — that paints instantly. */
  @media (max-width: 1023px) {
    .hero-fallback {
      filter: none;
      background:
        radial-gradient(52% 55% at 20% 16%, rgba(236, 26, 140, 0.4), transparent 60%),
        radial-gradient(55% 58% at 84% 12%, rgba(79, 91, 224, 0.4), transparent 62%),
        radial-gradient(62% 62% at 50% 96%, rgba(124, 58, 237, 0.42), transparent 64%),
        #0a0912;
    }
    .hero-fallback .g { display: none; }
  }

  .hero-veil {
    background:
      radial-gradient(62% 48% at 50% 46%, rgba(8, 7, 13, 0.36), transparent 72%),
      radial-gradient(130% 120% at 50% 38%, transparent 42%, rgba(8, 7, 13, 0.64) 100%),
      linear-gradient(180deg, rgba(8, 7, 13, 0.34) 0%, transparent 18%);
  }
  #hero h1,
  #hero p {
    text-shadow: 0 1px 30px rgba(0, 0, 0, 0.38);
  }
  #hero .gradient-text {
    background-image: linear-gradient(100deg, #ff5cae, #c08cff 48%, #74a6ff);
  }
  .hero-noise {
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }