/* ============================================================
   Zen · the assistant's mascot, on the Zenxo case study.
   The mascot (ZenMascot.tsx) and the chat reply (AIChatMockup.tsx)
   are ported from zenxo-website; the layout around them is this
   site's own. scripts/meet-zen.js runs the eyes and the chat.
   ============================================================ */

/* a plate inside a .media-w that centres whatever it holds */
.zen-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--plate, rgba(0, 0, 0, .04));
}
.zen-stage .zen-mascot { width: clamp(64px, 18%, 120px); }
.zen-stage.is--hero .zen-mascot { width: clamp(92px, 9vw, 150px); }
.zen-stage .zen-chat { width: min(300px, 80%); }

/* ── chat mockup (AIChatMockup.tsx) ───────────────────────────────────── */
.zx-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%; height: 100%;
  padding: 12px 4px 4px;
  font-family: "Manrope", system-ui, sans-serif;
}
.zx-chat [data-at] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.zx-chat [data-at].is-on { opacity: 1; transform: none; }
.zx-chat__q { display: flex; justify-content: flex-end; }
.zx-chat__q span {
  max-width: 84%;
  padding: 7px 11px;
  border-radius: 13px 13px 3px 13px;
  border: 1px solid rgba(0, 0, 0, .06);
  background: #f1f1f4;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .16);
  color: #0b0b0f;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
}
.zx-chat__ai { display: flex; gap: 7px; align-items: flex-start; }
.zx-chat__body { flex: 1; min-width: 0; }

