/* =========================================
   MASCOT & COCOA ILLUSTRATION ANIMATIONS
   ========================================= */

.mascot-container {
  position: relative;
  width: 280px;
  height: 336px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transform-origin: 50% 82%;
}

/* Layer stack inside mascot container */
.mascot-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Default state visibilities */
.mascot-layer.face-normal { opacity: 1; }
.mascot-layer.face-happy { opacity: 0; }
.mascot-layer.face-thinking { opacity: 0; }
.mascot-layer.mouth-speaking { opacity: 0; }
.mascot-layer.cocoa-cup { opacity: 0; }

/* --- Mascot States --- */

/* 1. IDLE STATE: Gentle breathing & swaying by the fireside */
.mascot-container.state-idle .mascot-layer.body {
  animation: mascotIdleFloat 4s ease-in-out infinite;
}

.mascot-container.state-idle .mascot-layer.face-normal {
  opacity: 1;
  animation: mascotFaceBob 4s ease-in-out infinite;
}

.mascot-container.state-idle .mascot-layer.accessory {
  animation: quillSway 3s ease-in-out infinite alternate;
}

@keyframes mascotIdleFloat {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  50% { transform: translateY(-8px) scale(1.015) rotate(1deg); }
}

@keyframes mascotFaceBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes quillSway {
  0% { transform: rotate(0deg) translateY(0); }
  100% { transform: rotate(5deg) translateY(-3px); }
}

/* 2. THINKING STATE: Head tilted, quill tapping, rosy cheeks */
.mascot-container.state-thinking .mascot-layer.body {
  transform: rotate(-5deg) translateY(-2px);
  animation: mascotThinkPulse 1.5s ease-in-out infinite alternate;
}

.mascot-container.state-thinking .mascot-layer.face-normal { opacity: 0; }
.mascot-container.state-thinking .mascot-layer.face-thinking {
  opacity: 1;
  transform: rotate(-5deg) translateY(-4px);
}

.mascot-container.state-thinking .mascot-layer.accessory {
  animation: quillTap 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}

@keyframes mascotThinkPulse {
  0% { filter: drop-shadow(0 0 5px rgba(232, 145, 58, 0.2)); }
  100% { filter: drop-shadow(0 0 18px rgba(232, 145, 58, 0.5)); }
}

@keyframes quillTap {
  0% { transform: rotate(-10deg) translate(-5px, 5px); }
  100% { transform: rotate(15deg) translate(2px, -6px); }
}

/* 3. SPEAKING STATE: Lively hops, bright talking mouth */
.mascot-container.state-speaking .mascot-layer.body {
  animation: mascotSpeakHop 0.8s cubic-bezier(0.28, 0.84, 0.42, 1) infinite alternate;
}

.mascot-container.state-speaking .mascot-layer.face-normal { opacity: 0; }
.mascot-container.state-speaking .mascot-layer.mouth-speaking {
  opacity: 1;
  animation: mascotSpeakHop 0.8s cubic-bezier(0.28, 0.84, 0.42, 1) infinite alternate;
}

@keyframes mascotSpeakHop {
  0% { transform: translateY(0) scaleY(1) scaleX(1); }
  35% { transform: translateY(-12px) scaleY(1.03) scaleX(0.98); }
  100% { transform: translateY(0) scaleY(0.98) scaleX(1.02); }
}

/* 4. HAPPY STATE: Joyful jumping with golden sparkles */
.mascot-container.state-happy .mascot-layer.body {
  animation: mascotHappyBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}

.mascot-container.state-happy .mascot-layer.face-normal { opacity: 0; }
.mascot-container.state-happy .mascot-layer.face-happy {
  opacity: 1;
  animation: mascotHappyBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}

@keyframes mascotHappyBounce {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-18px) rotate(-3deg) scale(1.05); }
  100% { transform: translateY(-22px) rotate(4deg) scale(1.06); }
}

/* 5. COCOA BREAK STATE: Cozy sipping hot cocoa */
.mascot-container.state-cocoa .mascot-layer.body {
  animation: cozyRocking 3s ease-in-out infinite;
}

.mascot-container.state-cocoa .mascot-layer.face-normal { opacity: 0; }
.mascot-container.state-cocoa .mascot-layer.face-happy {
  opacity: 1;
  transform: translateY(2px) scale(0.98);
}

.mascot-container.state-cocoa .mascot-layer.cocoa-cup {
  opacity: 1;
  animation: cocoaCupSip 3s ease-in-out infinite;
}

