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


.plate { width:160px; height:160px; bottom:50px; left:50%; margin-left:-80px;
  background: radial-gradient(circle,#fff 0%,#f5e6d3 100%); border-radius: 50%;
  box-shadow: 0 12px 24px rgba(0,0,0,.25); }
.pasta { width:140px; height:80px; bottom:90px; left:50%; margin-left:-70px;
  background: repeating-linear-gradient(45deg,#fef3c7 0 4px,#fbbf24 4px 8px);
  border-radius: 50%; clip-path: polygon(20% 0%, 80% 0%, 100% 60%, 80% 100%, 20% 100%, 0% 60%);
  animation: pasta-twirl 4s ease-in-out infinite; }
@keyframes pasta-twirl { 0%,100%{transform:rotate(0) scale(1);} 50%{transform:rotate(30deg) scale(1.05);} }
.fork { width:8px; height:120px; bottom:80px; left:50%; margin-left:-4px;
  background: linear-gradient(180deg,#888,#444); border-radius: 4px;
  transform-origin: bottom center;
  animation: fork-spin 4s ease-in-out infinite; }
.fork::before { content:''; position:absolute; top:0; left:-8px; width:24px; height:30px;
  background: linear-gradient(180deg,#888,#444);
  clip-path: polygon(0 100%, 0 0, 25% 0, 25% 80%, 50% 80%, 50% 0, 75% 0, 75% 80%, 100% 80%, 100% 0, 125% 0); }
@keyframes fork-spin { 0%,100%{transform:rotate(0);} 50%{transform:rotate(360deg);} }
.tomato { width:30px; height:30px; top:30px; left:60px;
  background: radial-gradient(circle at 30% 30%,#dc2626 0%,#7f1d1d 100%); border-radius: 50%;
  animation: tomato-drop 3s ease-in infinite; }
.tomato.t1{animation-delay:0s;} .tomato.t2{animation-delay:1s; left:90px;}
.tomato.t3{animation-delay:2s; left:120px; width:20px; height:20px;}
@keyframes tomato-drop { 0%{transform:translate(0,0); opacity:0;} 20%{opacity:1;} 70%{opacity:1;}
  100%{transform:translate(0,180px); opacity:0;} }
.basil { width:24px; height:36px; top:40px; right:60px;
  background: radial-gradient(ellipse,#15803d,#052e16); border-radius: 50% 50% 50% 0;
  animation: basil-fall 4s ease-in-out infinite; }
.basil.b1{animation-delay:0s;} .basil.b2{animation-delay:1.5s; right:90px;}
@keyframes basil-fall { 0%{transform:translate(0,0) rotate(0); opacity:0;} 20%{opacity:1;}
  100%{transform:translate(-20px,150px) rotate(360deg); opacity:0;} }
.steam { width:6px; height:60px; bottom:200px; left:50%;
  background: radial-gradient(ellipse,rgba(255,255,255,.6),transparent); filter: blur(4px);
  animation: r-steam 3s ease-out infinite; opacity:0; }
.steam.s1{margin-left:-20px;} .steam.s2{margin-left:0; animation-delay:.8s;}
.steam.s3{margin-left:20px; animation-delay:1.6s;}
@keyframes r-steam { 0%{transform:translateY(0); opacity:0;} 30%{opacity:.7;} 100%{transform:translateY(-60px) scale(2); opacity:0;} }