/* ============================================================
   PicoVerse — "The Instrument Awakens"
   Cosmic authority · gravity · WebGL nebula · cinematic intro
   ============================================================ */

:root {
  --bg-0: #070310;
  --bg-1: #120825;
  --bg-2: #1a0b2e;
  --brand: #7a4d8c;
  --brand-soft: #9a6cc4;
  --magenta: #c2557a;
  --blue: #5a6dc2;
  --white: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.68);
  --text-faint: rgba(255, 255, 255, 0.4);

  --font-display: "Clash Display", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);

  --space-2: 8px; --space-3: 14px; --space-4: 22px; --space-5: 34px; --space-6: 52px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--white);
  overflow: hidden;
  position: relative;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}

/* ============================================================
   BACKGROUND LAYERS
   ============================================================ */
#nebula {
  position: fixed; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
}

/* CSS fallback nebula — only when WebGL unavailable */
.nebula-fallback { display: none; }
body.no-webgl .nebula-fallback {
  display: block; position: fixed; inset: -20%; z-index: 0;
  filter: blur(60px) saturate(135%); pointer-events: none;
}
body.gl-active .nebula-fallback { display: none; }
.nebula-fallback .blob { position: absolute; border-radius: 50%; opacity: 0.55; mix-blend-mode: screen; }
.blob--1 { width: 60vw; height: 60vw; top: -8%; left: -6%; background: radial-gradient(circle at 30% 30%, var(--brand), transparent 65%); animation: drift1 26s var(--ease-out) infinite alternate; }
.blob--2 { width: 55vw; height: 55vw; bottom: -12%; right: -8%; background: radial-gradient(circle at 60% 40%, var(--magenta), transparent 62%); animation: drift2 32s var(--ease-out) infinite alternate; }
.blob--3 { width: 48vw; height: 48vw; top: 28%; right: 12%; background: radial-gradient(circle at 50% 50%, var(--blue), transparent 60%); animation: drift3 38s var(--ease-out) infinite alternate; }
.blob--4 { width: 40vw; height: 40vw; bottom: 6%; left: 18%; background: radial-gradient(circle at 40% 60%, var(--brand-soft), transparent 60%); animation: drift4 30s var(--ease-out) infinite alternate; }
@keyframes drift1 { to { transform: translate(8vw, 6vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-7vw, -5vh) scale(0.95); } }
@keyframes drift3 { to { transform: translate(-6vw, 7vh) scale(1.12); } }
@keyframes drift4 { to { transform: translate(5vw, -6vh) scale(1.1); } }

#starfield { position: fixed; inset: 0; z-index: 1; display: block; pointer-events: none; }

/* cursor light — illuminates the field */
.cursor-light {
  position: fixed; left: 0; top: 0; z-index: 2; width: 480px; height: 480px;
  margin: -240px 0 0 -240px;
  transform: translate(var(--cx, -999px), var(--cy, -999px));
  background: radial-gradient(circle, rgba(154,108,196,0.10) 0%, transparent 60%);
  mix-blend-mode: soft-light; pointer-events: none; will-change: transform;
}

.uplight {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 50% 42%, rgba(122,77,140,0.12), transparent 72%);
}
.vignette {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 68% at 50% 42%, transparent 40%, rgba(3,1,8,0.62) 100%),
    radial-gradient(ellipse 90% 90% at 30% 20%, transparent 60%, rgba(3,1,8,0.4) 100%);
}
.grain {
  position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0.05;
  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");
  mix-blend-mode: overlay; animation: grainShift 0.5s steps(3) infinite;
}
@keyframes grainShift { 0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} }

/* luminous inset frame */
.frame {
  position: fixed; inset: 14px; z-index: 5; pointer-events: none;
  border: 1px solid rgba(255,255,255,0.06); border-radius: 18px;
  box-shadow: inset 0 0 80px rgba(122,77,140,0.06);
}

/* ============================================================
   INTRO VOID
   ============================================================ */
.void {
  position: fixed; inset: 0; z-index: 40;
  background: radial-gradient(ellipse at 50% 42%, #0b0518 0%, #050109 70%);
  display: grid; place-items: center;
  transition: opacity 1.1s var(--ease-soft);
  cursor: pointer;
}
.void__seed {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px 3px rgba(255,255,255,0.7), 0 0 40px 8px rgba(154,108,196,0.5);
  animation: seedBreath 2.2s ease-in-out infinite;
}
@keyframes seedBreath {
  0%,100% { transform: scale(0.7); opacity: 0.6; }
  50%     { transform: scale(1.25); opacity: 1; }
}
body.ignite .void { opacity: 0; pointer-events: none; }

/* ============================================================
   STAGE / HERO
   ============================================================ */
.stage { position: relative; z-index: 10; min-height: 100svh; display: grid; place-items: center; padding: 6vh 24px; perspective: 1200px; }

.hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 660px; width: 100%;
  transform: translate3d(var(--px,0), var(--py,0), 0);
  transition: transform 0.5s var(--ease-out);
}

