/* ScaleForge — live call experience */

.stage {
  perspective: 1600px; perspective-origin: 50% 30%;
  flex: 1; display: flex; flex-direction: column; gap: 20px;
  padding: 22px clamp(14px, 3vw, 28px) 28px; min-height: 0;
  max-width: 1400px; width: 100%; margin: 0 auto;
}

.columns { display: grid; grid-template-columns: 420px 1fr; gap: 20px; min-height: 0; align-items: start; }
@media (max-width: 1080px) { .columns { grid-template-columns: 1fr; } }

.captured, .transcript { display: flex; flex-direction: column; min-height: 0; }
.captured { max-height: 460px; }
.transcript { min-height: 340px; }

/* ---------- entrance ---------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 34px, -220px) rotateX(14deg);
  transform-origin: 50% 100%;
  animation: reveal 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0ms);
  position: relative; overflow: hidden;
  transform-style: preserve-3d;
}
@keyframes reveal {
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0deg); }
}

/* a single prismatic pass, echoing light bending through glass */
.reveal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(105deg,
    transparent 34%,
    rgba(120,180,255,0.10) 44%,
    rgba(255,255,255,0.16) 50%,
    rgba(255,140,200,0.10) 56%,
    transparent 66%);
  transform: translateX(-130%);
  animation: prism 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--d, 0ms) + 260ms);
}
@keyframes prism { to { transform: translateX(130%); } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
  .reveal::before { display: none; }
}

.callcard {
  --tiltx: 0deg; --tilty: 0deg;
  transform: rotateX(var(--tiltx)) rotateY(var(--tilty));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  position: relative; overflow: hidden; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px 28px 30px; text-align: center;
  background: radial-gradient(120% 100% at 50% 40%, #0a0a12 0%, #050508 70%);
}
.callcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 42%, rgba(90,140,220,0.07), transparent 70%);
}
.callcard > * { position: relative; z-index: 1; }

/* the ribbon */
.orbwrap {
  transform: translateZ(50px);
  position: relative; width: min(520px, 100%); height: 260px;
  margin: 0 auto 6px; display: grid; place-items: center;
}
.orb { width: 100%; height: 100%; display: block; }
.orbwrap::after {
  content: ""; position: absolute; inset: 18% 6%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(140,190,255,0.10), transparent 70%);
  opacity: 0; transition: opacity 0.8s ease;
}
.orbwrap[data-phase="speaking"]::after,
.orbwrap[data-phase="thinking"]::after { opacity: 1; }

.statusline { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); min-height: 18px; transition: color 0.4s; }
.statusline b { color: var(--text); font-weight: 600; }

.bizname { transform: translateZ(30px); font-size: 26px; font-weight: 680; letter-spacing: -0.03em; margin: 12px 0 4px; }
.biztag { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; }

.controls { transform: translateZ(38px); display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* activity ticker */
.activity {
  display: flex; align-items: center; gap: 10px; margin-top: 0; height: 0; overflow: hidden;
  font-size: 12.5px; color: var(--accent-2); font-weight: 560;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.28s, transform 0.28s, height 0.28s, margin-top 0.28s;
}
.activity.on { opacity: 1; transform: none; height: 20px; margin-top: 16px; }
.activity .bars { display: flex; gap: 3px; align-items: flex-end; height: 13px; }
.activity .bars i { width: 3px; background: var(--accent-2); border-radius: 2px; animation: eq 0.9s ease-in-out infinite; }
.activity .bars i:nth-child(2) { animation-delay: 0.15s; }
.activity .bars i:nth-child(3) { animation-delay: 0.3s; }
.activity .bars i:nth-child(4) { animation-delay: 0.45s; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 13px; } }

