/* ============================================================
   网站小宠物 — 前台样式（SVG 娃娃版）
   ============================================================ */

.site-pet {
    position: fixed;
    z-index: 9998;
    user-select: none;
    -webkit-user-select: none;
    opacity: 0;
    transform: translateY(24px) scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.site-pet.is-ready {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 位置 */
.site-pet--bottom-right { bottom: 24px; right: 24px; }
.site-pet--bottom-left  { bottom: 24px; left: 24px; }
.site-pet--top-right    { top: 84px;    right: 24px; }
.site-pet--top-left     { top: 84px;    left: 24px; }

/* ============================================================
   宠物本体（SVG 娃娃）
   ============================================================ */

.site-pet-body {
    pointer-events: auto;
    cursor: pointer;
    width: var(--pet-size, 96px);
    height: calc(var(--pet-size, 96px) * 1.2);   /* viewBox 100:120 = 5:6 */
    display: block;
    background: transparent;
    border-radius: 0;
    padding: 0;
    filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.18));
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
    will-change: transform;
    outline: none;
    position: relative;
}

.site-pet-body:hover {
    transform: scale(1.06) translateY(-3px);
    filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.28));
}

.site-pet-body:focus-visible {
    filter:
        drop-shadow(0 0 0 3px rgba(37, 99, 235, 0.5))
        drop-shadow(0 8px 16px rgba(15, 23, 42, 0.18));
}

/* SVG 娃娃容器 */
.site-pet-avatar {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
    animation: sitePetBreathe 3.4s ease-in-out infinite;
    transform-origin: center bottom;
}

.site-pet-avatar svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ============================================================
   动画
   ============================================================ */

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

.site-pet.is-jumping .site-pet-avatar {
    animation: sitePetJump 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sitePetJump {
    0%   { transform: scale(1)         translateY(0); }
    20%  { transform: scale(1.08, 0.92) translateY(0); }
    45%  { transform: scale(0.94, 1.10) translateY(-38px) rotate(-6deg); }
    70%  { transform: scale(1.04, 0.96) translateY(0) rotate(3deg); }
    100% { transform: scale(1)         translateY(0); }
}

.site-pet.is-shaking .site-pet-avatar {
    animation: sitePetShake 0.55s ease;
}

@keyframes sitePetShake {
    0%, 100% { transform: rotate(0); }
    20%      { transform: rotate(-10deg); }
    40%      { transform: rotate(8deg); }
    60%      { transform: rotate(-6deg); }
    80%      { transform: rotate(4deg); }
}

/* ============================================================
   气泡
   ============================================================ */

.site-pet-bubble {
    position: absolute;
    background: #fff;
    color: #1e293b;
    padding: 10px 16px;
    border-radius: 14px;
    box-shadow:
        0 6px 24px rgba(15, 23, 42, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.55;
    max-width: 220px;
    min-width: 80px;
    white-space: normal;
    word-break: break-word;
    animation: sitePetBubbleIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    font-weight: 500;
}

.site-pet-bubble::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 2px 2px 4px rgba(15, 23, 42, 0.04);
}

@keyframes sitePetBubbleIn {
    0%   { opacity: 0; transform: translateY(6px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0)  scale(1); }
}

/* 气泡位置 */
.site-pet--bottom-right .site-pet-bubble {
    bottom: calc(var(--pet-size, 96px) * 1.2 + 12px);
    right: 0;
}
.site-pet--bottom-right .site-pet-bubble::after { bottom: -6px; right: 22px; }

.site-pet--bottom-left .site-pet-bubble {
    bottom: calc(var(--pet-size, 96px) * 1.2 + 12px);
    left: 0;
}
.site-pet--bottom-left .site-pet-bubble::after { bottom: -6px; left: 22px; }

.site-pet--top-right .site-pet-bubble {
    top: calc(var(--pet-size, 96px) * 1.2 + 12px);
    right: 0;
}
.site-pet--top-right .site-pet-bubble::after { top: -6px; right: 22px; }

.site-pet--top-left .site-pet-bubble {
    top: calc(var(--pet-size, 96px) * 1.2 + 12px);
    left: 0;
}
.site-pet--top-left .site-pet-bubble::after { top: -6px; left: 22px; }

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 640px) {
    .site-pet--bottom-right { bottom: 16px; right: 12px; }
    .site-pet--bottom-left  { bottom: 16px; left: 12px; }
    .site-pet--top-right    { top: 76px;    right: 12px; }
    .site-pet--top-left     { top: 76px;    left: 12px; }

    .site-pet-body {
        width: calc(var(--pet-size, 96px) * 0.8);
        height: calc(var(--pet-size, 96px) * 0.96);
    }

    .site-pet-bubble {
        font-size: 13px;
        padding: 8px 13px;
        max-width: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-pet-avatar,
    .site-pet.is-jumping .site-pet-avatar,
    .site-pet.is-shaking .site-pet-avatar {
        animation: none;
    }
    .site-pet { transition: opacity 0.2s ease; }
}