/* ---------- Emblem: the gravitational instrument ---------- */
.emblem {
  position: relative;
  width: clamp(190px, 25vw, 300px);
  height: clamp(190px, 25vw, 300px);
  display: grid; place-items: center;
  margin-bottom: var(--space-6);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition: transform 0.6s var(--ease-out);
  opacity: 0;
}
body.ignite .emblem { opacity: 1; transition: opacity 0.8s var(--ease-out), transform 0.6s var(--ease-out); }

.emblem > * { grid-area: 1 / 1; }

/* shockwave ring on ignition */
.emblem__shock {
  width: 120%; height: 120%; border-radius: 50%;
  border: 1px solid rgba(194,120,200,0.6); opacity: 0;
  justify-self: center; align-self: center;
}
body.ignite .emblem__shock { animation: shock 1.3s var(--ease-out) 0.1s forwards; }
@keyframes shock {
  0%   { transform: scale(0.2); opacity: 0.9; border-width: 2px; }
  100% { transform: scale(2.6); opacity: 0; border-width: 0.5px; }
}

/* breathing bloom */
.emblem__glow {
  width: 165%; height: 165%; border-radius: 50%;
  background: radial-gradient(circle, rgba(154,108,196,0.55) 0%, rgba(122,77,140,0.22) 36%, transparent 70%);
  filter: blur(14px);
  animation: glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{opacity:.5;transform:scale(.9)} 50%{opacity:.95;transform:scale(1.1)} }

/* conic singularity core (the light source) */
.emblem__core {
  width: 62%; height: 62%; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--magenta), var(--brand-soft), var(--blue), var(--magenta));
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 64%);
          mask: radial-gradient(circle, #000 0%, transparent 64%);
  filter: blur(6px); mix-blend-mode: screen;
  animation: spin 22s linear infinite;
  transform: scale(0);
}
body.ignite .emblem__core { animation: spin 22s linear infinite, coreIgnite 1s var(--ease-out) forwards; }
@keyframes coreIgnite { 0%{transform:scale(0);filter:blur(2px) brightness(2.4)} 60%{filter:blur(6px) brightness(1.4)} 100%{transform:scale(1);filter:blur(6px) brightness(1)} }

/* faint god-rays */
.emblem__rays {
  width: 150%; height: 150%; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255,255,255,0.04) 6deg, transparent 12deg,
    transparent 60deg, rgba(255,255,255,0.04) 66deg, transparent 72deg,
    transparent 120deg, rgba(255,255,255,0.04) 126deg, transparent 132deg,
    transparent 180deg, rgba(255,255,255,0.04) 186deg, transparent 192deg,
    transparent 240deg, rgba(255,255,255,0.04) 246deg, transparent 252deg,
    transparent 300deg, rgba(255,255,255,0.04) 306deg, transparent 312deg);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 55%, transparent 85%);
          mask: radial-gradient(circle, transparent 30%, #000 55%, transparent 85%);
  animation: spin 60s linear infinite;
}

/* depth spiral rings */
.ring { width: 118%; height: 118%; overflow: visible; }
.ring--far  { transform: scale(1.16); filter: blur(2.5px) drop-shadow(0 0 4px rgba(90,109,194,0.5)); opacity: 0.2; animation: spin 90s linear infinite; }
.ring--mid  { filter: drop-shadow(0 0 6px rgba(194,85,122,0.55)); animation: spin 48s linear infinite; }
.ring--near { transform: scale(0.82); mix-blend-mode: screen; opacity: 0.55; animation: spinRev 37s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }
/* preserve the per-ring base scale while spinning */
.ring--far  { animation-name: spinFar; }  @keyframes spinFar  { from{transform:scale(1.16) rotate(0)} to{transform:scale(1.16) rotate(360deg)} }
.ring--near { animation-name: spinNear; } @keyframes spinNear { from{transform:scale(0.82) rotate(0)} to{transform:scale(0.82) rotate(-360deg)} }

/* white brand icon */
.emblem__icon {
  width: 54%; height: 54%;
  animation: spinRevSlow 64s linear infinite;
  filter: drop-shadow(0 0 18px rgba(255,255,255,0.4)) drop-shadow(0 0 40px rgba(154,108,196,0.5));
}
.emblem__icon svg { width: 100%; height: 100%; display: block; }
@keyframes spinRevSlow { to { transform: rotate(-360deg); } }

