/* pet.css — Pet image display and animations */

/* ── Pet Container & Info ──────────────────────────────────────── */

.home-pet-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: var(--space-md) 0;
}

.pet-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  max-width: 240px;
}

.pet-name {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--color-primary);
  cursor: pointer;
}

.pet-stage-label {
  font-size: 1.4rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.pet-xp-bar {
  width: 100%;
  height: 1.2rem;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.pet-xp-fill {
  height: 100%;
  width: 100%; /* always full-width; scale drives the visual width */
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-full);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pet-xp-text {
  font-size: 1.2rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ── Pet Tap Zone (click interaction wrapper) ───────────────────── */

.pet-tap-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Explicit size matches the pet-img so the click area is always reliable */
  width: 200px;
  height: 200px;
  /* Remove mobile tap highlight */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ── Speech Bubble ──────────────────────────────────────────────── */

.pet-speech-bubble {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 2.5px solid var(--color-primary-lt);
  border-radius: 1.6rem;
  padding: 0.8rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  box-shadow: var(--shadow-sm);
  /* bubble-in then bubble-out */
  animation:
    bubbleIn  0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    bubbleOut 0.4s ease 2.2s both;
}

/* Tail (border) */
.pet-speech-bubble::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: var(--color-primary-lt);
}

/* Tail (fill) */
.pet-speech-bubble::after {
  content: '';
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: white;
}

@keyframes bubbleIn {
  from { transform: translateX(-50%) scale(0.6) translateY(6px); opacity: 0; }
  to   { transform: translateX(-50%) scale(1)   translateY(0);   opacity: 1; }
}

@keyframes bubbleOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* ── Pet Float Wrapper ──────────────────────────────────────────── */
/*
 * Idle float animations live on .pet-float-wrap so they never
 * conflict with reaction transforms on .pet-img.
 */

.pet-float-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Promote to its own compositor layer — avoids main-thread paint per frame */
  will-change: transform;
  filter: drop-shadow(0 8px 24px rgba(108, 92, 231, 0.2));
}

.pet-float--idle-rock     { animation: pet-rock     2.2s ease-in-out infinite; }
.pet-float--idle-bounce   { animation: pet-bounce   1.8s ease-in-out infinite; }
.pet-float--idle-wiggle   { animation: pet-wiggle   2s   ease-in-out infinite; }
.pet-float--idle-look     { animation: pet-look     3s   ease-in-out infinite; }
.pet-float--idle-flap     { animation: pet-flap     2.2s ease-in-out infinite; }
.pet-float--idle-glow     { animation: pet-glow     3s   ease-in-out infinite; }
.pet-float--idle-majestic {
  animation: pet-majestic 3s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6))
          drop-shadow(0 8px 24px rgba(108, 92, 231, 0.3));
}

@keyframes pet-rock {
  0%, 100% { transform: rotate(-6deg); }
  50%       { transform: rotate(6deg); }
}

@keyframes pet-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes pet-wiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%       { transform: rotate(-4deg) translateY(-5px); }
  75%       { transform: rotate(4deg) translateY(-5px); }
}

@keyframes pet-look {
  0%, 70%, 100% { transform: translateY(0) rotate(0deg); }
  40%            { transform: translateY(-8px) rotate(-3deg); }
  60%            { transform: translateY(-8px) rotate(3deg); }
}

@keyframes pet-flap {
  0%, 100% { transform: translateY(0) scale(1); }
  30%       { transform: translateY(-14px) scale(1.04); }
  60%       { transform: translateY(-14px) scale(0.97); }
}

/* pet-glow: float only — no filter animation (filter paint is expensive).
   The static drop-shadow on .pet-float-wrap still shows the base glow. */
@keyframes pet-glow {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50%       { transform: translateY(-14px) scale(1.02); opacity: 0.92; }
}

@keyframes pet-majestic {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-16px) scale(1.03); }
}

/* ── Pet Image ──────────────────────────────────────────────────── */
/*
 * The img itself has NO idle animation — only reaction animations.
 * This prevents transform conflicts (snap on reaction start/end).
 */

.pet-img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  image-rendering: auto;
  user-select: none;
  -webkit-user-drag: none;
  /* No transition — reaction animations handle their own easing */
}

/* ── One-shot Reaction Animations ──────────────────────────────── */

.pet-anim--happy {
  animation: pet-anim-happy 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

.pet-anim--sad {
  animation: pet-anim-sad 0.6s ease both !important;
}

.pet-anim--levelup {
  animation: pet-anim-levelup 1s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.9)) !important;
}

@keyframes pet-anim-happy {
  0%   { transform: scale(1)    rotate(0deg); }
  20%  { transform: scale(1.35) rotate(-8deg); }
  40%  { transform: scale(1.35) rotate(8deg); }
  60%  { transform: scale(1.2)  rotate(-4deg); }
  80%  { transform: scale(1.1)  rotate(3deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

@keyframes pet-anim-sad {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%       { transform: translateY(6px) rotate(-3deg); }
  75%       { transform: translateY(6px) rotate(3deg); }
}

@keyframes pet-anim-levelup {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35) rotate(-5deg); }
  50%  { transform: scale(1.35) rotate(5deg); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ── Pet RWD ────────────────────────────────────────────────────── */
/* Note: .pet-img sizing overrides live in components.css RWD section */
@media (max-width: 379px) {
  .pet-name { font-size: 2rem; }
  .pet-tap-zone { width: 150px; height: 150px; }
}

@media (min-width: 600px) {
  .pet-name { font-size: 2.8rem; }
  .pet-stage-label { font-size: 1.6rem; }
  .pet-tap-zone { width: 240px; height: 240px; }
}

/* ── Summary Screen Pet ─────────────────────────────────────────── */

.summary-pet-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(108, 92, 231, 0.2));
  animation: pet-bounce 1.8s ease-in-out infinite;
}

.summary-pet-img--happy {
  animation: pet-anim-happy 0.8s ease both, pet-bounce 1.8s 0.8s ease-in-out infinite;
}