/* In-page "Talk to our AI agent" call button (see squawk-call.v1.js).
   State: [data-state] on .sv-call (idle | mic | verifying | connecting | live | ending | ended |
   failed | unavailable). Audio levels: --sv-in (caller) and --sv-out (AI voice), 0..1, set on
   .home_demo-wrap while live. Only transform/opacity animate, on dedicated layers: the Webflow
   circles behind carry heavy backdrop-filter blurs and must not repaint per frame.
   v2: tangerine "listening" rings (.sv-call__listen) react to the caller's voice, the twin of
   the blue rings that react to the AI's; the waveform bars moved inside the button, into the
   middle circle under the white disc (needs the v2 markup: .sv-call__bars inside .sv-call__btn). */

.sv-call {
  --sv-blue: var(--brand--royal-blue, #2166ec);
  --sv-ice: var(--brand--baby-blue-ice, #9dbdff);
  --sv-tangerine: var(--brand--tangerine, #f07c00);
  --sv-tangerine-soft: #ffb469;
  --sv-ink: var(--brand--deep-space-blue, #162739);
  --sv-size: 200px;
  position: relative;
  width: var(--sv-size);
  height: var(--sv-size);
  isolation: isolate;
}

.sv-call__btn {
  position: relative;
  z-index: 3;
  display: block;
  width: var(--sv-size);
  height: var(--sv-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sv-call__btn:active { transform: scale(0.97); }
@media (hover: hover) {
  .sv-call__btn:hover { transform: scale(1.04); }
  .sv-call[data-state="idle"] .sv-call__btn:hover ~ .sv-call__rings .sv-call__ring { animation-duration: 1.6s; }
}
.sv-call__btn:focus-visible { outline: 3px solid var(--sv-blue); outline-offset: 6px; }
.sv-call__btn:disabled,
.sv-call__btn[aria-disabled="true"] { cursor: default; }
.sv-call[data-state="unavailable"] .sv-call__btn { opacity: 0.45; transform: none; }

.sv-call__icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sv-call__icon--hangup { opacity: 0; transform: scale(0.8) rotate(-35deg); }
.sv-call:is([data-state="mic"], [data-state="verifying"], [data-state="connecting"], [data-state="live"], [data-state="ending"]) .sv-call__icon--call {
  opacity: 0;
  transform: scale(0.8) rotate(35deg);
}
.sv-call:is([data-state="mic"], [data-state="verifying"], [data-state="connecting"], [data-state="live"], [data-state="ending"]) .sv-call__icon--hangup {
  opacity: 1;
  transform: none;
}

.sv-call__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- rings: idle invitation, connecting sonar, live AI-voice reaction ---- */
.sv-call__rings { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sv-call__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--sv-blue);
  opacity: 0;
  transform: scale(1);
  will-change: transform, opacity;
}
.sv-call__ring:nth-child(2) { border-color: var(--sv-ice); }
.sv-call__ring:nth-child(3) { border-width: 1px; }

.sv-call[data-state="idle"] .sv-call__ring:nth-child(1) { animation: sv-breathe 3.2s ease-out infinite; }
.sv-call[data-state="idle"] .sv-call__ring:nth-child(2) { animation: sv-breathe 3.2s ease-out 1.6s infinite; }

.sv-call:is([data-state="mic"], [data-state="verifying"], [data-state="connecting"]) .sv-call__ring { animation: sv-sonar 1.8s cubic-bezier(0.15, 0.6, 0.3, 1) infinite; }
.sv-call:is([data-state="mic"], [data-state="verifying"], [data-state="connecting"]) .sv-call__ring:nth-child(2) { animation-delay: 0.6s; }
.sv-call:is([data-state="mic"], [data-state="verifying"], [data-state="connecting"]) .sv-call__ring:nth-child(3) { animation-delay: 1.2s; }
.sv-call[data-state="mic"] .sv-call__ring { animation-duration: 2.6s; }

.sv-call[data-state="live"] .sv-call__ring {
  --k: 0.4;
  opacity: calc(0.18 + var(--sv-out, 0) * 0.75);
  transform: scale(calc(1.06 + var(--sv-out, 0) * var(--k)));
}
.sv-call[data-state="live"] .sv-call__ring:nth-child(2) { --k: 0.6; opacity: calc(0.1 + var(--sv-out, 0) * 0.55); }
.sv-call[data-state="live"] .sv-call__ring:nth-child(3) { --k: 0.8; opacity: calc(0.05 + var(--sv-out, 0) * 0.4); }

.sv-call[data-state="ended"] .sv-call__ring:nth-child(1) { animation: sv-settle 900ms ease-out 1; }

.sv-call[data-state="failed"] .sv-call__ring:nth-child(1) {
  border-color: #d93c3c;
  animation: sv-settle 900ms ease-out 1;
}
.sv-call[data-state="failed"] .sv-call__btn { animation: sv-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 1; }

/* ---- caller voice: tangerine "listening" rings, the twin of the AI rings above ----
   A separate ring set (not .sv-call__ring) so the idle/sonar/settle animations never touch it.
   Invisible until the caller speaks. --sv-listen gates out mic hiss and room noise (a quiet
   room still reads ~0.1-0.2 after the level lift in tick()) and rescales the rest to 0..1. */
.sv-call__listen { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sv-call__listen span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--sv-tangerine);
  opacity: 0;
  transform: scale(1);
  will-change: transform, opacity;
}
.sv-call__listen span:nth-child(2) { border-color: var(--sv-tangerine-soft); }
.sv-call__listen span:nth-child(3) { border-width: 1px; }

.sv-call[data-state="live"] { --sv-listen: clamp(0, (var(--sv-in, 0) - 0.18) * 1.3, 1); }
.sv-call[data-state="live"] .sv-call__listen span {
  --k: 0.4;
  opacity: calc(var(--sv-listen) * 0.95);
  transform: scale(calc(1.06 + var(--sv-listen) * var(--k)));
}
.sv-call[data-state="live"] .sv-call__listen span:nth-child(2) { --k: 0.6; opacity: calc(var(--sv-listen) * 0.7); }
.sv-call[data-state="live"] .sv-call__listen span:nth-child(3) { --k: 0.8; opacity: calc(var(--sv-listen) * 0.5); }

/* ---- caller voice: tangerine glow hugging the centre disc ---- */
.sv-call__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: calc(var(--sv-size) * 0.4);
  height: calc(var(--sv-size) * 0.4);
  margin: calc(var(--sv-size) * -0.2) 0 0 calc(var(--sv-size) * -0.2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 124, 0, 0.55) 0%, rgba(240, 124, 0, 0) 70%);
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
  will-change: transform, opacity;
}
.sv-call[data-state="live"] .sv-call__glow {
  opacity: calc(var(--sv-in, 0) * 1.1);
  transform: scale(calc(1.1 + var(--sv-in, 0) * 1.1));
}

/* ---- waveform in the middle circle, under the white disc, driven by the AI voice ----
   Lives inside .sv-call__btn (v2 markup) so it scales and shakes with the button. In the icons,
   the white disc reaches 0.2 × --sv-size from the centre and the middle circle's rim 0.48 ×, so
   the bars sit in the band from +0.26 to +0.39 below the centre (chord there ≈ 0.6 ×). */
.sv-call__bars {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--sv-size) * 0.26);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: calc(var(--sv-size) * 0.13);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.sv-call__bars span {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(to top, var(--sv-blue), var(--sv-ice));
  transform-origin: 50% 100%;
  transform: scaleY(0.12);
  will-change: transform;
}
.sv-call[data-state="live"] .sv-call__bars { opacity: 1; }
.sv-call[data-state="live"] .sv-call__bars span {
  transform: scaleY(calc(0.12 + var(--sv-out, 0) * var(--k, 1)));
  animation: sv-jitter var(--d, 700ms) ease-in-out infinite alternate;
}
.sv-call__bars span:nth-child(1) { --k: 0.55; --d: 610ms; }
.sv-call__bars span:nth-child(2) { --k: 0.85; --d: 520ms; }
.sv-call__bars span:nth-child(3) { --k: 1; --d: 740ms; }
.sv-call__bars span:nth-child(4) { --k: 0.8; --d: 560ms; }
.sv-call__bars span:nth-child(5) { --k: 0.5; --d: 680ms; }

/* ---- status line (the circle's caption) ----
   The Webflow caption block (.home_ricle-bottom-text) is anchored by its bottom edge, so
   anything that adds height pushes the title up into the orb. Keep the status to one line on
   wide screens (a centred flex item overflows evenly). */
.sv-call-status { transition: color 200ms ease; min-height: 1.2em; text-align: center; }
@media (min-width: 768px) { .sv-call-status { white-space: nowrap; } }
@media (max-width: 767px) { .sv-call-status { max-width: 300px; } }
.sv-call-status[data-tone="error"] { color: #b42318; font-weight: 400; }
.sv-call-status[data-tone="live"] { color: var(--brand--royal-blue, #2166ec); }

/* The bot check runs invisibly. Google allows hiding the reCAPTCHA badge only when its notice is
   shown on the page: it sits in the homepage footer, under the copyright (.sv-recaptcha-note). */
.grecaptcha-badge { visibility: hidden !important; }
.sv-call__recaptcha { position: absolute; width: 0; height: 0; overflow: hidden; }
.sv-recaptcha-note { display: block; margin-top: 4px; }
.sv-recaptcha-note a { color: inherit; font-size: inherit; font-weight: inherit; text-decoration: underline; }

@keyframes sv-breathe {
  0% { opacity: 0.55; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.22); }
  100% { opacity: 0; transform: scale(1.22); }
}
@keyframes sv-sonar {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.72); }
}
@keyframes sv-settle {
  0% { opacity: 0.8; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes sv-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
@keyframes sv-jitter {
  from { translate: 0 0; }
  to { translate: 0 -1px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-call__btn, .sv-call__icon { transition-duration: 1ms; }
  .sv-call .sv-call__ring, .sv-call .sv-call__btn, .sv-call .sv-call__bars span { animation: none !important; }
  .sv-call:is([data-state="mic"], [data-state="verifying"], [data-state="connecting"]) .sv-call__ring:nth-child(1) { opacity: 0.6; transform: scale(1.12); }
  .sv-call[data-state="live"] .sv-call__ring,
  .sv-call[data-state="live"] .sv-call__listen span,
  .sv-call[data-state="live"] .sv-call__glow,
  .sv-call[data-state="live"] .sv-call__bars span { transition: none; transform: none; }
  .sv-call[data-state="live"] .sv-call__listen span:nth-child(n) { opacity: 0; } /* :nth-child(n) matches the live nth-child(2|3) rules' specificity */
  .sv-call[data-state="live"][data-speaking="caller"] .sv-call__listen span:nth-child(1) { opacity: 0.9; transform: scale(1.1); }
  .sv-call[data-state="live"] .sv-call__ring:nth-child(1) { opacity: 0.35; transform: scale(1.1); }
  .sv-call[data-state="live"] .sv-call__ring:nth-child(2),
  .sv-call[data-state="live"] .sv-call__ring:nth-child(3) { opacity: 0; }
  .sv-call[data-state="live"][data-speaking="ai"] .sv-call__ring:nth-child(1) { opacity: 0.9; }
  .sv-call[data-state="live"] .sv-call__glow { opacity: 0; }
  .sv-call[data-state="live"][data-speaking="caller"] .sv-call__glow { opacity: 0.8; transform: scale(2); }
  .sv-call[data-state="live"] .sv-call__bars span { transform: scaleY(0.3); }
  .sv-call[data-state="live"][data-speaking="ai"] .sv-call__bars span { transform: scaleY(0.8); }
}