.zx-avatar { position: relative; flex: none; width: 26px; height: 26px; }
.zx-avatar::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 111, 32, .55), transparent 70%);
  filter: blur(4px);
}
.zx-avatar span {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .06);
  background: #fff;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .2);
}
.zx-avatar i { width: 4px; height: 8px; border-radius: 3px; background: #C7BBA3; }

.zx-typing {
  display: none;
  gap: 4px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .06);
  background: #f4f0ea;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .18);
}
.zx-typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: #b3ada3;
  animation: mzTyping 1s ease-in-out infinite;
}
.zx-typing i:nth-child(2) { animation-delay: .15s; }
.zx-typing i:nth-child(3) { animation-delay: .3s; }
.zx-chat.is-typing .zx-typing { display: inline-flex; }
.zx-chat.is-typing .zx-card { display: none; }
@keyframes mzTyping {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

.zx-card__box {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .06);
  background: #f4f0ea;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .22);
}
.zx-card__pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px;
  border-radius: 20px;
  background: rgba(34, 197, 94, .14);
  color: #1a9d52;
  font-size: 8px; font-weight: 700; letter-spacing: .06em;
}
.zx-card__reply { margin: 0; color: #2a2a2e; font-size: 9.5px; font-weight: 500; line-height: 1.4; }
.zx-card__legs { display: flex; flex-direction: column; gap: 5px; }
.zx-card__legs [data-at] { transform: translateY(6px); }

.zx-leg {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 7px;
  border-radius: 8px;
  background: #fff;
  font-family: monospace;
  font-size: 8.5px; font-weight: 700; color: #0b0b0f;
}
.zx-leg__side {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px;
  color: #fff; font-family: "Manrope", system-ui, sans-serif; font-weight: 800;
}
.zx-leg__side.is--b { background: #22C55E; }
.zx-leg__side.is--s { background: #EF4444; }
.zx-leg__type { flex: 1; color: #9a7b2e; letter-spacing: .04em; }
.zx-leg__tag {
  flex: none;
  padding: 2px 6px;
  border-radius: 12px;
  font-family: "Manrope", system-ui, sans-serif; font-size: 8px;
}
.zx-leg__tag.is--tgt { background: rgba(34, 197, 94, .14); color: #1a9d52; }
.zx-leg__tag.is--sl  { background: rgba(239, 68, 68, .13); color: #d84a48; }

/* ── the mascot (ZenMascot.tsx) ───────────────────────────────────────── */
.zen-mascot { position: relative; }
.zen-mascot__drift { position: absolute; pointer-events: none; animation: zxFloat 3.6s ease-in-out infinite; }
.zen-mascot__drift.is--a { left: -30%;  bottom: -20%; width: 80%; height: 80%; animation-delay: .55s; }
.zen-mascot__drift.is--b { right: -28%; bottom: -18%; width: 75%; height: 75%; animation-delay: .35s; }
.zen-mascot__drift.is--c { left: 10%;   top: -25%;    width: 80%; height: 70%; animation-delay: .18s; }
.zen-mascot__blob {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: radial-gradient(circle at 50% 50%, #FFD000 0%, #FF8C00 40%, #FF4500 70%, rgba(255, 69, 0, 0) 100%);
  filter: blur(34px);
  will-change: transform;
}
.is--a .zen-mascot__blob { animation: zxBlob1 9s ease-in-out infinite; }
.is--b .zen-mascot__blob { animation: zxBlob2 12s ease-in-out infinite; }
.is--c .zen-mascot__blob { animation: zxBlob3 10s ease-in-out infinite; }
.zen-mascot__body {
  position: relative;
  z-index: 10;
  display: block;
  width: 100%;
  height: auto;
  animation: zxFloat 3.6s ease-in-out infinite;
}
.zen-mascot__eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: zxBlink 4.8s ease-in-out infinite;
}

@keyframes zxFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
@keyframes zxBlink {
  0%, 88%, 100% { transform: scaleY(1); }
  92%, 95%      { transform: scaleY(.08); }
}
@keyframes zxBlob1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(16%, -12%) scale(1.18); }
  66%      { transform: translate(-14%, 10%) scale(.9); }
}
@keyframes zxBlob2 {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  40%      { transform: translate(-20%, 8%) scale(.85); }
  70%      { transform: translate(12%, -16%) scale(1.2); }
}
@keyframes zxBlob3 {
  0%, 100% { transform: translate(0, 0) scale(.95); }
  50%      { transform: translate(16%, 14%) scale(1.25); }
}

/* ── wireframe build: guides → outline → eyes draw in, the solid mascot fills
   over them, the glow comes up, it holds, then clears and starts again ─── */
.zen-mascot__glow { position: absolute; inset: 0; pointer-events: none; }
/* wireframe parts live inside the mascot's own SVG (see the markup), so the
   body has to let the guides run past its edges */
.zen-stage.is--hero .zen-mascot__body { overflow: visible; }
.zen-wire { opacity: 0; pointer-events: none; }   /* without motion: just the finished mascot */
.zen-wire path, path.zen-wire { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* The loop runs only while the stage is on screen and restarts from the bare
   guides each time it comes back (meet-zen.js toggles these classes), so the
   first thing anyone sees is the wireframe, not a mascot halfway through. */
@media (prefers-reduced-motion: no-preference) {
  .zen-stage.is-waiting .zen-mascot__fill,
  .zen-stage.is-waiting .zen-mascot__eyefill,
  .zen-stage.is-waiting .zen-mascot__glow { opacity: 0; }

  .zen-stage.is-playing .zen-wire { opacity: 1; }
  .zen-stage.is-playing .zen-wire__guides  { animation: zwGuides  10s linear infinite; }
  .zen-stage.is-playing .zen-wire__guides path  { animation: zwDrawGuides 10s cubic-bezier(.65, 0, .35, 1) infinite; }
  .zen-stage.is-playing .zen-wire__body    { animation: zwDrawBody 10s cubic-bezier(.65, 0, .35, 1) infinite; }
  .zen-stage.is-playing .zen-wire__eye     { animation: zwDrawEyes 10s cubic-bezier(.65, 0, .35, 1) infinite; }
  .zen-stage.is-playing .zen-wire__handles { animation: zwHandles 10s linear infinite; }
  .zen-stage.is-playing .zen-mascot__fill  { animation: zwFill 10s ease infinite; }
  .zen-stage.is-playing .zen-mascot__eyefill { animation: zwFillEyes 10s ease infinite; }
  .zen-stage.is-playing .zen-mascot__glow  { animation: zwGlow 10s ease infinite; }
}

@keyframes zwDrawGuides {
  0%        { stroke-dashoffset: 1; }
  14%, 100% { stroke-dashoffset: 0; }
}
@keyframes zwGuides {
  0%, 30%   { opacity: 1; }
  40%, 100% { opacity: 0; }
}
@keyframes zwDrawBody {
  0%, 6%    { stroke-dashoffset: 1; opacity: 1; }
  22%       { stroke-dashoffset: 0; opacity: 1; }
  34%       { stroke-dashoffset: 0; opacity: 1; }
  42%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes zwDrawEyes {
  0%, 14%   { stroke-dashoffset: 1; opacity: 1; }
  27%       { stroke-dashoffset: 0; opacity: 1; }
  36%       { stroke-dashoffset: 0; opacity: 1; }
  44%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes zwHandles {
  0%, 18%   { opacity: 0; }
  23%, 34%  { opacity: 1; }
  42%, 100% { opacity: 0; }
}
@keyframes zwFill {
  0%, 27%   { opacity: 0; }
  35%, 86%  { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes zwFillEyes {
  0%, 31%   { opacity: 0; }
  38%, 86%  { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes zwGlow {
  0%, 36%   { opacity: 0; }
  48%, 84%  { opacity: 1; }
  94%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .zen-mascot__drift,
  .zen-mascot__blob,
  .zen-mascot__body,
  .zen-mascot__eye,
  .zx-typing i { animation: none; }
}