/* transcript */
.transcript { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.turns {
  flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column;
  gap: 13px; scroll-behavior: smooth; perspective: 1000px;
}
.turn {
  flex: 0 0 auto; display: flex; gap: 11px; align-items: flex-start;
  animation: bubblein 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bubblein {
  from { opacity: 0; transform: translate3d(0, 16px, -90px) rotateX(18deg); }
  to   { opacity: 1; transform: none; }
}

.turn .who {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0; margin-top: 5px;
}
/* the agent gets an iridescent mark, the way an assistant is shown */
.turn.agent .who {
  background: conic-gradient(from 210deg, #6ee7ff, #6d5cff, #ff8ad6, #6ee7ff);
  box-shadow: 0 0 14px -2px rgba(110, 231, 255, 0.7), inset 0 0 6px rgba(255,255,255,0.5);
  animation: spinmark 7s linear infinite;
}
@keyframes spinmark { to { transform: rotate(360deg); } }
.turn.caller .who {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-bright);
}

.turn .bubble {
  position: relative; font-size: 14px; line-height: 1.6; padding: 11px 15px;
  border-radius: 15px; max-width: 82%;
}
.turn.agent .bubble {
  color: #e8f6ff;
  background: linear-gradient(160deg, rgba(20,60,90,0.55), rgba(10,24,44,0.5));
  border: 1px solid rgba(110, 200, 255, 0.42);
  box-shadow: 0 0 22px -6px rgba(80, 190, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}
.turn.caller { flex-direction: row-reverse; }
.turn.caller .bubble {
  color: #c9ccdb;
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--line);
}
.turn .bubble .caret {
  display: inline-block; width: 2px; height: 14px; background: var(--accent-2);
  margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.composer { display: flex; gap: 9px; padding: 13px 16px; border-top: 1px solid var(--line); }
.composer input { flex: 1; }

/* ---------- right rail ---------- */
.rail { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.rail .panel { display: flex; flex-direction: column; min-height: 0; }
.facts {
  overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 9px;
  min-height: 120px; perspective: 900px;
}

.fact {
  flex: 0 0 auto;
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 13px;
  border-radius: 13px; border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  animation: factin 0.75s cubic-bezier(0.16,1,0.3,1) both;
  transform-origin: right center;
  position: relative; overflow: hidden;
}
@keyframes factin {
  from { opacity: 0; transform: translate3d(46px, 0, -140px) rotateY(-26deg); }
  to   { opacity: 1; transform: none; }
}
.fact::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.14) 50%, transparent 70%);
  transform: translateX(-120%); animation: sheen 1.1s ease-out 0.15s both;
}
@keyframes sheen { to { transform: translateX(120%); } }
.fact .ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; align-self: flex-start;
  background: rgba(109,92,255,0.16); color: var(--accent); font-size: 14px;
}
.fact[data-kind="outcome"] .ico { background: rgba(52,211,153,0.14); color: var(--ok); }
.fact[data-kind="score"] .ico { background: rgba(251,191,36,0.14); color: var(--warn); }
.fact[data-kind="qualification"] .ico { background: rgba(0,212,255,0.13); color: var(--accent-2); }
.fact .body { min-width: 0; flex: 1; overflow: hidden; }
.fact .k { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; color: var(--dim); margin-bottom: 3px; }
.fact .v { font-size: 14px; font-weight: 560; line-height: 1.45; word-break: break-word; }
.fact.updated { animation: pulse 0.6s ease-out; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(109,92,255,0.5); } 100% { box-shadow: 0 0 0 12px rgba(109,92,255,0); } }

.empty { padding: 26px 18px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.65; max-width: 300px; margin: auto; }
.empty .scan {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
  border: 1px dashed var(--line-bright); display: grid; place-items: center;
  animation: spin 12s linear infinite;
}

/* business picker, inside the hero */
.heropick { width: min(340px, 100%); margin: 0 auto 18px; }
.heropick select { text-align: center; text-align-last: center; }

