/* 宠物分层动画 */
.pet-svg { width: 100%; height: 100%; overflow: visible; }
.pet-svg * { transform-box: view-box; }
.pet-svg .float { animation: pet-float 3.6s ease-in-out infinite; }
.pet-svg .breath { animation: pet-breath 2.8s ease-in-out infinite; transform-origin: 0 0; }
.pet-svg .head-bob { animation: pet-headbob 4.2s ease-in-out infinite; transform-origin: 0 0; }
.pet-svg .blink { animation: pet-blink 4.6s infinite; transform-origin: 0 0; }
.pet-svg .tail { animation: pet-sway 2.4s ease-in-out infinite; transform-origin: 0 0; }
.pet-svg .wing-l { animation: pet-flap-l 1.8s ease-in-out infinite; transform-origin: 0 0; }
.pet-svg .wing-r { animation: pet-flap-r 1.8s ease-in-out infinite; transform-origin: 0 0; }
.pet-svg .crest { animation: pet-sway 2s ease-in-out infinite; transform-origin: 0 0; }
.pet-svg .whisker { animation: pet-whisker 3s ease-in-out infinite; transform-origin: 0 0; }
.pet-svg .flame-flick { animation: pet-flick .6s ease-in-out infinite alternate; }
.pet-svg .orb { animation: pet-orb 3s ease-in-out infinite; }
.pet-svg .gem { animation: pet-gem 2s ease-in-out infinite; }
.pet-svg .cloud-bob { animation: pet-orb 4s ease-in-out infinite; }
.pet-svg .scroll-float { animation: pet-orb 3.5s ease-in-out infinite; transform-origin: 0 0; }
.pet-svg .stars-twinkle { animation: pet-gem 2.4s ease-in-out infinite; }
.pet-svg .third-eye { animation: pet-gem 3s ease-in-out infinite; }
.pet-svg .water-ring { animation: pet-gem 2.6s ease-in-out infinite; }
.pet-svg .sweat { animation: pet-sweat 1.6s ease-in infinite; }
.pet-svg .egg-wobble { animation: egg-wobble 3s ease-in-out infinite; transform-origin: 0px 110px; }
.pet-svg .egg-glow { animation: pet-gem 2s ease-in-out infinite; }

.pet-svg.mood-weak { filter: saturate(.35) brightness(.8); }
.pet-svg.mood-weak .float { animation-duration: 7s; }
.pet-svg.mood-weak .tail, .pet-svg.mood-weak .wing-l, .pet-svg.mood-weak .wing-r { animation-duration: 6s; }
.pet-svg.mood-hungry { filter: saturate(.75); }

/* B 版美术：素材自带深色背景，用圆形渐隐遮罩融进星空 */
.pet-art { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent 100%); mask-image: radial-gradient(closest-side, #000 84%, transparent 100%); }
.pet-art img, .pet-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pet-art .art-happy, .pet-art .art-sad { z-index: 1; animation: happyIn .2s ease-out both; }
/* 开心/委屈视频开头的"酝酿"帧已经被剪掉，硬切上来会跳一下，淡入 0.2 秒就顺了 */
@keyframes happyIn { from { opacity: 0 } to { opacity: 1 } }
/* 难过时把颜色抽掉一点、压暗，像蔫了。
   有专门的委屈素材（data-sad）时手下留情——表情本身已经在演了，压太狠会看不出表情。
   没有委屈素材时只能靠调色+下垂来"演难过"，所以更狠一点，再加一个慢慢往下坠的动作。 */
.pet-art.mood-weak { filter: saturate(.45) brightness(.82); }
.pet-art.mood-weak[data-sad] { filter: saturate(.8) brightness(.93); }
.pet-art.mood-hungry { filter: saturate(.75); }
.pet-art.mood-hungry[data-sad] { filter: saturate(.9) brightness(.96); }
.pet-art.mood-weak:not([data-sad]) > video, .pet-art.mood-hungry:not([data-sad]) > video {
  animation: art-sag 6s ease-in-out infinite; }
@keyframes art-sag { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(2.2%) scale(.972); } }

