/* ===== 倒酒過場 ===== */
/* 換頁後，覆蓋層要等腳本執行才存在，那之前新頁面已經畫出來了 —— 就是那一下閃爍。
   head 裡的行內腳本會在第一個影格前掛上這個 class，用同一組漸層先蓋住畫面，
   等 pourIn() 接手後再拿掉，兩者顏色相同所以看不出交接。 */
html.pour-arriving::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  background:
    linear-gradient(180deg,
      #FFC46B 0%,
      #FF8A5B 18%,
      #FF4D8D 48%,
      #A05CFF 78%,
      #7B5CFF 100%);
}

/* 兩段式：離開頁面時酒液漲滿畫面，抵達新頁面後退去。
   兩段拼起來像同一個連續動作，中間的換頁被藏在滿版的酒液底下。 */

.pour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}
.pour-overlay.active { opacity: 1; visibility: visible; pointer-events: all; }

/* 底幕：先壓暗畫面，酒液才不會像浮在亮處 */
.pour-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(10, 11, 26, 0.72), rgba(5, 6, 13, 0.94));
  opacity: 0;
  transition: opacity 0.5s ease;
}
.pour-overlay.active .pour-veil { opacity: 1; }

/* 酒液本體，高度由 JS 驅動 */
.pour-liquid {
  position: absolute;
  z-index: 1;
  left: -5vw;
  right: -5vw;
  bottom: 0;
  height: 0;
  background:
    linear-gradient(180deg,
      #FFC46B 0%,
      #FF8A5B 18%,
      #FF4D8D 48%,
      #A05CFF 78%,
      #7B5CFF 100%);
  box-shadow: 0 -18px 60px rgba(255, 77, 141, 0.45);
  will-change: height;
}

/* 液面波浪：兩層不同速度與相位，看起來才有厚度 */
.pour-wave {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 200%;
  height: 90px;
  fill: #FFC46B;
}
.pour-wave.w2 {
  fill: #FF8A5B;
  opacity: 0.55;
  height: 70px;
  animation-delay: -1.4s;
}
.pour-wave { animation: waveSlide 2.6s linear infinite; }
.pour-wave.w2 { animation-duration: 3.4s; animation-direction: reverse; }
@keyframes waveSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 液面高光，讓邊緣像真的液體而不是色塊 */
.pour-glint {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 220, 0.9), transparent);
  filter: blur(1px);
  opacity: 0.8;
}

/* 氣泡 */
.pour-bubble {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 240, 210, 0.75);
  background: rgba(255, 255, 255, 0.14);
  animation: bubbleUp linear infinite;
}
@keyframes bubbleUp {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.85; }
  100% { transform: translateY(-78vh) scale(1.15); opacity: 0; }
}

/* 中央的杯子與字樣。要疊在酒液之上，否則畫面被淹沒時只剩一片色塊 */
.pour-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pour-overlay.active .pour-scene { opacity: 1; transform: none; }

.pour-glass { width: min(300px, 66vw); filter: drop-shadow(0 12px 40px rgba(255, 77, 141, 0.45)); }
.pour-glass .pg-bottle { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45)); }
.pour-glass .pg-stream-hi { opacity: .55; }
.pour-glass .pg-liquid { filter: drop-shadow(0 0 6px rgba(255, 120, 150, .35)); }

.pour-glass .pg-stream { opacity: .97; filter: blur(.25px) drop-shadow(0 1px 4px rgba(120, 20, 60, .5)) drop-shadow(0 0 8px rgba(255, 150, 120, .3)); }

/* 撞擊點濺起的酒滴 */
.pour-glass .pg-splash { opacity: 0; transition: opacity .12s linear; }
.pour-glass .pg-drop { animation: pgDrop .42s ease-out infinite; filter: drop-shadow(0 0 3px rgba(255, 245, 220, .8)); }
.pour-glass .pg-drop.d1 { --dx: -7px; animation-delay: 0s; }
.pour-glass .pg-drop.d2 { --dx: 6px;  animation-delay: .14s; }
.pour-glass .pg-drop.d3 { --dx: -2px; animation-delay: .27s; }
.pour-glass .pg-drop.d4 { --dx: 10px; animation-delay: .35s; }
.pour-glass .pg-drop.d5 { --dx: -11px; animation-delay: .2s; }
@keyframes pgDrop {
  0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
  25%  { opacity: .95; }
  100% { transform: translate(var(--dx), -12px) scale(.15); opacity: 0; }
}

.pour-word {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
  font-size: clamp(13px, 1.6vw, 17px);
  font-weight: 700;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: #FFF6E6;
  /* 深色底與亮酒液上都要讀得清楚，所以同時給光暈與暗邊 */
  text-shadow:
    0 2px 20px rgba(255, 181, 71, 0.7),
    0 1px 3px rgba(60, 20, 10, 0.75);
}
.pour-word span { animation: wordPulse 1.5s ease-in-out infinite; display: inline-block; }
@keyframes wordPulse {
  0%, 100% { opacity: 0.45; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-2px); }
}

/* 減少動態偏好：直接切換，不做動畫 */
@media (prefers-reduced-motion: reduce) {
  .pour-wave, .pour-bubble, .pour-word span { animation: none; }
  .pour-overlay, .pour-veil, .pour-scene { transition: none; }
}