/* ============================================================================
 * site.css — haneul. 島內自訂樣式與動畫（tailwind.build.css 之外的部分）
 * ========================================================================== */

/* ---------- 開場 BootLoader ---------- */
#hnl-boot {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #faf9f7;
  transform: translateY(0);
  transition: transform 0.82s cubic-bezier(0.83, 0, 0.17, 1);
}
#hnl-boot.is-exit { transform: translateY(-100%); }
#hnl-boot .boot-line {
  margin-top: 3rem; height: 1px; width: 11rem; overflow: hidden; background: #e8e5df;
  opacity: 0; animation: hnl-fade-in 0.4s ease-out 0.4s forwards;
}
#hnl-boot .boot-line i {
  display: block; height: 100%; width: 100%; background: #1a1917;
  transform-origin: left; transform: scaleX(0);
  animation: hnl-scale-x 1.55s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards;
}
#hnl-boot .boot-cap {
  margin-top: 1.5rem; font-family: "Noto Serif KR", "Noto Serif TC", serif;
  font-size: 11px; letter-spacing: 0.5em; color: #8b8781;
  opacity: 0; transform: translateY(6px);
  animation: hnl-boot-cap 0.6s ease-out 0.7s forwards;
}
@keyframes hnl-boot-cap { to { opacity: 1; transform: translateY(0); } }
@keyframes hnl-fade-in { to { opacity: 1; } }
@keyframes hnl-scale-x { to { transform: scaleX(1); } }
@keyframes hnl-rise { to { transform: translateY(0); } }
@keyframes hnl-logo-draw { to { stroke-dashoffset: 0; } }

/* ---------- 頁面進場（route motion.div 對應） ---------- */
.hnl-page-in {
  opacity: 0; transform: translateY(18px);
  animation: hnl-page-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
@keyframes hnl-page-in { to { opacity: 1; transform: translateY(0); } }

/* ---------- 雙層布幕 ---------- */
.hnl-curtain { transform: translateY(100%); }
.hnl-curtain-up { animation: hnl-curtain-up 0.42s cubic-bezier(0.83, 0, 0.17, 1) both; }
.hnl-curtain-out { animation: hnl-curtain-out 0.42s cubic-bezier(0.83, 0, 0.17, 1) both; }
@keyframes hnl-curtain-up { to { transform: translateY(0); } }
/* from 必須明寫：class 由 up 翻成 out 時，缺省的 from 會退回基礎
   .hnl-curtain 的 translateY(100%)，布幕會跳回下方再掃過新頁 */
@keyframes hnl-curtain-out { from { transform: translateY(0); } to { transform: translateY(-100%); } }

/* ---------- 手機選單 ---------- */
.hnl-fade-enter-active, .hnl-fade-leave-active { transition: opacity 0.3s; }
.hnl-fade-enter-from, .hnl-fade-leave-to { opacity: 0; }
@keyframes hnl-menu-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
.hnl-menu-foot { animation: hnl-menu-foot 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
@keyframes hnl-menu-foot { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 公告輪播（popLayout 近似 out-in） ---------- */
.hnl-ann-enter-active, .hnl-ann-leave-active { transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.hnl-ann-enter-from { opacity: 0; transform: translateY(12px); }
.hnl-ann-leave-to { opacity: 0; transform: translateY(-12px); }

/* ---------- 購物車 badge pop ---------- */
.hnl-pop-enter-active { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s; }
.hnl-pop-leave-active { transition: transform 0.2s, opacity 0.2s; }
.hnl-pop-enter-from, .hnl-pop-leave-to { transform: scale(0.3); opacity: 0; }

/* ---------- CartDrawer ---------- */
.hnl-drawer-root { position: relative; z-index: 70; }
.hnl-fade-in { animation: hnl-fade-in 0.3s ease-out both; }
.hnl-drawer-in { animation: hnl-drawer-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes hnl-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.hnl-item-in { animation: hnl-item-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes hnl-item-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- LINE FAB 呼吸光暈 ---------- */
.hnl-breathe { animation: hnl-breathe 2.4s ease-out infinite; }
@keyframes hnl-breathe { 0% { transform: scale(1); opacity: 0.35; } 100% { transform: scale(1.45); opacity: 0; } }

/* ---------- Toast ---------- */
.hnl-toast-enter-active { transition: opacity 0.3s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.hnl-toast-leave-active { transition: opacity 0.25s, transform 0.25s; }
.hnl-toast-enter-from { opacity: 0; transform: translateY(-10px) scale(0.97); }
.hnl-toast-leave-to { opacity: 0; transform: translateY(-6px) scale(0.98); }
.hnl-toast-move { transition: transform 0.3s; }

/* ---------- scroll cue ---------- */
.hnl-scroll-cue { animation: hnl-scroll-cue 1.6s ease-in-out infinite; }
@keyframes hnl-scroll-cue { 0% { transform: translateY(-16px); } 100% { transform: translateY(48px); } }

/* ---------- masonry 間距（取代 [&>*]:mb-4） ---------- */
.hnl-masonry > * { margin-bottom: 1rem; }
@media (min-width: 768px) { .hnl-masonry > * { margin-bottom: 1.5rem; } }

/* ---------- 成功頁 SVG 描邊 ---------- */
.hnl-check-pop { animation: hnl-check-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes hnl-check-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
.hnl-draw-circle {
  stroke-dasharray: 213.7; stroke-dashoffset: 213.7;
  animation: hnl-svg-draw 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.hnl-draw-tick {
  stroke-dasharray: 42; stroke-dashoffset: 42;
  animation: hnl-svg-draw 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}
@keyframes hnl-svg-draw { to { stroke-dashoffset: 0; } }

/* ---------- 門市地圖脈衝 ---------- */
.hnl-map-pulse { animation: hnl-map-pulse 2.2s ease-out infinite; transform-origin: 196px 184px; }
@keyframes hnl-map-pulse {
  0% { opacity: 0.7; transform: scale(0.36); }
  100% { opacity: 0; transform: scale(1); }
}

/* ---------- skeleton-img（v-skel） ---------- */
.skeleton-img { opacity: 0; transition: opacity 0.5s; }
.skeleton-img.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hnl-page-in, .hnl-item-in, .hnl-menu-foot, .hnl-breathe,
  .hnl-scroll-cue, .hnl-map-pulse, .hnl-check-pop { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* 布幕動畫關閉後停在基礎 translateY(100%)＝畫面外，等於瞬間換頁 */
  .hnl-curtain-up, .hnl-curtain-out { animation: none !important; }
  #hnl-boot .boot-line, #hnl-boot .boot-cap { animation: none !important; opacity: 1 !important; }
  #hnl-boot .boot-line i { animation: none !important; transform: scaleX(1); }
}