/* ===== 載入時背景緩緩浮現（測驗與調酒共用）===== */
/* 原本是酒液從底部往上長，液面那條邊在次像素下會露縫。
   改成整片色彩用 opacity 慢慢浮現 —— 沒有邊界要對齊，也更接近「朦朧顯現」。 */

.shake-flood {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(ellipse 78% 46% at 50% -6%,
      rgba(255, 246, 224, 0.4), rgba(255, 246, 224, 0) 68%),
    linear-gradient(180deg,
      #FFC46B 0%, #FF8A5B 18%, #FF4D8D 48%, #A05CFF 78%, #7B5CFF 100%);
  animation: floodFade 5.5s ease-out forwards;
  will-change: opacity;
}
@keyframes floodFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 中央留一塊較淡的區域，內容才不會被顏色壓過去 */
.shake-flood::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 52% 44% at 50% 46%,
    rgba(24, 16, 40, 0.5), rgba(24, 16, 40, 0) 70%);
  pointer-events: none;
}

/* 顆粒，打散大面積漸層的帶狀分佈 */
.shake-flood::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.13;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* 顏色浮上來之後，漸層文字會消失在同色背景裡 */
.loading-screen .loading-title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #FFF6E6;
  text-shadow:
    0 2px 24px rgba(255, 181, 71, 0.6),
    0 1px 4px rgba(70, 24, 12, 0.7);
}
.loading-screen .loading-sub {
  color: #FFF0DC;
  text-shadow: 0 1px 4px rgba(70, 24, 12, 0.6);
}

/* 載入畫面的內容要在酒液之上 */
.loading-screen { position: relative; z-index: 1; }
.loading-screen .shaker-stage,
.loading-screen .swirl-stage,
.loading-screen .loading-title,
.loading-screen .loading-sub { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .shake-flood { animation: none; opacity: 0.85; }
}