@keyframes pet-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pet-breath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes pet-headbob { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 70% { transform: rotate(3deg); } }
@keyframes pet-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes pet-sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes pet-flap-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
@keyframes pet-flap-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes pet-whisker { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes pet-flick { from { opacity: .75; } to { opacity: 1; } }
@keyframes pet-orb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pet-gem { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes pet-sweat { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes egg-wobble { 0%, 60%, 100% { transform: rotate(0); } 68% { transform: rotate(-6deg); } 76% { transform: rotate(6deg); } 84% { transform: rotate(-3deg); } 92% { transform: rotate(2deg); } }

/* 互动反应 */
.pet-jump { animation: pet-jump .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pet-jump { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-40px) scale(1.06, .96); } 60% { transform: translateY(0) scale(1.08, .92); } 100% { transform: translateY(0) scale(1); } }
.pet-wiggle { animation: pet-wiggle .6s ease-in-out; }
@keyframes pet-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

/* ============================================================
   装扮层（头饰 / 脸饰 / 颈饰 / 手持）
   贴在宠物画面上——因为宠物是视频，真正的衣服没法跟着身体变形，
   所以只做小面积饰品，靠一层同步的呼吸动效让它"像是戴着的"。
   位置存在 db 里（每个物种 × 每个形态各一份），家长可拖拽校准。
   ============================================================ */
.art-wrap { position: relative; width: 100%; height: 100%; }
.art-wrap > .pet-art, .art-wrap > .pet-svg { width: 100%; height: 100%; }
.decor-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.decor-item {
  position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%);
  will-change: left, top;
}
.decor-item > .decor-bob { position: relative; width: 100%; height: 100%; animation: decor-bob 2.8s ease-in-out infinite; }
/* 融进画面：宠物是 3D 渲染（左上主光、深紫蓝环境、毛茸茸软边），扁平矢量直接贴上去像贴纸。
   ① 压一点饱和度和亮度，跟素材的色调对齐；
   ② 第一层投影 = 贴着身体的接触阴影（短、深），第二层 = 落在身上的柔影（长、淡）；
   ③ 一圈很淡的紫色环境光，跟背景同色，边缘不再是"硬切"。 */
.decor-item svg {
  width: 100%; height: 100%; display: block; overflow: visible;
  filter: saturate(.88) brightness(.96)
    drop-shadow(0 1.5px 1px rgba(18, 6, 40, .42))
    drop-shadow(0 5px 6px rgba(18, 6, 40, .3))
    drop-shadow(0 0 2px rgba(150, 120, 255, .35));
}
/* 自带光的饰品（光环、水晶、灯笼、星光、光效）：不压暗不降饱和，往外发一圈自己的光 */
.decor-item.light svg { filter: drop-shadow(0 0 1.5px var(--glow, transparent)) drop-shadow(0 0 6px var(--glow, transparent)); }
/* 光效是一整圈光，不跟着呼吸缩放（缩放一大圈会像在抖） */
.decor-item[data-slot="aura"] > .decor-bob { animation: none; }
/* ④ 光影层：只在饰品轮廓内（遮罩 = 饰品自己）——左上角主光提亮、右下角背光压暗，
   和猫身上的打光方向一致，看着像同一盏灯照着。 */
.decor-lit {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 250, 235, .55) 0%, rgba(255, 250, 235, .12) 32%, rgba(255, 255, 255, 0) 48%, rgba(35, 15, 80, 0) 58%, rgba(35, 15, 80, .5) 100%);
  mix-blend-mode: soft-light;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* 开心动作时饰品"啵"地弹开：素材里猫会转圈、蹭来蹭去，贴纸钉在原地会穿帮，
   干脆让它们跳起来、闪一下藏好，等动作播完再落回来戴好（pets.js 的 playClip 负责加减 class）。 */
.decor-layer.decor-hop .decor-item:not([data-slot="aura"]) .decor-bob { animation: decor-hop .55s cubic-bezier(.3, 1.4, .6, 1) both; }
.decor-layer.decor-land .decor-item:not([data-slot="aura"]) .decor-bob { animation: decor-land .6s cubic-bezier(.25, 1.5, .5, 1) both; }
.decor-layer.decor-hop .decor-item[data-slot="face"] .decor-bob,
.decor-layer.decor-land .decor-item[data-slot="face"] .decor-bob { animation-delay: .05s; }
.decor-layer.decor-hop .decor-item[data-slot="neck"] .decor-bob,
.decor-layer.decor-land .decor-item[data-slot="neck"] .decor-bob { animation-delay: .1s; }
.decor-layer.decor-hop .decor-item[data-slot="hand"] .decor-bob,
.decor-layer.decor-land .decor-item[data-slot="hand"] .decor-bob { animation-delay: .15s; }
@keyframes decor-hop {
  0% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
  35% { transform: translateY(-28%) scale(1.12) rotate(-9deg); opacity: 1; }
  100% { transform: translateY(-46%) scale(.35) rotate(14deg); opacity: 0; }
}
@keyframes decor-land {
  0% { transform: translateY(-40%) scale(.5); opacity: 0; }
  55% { transform: translateY(5%) scale(1.06, .94); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* 弹开时一闪：一颗小星光在饰品原位炸开再消失 */
.decor-layer.decor-hop .decor-item:not([data-slot="aura"])::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 8%, rgba(255, 230, 150, .7) 14%, rgba(255, 210, 120, 0) 46%),
    conic-gradient(from 0deg, transparent 0 20deg, rgba(255, 240, 190, .8) 22deg 26deg, transparent 28deg 110deg, rgba(255, 240, 190, .8) 112deg 116deg, transparent 118deg 200deg, rgba(255, 240, 190, .8) 202deg 206deg, transparent 208deg 290deg, rgba(255, 240, 190, .8) 292deg 296deg, transparent 298deg);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  border-radius: 50%; animation: decor-spark .6s ease-out .25s both;
}
@keyframes decor-spark { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.5) rotate(30deg); opacity: 0; } }
/* 跟宠物自己的呼吸（pet-breath 2.8s）同频，看起来是长在身上而不是贴在屏幕上 */
@keyframes decor-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.6%) scale(1.028); } }

/* 调整模式：饰品可以拖，托起来的那件高亮 */
.decor-layer.editing { pointer-events: auto; }
.decor-layer.editing::before {
  content: ''; position: absolute; inset: 4%; border: 2px dashed rgba(255, 209, 102, .55);
  border-radius: 22px; pointer-events: none;
}
.decor-layer.editing .decor-item {
  pointer-events: auto; cursor: grab; touch-action: none;
  outline: 2px dashed rgba(255, 255, 255, .35); outline-offset: 2px; border-radius: 12px;
}
.decor-layer.editing .decor-item.on {
  outline: 3px solid #ffd166; outline-offset: 3px; border-radius: 12px;
  filter: drop-shadow(0 0 10px rgba(255, 209, 102, .8));
  cursor: grabbing; z-index: 5;
}
.decor-layer.editing .decor-item.on > .decor-bob { animation: none; }

/* 小图上不显示手势和虚线 */
.form-cell .decor-layer.editing::before, .pet-card .decor-layer.editing::before { display: none; }