/* 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; }


.tube { width:140px; height:50px; top:80px; left:30px;
  background: linear-gradient(90deg,#22d3ee 0%,#34d399 100%); border-radius: 25px;
  transform-origin: left center;
  animation: tube-squeeze 5s ease-in-out infinite; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
@keyframes tube-squeeze { 0%,100%{transform:scaleY(1) rotate(-15deg);} 50%{transform:scaleY(.7) rotate(-25deg);} }
.paste { width:20px; height:50px; top:90px; left:160px;
  background: linear-gradient(180deg,#34d399 0%,#10b981 100%); border-radius: 10px;
  animation: paste-extrude 5s ease-in-out infinite; transform-origin: top center; }
@keyframes paste-extrude { 0%,30%{transform:scaleY(0);} 50%,100%{transform:scaleY(1);} }
.tooth { width:50px; height:60px; bottom:80px; left:50%; margin-left:-25px;
  background: radial-gradient(circle at 30% 30%,#fff,#e0e7ff);
  border-radius: 50% 50% 30% 30%;
  box-shadow: 0 4px 12px rgba(34,211,238,.4), inset -4px -4px 8px rgba(0,0,0,.1);
  animation: tooth-shine 3s ease-in-out infinite; }
@keyframes tooth-shine { 0%,100%{transform:scale(1); filter: brightness(1);} 50%{transform:scale(1.1); filter: brightness(1.3) drop-shadow(0 0 12px #34d399);} }
.sparkle { width:8px; height:8px; background: #fff; border-radius: 50%;
  box-shadow: 0 0 8px #fff; }
.sparkle.s1{top:60px; left:50%; margin-left:30px; animation: sparkle 2s ease-in-out infinite;}
.sparkle.s2{top:90px; left:50%; margin-left:-50px; animation: sparkle 2s ease-in-out infinite .5s;}
.sparkle.s3{bottom:140px; left:50%; margin-left:40px; animation: sparkle 2s ease-in-out infinite 1s;}
@keyframes sparkle { 0%,100%{transform:scale(0); opacity:0;} 50%{transform:scale(1.5); opacity:1;} }
.bacteria { width:20px; height:20px; bottom:120px; left:50%; margin-left:-10px;
  background: #84cc16; border-radius: 50% 30% 50% 30%;
  animation: bact-die 4s ease-in-out infinite; }
@keyframes bact-die { 0%,20%{transform:scale(1); opacity:.8;}
  30%{transform:scale(1.5); opacity:1;}
  40%{transform:scale(.1); opacity:0;} 100%{opacity:0;} }