.mascot-container.state-cocoa .mascot-layer.accessory {
  opacity: 0; /* Put quill away while holding cocoa */
}

@keyframes cozyRocking {
  0%, 100% { transform: rotate(-2deg) translateY(2px); }
  50% { transform: rotate(3deg) translateY(-2px); }
}

@keyframes cocoaCupSip {
  0%, 100% { transform: translateY(2px) rotate(-1deg); }
  50% { transform: translateY(-4px) rotate(2deg) scale(1.03); }
}

/* 6. WAVE STATE: Greets and guides the visitor */
.mascot-container.state-wave .mascot-layer.body {
  animation: mascotGuideWaveBody 0.85s ease-in-out infinite alternate;
}

.mascot-container.state-wave .mascot-layer.face-normal { opacity: 0; }
.mascot-container.state-wave .mascot-layer.face-happy {
  opacity: 1;
  animation: mascotGuideWaveFace 0.85s ease-in-out infinite alternate;
}

.mascot-container.state-wave .mascot-layer.accessory {
  animation: quillBigWave 0.42s ease-in-out infinite alternate;
  transform-origin: 78% 58%;
}

@keyframes mascotGuideWaveBody {
  0% { transform: rotate(-2deg) translateY(0); }
  100% { transform: rotate(3deg) translateY(-6px); }
}

@keyframes mascotGuideWaveFace {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px) rotate(2deg); }
}

@keyframes quillBigWave {
  0% { transform: rotate(-16deg) translate(-4px, 4px); }
  100% { transform: rotate(18deg) translate(4px, -8px); }
}

.mascot-control-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.mascot-action-btn {
  background: rgba(18, 12, 10, 0.86);
  border: 1px solid rgba(63, 183, 168, 0.34);
  border-radius: 8px;
  color: var(--color-cream);
  cursor: pointer;
  font-family: var(--font-code);
  font-size: 0.78rem;
  min-height: 36px;
  padding: 6px 8px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.mascot-action-btn:hover,
.mascot-action-btn.active {
  background: rgba(63, 183, 168, 0.16);
  border-color: var(--color-teal);
  color: var(--color-marshmallow);
  transform: translateY(-1px);
}

.mascot-stage-note {
  color: var(--color-subtext);
  font-size: 0.86rem;
  margin-top: 12px;
  text-align: center;
}

.mini-mascot {
  width: 150px;
  height: 180px;
  position: relative;
  margin: 0 auto;
  animation: petIdleFloat 4s ease-in-out infinite;
}

.mini-mascot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Interactive Mascot Click Hover Feedback */
.mascot-container {
  cursor: pointer;
}

.mascot-container:hover .mascot-layer.body {
  filter: brightness(1.08) drop-shadow(0 0 20px rgba(255, 179, 71, 0.45));
}

/* =========================================
   GLOBAL WEB PET (TAMAGO-CHAN)
   ========================================= */

.web-pet-home {
  position: fixed;
  right: 22px;
  bottom: 18px;
  width: 96px;
  height: 36px;
  z-index: 9997;
  border: 1px solid rgba(255, 179, 71, 0.45);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 179, 71, 0.2), transparent 62%),
    rgba(35, 25, 21, 0.9);
  color: rgba(245, 230, 208, 0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-code);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 0 14px rgba(232, 145, 58, 0.16);
}

.web-pet-container {
  position: fixed;
  width: 118px;
  height: 142px;
  z-index: 9998;
  cursor: grab;
  user-select: none;
  touch-action: none;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45));
  transition: filter 0.24s ease;
}

.web-pet-container:active {
  cursor: grabbing;
}

.web-pet-container.mode-home {
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.38));
}

.web-pet-container.mode-returning {
  filter: drop-shadow(0 0 20px rgba(255, 179, 71, 0.42));
}

.web-pet-container.mode-dragging {
  z-index: 10000;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.58));
}

.web-pet-mascot.mascot-container {
  width: 118px;
  height: 142px;
  margin: 0;
  transition: transform 0.16s ease;
}

.web-pet-container:hover .web-pet-mascot {
  transform: scale(1.05);
}

.web-pet-container.facing-left .web-pet-mascot {
  transform: scaleX(-1);
}

.web-pet-container.facing-left:hover .web-pet-mascot {
  transform: scaleX(-1) scale(1.05);
}

.web-pet-container.is-walking .web-pet-mascot {
  animation: webPetWalkBob 0.52s ease-in-out infinite alternate;
}

