/* =====================================================================
 * English Pet 补充样式
 * 说明：安全区、滚动条隐藏、基础排版、骨架屏与宠物动效等。
 * @date 2026-09-12
 * ===================================================================== */

@layer base {
  html, body {
    width: 100vw;
    margin: 0;
    padding: 0;
    background-color: #f8f9ff;
  }
  body {
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Quicksand', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  }
  .pb-safe { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }
  .pt-safe { padding-top: env(safe-area-inset-top, 0px); }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child { margin-bottom: 0 !important; }
}

/* 隐藏滚动条，保持 App 观感 */
::-webkit-scrollbar { display: none; }

/* 最小触控区域 */
.tap-min {
  min-height: 48px;
  min-width: 48px;
}

/* 骨架屏微光动画 */
@keyframes skeleton-shimmer {
  0%   { opacity: 1; }
  50%  { opacity: 0.6; }
  100% { opacity: 1; }
}
.skeleton-shimmer {
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

/* 宠物呼吸待机动画 */
@keyframes pet-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
.pet-breathe {
  animation: pet-breathe 3s ease-in-out infinite;
}

/* 宠物开心蹦跳 */
@keyframes pet-bounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-10px); }
  50%      { transform: translateY(0); }
  70%      { transform: translateY(-6px); }
}
.pet-bounce {
  animation: pet-bounce 1.2s ease-in-out infinite;
}

/* 底部导航按压反馈 */
.nav-item {
  transition: transform 150ms ease;
}
.nav-item:active {
  transform: scale(0.95);
}

/* 主按钮按压落差（4px 投影） */
.btn-press {
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
  transition: all 120ms ease;
}
.btn-press:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

/* 隐藏辅助类 */
.hidden { display: none !important; }

/* 安全区底部占位 */
.safe-bottom {
  height: calc(env(safe-area-inset-bottom, 0px) + 64px);
}