/* Torata mascot. Pure CSS; theme via custom properties (all have fallbacks).
   Tokens: --mascot-bubble-bg, --mascot-bubble-fg, --mascot-bubble-border,
   --mascot-accent, --mascot-ink (sketch colour), --mascot-ring, --mascot-radius.
   Asset URLs resolve relative to this file; override with --mascot-sketch. */

:root {
  --mascot-sketch: url("assets/mascot/sketch-960.webp");
  --mascot-sketch-sm: url("assets/mascot/sketch-480.webp");
}

.mascot-off .mascot-say,
.mascot-off .mascot-avatar--auto { display: none !important; }

/* ---------- avatar ---------- */
.mascot-avatar {
  --mascot-size: 48px;
  position: relative;
  display: inline-grid;
  flex: none;
  width: var(--mascot-size);
  height: var(--mascot-size);
  border-radius: 50%;
  background: var(--mascot-disc, #dff7f6);
  box-shadow: 0 0 0 2px var(--mascot-ring, var(--surface, #fff)),
              0 1px 4px rgb(20 40 50 / .22);
  vertical-align: middle;
  transform-origin: 50% 85%;
}
.mascot-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.mascot-avatar--sm { --mascot-size: 32px; }
.mascot-avatar--md { --mascot-size: 48px; }
.mascot-avatar--lg { --mascot-size: 96px; }

.mascot-avatar.is-happy { animation: mascot-pop .5s cubic-bezier(.3,1.6,.5,1); }
.mascot-avatar.is-oops  { animation: mascot-fluster .6s ease-in-out; }
.mascot-avatar.is-cheer { animation: mascot-pop .5s cubic-bezier(.3,1.6,.5,1) 2; }

@keyframes mascot-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14) rotate(-4deg); }
  100% { transform: scale(1); }
}
@keyframes mascot-fluster {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-7deg) translateX(-1px); }
  45% { transform: rotate(6deg) translateX(1px); }
  70% { transform: rotate(-3deg); }
}

