/* Glass mascot
   Built from stacked CSS layers, no images or WebGL:
     halo      blurred ambient light behind the body
     rings     expanding outlines (listening) / steady ring (confirm)
     body      morphing blob, clipped; holds every glass layer
       fill      sky -> lavender radial gradient
       caustic   rotating iridescent conic light (blend: screen)
       core      wandering inner light
       wave      light ripples crossing the surface (listening)
       sheen     diagonal sweep (working)
       iris      iridescent edge band (cyan / lavender / pink)
       rim       inset edge light + depth
       spec      specular highlights
     face      eyes; kept outside the liquid filter so they stay crisp
     badge     check (done) / ? (clarify) / ! (error)
     shadow    contact shadow on the "floor"

   JS writes two things only:
     --lvl            0..1 voice level, drives scale + halo + rings
     data-state       idle | listening | thinking | working | confirm | done | ask | error
   and the SVG displacement scale for the liquid edge. */

.mascot {
  --size: 144px;
  --lvl: 0;
  --morph: 11s;
  --caustic: 18s;
  --float: 5.5s;
  --float-y: 4px;
  --halo-base: 0.42;
  --eye-x: 0px;
  --eye-y: 0px;

  position: relative;
  width: calc(var(--size) * 1.7);
  height: calc(var(--size) * 1.55);
  display: grid;
  place-items: center;
  isolation: isolate;
  pointer-events: none;
  user-select: none;
}

/* ---------- ambient layers ---------- */

.mascot__halo {
  position: absolute;
  width: calc(var(--size) * 1.35);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(191, 233, 255, 0.95) 0%,
    rgba(167, 184, 255, 0.5) 42%,
    rgba(191, 233, 255, 0) 70%);
  filter: blur(16px);
  opacity: calc(var(--halo-base) + var(--lvl) * 0.5);
  transform: translateY(-6px) scale(calc(1 + var(--lvl) * 0.28));
  transition: opacity var(--t-slow) var(--ease-soft), transform 90ms linear;
  z-index: -2;
}

.mascot__rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: -1;
}

.mascot__rings span {
  position: absolute;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(125, 203, 255, 0.55);
  opacity: 0;
  transform: translateY(-6px);
}

.mascot__shadow {
  position: absolute;
  bottom: calc(var(--size) * 0.06);
  width: calc(var(--size) * 0.62);
  height: calc(var(--size) * 0.1);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(36, 50, 71, 0.2) 0%, rgba(36, 50, 71, 0) 70%);
  filter: blur(3px);
  animation: m-shadow var(--float) var(--ease-glass) infinite;
  z-index: -1;
}

/* ---------- character ---------- */

.mascot__float {
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  animation: m-float var(--float) var(--ease-glass) infinite;
}

.mascot__react {
  position: absolute;
  inset: 0;
  transform: scale(calc(1 + var(--lvl) * 0.07));
  transition: transform 90ms linear, filter var(--t-slow) var(--ease-soft);
}

.mascot__body {
  position: absolute;
  inset: 0;
  border-radius: 50% 47% 52% 48% / 48% 53% 47% 52%;
  overflow: hidden;
  filter: url(#m-liquid);
  animation: m-morph var(--morph) ease-in-out infinite;
  box-shadow: 0 18px 30px -18px rgba(70, 110, 200, 0.55);
}

.mascot__body > * {
  position: absolute;
  border-radius: inherit;
}

.mascot__fill {
  inset: 0;
  background:
    radial-gradient(120% 90% at 30% 22%, #f2faff 0%, rgba(242, 250, 255, 0) 42%),
    radial-gradient(100% 100% at 50% 45%, var(--c-ice) 0%, var(--c-sky) 58%, var(--c-lavender) 100%);
}

.mascot__caustic {
  inset: -40%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0.75) 40deg,
    rgba(225, 205, 255, 0.7) 75deg,
    rgba(255, 255, 255, 0) 120deg,
    rgba(125, 203, 255, 0.55) 175deg,
    rgba(255, 255, 255, 0) 220deg,
    rgba(240, 214, 255, 0.6) 280deg,
    rgba(191, 233, 255, 0.7) 320deg,
    rgba(255, 255, 255, 0) 360deg);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: 0.65;
  animation: m-spin var(--caustic) linear infinite;
}

