/* PhantomForce — the void. A living cyber-AI entity, not a website. */

:root { --neon: #41ffa1; --neon-2: #1ef0ff; --risk: #ff4d63; --ink: #eafff2; --dim: #5f8f77; }
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; width: 100%; background: #02060a; color: var(--ink);
  font-family: "Space Grotesk", system-ui, sans-serif; overflow: hidden; overscroll-behavior: none;
}
body { position: fixed; inset: 0; }
button, input { font: inherit; color: inherit; }

.void-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2.4s ease; }
.void-canvas.lit { opacity: 1; }
.void-fallback {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 40% at 50% 44%, rgba(65, 255, 161, 0.16), transparent 60%),
    radial-gradient(70% 70% at 50% 50%, rgba(30, 240, 255, 0.05), transparent 60%), #02060a;
  animation: breathe 7s ease-in-out infinite;
}
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.72) 100%); }
@keyframes breathe { 50% { opacity: 0.78; } }

/* ---------- threat radar: risks a business faces ---------- */
.riskfield { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.riskfield::before {
  /* faint sweep grid */
  content: ""; position: absolute; inset: -20%;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 58px, rgba(255, 77, 99, 0.04) 58px 59px);
  opacity: 0.5;
}
.risk-ping {
  position: absolute; display: flex; align-items: center; gap: 8px; transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 0.8s ease;
}
.risk-ping.on { opacity: 0.62; }
.risk-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--risk);
  box-shadow: 0 0 10px var(--risk), 0 0 24px rgba(255, 77, 99, 0.6);
  animation: ripple 2.2s ease-out infinite;
}
.risk-label { font: 500 10px "DM Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #ff97a4; white-space: nowrap; }
/* the everyday flood: realistic notification cards (face, app, a real question) */
.risk-ping.notif {
  display: flex; align-items: center; gap: 10px; max-width: 262px;
  padding: 8px 14px 8px 8px; border-radius: 16px;
  background: rgba(7, 18, 26, 0.78); border: 1px solid rgba(30, 240, 255, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(30, 240, 255, 0.12);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.risk-ping.notif.on { opacity: 0.92; }
.notif-av {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: rgba(30, 240, 255, 0.12);
  box-shadow: 0 0 10px rgba(30, 240, 255, 0.35); border: 1px solid rgba(30, 240, 255, 0.4);
}
.notif-av-blank { background: radial-gradient(circle at 50% 40%, rgba(30, 240, 255, 0.3), rgba(30, 240, 255, 0.08)); }
.notif-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; gap: 1px; }
.notif-name { font: 600 12.5px "Space Grotesk", sans-serif; color: #eaffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-app { font: 600 8.5px "DM Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #7fe6ff; }
.notif-msg { font: 400 12px "Space Grotesk", sans-serif; color: #cdeeff; max-width: 185px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .risk-ping.notif { display: none; } }
@keyframes ripple { 0% { box-shadow: 0 0 10px var(--risk), 0 0 0 0 rgba(255, 77, 99, 0.5); } 100% { box-shadow: 0 0 10px var(--risk), 0 0 0 16px rgba(255, 77, 99, 0); } }

.presence {
  position: fixed; inset: 0; z-index: 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: clamp(12px, 2.2vh, 22px);
  padding: clamp(28px, 6vh, 70px) 22px clamp(28px, 6vh, 70px); text-align: center; pointer-events: none;
  transition: padding 0.5s ease;
}
.presence > * { pointer-events: auto; }

/* the phantom is now the 3D WebGL entity (void.js), rendered on .void-canvas */

.wordmark {
  margin: 0; font: 500 clamp(11px, 1.5vw, 14px) "DM Mono", monospace;
  letter-spacing: 0.62em; text-indent: 0.62em; color: var(--dim);
  text-shadow: 0 0 18px rgba(65, 255, 161, 0.3); animation: pulseDim 5s ease-in-out infinite;
}
@keyframes pulseDim { 50% { opacity: 0.55; } }

.say { max-width: 760px; min-height: 2.6em; display: grid; place-items: center; }
.say-line {
  margin: 0; font-weight: 400; font-size: clamp(22px, 4.4vw, 46px); line-height: 1.18; letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff, #b8ffd8 60%, #41ffa1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(65, 255, 161, 0.12);
  animation: emerge 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.say-line.user { font-size: clamp(16px, 2.6vw, 24px); background: none; -webkit-text-fill-color: var(--dim); color: var(--dim); opacity: 0.85; }
.say-line.thinking { background: none; -webkit-text-fill-color: var(--neon); color: var(--neon); letter-spacing: 0.4em; }
@keyframes emerge { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

.orbits { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; max-width: 660px; min-height: 44px; }
.orbits button {
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(65, 255, 161, 0.3); background: rgba(65, 255, 161, 0.05);
  font: 500 13px "DM Mono", monospace; letter-spacing: 0.03em; color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color 0.25s, background 0.25s, transform 0.18s, box-shadow 0.25s, color 0.2s;
  animation: pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.orbits button:hover { border-color: var(--neon); background: rgba(65, 255, 161, 0.14); transform: translateY(-2px); box-shadow: 0 0 24px rgba(65, 255, 161, 0.28); color: #fff; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }

.speak {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: min(540px, 90vw);
  padding: 13px 20px; border-radius: 999px; background: rgba(4, 12, 9, 0.5);
  border: 1px solid rgba(65, 255, 161, 0.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 36px rgba(65, 255, 161, 0.1), inset 0 0 22px rgba(65, 255, 161, 0.05);
  transition: border-color 0.3s, box-shadow 0.3s;
}
/* a gleam of light that sweeps AROUND the border (no spinning shape) */
@property --gleam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.speak::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 999px; padding: 1.6px;
  --gleam: 0deg;
  background: conic-gradient(from var(--gleam), rgba(65, 255, 161, 0) 0deg, #41ffa1 50deg, #1ef0ff 100deg, #d6ffec 140deg, rgba(65, 255, 161, 0) 220deg, rgba(65, 255, 161, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: gleamSweep 5s linear infinite; opacity: 0.85; pointer-events: none;
}
.speak:focus-within::before { animation-duration: 2.4s; opacity: 1; }
.speak > * { position: relative; z-index: 1; }
@keyframes gleamSweep { to { --gleam: 360deg; } }
.speak:focus-within { border-color: var(--neon); box-shadow: 0 0 56px rgba(65, 255, 161, 0.3); }
.speak-caret { color: var(--neon); font-size: 20px; text-shadow: 0 0 12px var(--neon); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.speak input { flex: 1; background: none; border: 0; outline: none; font-size: 16px; }
.speak input::placeholder { color: var(--dim); }

.summon {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 2px; padding: 13px 24px; border-radius: 999px;
  background: linear-gradient(120deg, var(--neon), #15d97f); color: #02140b;
  font: 600 12px "DM Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 0 36px rgba(65, 255, 161, 0.45); animation: emerge 0.8s ease both, summonPulse 2.6s ease-in-out 0.8s infinite;
}
@keyframes summonPulse { 50% { box-shadow: 0 0 56px rgba(65, 255, 161, 0.72); } }
.summon span { transition: transform 0.2s; }
.summon:hover span { transform: translateX(4px); }

.hint {
  position: fixed; left: 0; right: 0; bottom: 22px; z-index: 3; margin: 0; text-align: center;
  font: 400 11px "DM Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
  opacity: 0.6; pointer-events: none; transition: opacity 0.5s;
}
.hint.gone { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .void-fallback, .wordmark, .orbits button, .speak-caret, .say-line, .risk-dot, .riskfield::before { animation: none !important; }
  .void-canvas { display: none; }
}