/* ─── Roboseal Mascot Animations ──────────────────────────────────────────── */

/* Base Keyframes */
@keyframes seal-breathe {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}
@keyframes seal-blink {
  0%, 92%, 98%, 100% { transform: scaleY(1); }
  95%, 99% { transform: scaleY(0.1); }
}
@keyframes seal-glow-idle {
  0%, 100% { transform: scale(1); opacity: 0.7; filter: drop-shadow(0 0 2px rgba(0, 152, 129, 0.4)); }
  50% { transform: scale(1.2); opacity: 1; filter: drop-shadow(0 0 6px rgba(0, 152, 129, 0.8)); }
}
@keyframes seal-glow-fast {
  0%, 100% { transform: scale(1.1); opacity: 0.8; filter: drop-shadow(0 0 4px rgba(0, 152, 129, 0.6)); }
  50% { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 10px rgba(0, 152, 129, 1)); }
}
@keyframes seal-paddle-left {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-8deg); }
}
@keyframes seal-paddle-right {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}
@keyframes seal-write-bob {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-1.5px) rotate(0.5deg); }
}
@keyframes seal-scribble {
  0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
  25% { transform: translate(-8px, 4px) rotate(-6deg); }
  50% { transform: translate(-3px, 1px) rotate(-2deg); }
  75% { transform: translate(-12px, 6px) rotate(-8deg); }
}
@keyframes seal-pulse-data {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes seal-pulse-data-fast {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}
@keyframes seal-page-flip {
  0%, 15% { transform: scaleX(1); fill: #ffffff; }
  45%, 55% { transform: scaleX(-1); fill: #e2e8f0; }
  85%, 100% { transform: scaleX(1); fill: #ffffff; }
}
@keyframes seal-flipper-turn-page {
  0%, 15% { transform: rotate(-5deg) translate(-10px, 5px); }
  45%, 55% { transform: rotate(-35deg) translate(-35px, 10px); }
  85%, 100% { transform: rotate(-5deg) translate(-10px, 5px); }
}
@keyframes seal-draw-line {
  0%, 30% { stroke-dashoffset: 10; }
  70%, 100% { stroke-dashoffset: 0; }
}
@keyframes seal-smoke-puff {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  30% { opacity: 0.6; transform: translate(0, -5px) scale(1); }
  80% { opacity: 0.2; transform: translate(2px, -15px) scale(1.5); }
  100% { opacity: 0; transform: translate(4px, -20px) scale(2); }
}

/* Global */
.seal-eye-blink { animation: seal-blink 7s linear infinite; }
.seal-smoke-1 { animation: seal-smoke-puff 3s ease-out infinite 0s; }
.seal-smoke-2 { animation: seal-smoke-puff 3s ease-out infinite 1.5s; }

.seal-book-pose, .seal-paper-pose {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: 100px 145px;
  opacity: 0;
  transform: translateY(15px) scale(0.8);
  pointer-events: none;
}
.seal-pen-pose {
  transition: opacity 0.3s ease;
  opacity: 0;
}
.seal-drawn-line-anim {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  animation: seal-draw-line 1.5s infinite;
}

/* ─── IDLE ────────────────────────────────────────────────────────────────── */
.seal-idle .seal-body-anim { animation: seal-breathe 4s ease-in-out infinite; }
.seal-idle .seal-body-pose { transform: rotate(0deg); }
.seal-idle .seal-eye-gaze { transform: translate(0px, 0px); }
.seal-idle .seal-flipper-l-anim { animation: seal-paddle-left 4s ease-in-out infinite; }
.seal-idle .seal-flipper-l-pose { transform: rotate(0deg); }
.seal-idle .seal-flipper-r-anim { animation: seal-paddle-right 4s ease-in-out infinite; }
.seal-idle .seal-flipper-r-pose { transform: rotate(0deg); }
.seal-idle .seal-antenna-bulb { animation: seal-glow-idle 3s ease-in-out infinite; transform-origin: 100px 18px; }
.seal-idle .seal-belly-light { animation: seal-pulse-data 2s ease-in-out infinite; }

/* ─── THINKING ────────────────────────────────────────────────────────────── */
.seal-thinking .seal-body-anim { animation: seal-breathe 4s ease-in-out infinite; }
.seal-thinking .seal-body-pose { transform: rotate(3deg); }
.seal-thinking .seal-eye-gaze { transform: translate(6px, -8px); }
.seal-thinking .seal-flipper-l-anim { animation: seal-paddle-left 4s ease-in-out infinite; }
.seal-thinking .seal-flipper-l-pose { transform: rotate(0deg); }
.seal-thinking .seal-flipper-r-anim { animation: seal-breathe 4s ease-in-out infinite; }
.seal-thinking .seal-flipper-r-pose { transform: rotate(-55deg) translate(-10px, 10px); }
.seal-thinking .seal-antenna-bulb { animation: seal-glow-fast 0.8s ease-in-out infinite; transform-origin: 100px 18px; }
.seal-thinking .seal-belly-light { animation: seal-pulse-data-fast 0.5s ease-in-out infinite; }

/* ─── WRITING ─────────────────────────────────────────────────────────────── */
.seal-writing .seal-body-anim { animation: seal-write-bob 1.5s ease-in-out infinite; }
.seal-writing .seal-body-pose { transform: rotate(1deg) translateY(2px); }
.seal-writing .seal-eye-gaze { transform: translate(-4px, 10px); }
.seal-writing .seal-flipper-l-anim { animation: seal-write-bob 1.5s ease-in-out infinite; }
.seal-writing .seal-flipper-l-pose { transform: rotate(-15deg) translate(-5px, 0px); }
.seal-writing .seal-flipper-r-anim { animation: seal-scribble 1.5s ease-in-out infinite; }
.seal-writing .seal-flipper-r-pose { transform: rotate(15deg) translate(-15px, 5px); }
.seal-writing .seal-antenna-bulb { animation: seal-glow-idle 2s ease-in-out infinite; transform-origin: 100px 18px; }
.seal-writing .seal-belly-light { animation: seal-pulse-data-fast 0.2s ease-in-out infinite; }
.seal-writing .seal-paper-pose { opacity: 1; transform: translateY(0px) scale(1); }
.seal-writing .seal-pen-pose { opacity: 1; }

/* ─── READING ─────────────────────────────────────────────────────────────── */
.seal-reading .seal-body-anim { animation: seal-breathe 4s ease-in-out infinite; }
.seal-reading .seal-body-pose { transform: rotate(2deg) translateY(2px); }
.seal-reading .seal-eye-gaze { transform: translate(0px, 12px); }
.seal-reading .seal-flipper-l-anim { animation: seal-breathe 4s ease-in-out infinite; }
.seal-reading .seal-flipper-l-pose { transform: rotate(-20deg) translate(-5px, -5px); }
.seal-reading .seal-flipper-r-anim { animation: seal-flipper-turn-page 3.5s ease-in-out infinite; }
.seal-reading .seal-flipper-r-pose { transform: rotate(0deg); }
.seal-reading .seal-antenna-bulb { animation: seal-glow-idle 3s ease-in-out infinite; transform-origin: 100px 18px; }
.seal-reading .seal-belly-light { animation: seal-pulse-data 2s ease-in-out infinite; }
.seal-reading .seal-book-pose { opacity: 1; transform: translateY(0px) scale(1); }
.seal-reading .seal-page-turn-anim { animation: seal-page-flip 3.5s ease-in-out infinite; }

/* ─── Pose transitions ────────────────────────────────────────────────────── */
.seal-body-pose { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: 100px 170px; }
.seal-flipper-l-pose { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: 45px 132px; }
.seal-flipper-r-pose { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: 155px 132px; }
.seal-flipper-l-anim { transform-origin: 45px 132px; }
.seal-flipper-r-anim { transform-origin: 155px 132px; }
.seal-eye-gaze { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

/* ─── Clickable mascot ────────────────────────────────────────────────────── */
.seal-clickable { cursor: pointer; }
.seal-clickable:hover { filter: drop-shadow(0 4px 12px rgba(0, 137, 247, 0.3)); }

/* ─── Speech bubble ───────────────────────────────────────────────────────── */
.seal-bubble {
  background: white;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px 18px;
  max-width: 200px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.seal-bubble.visible {
  opacity: 1;
  pointer-events: auto;
}
/* Triangle pointing right */
.seal-bubble::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid white;
  filter: drop-shadow(2px 0 1px rgba(0, 0, 0, 0.04));
}
.seal-bubble::before {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 9px solid #e5e7eb;
}

/* Left-pointing bubble (arrow on left, for mobile) */
.seal-bubble-left::after {
  right: auto !important;
  left: -8px;
  border-left: none !important;
  border-right: 8px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  filter: none;
}
.seal-bubble-left::before {
  right: auto !important;
  left: -10px;
  border-left: none !important;
  border-right: 9px solid #e5e7eb;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}