.web-pet-container.is-walking.facing-left .web-pet-mascot {
  animation: webPetWalkBobLeft 0.52s ease-in-out infinite alternate;
}

.web-pet-shadow {
  position: absolute;
  left: 20px;
  bottom: 2px;
  width: 76px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  filter: blur(2px);
  transform-origin: center;
  animation: webPetShadowPulse 2.8s ease-in-out infinite;
}

.web-pet-emotion-bubble {
  position: absolute;
  top: -22px;
  right: 4px;
  max-width: 160px;
  background: rgba(35, 25, 21, 0.96);
  border: 1px solid var(--color-crt-amber);
  color: var(--color-marshmallow);
  font-family: var(--font-jp-display);
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.88);
  transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.web-pet-emotion-bubble::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: rgba(35, 25, 21, 0.96);
  border-right: 1px solid var(--color-crt-amber);
  border-bottom: 1px solid var(--color-crt-amber);
  transform: rotate(45deg);
}

.web-pet-emotion-bubble.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes webPetWalkBob {
  0% { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-5px) rotate(2deg); }
}

@keyframes webPetWalkBobLeft {
  0% { transform: scaleX(-1) translateY(0) rotate(-2deg); }
  100% { transform: scaleX(-1) translateY(-5px) rotate(2deg); }
}

@keyframes webPetShadowPulse {
  0%, 100% { transform: scaleX(1); opacity: 0.32; }
  50% { transform: scaleX(0.78); opacity: 0.22; }
}

@keyframes petIdleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 520px) {
  .mascot-container {
    width: 220px;
    height: 264px;
  }

  .mascot-control-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .web-pet-container {
    width: 92px;
    height: 112px;
  }

  .web-pet-mascot.mascot-container {
    width: 92px;
    height: 112px;
  }

  .web-pet-home {
    right: 14px;
    bottom: 12px;
    width: 76px;
    height: 30px;
    font-size: 0.58rem;
  }

  .web-pet-emotion-bubble {
    top: -26px;
    right: -2px;
    font-size: 0.72rem;
  }

}

/* =========================================
   TAMAGO-CHAN WATERCOLOR SPRITE STATES
   One transparent 3 x 2 sprite sheet keeps every interaction on-model.
   ========================================= */

.hero-stage .mascot-container {
  width: min(300px, 72vw);
  height: auto;
  aspect-ratio: 1;
}

.mascot-sprite {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../assets/mascot/generated/tamago-chan-sprite.png");
  background-repeat: no-repeat;
  background-size: 300% 200%;
  background-position: 0% 0%;
  pointer-events: none;
  transform-origin: 50% 78%;
  will-change: transform;
}

.mascot-container.state-idle .mascot-sprite {
  background-position: 0% 0%;
  animation: tamagoIdle 3.8s ease-in-out infinite;
}

.mascot-container.state-thinking .mascot-sprite {
  background-position: 50% 0%;
  animation: tamagoThink 1.7s ease-in-out infinite;
}

.mascot-container.state-speaking .mascot-sprite {
  background-position: 100% 0%;
  animation: tamagoTalk 0.72s ease-in-out infinite alternate;
}

.mascot-container.state-happy .mascot-sprite {
  background-position: 0% 100%;
  animation: tamagoJoy 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}

.mascot-container.state-cocoa .mascot-sprite {
  background-position: 50% 100%;
  animation: tamagoRest 3s ease-in-out infinite;
}

.mascot-container.state-wave .mascot-sprite {
  background-position: 100% 100%;
  animation: tamagoWave 0.82s ease-in-out infinite alternate;
}

.mascot-container:hover .mascot-sprite {
  filter: brightness(1.05) drop-shadow(0 0 14px rgba(255, 204, 145, 0.42));
}

.mini-mascot {
  width: 150px;
  height: 150px;
}

.mini-mascot .mascot-sprite {
  background-position: 0% 100%;
}

.web-pet-container,
.web-pet-mascot.mascot-container {
  width: 118px;
  height: 118px;
}

@keyframes tamagoIdle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes tamagoThink {
  0%, 100% { transform: translateY(1px) rotate(-3deg); }
  50% { transform: translateY(-5px) rotate(-5deg); }
}

@keyframes tamagoTalk {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-6px) scale(1.025, 0.985); }
}

@keyframes tamagoJoy {
  0% { transform: translateY(2px) rotate(-3deg) scale(0.98); }
  100% { transform: translateY(-16px) rotate(3deg) scale(1.04); }
}

