/* ============================================================
   Proofpoint Oracle — orb + voice pill
   Orb and pill ported from jchowlabs.chat/playground.
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #1c2230;
  color: #e6e8ec;
  -webkit-font-smoothing: antialiased;
}

/* ── Stage: centers the orb + pill in the viewport ─────────── */
.stage {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
}

.demo-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Responsive orb size (blobs are % based, so they scale with it) */
.playground-orb-wrap {
  --orb: clamp(210px, 54vw, 275px);
  position: relative;
  width: var(--orb);
  height: var(--orb);
  margin-bottom: 0;
}

/* ── The orb ───────────────────────────────────────────────── */
.value-demo-orb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  background: #3460ae;
  pointer-events: none;
  box-shadow:
    inset 0 -32px 64px rgba(0, 0, 0, .32),
    inset 18px 18px 36px rgba(0, 0, 0, .1),
    0 24px 60px rgba(0, 0, 0, .22),
    0 8px 28px rgba(0, 0, 0, .16),
    0 2px 8px rgba(0, 0, 0, .08),
    0 0 0 .5px rgba(255, 255, 255, .07);
  animation: orb-breathe 4s ease-in-out infinite, orb-glow 4s ease-in-out infinite;
}

.orb-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}

.orb-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.orb-blob-1 {
  width: 140%; height: 140%; top: -38%; left: -22%;
  background: radial-gradient(ellipse at 45% 45%, rgba(148, 218, 255, .96) 0, rgba(72, 158, 220, .38) 32%, transparent 58%);
  filter: blur(30px);
  animation: orb-blob-1 6s ease-in-out infinite;
}
.orb-blob-2 {
  width: 110%; height: 110%; top: 32%; left: 22%;
  background: radial-gradient(ellipse at 50% 50%, rgba(72, 130, 230, .92) 0, rgba(90, 120, 210, .32) 38%, transparent 62%);
  filter: blur(26px);
  animation: orb-blob-2 4.5s ease-in-out infinite;
  animation-delay: -2.5s;
}
.orb-blob-3 {
  width: 92%; height: 92%; top: 2%; left: 24%;
  background: radial-gradient(ellipse at 48% 42%, rgba(180, 235, 255, .88) 0, rgba(120, 210, 250, .28) 38%, transparent 62%);
  filter: blur(28px);
  animation: orb-blob-3 7s ease-in-out infinite;
  animation-delay: -4s;
}
.orb-blob-4 {
  width: 74%; height: 74%; bottom: 0; right: -2%;
  background: radial-gradient(ellipse at 50% 60%, rgba(180, 182, 255, .72) 0, rgba(150, 145, 240, .24) 36%, transparent 60%);
  filter: blur(24px);
  animation: orb-blob-4 8s ease-in-out infinite;
  animation-delay: -6s;
}
.orb-blob-5 {
  width: 56%; height: 56%; top: 30%; left: 6%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 168, 158, .68) 0, rgba(0, 130, 122, .22) 36%, transparent 58%);
  filter: blur(16px);
  animation: orb-blob-5 3.5s ease-in-out infinite;
  animation-delay: -1s;
}

.orb-shine {
  position: absolute;
  width: 48%; height: 36%; top: 8%; left: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 38%, rgba(255, 255, 255, .13) 0, rgba(255, 255, 255, .04) 44%, transparent 68%);
  filter: blur(6px);
  pointer-events: none;
  animation: orb-shine-drift 8s ease-in-out infinite;
}

.orb-grain {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: overlay;
  opacity: .65;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.70' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: cover;
  pointer-events: none;
}

/* ── Orb keyframes ─────────────────────────────────────────── */
@keyframes orb-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
@keyframes orb-glow {
  0%, 100% {
    box-shadow: inset 0 -32px 64px rgba(0,0,0,.32), inset 18px 18px 36px rgba(0,0,0,.1), 0 24px 60px rgba(0,0,0,.22), 0 8px 28px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08), 0 0 0 .5px rgba(255,255,255,.07);
  }
  50% {
    box-shadow: inset 0 -32px 64px rgba(0,0,0,.32), inset 18px 18px 36px rgba(0,0,0,.1), 0 24px 60px rgba(0,0,0,.22), 0 8px 28px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08), 0 0 0 .5px rgba(255,255,255,.07), 0 0 10px 2px rgba(52,96,174,.12), 0 0 20px 4px rgba(80,140,220,.06);
  }
}
@keyframes orb-blob-1 {
  0% { transform: translate(0); }
  20% { transform: translate(22%, 34%); }
  45% { transform: translate(10%, 54%); }
  70% { transform: translate(-30%, 24%); }
  100% { transform: translate(0); }
}
@keyframes orb-blob-2 {
  0% { transform: translate(0) scale(1); }
  25% { transform: translate(-38%, -24%) scale(1.12); }
  55% { transform: translate(26%, -40%) scale(.88); }
  80% { transform: translate(34%, 18%) scale(1.08); }
  100% { transform: translate(0) scale(1); }
}
@keyframes orb-blob-3 {
  0% { transform: translate(0); }
  30% { transform: translate(-34%, 36%); }
  60% { transform: translate(38%, 10%); }
  85% { transform: translate(-12%, -38%); }
  100% { transform: translate(0); }
}
@keyframes orb-blob-4 {
  0% { transform: translate(0); }
  40% { transform: translate(18%, -30%); }
  70% { transform: translate(-26%, -14%); }
  100% { transform: translate(0); }
}
@keyframes orb-blob-5 {
  0% { transform: translate(0); }
  25% { transform: translate(30%, -20%); }
  55% { transform: translate(20%, 28%); }
  80% { transform: translate(-18%, 16%); }
  100% { transform: translate(0); }
}
@keyframes orb-shine-drift {
  0% { transform: translate(0) scale(1); opacity: 1; }
  30% { transform: translate(18%, 12%) scale(1.1); opacity: .7; }
  55% { transform: translate(30%, -8%) scale(.9); opacity: .85; }
  80% { transform: translate(8%, 22%) scale(1.05); opacity: .65; }
  100% { transform: translate(0) scale(1); opacity: 1; }
}

/* ── Call button: straddles the orb's bottom edge (activates the orb) ── */
.call-btn {
  margin-top: -30px;   /* pull up so the top half overlaps the orb */
  position: relative;
  z-index: 2;          /* sit above the orb */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .08);
  background: #4caf72;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: transform .18s ease, background .2s ease, color .2s ease;
  /* Reliable taps across devices */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.call-btn:hover {
  transform: scale(1.06);
}
.call-btn:active { transform: scale(0.97); }

.call-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

.call-icon {
  width: 24px;
  height: 24px;
  transition: transform .2s ease;
}

/* Spinner (hidden unless connecting) */
.call-spinner {
  display: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .45);
  border-top-color: #ffffff;
  animation: call-spin .7s linear infinite;
}

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

/* ── State: connecting — show spinner, hide phone ──────────── */
.call-btn[data-status="connecting"] {
  cursor: default;
}
.call-btn[data-status="connecting"] .call-icon { display: none; }
.call-btn[data-status="connecting"] .call-spinner { display: block; }

/* ── State: active (in call) — red, end-call icon ──────────── */
.call-btn[data-status="active"] {
  background: #e8564f;
  border-color: #e8564f;
  color: #ffffff;
}
.call-btn[data-status="active"] .call-icon {
  transform: rotate(135deg); /* upright phone → hang-up */
}
.call-btn[data-status="active"]:hover {
  transform: scale(1.06);
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .value-demo-orb,
  .orb-blob,
  .orb-shine {
    animation: none !important;
  }
}