/* emblem leans in / energizes on form focus */
.emblem.is-attentive .emblem__core { animation-duration: 12s, 1s; }
.emblem.is-attentive .ring--mid { animation-duration: 30s; }
.emblem.is-attentive .emblem__glow { animation-duration: 3s; }

/* ---------- Wordmark ---------- */
.wordmark {
  width: min(290px, 66vw); height: auto;
  filter: drop-shadow(0 4px 28px rgba(154,108,196,0.45));
  opacity: 0; clip-path: inset(0 100% 0 0);
}
body.reveal .wordmark { animation: precipitate 1.3s var(--ease-out) forwards; }
@keyframes precipitate {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(10px) scale(1.04); filter: blur(8px) drop-shadow(0 4px 28px rgba(154,108,196,0.45)); }
  60%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0) scale(1); filter: blur(0) drop-shadow(0 4px 28px rgba(154,108,196,0.45)); }
}

/* ---------- Badge + telemetry ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 9px; margin-top: var(--space-5);
  padding: 7px 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-top-color: rgba(255,255,255,0.16);
  border-radius: 100px; backdrop-filter: blur(8px);
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 0 rgba(194,85,122,0.7); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0%{box-shadow:0 0 0 0 rgba(194,85,122,.65)} 70%{box-shadow:0 0 0 9px rgba(194,85,122,0)} 100%{box-shadow:0 0 0 0 rgba(194,85,122,0)} }
.badge__sep { color: var(--text-faint); }
.badge__telemetry { color: var(--brand-soft); letter-spacing: 0.12em; }

/* ---------- Tagline (clean authority, no decorative gradient) ---------- */
.tagline {
  margin-top: var(--space-4);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, 5.2vw, 2.9rem); line-height: 1.1;
  letter-spacing: -0.02em; color: #fff;
  text-shadow: 0 2px 40px rgba(154,108,196,0.35);
}
.subtitle {
  margin-top: var(--space-3); font-size: clamp(0.95rem, 2.6vw, 1.12rem);
  font-weight: 300; color: var(--text-dim); max-width: 440px;
}