.mascot__core {
  width: 60%;
  height: 60%;
  left: 20%;
  top: 24%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(6px);
  animation: m-core 9s var(--ease-glass) infinite;
}

.mascot__wave {
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 58%,
    rgba(255, 255, 255, 0) 0 30%,
    rgba(255, 255, 255, 0.6) 36%,
    rgba(232, 220, 255, 0.35) 40%,
    rgba(255, 255, 255, 0) 47%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.3);
}

.mascot__sheen {
  inset: -20% -60%;
  border-radius: 0;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 60%);
  transform: translateX(-60%);
  opacity: 0;
}

.mascot__iris {
  inset: -10%;
  border-radius: 50%;
  background: conic-gradient(from 90deg,
    rgba(90, 210, 255, 0.9), rgba(240, 190, 255, 0.85), rgba(255, 255, 255, 0.9),
    rgba(120, 160, 255, 0.85), rgba(90, 225, 255, 0.9), rgba(250, 205, 245, 0.8),
    rgba(90, 210, 255, 0.9));
  -webkit-mask: radial-gradient(closest-side, transparent 68%, #000 86%, #000 100%);
  mask: radial-gradient(closest-side, transparent 68%, #000 86%, #000 100%);
  filter: blur(3px);
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: m-spin calc(var(--caustic) * 1.6) linear infinite reverse;
}

.mascot__rim {
  inset: 0;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.9),
    inset 0 0 5px 2px rgba(70, 195, 255, 0.55),
    inset 0 0 16px 5px rgba(150, 170, 255, 0.35),
    inset -14px -18px 30px rgba(110, 130, 255, 0.4),
    inset 12px 14px 26px rgba(255, 255, 255, 0.7);
}

.mascot__spec {
  inset: 0;
  background:
    radial-gradient(28% 16% at 30% 20%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(7% 5% at 70% 24%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(34% 18% at 66% 86%, rgba(236, 214, 255, 0.55) 0%, rgba(236, 214, 255, 0) 100%);
}

.mascot__face {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  gap: calc(var(--size) * 0.13);
  transform: translate(calc(-50% + var(--eye-x)), calc(-50% + var(--eye-y)));
  transition: transform var(--t-slow) var(--ease-soft);
}

.mascot__eye {
  width: calc(var(--size) * 0.072);
  height: calc(var(--size) * 0.135);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #56677f 0%, #2c3b51 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(30, 42, 58, 0.25);
  transform-origin: 50% 60%;
  animation: m-blink 5.2s ease-in-out infinite;
  transition: height var(--t-med) var(--ease-soft), border-radius var(--t-med) var(--ease-soft);
}

.mascot__badge {
  position: absolute;
  right: calc(var(--size) * -0.02);
  bottom: calc(var(--size) * 0.04);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-surface);
  box-shadow: var(--shadow-raised);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--t-med) var(--ease-soft), transform var(--t-med) var(--ease-pop);
}

.mascot__badge svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mascot__badge [data-badge] { display: none; }

/* ---------- states ---------- */

.mascot[data-state="idle"] {
  --morph: 12s;
  --caustic: 22s;
  --float: 6s;
}

.mascot[data-state="listening"] {
  --morph: 3.6s;
  --caustic: 7s;
  --float: 3.2s;
  --float-y: 2px;
  --halo-base: 0.6;
}
.mascot[data-state="listening"] .mascot__rings span {
  animation: m-ring 2.6s var(--ease-soft) infinite;
}
.mascot[data-state="listening"] .mascot__rings span:nth-child(2) { animation-delay: 0.87s; }
.mascot[data-state="listening"] .mascot__rings span:nth-child(3) { animation-delay: 1.74s; }
.mascot[data-state="listening"] .mascot__wave {
  animation: m-wave 2.2s var(--ease-soft) infinite;
}
.mascot[data-state="listening"] .mascot__wave + .mascot__wave { animation-delay: 1.1s; }
.mascot[data-state="listening"] .mascot__caustic,
.mascot[data-state="listening"] .mascot__iris { opacity: 0.95; }

.mascot[data-state="thinking"] {
  --morph: 7s;
  --caustic: 5s;
  --float: 4.5s;
  --halo-base: 0.5;
  --eye-x: 5px;
  --eye-y: -6px;
}
.mascot[data-state="thinking"] .mascot__core { animation-duration: 3.2s; }
.mascot[data-state="thinking"] .mascot__face { animation: m-ponder 4.8s var(--ease-glass) infinite; }

.mascot[data-state="working"] {
  --morph: 5s;
  --caustic: 4s;
  --float: 2.6s;
  --float-y: 3px;
  --halo-base: 0.55;
}
.mascot[data-state="working"] .mascot__sheen { animation: m-sheen 2.4s var(--ease-glass) infinite; }
.mascot[data-state="working"] .mascot__face { animation: m-scan 3.2s var(--ease-glass) infinite; }

.mascot[data-state="confirm"] {
  --morph: 16s;
  --caustic: 26s;
  --float: 7s;
  --float-y: 2px;
  --halo-base: 0.5;
}
.mascot[data-state="confirm"] .mascot__rings span:first-child {
  opacity: 0.7;
  transform: translateY(-6px) scale(1.16);
  border-color: rgba(31, 111, 197, 0.28);
  animation: m-steady 3.6s ease-in-out infinite;
}
.mascot[data-state="confirm"] .mascot__eye { height: calc(var(--size) * 0.145); }

.mascot[data-state="done"] {
  --morph: 14s;
  --caustic: 20s;
  --halo-base: 0.7;
}
.mascot[data-state="done"] .mascot__halo { animation: m-glow 1.6s var(--ease-soft) 1; }
.mascot[data-state="done"] .mascot__eye {
  height: calc(var(--size) * 0.06);
  border-radius: 10px 10px 4px 4px;
  animation: none;
}

.mascot[data-state="ask"] {
  --morph: 10s;
  --caustic: 16s;
  --eye-y: -3px;
}
.mascot[data-state="ask"] .mascot__react { transform: rotate(-4deg) scale(calc(1 + var(--lvl) * 0.07)); }

.mascot[data-state="error"] {
  --morph: 16s;
  --caustic: 30s;
  --float: 7s;
  --halo-base: 0.28;
  --eye-y: 4px;
}
.mascot[data-state="error"] .mascot__react { filter: saturate(0.6) brightness(1.02); transform: rotate(-5deg); }

/* badges */
.mascot[data-state="done"] .mascot__badge,
.mascot[data-state="ask"] .mascot__badge,
.mascot[data-state="error"] .mascot__badge { opacity: 1; transform: scale(1); }
.mascot[data-state="done"] [data-badge="done"],
.mascot[data-state="ask"] [data-badge="ask"],
.mascot[data-state="error"] [data-badge="error"] { display: block; }
.mascot[data-state="done"] [data-badge="done"] path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: m-check 420ms var(--ease-soft) 180ms forwards;
}