/* ---------- row + speech bubble ---------- */
.mascot-say {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  max-width: 100%;
  margin-block: .5rem;
}
.mascot-bubble {
  position: relative;
  margin: 0;
  padding: .55rem .85rem;
  min-width: 0;
  max-width: 34ch;
  border: 1px solid var(--mascot-bubble-border, var(--border, #c9d6d8));
  border-radius: var(--mascot-radius, 1rem);
  background: var(--mascot-bubble-bg, var(--surface, #fff));
  color: var(--mascot-bubble-fg, var(--text, #1d2a2e));
  font: inherit;
  font-size: .95em;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transform-origin: 0 100%;
  animation: mascot-bubble-in .28s cubic-bezier(.3,1.4,.5,1) both;
}
/* tail pointing to the avatar */
.mascot-bubble::before {
  content: "";
  position: absolute;
  left: -5px; bottom: .7rem;
  width: 9px; height: 9px;
  background: var(--mascot-bubble-bg, var(--surface, #fff));
  border-left: 1px solid var(--mascot-bubble-border, var(--border, #c9d6d8));
  border-bottom: 1px solid var(--mascot-bubble-border, var(--border, #c9d6d8));
  transform: rotate(45deg);
}
.mascot-say--good .mascot-bubble { border-color: var(--mascot-good, var(--ok, #3b9d73)); }
.mascot-say--bad  .mascot-bubble { border-color: var(--mascot-bad, var(--warn, #d08a3a)); }
.mascot-say--good .mascot-bubble::before { border-color: var(--mascot-good, var(--ok, #3b9d73)); }
.mascot-say--bad  .mascot-bubble::before { border-color: var(--mascot-bad, var(--warn, #d08a3a)); }

@keyframes mascot-bubble-in {
  from { opacity: 0; transform: translateY(4px) scale(.92); }
  to   { opacity: 1; transform: none; }
}

/* ---------- swimming sketch ---------- */
.mascot-swim {
  --mascot-ink: var(--mascot-ink-token, currentColor);
  display: block;
  width: min(100%, var(--mascot-swim-width, 15rem));
  aspect-ratio: 513 / 295;
  margin-inline: auto;
  background: var(--mascot-ink);
  color: var(--mascot-ink-color, color-mix(in srgb, var(--text, #1d2a2e) 80%, transparent));
  -webkit-mask: var(--mascot-sketch) center / contain no-repeat;
          mask: var(--mascot-sketch) center / contain no-repeat;
  animation: mascot-bob 4.5s ease-in-out infinite;
}
.mascot-swim--sm { --mascot-swim-width: 9rem; }
.mascot-swim--lg { --mascot-swim-width: 22rem; }
.mascot-empty[aria-busy="true"] .mascot-swim { animation-duration: 2.4s; }

@keyframes mascot-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(-.8deg); }
}

/* ---------- empty / loading state ---------- */
.mascot-empty {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--text, #1d2a2e);
}
.mascot-empty-title {
  margin: .5rem 0 0;
  font-size: 1.1em;
  font-weight: 600;
  text-wrap: balance;
}
.mascot-empty-text {
  margin: 0;
  max-width: 38ch;
  color: var(--muted, #5d6f74);
  text-wrap: pretty;
}
.mascot-empty-action {
  margin-top: .75rem;
  min-height: 44px;
  padding: .55rem 1.1rem;
  border: 1px solid var(--mascot-accent, var(--accent, #2f7f8c));
  border-radius: .6rem;
  background: var(--mascot-accent, var(--accent, #2f7f8c));
  color: var(--mascot-accent-fg, #fff);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.mascot-empty-action:hover { filter: brightness(1.08); }
.mascot-empty-action:focus-visible,
.mascot-toggle input:focus-visible {
  outline: 3px solid var(--mascot-focus, var(--focus, #e0a23a));
  outline-offset: 2px;
}

/* ---------- settings toggle ---------- */
.mascot-toggle {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; cursor: pointer;
}
.mascot-toggle input { width: 1.2rem; height: 1.2rem; accent-color: var(--mascot-accent, var(--accent, #2f7f8c)); }

/* ---------- dark theme ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mascot-swim { color: var(--mascot-ink-color, color-mix(in srgb, var(--text, #e6eff1) 85%, transparent)); }
  :root:not([data-theme="light"]) .mascot-avatar { box-shadow: 0 0 0 2px var(--mascot-ring, var(--surface, #1b2326)), 0 1px 4px rgb(0 0 0 / .5); }
}
:root[data-theme="dark"] .mascot-swim { color: var(--mascot-ink-color, color-mix(in srgb, var(--text, #e6eff1) 85%, transparent)); }
:root[data-theme="dark"] .mascot-avatar { box-shadow: 0 0 0 2px var(--mascot-ring, var(--surface, #1b2326)), 0 1px 4px rgb(0 0 0 / .5); }

@media (max-width: 480px) {
  .mascot-bubble { max-width: calc(100vw - 7rem); }
}

/* ---------- easter eggs ---------- */
/* avatar tapped 5x: blush + shake */
.mascot-avatar.is-flustered { animation: mascot-fluster .5s ease-in-out 3; }
.mascot-avatar.is-flustered::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgb(255 120 150 / .75), transparent) 18% 64% / 30% 18% no-repeat,
    radial-gradient(closest-side, rgb(255 120 150 / .75), transparent) 82% 64% / 30% 18% no-repeat;
  animation: mascot-blush 2.6s ease-out both;
}
@keyframes mascot-blush { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* typing "torata": the sketch swims once along the bottom of the screen */
.mascot-cameo {
  --mascot-swim-width: 9rem;
  position: fixed; z-index: 30; left: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem);
  margin: 0;
  pointer-events: none;
  animation: mascot-cameo 8s linear 1 both;
}
@keyframes mascot-cameo {
  from { transform: translateX(-10rem); }
  to   { transform: translateX(calc(100vw + 1rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-avatar.is-flustered::after { animation: none !important; opacity: 1; }
  .mascot-cameo { left: auto; right: 1rem; }

  .mascot-avatar,
  .mascot-bubble,
  .mascot-swim { animation: none !important; }
}