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


.hair { width:100px; height:200px; top:30px; left:50%; margin-left:-50px;
  background: linear-gradient(180deg,#1a0a14 0%,#4a2415 50%,#8b5a2b 100%); border-radius: 50% 50% 0 0;
  animation: hair-sway 4s ease-in-out infinite; transform-origin: top center; }
@keyframes hair-sway { 0%,100%{transform:rotate(-5deg);} 50%{transform:rotate(5deg);} }
.scissors { width:80px; height:30px; top:80px; left:50%; margin-left:-40px;
  background: linear-gradient(135deg,#d4af37,#f7e7ce); border-radius: 50% 0 0 50%;
  animation: cut-snip 1.5s ease-in-out infinite; transform-origin: right center; }
.scissors::after { content:''; position:absolute; right:0; top:0; width:80%; height:100%;
  background: inherit; transform-origin: right; animation: cut-snip2 1.5s ease-in-out infinite; }
@keyframes cut-snip { 0%,100%{transform:rotate(0);} 50%{transform:rotate(-15deg);} }
@keyframes cut-snip2 { 0%,100%{transform:rotate(0);} 50%{transform:rotate(15deg);} }
.dryer { width:80px; height:60px; bottom:80px; right:40px;
  background: linear-gradient(135deg,#d4af37,#92400e); border-radius: 8px 50% 50% 8px;
  animation: dryer-blow 3s ease-in-out infinite; transform-origin: right center; }
.dryer::before { content:''; position:absolute; bottom:-30px; right:25%; width:30px; height:40px;
  background: inherit; border-radius: 8px; }
@keyframes dryer-blow { 0%,100%{transform:translateX(0) rotate(0);} 50%{transform:translateX(-10px) rotate(-5deg);} }
.wind { width:6px; height:30px; bottom:90px; right:130px;
  background: linear-gradient(90deg,rgba(247,231,206,.8),transparent);
  border-radius: 4px;
  animation: wind-blow 1.5s ease-out infinite; }
.wind.w1{animation-delay:0s;} .wind.w2{animation-delay:.3s; bottom:100px;}
.wind.w3{animation-delay:.6s; bottom:110px;} .wind.w4{animation-delay:.9s; bottom:80px;}
@keyframes wind-blow { 0%{transform:translateX(0); opacity:.8;} 100%{transform:translateX(-60px); opacity:0;} }
.crown { width:40px; height:30px; top:30px; right:40px;
  background: #d4af37; clip-path: polygon(0% 100%, 100% 100%, 90% 30%, 70% 60%, 50% 0%, 30% 60%, 10% 30%);
  filter: drop-shadow(0 0 8px #f7e7ce);
  animation: crown-shine 2s ease-in-out infinite; }
@keyframes crown-shine { 0%,100%{opacity:.7; transform:scale(1);} 50%{opacity:1; transform:scale(1.1);} }