/* ---------- shipped record ---------- */
.shipped {
  position: fixed; inset: 0; z-index: 50; display: none;
  align-items: center; justify-content: center; padding: 28px;
  background: rgba(4,4,9,0.82); backdrop-filter: blur(18px);
}
.shipped.on { display: flex; animation: fadein 0.4s ease both; }
@keyframes fadein { from { opacity: 0; } }
.receipt {
  width: min(720px, 100%); max-height: 86vh; overflow-y: auto;
  border-radius: 22px; border: 1px solid var(--line-bright);
  background: linear-gradient(160deg, #12121d, #0a0a11);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9);
  animation: pop 0.55s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes pop { from { opacity: 0; transform: translateY(30px) scale(0.96); } }
.receipt header { padding: 28px 28px 20px; border-bottom: 1px solid var(--line); text-align: center; }
.shipmark {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(52,211,153,0.14);
  border: 1px solid rgba(52,211,153,0.35);
  animation: stamp 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
@keyframes stamp { from { transform: scale(0.4); opacity: 0; } }
.shipmark svg { width: 26px; height: 26px; stroke: var(--ok); }
.receipt h2 { margin: 0 0 6px; font-size: 21px; font-weight: 680; letter-spacing: -0.02em; }
.receipt header p { margin: 0; font-size: 13.5px; color: var(--muted); }
.receipt .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 1px; background: var(--line); }
.receipt .cell { background: #0d0d16; padding: 16px 18px; }
.receipt .cell .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); margin-bottom: 5px; font-weight: 650; }
.receipt .cell .v { font-size: 15px; font-weight: 600; }
.receipt section { padding: 22px 28px; border-top: 1px solid var(--line); }
.receipt section h3 { margin: 0 0 11px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 650; }
.receipt section p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #d8dae6; }
.receipt ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.receipt li { font-size: 14px; line-height: 1.55; color: #d8dae6; animation: rise 0.45s cubic-bezier(0.22,1,0.36,1) both; }
.receipt footer { padding: 18px 28px 24px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(70px);
  padding: 12px 20px; border-radius: 12px; background: #16161f; border: 1px solid var(--line-bright);
  font-size: 13.5px; font-weight: 560; z-index: 90; opacity: 0; transition: 0.32s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 18px 50px -16px rgba(0,0,0,0.8);
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* lead gate + call timer */
.leadform { width: min(420px, 100%); display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.leadform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 520px) { .leadform .two { grid-template-columns: 1fr; } }

.calltimer {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em;
  color: var(--dim); min-height: 0; margin-top: 0;
  transition: margin-top 0.3s ease;
}
.calltimer:not(:empty) { margin-top: 14px; }
.calltimer.low { color: var(--warn); }

.refused {
  margin-top: 16px; padding: 13px 16px; border-radius: 12px; max-width: 420px;
  border: 1px solid rgba(251,191,36,0.3); background: rgba(251,191,36,0.08);
  color: #ffd98a; font-size: 13.5px; line-height: 1.55;
}

/* ---------------------------- small screens ---------------------------- */
@media (max-width: 720px) {
  .stage { perspective: none; }
  .callcard { transform: none !important; }
  .orbwrap, .bizname, .controls { transform: none; }
  .reveal { transform: translateY(20px); }
  @keyframes reveal { to { opacity: 1; transform: none; } }
  .turn .bubble { max-width: 88%; }

  .topbar { padding: 14px 16px; gap: 10px; flex-wrap: wrap; }
  .topbar .navlink { padding: 7px 11px; font-size: 12.5px; }
  .brand small { font-size: 9.5px; }

  .stage { padding: 16px 14px 22px; gap: 16px; }
  .callcard { padding: 18px 16px 22px; }
  .orbwrap { height: 168px; }
  .bizname { font-size: 21px; }
  .biztag { font-size: 12.5px; margin-bottom: 16px; }
  .statusline { font-size: 10.5px; letter-spacing: 0.18em; }

  /* thumb-friendly targets */
  .controls { width: 100%; }
  .controls .btn { flex: 1; min-height: 48px; font-size: 15px; }
  .controls .btn.sm { flex: 0 0 auto; min-height: 40px; }
  .composer { padding: 11px 12px; }
  .composer input { min-height: 46px; }
  .composer .btn { min-height: 46px; }

  .captured { max-height: 320px; }
  .transcript { min-height: 300px; }
  .panel-head { padding: 13px 14px; font-size: 11px; }
  .facts { padding: 11px; }
  .fact .v { font-size: 13.5px; }
  .turn .bubble { font-size: 13.5px; }

  .receipt { border-radius: 16px; }
  .receipt header { padding: 22px 18px 16px; }
  .receipt section { padding: 18px; }
  .receipt footer { padding: 14px 18px 20px; }
  .receipt footer .btn { flex: 1; }
  .shipped { padding: 12px; }
  .toast { left: 14px; right: 14px; transform: translateY(70px); text-align: center; }
  .toast.on { transform: translateY(0); }
}

@media (max-width: 400px) {
  .orbwrap { height: 140px; }
  .bizname { font-size: 19px; }
  .topbar .navlink { padding: 6px 9px; font-size: 12px; }
}

/* honour a notched phone */
@supports (padding: max(0px)) {
  .stage { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .topbar { padding-top: max(14px, env(safe-area-inset-top)); }
}

/* ------------------- captured panel: ambient life ---------------------- */
.captured { position: relative; }

/* a slow beam passes down the panel while a call is running */
.captured::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 130px;
  pointer-events: none; z-index: 2; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(120,200,255,0.055) 45%, rgba(160,220,255,0.11) 55%, transparent);
}
.captured.live::after { opacity: 1; animation: sweep 4.5s cubic-bezier(0.5,0,0.5,1) infinite; }
@keyframes sweep { 0% { transform: translateY(-140px); } 100% { transform: translateY(520px); } }

/* the count reacts when something new lands */
.panel-head .count { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), color 0.35s, border-color 0.35s; }
.panel-head .count.bump {
  transform: scale(1.35); color: var(--accent-2); border-color: rgba(0,212,255,0.5);
}

/* each card blooms as it lands */
.fact::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(140,210,255,0.55), 0 0 26px rgba(90,180,255,0.4);
  opacity: 0; animation: bloom 1.1s ease-out both;
}
@keyframes bloom { 0% { opacity: 0.9; } 100% { opacity: 0; } }

