/* scene: 養生與毛孩 */

/* ─── Scene wrapper — 固定右下、半透明、不擋互動 ─── */
.scene-box {
  position: fixed; right: 4%; bottom: 4%;
  width: 320px; height: 320px;
  z-index: 9990; pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.3));
}
@media (max-width: 768px) { .scene-box { width: 200px; height: 200px; right: 2%; bottom: 2%; } }
@media (max-width: 480px) { .scene-box { display: none; } }
@media (prefers-reduced-motion: reduce) { .scene-box { display: none !important; } }
.scene-box * { position: absolute; }


.teapot { width:120px; height:80px; bottom:80px; left:30px;
  background: radial-gradient(ellipse,#c2410c 0%,#7c2d12 100%);
  border-radius: 50% 50% 30% 30% / 60% 60% 20% 20%;
  box-shadow: 0 8px 16px rgba(0,0,0,.4);
  transform-origin: 20% 80%;
  animation: teapot-pour 6s ease-in-out infinite; }
.teapot::before { content:''; position:absolute; right:-30px; top:30px; width:40px; height:20px;
  background: linear-gradient(135deg,#c2410c,#7c2d12); border-radius: 0 50% 50% 0;
  transform: rotate(-20deg); }
.teapot::after { content:''; position:absolute; left:-20px; top:20px; width:30px; height:40px;
  border: 6px solid #7c2d12; border-right: 0; border-radius: 50% 0 0 50%; }
@keyframes teapot-pour { 0%,40%,100%{transform:rotate(0);} 20%{transform:rotate(35deg);} }
.tea-stream { width:5px; height:80px; bottom:30px; left:170px;
  background: linear-gradient(to bottom,#7c2d12,transparent); border-radius: 3px; opacity:0;
  animation: t-stream 6s ease-in-out infinite; }
@keyframes t-stream { 0%,18%,42%,100%{opacity:0;} 22%,38%{opacity:1;} }
.cat { width:60px; height:40px; bottom:30px; right:30px;
  background: linear-gradient(135deg,#15803d 0%,#052e16 100%); border-radius: 30% 30% 40% 40% / 40% 40% 60% 60%;
  animation: cat-walk 8s ease-in-out infinite; }
.cat::before { content:''; position:absolute; top:-20px; left:5px; width:50px; height:35px;
  background: inherit; border-radius: 50% 50% 30% 30%; }
.cat::after { content:'⟡'; position:absolute; top:-25px; right:0; color:#fbbf24; font-size:16px; }
@keyframes cat-walk { 0%{transform:translateX(0);} 50%{transform:translateX(-120px) scaleX(-1);} 100%{transform:translateX(0);} }
.heart-rate { width:200px; height:30px; top:60px; right:60px;
  background: linear-gradient(90deg,transparent 0%,transparent 30%,#dc2626 30%,#dc2626 32%,
    transparent 32%,transparent 45%,#dc2626 45%,#dc2626 47%,transparent 47%);
  background-size: 60px 100%;
  animation: heart-beat 1.5s linear infinite; }
@keyframes heart-beat { 0%{background-position: 0 0;} 100%{background-position: 60px 0;} }
.leaf { width:20px; height:30px; top:20px; left:50%;
  background: linear-gradient(135deg,#15803d,#052e16); border-radius: 50% 0 50% 50%;
  animation: leaf-fall 5s ease-in-out infinite; }
.leaf.l1{animation-delay:0s;} .leaf.l2{animation-delay:2s; left:60%;}
@keyframes leaf-fall { 0%{transform:translate(0,0) rotate(0); opacity:0;} 20%{opacity:1;}
  100%{transform:translate(-30px,260px) rotate(540deg); opacity:0;} }