/* =========================================================================
   ONENEO — theme: COSMIC  (variant 2)
   Maximal cosmic spectacle: deeper void, bigger type, more bloom, the aurora
   hero shows through a lighter scrim. Layers on top of styles.css.
   ========================================================================= */

body[data-variant="cosmic"] {
  --bg: #000000;
  --surface: #07070D;
  --surface-2: #0F0F18;
  --r: 20px;
}

/* deep-space starfield behind everything */
body[data-variant="cosmic"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(212,144,255,0.5), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(106,166,255,0.5), transparent),
    radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,0.35), transparent);
  background-repeat: repeat; background-size: 380px 380px; opacity: 0.6;
}

/* let the aurora hero breathe — lighter scrim, taller, bigger wordmark */
body[data-variant="cosmic"] .hero { min-height: 100svh; }
body[data-variant="cosmic"] .hero__field::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 35%, transparent) 46%, transparent 82%),
    linear-gradient(180deg, transparent 52%, var(--bg) 100%);
}
body[data-variant="cosmic"] .hero__wordmark { font-size: clamp(3.4rem, 15vw, 11rem); }
/* NEO — full-spectrum morph + living glow, à la me.oneneo.app "coding".
   Two non-harmonic loops: a saturated rainbow drifts across the letters while
   a slow hue-rotation cycles the whole wheel; the drop-shadow sits first in the
   filter so the glow rainbows along with the text. Reads as constant shimmer. */
body[data-variant="cosmic"] .hero__wordmark .spectrum-text {
  background-image: linear-gradient(100deg,
    #ff5d5d 0%, #ff9e3d 12%, #ffe24b 24%, #5dff8b 38%, #2ee6a6 50%,
    #46c9ff 62%, #6f7dff 76%, #c46bff 88%, #ff5db0 100%);
  background-size: 240% 100%;
  animation: neoFlow 12s ease-in-out infinite alternate,
             neoHue 18s linear infinite;
  will-change: background-position, filter;
}
@keyframes neoFlow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@keyframes neoHue {
  from { filter: drop-shadow(0 0 30px rgba(212,144,255,0.55)) hue-rotate(0deg); }
  to   { filter: drop-shadow(0 0 34px rgba(212,144,255,0.55)) hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-variant="cosmic"] .hero__wordmark .spectrum-text {
    animation: none; background-position: 50% 50%;
    filter: drop-shadow(0 0 22px rgba(212,144,255,0.45));
  }
}
body[data-variant="cosmic"] .hero__title { font-size: clamp(1.9rem, 5vw, 3.6rem); }
body[data-variant="cosmic"] .section__title { font-size: clamp(2.1rem, 5.2vw, 3.8rem); }

/* heavier bloom on the work + thread + stats — everything emits light */
body[data-variant="cosmic"] .work-card { background: color-mix(in srgb, var(--surface) 80%, #000); }
body[data-variant="cosmic"] .work-card::before { height: 4px; opacity: 1; box-shadow: 0 0 28px var(--hue), 0 0 60px var(--hue); }
body[data-variant="cosmic"] .work-card:hover { box-shadow: 0 30px 90px -30px color-mix(in srgb, var(--hue) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--hue) 45%, transparent); }
body[data-variant="cosmic"] .thread__cell::after { box-shadow: 0 0 26px var(--hue), 0 0 50px var(--hue); height: 4px; }
body[data-variant="cosmic"] .stat__num { text-shadow: 0 0 40px color-mix(in srgb, var(--hue) 45%, transparent); }
body[data-variant="cosmic"] .caps__k { text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 40%, transparent); }