/* ==========================================================================
   Sprosimo — the character
   Loaded last. Everything in this file exists to make one thing true: Sprosimo is
   a personality that appears throughout the product, not a logo in the corner.

   The rule that keeps it professional rather than childish: the character
   never carries information on its own. Every Sprosimo on the page sits NEXT TO
   real copy, and the copy reads correctly if the SVG fails to load. Cut the
   mascot and you lose charm, not meaning.
   ========================================================================== */

.sprosimo { display: block; overflow: visible; flex: 0 0 auto; }

/* The SVG is a block, so `text-align: center` on a parent does nothing to it.
   Anything inside a .center gets auto margins instead. */
.center > .sprosimo, .empty > .sprosimo, .oops > .sprosimo { margin-left: auto; margin-right: auto; }

/* ---------- the antenna is the "I am listening" signal ---------- */
.sprosimo-ant { transform-origin: 60px 11px; animation: sc-ant 3.4s ease-in-out infinite; }
@keyframes sc-ant {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.16); opacity: .82; }
}

/* ---------- blinking ---------- */
.sprosimo-pupil { transform-origin: center; animation: sc-blink 6.5s infinite; }
@keyframes sc-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.1); }
}
/* Second Sprosimo on a page blinks off-beat, so a row of them is not a chorus. */
.sprosimo:nth-of-type(2n) .sprosimo-pupil { animation-delay: -2.2s; }
.sprosimo:nth-of-type(3n) .sprosimo-pupil { animation-delay: -4.1s; }

/* ---------- mood-specific motion ---------- */
.sprosimo-dots circle { animation: sc-float 2.6s ease-in-out infinite; }
.sprosimo-dots circle:last-child { animation-delay: .35s; }
@keyframes sc-float {
  0%, 100% { transform: translateY(0);    opacity: .35; }
  50%      { transform: translateY(-5px); opacity: .75; }
}
.sprosimo-page { animation: sc-page 4s ease-in-out infinite; transform-origin: 89px 99px; }
@keyframes sc-page {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(4deg); }
}

/* ---------- the header mark leans in on hover ---------- */
.brand .sprosimo { transition: transform .3s cubic-bezier(.34,1.5,.64,1); }
.brand:hover .sprosimo { transform: translateY(-2px) rotate(-6deg); }

/* ==========================================================================
   Hero portrait
   A large Sprosimo standing on a soft platform, with the two facts customers
   actually care about floating beside it as real chips.
   ========================================================================== */
.sprosimo-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 26px 0 40px;
}
.sprosimo-stage .sprosimo { animation: sc-bob 5.5s ease-in-out infinite; filter: drop-shadow(0 22px 34px #5b4bf53d); }
@keyframes sc-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
/* the shadow on the ground stays put while the character bobs */
.sprosimo-stage:after {
  content: ""; position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  width: 150px; height: 20px; border-radius: 50%;
  background: radial-gradient(closest-side, #5b4bf533, transparent);
  animation: sc-shadow 5.5s ease-in-out infinite;
}
@keyframes sc-shadow {
  0%, 100% { transform: translateX(-50%) scale(1);   opacity: .9; }
  50%      { transform: translateX(-50%) scale(.82); opacity: .55; }
}

.sprosimo-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
  padding: 8px 15px; font-size: 13px; font-weight: 560; color: var(--ink);
  box-shadow: var(--sh-3); white-space: nowrap;
}
.sprosimo-chip svg { width: 15px; height: 15px; flex: 0 0 auto; }
.sprosimo-chip.a { top: 12%;  left: -2%;  animation: sc-bob 6.5s ease-in-out infinite; }
.sprosimo-chip.b { top: 44%;  right: -4%; animation: sc-bob 7.5s ease-in-out infinite reverse; }
.sprosimo-chip.c { bottom: 6%; left: 8%;  animation: sc-bob 8.5s ease-in-out infinite; }

/* ==========================================================================
   "Sprosimo says" — the character's voice inline in the page
   ========================================================================== */
.says {
  display: flex; align-items: flex-start; gap: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px; box-shadow: var(--sh-1);
}
.says .bubble { position: relative; flex: 1 1 auto; min-width: 0; }
.says .bubble p { margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.6; }
.says .bubble p + p { margin-top: 10px; }
.says .who {
  display: block; font-size: 11.5px; font-weight: 660; letter-spacing: .08em;
  text-transform: uppercase; color: var(--violet); margin-bottom: 6px;
}
.says.tinted { background: linear-gradient(135deg, #f7f6ff 0%, #f2fcfe 100%); border-color: #ddd8ff; }

/* ---------- Sprosimo as the assistant avatar in a transcript ---------- */
.msg.a > .sprosimo { margin-bottom: 2px; }
.msg.u > .sprosimo { display: none; }

/* ==========================================================================
   Character-led empty states and errors
   ========================================================================== */
.empty .sprosimo, .oops .sprosimo { margin: 0 auto 16px; }
.oops { text-align: center; padding: 40px 0 20px; }
.oops h1 { margin-bottom: 12px; }
.oops .lede { max-width: 560px; margin-left: auto; margin-right: auto; }
.oops .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* ==========================================================================
   Gradient text logotype
   Only ever used at 20px and up: the gradient loses legibility below that, and
   the header mark is already carrying the colour.
   ========================================================================== */
.wordmark {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .sprosimo-ant, .sprosimo-pupil, .sprosimo-dots circle, .sprosimo-page,
  .sprosimo-stage .sprosimo, .sprosimo-stage:after, .sprosimo-chip { animation: none !important; }
}

@media (max-width: 640px) {
  .sprosimo-chip.a { left: -4px; }
  .sprosimo-chip.b { right: -4px; }
  .says { padding: 16px; gap: 12px; }
}