/* the idle scanner breathes rather than just spinning */
.empty .scan { animation: spin 12s linear infinite, breathe 3.4s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(120,190,255,0.18); }
  50%      { box-shadow: 0 0 0 12px rgba(120,190,255,0); }
}

/* -------------------- a message leaving the building ------------------- */
.flight {
  position: fixed; z-index: 120; pointer-events: none;
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(30,90,140,0.95), rgba(12,30,60,0.95));
  border: 1px solid rgba(130,210,255,0.6);
  box-shadow: 0 0 26px -4px rgba(90,190,255,0.85);
  animation: fly 1.9s cubic-bezier(0.35, 0, 0.25, 1) forwards;
}
.flight svg { width: 20px; height: 20px; stroke: #cdeaff; fill: none; stroke-width: 1.8; }
.flight::after {
  content: ""; position: absolute; inset: -3px; border-radius: 16px;
  background: radial-gradient(circle, rgba(120,200,255,0.5), transparent 70%);
  filter: blur(9px); z-index: -1;
}
@keyframes fly {
  0%   { transform: translate3d(0,0,0) scale(0.5) rotate(-12deg); opacity: 0; }
  14%  { transform: translate3d(0,-16px,0) scale(1.06) rotate(-6deg); opacity: 1; }
  50%  { transform: translate3d(38vw,-30vh,0) scale(0.86) rotate(9deg); opacity: 1; }
  82%  { transform: translate3d(74vw,-14vh,0) scale(0.45) rotate(16deg); opacity: 0.85; }
  100% { transform: translate3d(96vw,4vh,0) scale(0.16) rotate(22deg); opacity: 0; }
}

/* the trail it leaves behind */
.flight-trail {
  position: fixed; z-index: 119; pointer-events: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(160,220,255,0.9), transparent 70%);
  animation: trailfade 0.85s ease-out forwards;
}
@keyframes trailfade { to { opacity: 0; transform: scale(0.2); } }

/* confirmation that it actually went */
.flight-done {
  position: fixed; z-index: 121; pointer-events: none;
  display: flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: 999px;
  background: rgba(10,28,20,0.92); border: 1px solid rgba(52,211,153,0.5);
  color: #7ff0c0; font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.8);
  animation: doneflash 2.6s cubic-bezier(0.16,1,0.3,1) forwards;
}
.flight-done svg { width: 15px; height: 15px; stroke: #34d399; fill: none; stroke-width: 2.6; }
@keyframes doneflash {
  0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
  12%  { opacity: 1; transform: translateY(0) scale(1); }
  78%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .captured.live::after { animation: none; opacity: 0; }
  .flight, .flight-trail { display: none; }
  .flight-done { animation: doneflash 2.6s linear forwards; }
}