/* ---------- renderers (see js/mascot-renderers.js) ----------
   data-renderer="three"  : WebGL canvas replaces the CSS body
   data-renderer="spline" : Spline iframe replaces the CSS body
   Halo, rings, shadow and badges stay in every mode. */

.mascot__gl,
.mascot__spline {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;   /* hover + click interactions on the orb */
}
.mascot__gl { width: 100%; height: 100%; }
.mascot__float { z-index: 1; }

.mascot[data-renderer="three"] .mascot__body,
.mascot[data-renderer="spline"] .mascot__body { display: none; }

/* The Spline scene has no face; eyes are an opt-in overlay on the orb. */
.mascot[data-renderer="three"][data-eyes="off"] .mascot__face,
.mascot[data-renderer="spline"] .mascot__face { display: none; }
.mascot[data-renderer="three"] .mascot__eye { background: linear-gradient(180deg, #56677f 0%, #2c3b51 100%); }

/* Spline: the viewer has its own background and a corner badge, so the
   frame is oversized and feathered to a circle that blends into the card. */
.mascot__spline {
  --spline-zoom: 1.95;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-soft);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}
.mascot__spline.is-ready { opacity: 1; }
.mascot__spline iframe {
  flex: none;
  width: calc(var(--size) * var(--spline-zoom));
  height: calc(var(--size) * var(--spline-zoom));
  border: 0;
  background: transparent;
  transform: scale(calc(1 + var(--lvl) * 0.06));
  transition: transform 90ms linear, filter var(--t-slow) var(--ease-soft);
}
.mascot[data-state="error"] .mascot__spline iframe { filter: saturate(0.55); }
/* Badges sit on the float layer; nudge them onto the orb's edge. */
.mascot[data-renderer="three"] .mascot__badge,
.mascot[data-renderer="spline"] .mascot__badge { right: calc(var(--size) * -0.08); bottom: calc(var(--size) * -0.02); }

/* ---------- keyframes ---------- */

@keyframes m-morph {
  0%, 100% { border-radius: 50% 47% 52% 48% / 48% 53% 47% 52%; }
  25%      { border-radius: 46% 54% 49% 51% / 53% 46% 54% 47%; }
  50%      { border-radius: 53% 48% 46% 54% / 47% 52% 48% 53%; }
  75%      { border-radius: 48% 52% 55% 45% / 51% 48% 52% 49%; }
}
@keyframes m-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--float-y) * -1)); }
}
@keyframes m-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50%      { transform: scaleX(0.92); opacity: 0.8; }
}
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-core {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(10%, -8%); }
  66%      { transform: translate(-9%, 6%); }
}
@keyframes m-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(0.12); }
}
@keyframes m-ring {
  0%   { opacity: 0.6; transform: translateY(-6px) scale(1); }
  100% { opacity: 0;   transform: translateY(-6px) scale(1.55); }
}
@keyframes m-wave {
  0%   { opacity: 0;   transform: scale(0.25); }
  25%  { opacity: 0.9; }
  100% { opacity: 0;   transform: scale(1.5); }
}
@keyframes m-sheen {
  0%   { opacity: 0; transform: translateX(-60%); }
  20%  { opacity: 1; }
  70%  { opacity: 1; transform: translateX(60%); }
  100% { opacity: 0; transform: translateX(60%); }
}
@keyframes m-scan {
  0%, 100% { margin-left: -5px; }
  50%      { margin-left: 5px; }
}
@keyframes m-ponder {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -2px; }
}
@keyframes m-steady {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.8; }
}
@keyframes m-glow {
  0%   { opacity: 0.4; transform: translateY(-6px) scale(0.9); }
  40%  { opacity: 1;   transform: translateY(-6px) scale(1.2); }
  100% { opacity: 0.7; transform: translateY(-6px) scale(1); }
}
@keyframes m-check { to { stroke-dashoffset: 0; } }

/* ---------- reduced motion ----------
   Everything that moves stops. State stays readable through the halo
   strength, the steady ring, eye shape and badges, and the text. */
@media (prefers-reduced-motion: reduce) {
  .mascot *, .mascot *::before, .mascot *::after { animation: none !important; transition: none !important; }
  .mascot__body { filter: none; }
  .mascot__react, .mascot__halo { transform: none; }
  .mascot[data-state="listening"] .mascot__rings span:first-child { opacity: 0.6; transform: translateY(-6px) scale(1.16); }
  .mascot[data-state="done"] [data-badge="done"] path { stroke-dashoffset: 0; }
}
:root.reduce-motion .mascot *, :root.reduce-motion .mascot *::before { animation: none !important; transition: none !important; }
:root.reduce-motion .mascot__body { filter: none; }
:root.reduce-motion .mascot__react, :root.reduce-motion .mascot__halo { transform: none; }
:root.reduce-motion .mascot[data-state="listening"] .mascot__rings span:first-child { opacity: 0.6; transform: translateY(-6px) scale(1.16); }
:root.reduce-motion .mascot[data-state="done"] [data-badge="done"] path { stroke-dashoffset: 0; }