/* ---------- Signal form ---------- */
.notify { margin-top: var(--space-6); width: 100%; max-width: 440px; }
.notify__field {
  display: flex; gap: 8px; padding: 6px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-top-color: rgba(255,255,255,0.18);
  border-radius: 100px; backdrop-filter: blur(10px);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-out);
}
.notify__field:focus-within {
  border-color: rgba(154,108,196,0.7);
  box-shadow: 0 0 0 4px rgba(122,77,140,0.16), 0 10px 44px rgba(122,77,140,0.28);
  transform: translateY(-1px);
}
.notify__field input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: #fff; font-family: var(--font-body); font-size: 0.98rem; padding: 0 14px 0 18px;
}
.notify__field input::placeholder { color: var(--text-faint); }
.notify__btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 12px 22px; font-family: var(--font-display); font-size: 0.92rem; font-weight: 600;
  color: #fff; border: none; border-radius: 100px; cursor: pointer;
  background: linear-gradient(120deg, var(--brand) 0%, var(--magenta) 60%, var(--blue) 130%);
  background-size: 200% 100%; background-position: 0% 50%;
  box-shadow: 0 6px 24px rgba(194,85,122,0.35);
  transition: transform 0.2s var(--ease-out), box-shadow 0.3s, background-position 0.6s var(--ease-out);
  animation: ctaShift 6s ease-in-out infinite;
}
@keyframes ctaShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.notify__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(194,85,122,0.5); }
.notify__btn:active { transform: translateY(0); }
.notify__btn svg { transition: transform 0.25s var(--ease-out); }
.notify__btn:hover svg { transform: translateX(3px); }
.notify__hint { margin-top: var(--space-3); font-size: 0.8rem; color: var(--text-faint); transition: color 0.3s; }
.notify.is-success .notify__hint { color: var(--brand-soft); font-weight: 500; }
.notify.is-error .notify__field { border-color: rgba(194,85,122,0.85); }
.notify.is-error .notify__hint { color: #e58aa6; }

/* ---------- Language toggle (sliding pill + crossfade) ---------- */
.lang-toggle {
  position: fixed; top: 22px; right: 22px; z-index: 30;
  display: inline-flex; align-items: center; gap: 4px; padding: 6px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px; backdrop-filter: blur(10px); cursor: pointer;
}
.lang-pill {
  position: absolute; top: 6px; left: 6px; width: 30px; height: calc(100% - 12px);
  border-radius: 100px; background: rgba(255,255,255,0.12);
  transition: transform 0.32s var(--ease-out); transform: translateX(0);
}
.lang-pill.is-en { transform: translateX(34px); }
.lang-opt { position: relative; z-index: 1; width: 30px; text-align: center; color: var(--text-faint); transition: color 0.3s; }
.lang-opt.is-active { color: #fff; }

.skip-intro {
  position: fixed; bottom: 22px; right: 24px; z-index: 45;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-faint); background: none; border: none; cursor: pointer;
  transition: color 0.3s, opacity 0.6s; opacity: 0;
}
body.intro .skip-intro, body.detect .skip-intro { opacity: 1; }
body.awake .skip-intro { opacity: 0; pointer-events: none; }
.skip-intro:hover { color: var(--white); }

/* ---------- Footer ---------- */
.footer {
  position: fixed; bottom: 18px; left: 0; right: 0; z-index: 11; text-align: center;
  font-size: 0.74rem; letter-spacing: 0.05em; color: var(--text-faint); pointer-events: none;
  opacity: 0;
}
body.awake .footer { animation: rise 0.9s var(--ease-out) 0.5s forwards; }

/* ---------- Language crossfade ---------- */
.lang-swapping .badge span, .lang-swapping .tagline, .lang-swapping .subtitle,
.lang-swapping .notify__hint, .lang-swapping .notify__btn span {
  opacity: 0; filter: blur(3px); transition: opacity 0.18s, filter 0.18s;
}

/* ============================================================
   STAGGERED REVEAL (awake)
   ============================================================ */
.badge, .tagline, .subtitle, .notify { opacity: 0; }
body.awake .badge    { animation: rise 0.8s var(--ease-out) 0.05s forwards; }
body.awake .tagline  { animation: rise 0.9s var(--ease-out) 0.18s forwards; }
body.awake .subtitle { animation: rise 0.9s var(--ease-out) 0.32s forwards; }
body.awake .notify   { animation: rise 0.9s var(--ease-out) 0.5s forwards; }
@keyframes rise { from{opacity:0; transform:translateY(20px); filter:blur(6px)} to{opacity:1; transform:translateY(0); filter:blur(0)} }

/* ============================================================
   FOCUS-VISIBLE (a11y)
   ============================================================ */
:focus-visible { outline: none; }
.notify__btn:focus-visible, .lang-toggle:focus-visible, .skip-intro:focus-visible {
  box-shadow: 0 0 0 3px rgba(154,108,196,0.6), 0 0 0 6px rgba(122,77,140,0.25);
}
.notify__field:focus-within { outline: none; }
input:focus-visible { outline: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-height: 720px) {
  .emblem { width: clamp(160px, 22vh, 230px); height: clamp(160px, 22vh, 230px); margin-bottom: var(--space-5); }
}
@media (max-width: 540px) {
  .stage { padding: 4vh 22px; align-items: start; padding-top: 8vh; }
  .emblem { width: clamp(140px, 42vw, 184px); height: clamp(140px, 42vw, 184px); margin-bottom: var(--space-4); }
  .wordmark { width: min(240px, 62vw); }
  .badge { margin-top: var(--space-4); }
  .tagline { margin-top: var(--space-3); }
  .subtitle { margin-top: 10px; }
  .notify { margin-top: var(--space-4); }
  .notify__field { flex-direction: column; gap: 8px; padding: 8px; border-radius: 22px; }
  .notify__field input { padding: 12px 16px; text-align: center; }
  .notify__btn { justify-content: center; padding: 13px; border-radius: 16px; }
  .frame { inset: 8px; border-radius: 14px; }
  .lang-toggle { top: 16px; right: 16px; }
  .footer { font-size: 0.68rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .blob, .emblem__glow, .emblem__core, .emblem__rays, .ring, .emblem__icon,
  .badge__dot, .grain, .notify__btn, .void__seed { animation: none !important; }
  .void { display: none !important; }
  .emblem, .wordmark, .badge, .tagline, .subtitle, .notify, .footer {
    opacity: 1 !important; animation: none !important; transform: none !important;
    filter: none; clip-path: none !important;
  }
  .wordmark { filter: drop-shadow(0 4px 28px rgba(154,108,196,0.45)); }
  .emblem__icon { filter: drop-shadow(0 0 18px rgba(255,255,255,0.4)) drop-shadow(0 0 40px rgba(154,108,196,0.5)); }
  .emblem__core { transform: scale(1); }
}