@keyframes tamagoRest {
  0%, 100% { transform: translateY(1px) rotate(-1.5deg); }
  50% { transform: translateY(-3px) rotate(1.5deg); }
}

@keyframes tamagoWave {
  0% { transform: translateY(0) rotate(-3deg); }
  100% { transform: translateY(-5px) rotate(4deg); }
}

@media (max-width: 520px) {
  .hero-stage .mascot-container {
    width: min(240px, 72vw);
    height: auto;
  }

  .web-pet-container,
  .web-pet-mascot.mascot-container {
    width: 92px;
    height: 92px;
  }
}

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

/* =========================================
   WEB PET HOME & MOTION ART
   ========================================= */

.web-pet-home {
  right: 6px;
  bottom: 5px;
  width: 164px;
  height: 88px;
  border: 0;
  border-radius: 0;
  background: url("../assets/mascot/generated/tamago-home.png") center / contain no-repeat;
  box-shadow: none;
}

.web-pet-home-label {
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%) rotate(-2deg);
  padding: 2px 9px 3px;
  border: 1px solid rgba(116, 69, 36, 0.38);
  border-radius: 999px;
  background: rgba(255, 247, 228, 0.82);
  color: #7b4d2d;
  font-family: var(--font-jp-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(73, 37, 18, 0.13);
}

.web-pet-container.is-walking .web-pet-mascot .mascot-sprite {
  background-image: url("../assets/mascot/generated/tamago-walk-round.png");
  background-size: 300% 200%;
  background-position: 0% 0%;
  animation: tamagoWalkFramesRight 0.72s steps(1, end) infinite;
}

.web-pet-container.is-walking.facing-left .web-pet-mascot .mascot-sprite {
  animation: tamagoWalkFramesLeft 0.72s steps(1, end) infinite;
}

.web-pet-container.mode-dragging .web-pet-mascot .mascot-sprite {
  background-image: url("../assets/mascot/generated/tamago-motion.png");
  background-size: 300% 100%;
  background-position: 100% 0%;
  animation: tamagoDragFloat 0.56s ease-in-out infinite alternate;
}

/* Keep the walking feet on one visual ground line instead of reusing the old float. */
.web-pet-container.is-walking .web-pet-mascot {
  animation: webPetGroundedWalk 0.72s steps(1, end) infinite;
}

.web-pet-container.is-walking.facing-left .web-pet-mascot {
  animation: webPetGroundedWalkLeft 0.72s steps(1, end) infinite;
}

.web-pet-container.is-walking .web-pet-shadow {
  opacity: 0;
  animation: none;
}

@keyframes tamagoWalkFramesRight {
  0%, 33.332% { background-position: 0% 0%; }
  33.333%, 66.666% { background-position: 50% 0%; }
  66.667%, 100% { background-position: 100% 0%; }
}

@keyframes tamagoWalkFramesLeft {
  0%, 33.332% { background-position: 0% 100%; }
  33.333%, 66.666% { background-position: 50% 100%; }
  66.667%, 100% { background-position: 100% 100%; }
}

@keyframes tamagoDragFloat {
  0% { transform: translateY(-2px) rotate(-2deg) scale(0.98, 1.03); }
  100% { transform: translateY(3px) rotate(2deg) scale(1.02, 0.97); }
}

@keyframes webPetGroundedWalk {
  0%, 33.332% { transform: translateY(1px) rotate(-0.5deg); }
  33.333%, 66.666% { transform: translateY(0) rotate(0deg); }
  66.667%, 100% { transform: translateY(1px) rotate(0.5deg); }
}

@keyframes webPetGroundedWalkLeft {
  0%, 33.332% { transform: scaleX(-1) translateY(1px) rotate(-0.5deg); }
  33.333%, 66.666% { transform: scaleX(-1) translateY(0) rotate(0deg); }
  66.667%, 100% { transform: scaleX(-1) translateY(1px) rotate(0.5deg); }
}

@media (max-width: 520px) {
  .web-pet-home {
    right: 2px;
    bottom: 3px;
    width: 132px;
    height: 72px;
  }

  .web-pet-home-label {
    bottom: 1px;
    font-size: 0.56rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-pet-container.is-walking .web-pet-mascot,
  .web-pet-container.is-walking.facing-left .web-pet-mascot,
  .web-pet-container.is-walking .web-pet-shadow {
    animation: none;
  }
}