/* ─── Roboseal Mascot v2 (sprite-based) ────────────────────────────────────
   Drop-in replacement for the SVG mascot. Activated when window.ROBOSEAL_V2
   is true (currently set from ?seal=v2 query param). State class names match
   the v1 mascot so existing setSealState() calls keep working.
*/
.roboseal-v2 {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: filter 0.3s ease;
  pointer-events: inherit;
}

/* Frame mapping (skipped frame 4 — too many hands per spec):
     1 Idle               → seal-idle
     2 Thinking           → seal-thinking
     3 Talking            → seal-talking      (NEW; alias of writing for chat)
     5 Pointing           → seal-pointing     (NEW; available for CTAs)
     6 Apologetic         → seal-apologetic   (NEW; available for errors)
     7 Curious            → seal-curious      ≈ legacy "reading"
     8 Confident/Explaining → seal-explaining ≈ legacy "writing"
*/
.roboseal-v2.seal-idle       { background-image: url("/roboseal-v2-1.png"); animation: rsv2-breathe 4.5s ease-in-out infinite; }
.roboseal-v2.seal-thinking   { background-image: url("/roboseal-v2-2.png"); animation: rsv2-tilt    1.8s ease-in-out infinite; }
.roboseal-v2.seal-talking    { background-image: url("/roboseal-v2-3.png"); animation: rsv2-talk    0.9s ease-in-out infinite; }
.roboseal-v2.seal-pointing   { background-image: url("/roboseal-v2-5.png"); }
.roboseal-v2.seal-apologetic { background-image: url("/roboseal-v2-6.png"); }
.roboseal-v2.seal-curious    { background-image: url("/roboseal-v2-7.png"); animation: rsv2-bob     1.6s ease-in-out infinite; }
.roboseal-v2.seal-explaining { background-image: url("/roboseal-v2-8.png"); animation: rsv2-talk    1.0s ease-in-out infinite; }
/* Legacy aliases so existing JS calls (writing, reading) keep working unchanged */
.roboseal-v2.seal-writing    { background-image: url("/roboseal-v2-8.png"); animation: rsv2-talk    1.0s ease-in-out infinite; }
.roboseal-v2.seal-reading    { background-image: url("/roboseal-v2-7.png"); animation: rsv2-bob     1.6s ease-in-out infinite; }

@keyframes rsv2-breathe { 0%, 100% { transform: translateY(0);     } 50% { transform: translateY(-3px); } }
@keyframes rsv2-bob     { 0%, 100% { transform: translateY(0);     } 50% { transform: translateY(-2px); } }
@keyframes rsv2-tilt    { 0%, 100% { transform: rotate(-1.2deg);   } 50% { transform: rotate(1.2deg);   } }
@keyframes rsv2-talk    { 0%, 100% { transform: scale(1);          } 50% { transform: scale(1.025);    } }

.roboseal-v2.seal-clickable { cursor: pointer; }
.roboseal-v2.seal-clickable:hover { filter: drop-shadow(0 6px 14px rgba(0, 137, 247, 0.35)); }

@media (prefers-reduced-motion: reduce) {
  .roboseal-v2 { animation: none !important; }
}