/* PAWMELO 「圆圈缩放」跳转特效（B 方案）
   —— 首页：从按钮位置长出青色光球铺满屏幕（.pet-portal-circle / .pet-portal-ring）
   —— 目标页：圆形揭幕露出内容，同时页面由 1.14 倍缩放回正，卡片错峰浮现
   纯扩展样式，不改任何构建产物。 */

/* ===== 首页：光球扩散 ===== */
.pet-portal-circle,
.pet-portal-ring {
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
}
.pet-portal-circle {
  z-index: 9998;
  /* 与全部商品页同色系：页面底色 #0b132d + 卡片渐变蓝 #172245→#25376a */
  background: radial-gradient(circle at 50% 50%, #25376a 0%, #172245 55%, #0b132d 100%);
  box-shadow: 0 0 120px 40px rgba(117, 216, 255, .18);
  transition: transform .62s cubic-bezier(.65, 0, .35, 1), opacity .35s ease;
}
.pet-portal-circle.is-grow { transform: translate(-50%, -50%) scale(1); }
.pet-portal-ring {
  z-index: 9999;
  border: 2px solid rgba(117, 216, 255, .65);
  opacity: .9;
}
.pet-portal-ring.is-grow { animation: pet-portal-ring .9s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes pet-portal-ring {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: .95; border-width: 3px; }
  70%  { opacity: .35; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0;   border-width: 1px; }
}

/* 首页退场：轻微缩小 + 模糊，强化"穿过圆圈"的观感 */
.pet-portal-leaving {
  transform: scale(.96);
  filter: blur(6px);
  opacity: .35;
  transition: transform .55s ease, filter .55s ease, opacity .55s ease;
}

/* ===== 全部商品独立页：入场揭幕 ===== */
html { background: #0b132d; }

.pet-all-page { background: #0b132d; }
/* 初始不可见，脚本会用真实圆心覆盖；放在 CSS 里是为了避免脚本执行前的闪现 */
.pet-all-page .pet-all-products { clip-path: circle(0% at 50% 42%); }
.pet-all-page.is-settled .pet-all-products { clip-path: none; }

.pet-all-page .pet-all-products__inner {
  transform: scale(1.14);
  transform-origin: center top;
  transition: transform .95s cubic-bezier(.16, .84, .28, 1);
}
.pet-all-page.is-revealed .pet-all-products__inner { transform: scale(1); }

.pet-all-page .pet-all-product-card {
  opacity: 0;
  transform: translateY(18px) scale(.97);
  filter: blur(14px);
}
.pet-all-page.is-revealed .pet-all-product-card {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1),
              filter .8s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
/* 动画结束后恢复卡片自身的 hover 过渡，避免错峰延迟影响 hover */
.pet-all-page.is-settled .pet-all-product-card {
  transition: transform .25s, border-color .25s;
  transition-delay: 0s;
}

.pet-all-page__back {
  display: inline-block;
  margin-bottom: 1.6rem;
  color: #8ee5ff;
  font: 700 13px/1 Inter, sans-serif;
  text-decoration: none;
}
.pet-all-page__back:hover { color: #fff; }
.pet-all-page__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.pet-all-page__head h1 { margin: 0; font: 900 clamp(1.8rem, 4vw, 2.8rem)/1 Outfit, Inter, sans-serif; letter-spacing: -.05em; }
.pet-all-page__head span { color: rgba(232, 239, 255, .55); font: 700 12px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .pet-portal-circle, .pet-portal-ring { display: none; }
  .pet-all-page .pet-all-products { clip-path: none; }
  .pet-all-page .pet-all-products__inner { transform: none; }
  .pet-all-page .pet-all-product-card { opacity: 1; transform: none; filter: none; }
}