/* ============================================================================
 * site.css — tailwind.build.css 之外的島內自訂樣式
 * （globals.css 的自訂層已進 tailwind.build.css；這裡是轉寫新增的部份）
 * ========================================================================== */

/* ---------- 字體變數（原由 next/font/google 注入） ---------- */
:root {
  --font-noto-sans: "Noto Sans TC";
  --font-noto-serif: "Noto Serif TC";
  --font-cormorant: "Cormorant Garamond";
}

/* ---------- 換頁進場（framer AnimatePresence 對映：opacity 0→1, .28s easeOut） ---------- */
.page-enter {
  animation: daon-page-in 0.28s ease-out both;
}
@keyframes daon-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- 開場 LoadingScreen ---------- */
#daon-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--background, #fff);
}
#daon-loader.lifted {
  transform: translateY(-100%);
  transition: transform 0.72s cubic-bezier(0.76, 0, 0.24, 1);
}
#daon-loader .loader-letter {
  display: inline-block;
  transform: translateY(115%);
  animation: daon-letter-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#daon-loader .loader-dot {
  opacity: 0;
  transform: scale(0);
  animation: daon-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}
#daon-loader .loader-caption {
  opacity: 0;
  transform: translateY(6px);
  animation: daon-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.62s forwards;
}
#daon-loader .loader-hairline {
  transform: scaleX(0);
  transform-origin: center;
  animation: daon-scale-x 0.7s cubic-bezier(0.76, 0, 0.24, 1) 0.85s forwards;
}
#daon-loader .loader-sub {
  opacity: 0;
  animation: daon-fade 0.5s ease 1.15s forwards;
}
#daon-loader .loader-shimmer {
  animation: daon-loader-shimmer 1.4s ease-in-out infinite;
}
#daon-loader .loader-since {
  opacity: 0;
  animation: daon-fade 0.6s ease 1.4s forwards;
}
@keyframes daon-letter-in {
  to { transform: translateY(0%); }
}
@keyframes daon-pop {
  to { opacity: 1; transform: scale(1); }
}
@keyframes daon-fade-up {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes daon-scale-x {
  to { transform: scaleX(1); }
}
@keyframes daon-fade {
  to { opacity: 1; }
}
@keyframes daon-loader-shimmer {
  from { transform: translateX(-120%); }
  to { transform: translateX(360%); }
}

/* ---------- 布幕內 shimmer（PageCurtain covering 時播放） ---------- */
.curtain-shimmer {
  animation: daon-curtain-shimmer 0.4s ease-out 0.22s both;
}
@keyframes daon-curtain-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(0%); }
}

/* ---------- scroll cue（首頁 hero） ---------- */
.scroll-cue {
  display: block;
  transform-origin: top;
  animation: daon-scroll-cue 2.2s ease-in-out infinite;
}
@keyframes daon-scroll-cue {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

/* ---------- 購物車數量徽章（spring pop） ---------- */
.cart-badge {
  animation: daon-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes daon-badge-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- 手機選單 transition ---------- */
.menu-fade-enter-active,
.menu-fade-leave-active {
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-fade-enter-from,
.menu-fade-leave-to {
  opacity: 0;
  transform: translateY(24px);
}

/* 手機選單內部逐項進場 */
.menu-link-in {
  animation: daon-menu-link 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.menu-fade-in {
  animation: daon-fade 0.5s ease both;
}
@keyframes daon-menu-link {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---------- 購物車 drawer ---------- */
.drawer-fade-enter-active,
.drawer-fade-leave-active {
  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer-fade-enter-from,
.drawer-fade-leave-to {
  opacity: 0;
}
.drawer-slide-enter-active,
.drawer-slide-leave-active {
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer-slide-enter-from,
.drawer-slide-leave-to {
  transform: translateX(100%);
}

/* ---------- drawer 內品項進出（TransitionGroup） ---------- */
.cart-item-enter-active,
.cart-item-leave-active {
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 220px;
  overflow: hidden;
}
.cart-item-enter-from,
.cart-item-leave-to {
  opacity: 0;
  max-height: 0;
}
.cart-item-move {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- toast 進出 ---------- */
.toast-enter-active,
.toast-leave-active {
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.toast-enter-from {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
}
.toast-leave-to {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}
.toast-move {
  transition: transform 0.3s ease;
}

/* ---------- accordion（grid rows 0fr→1fr） ---------- */
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
}
.acc-body.open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.acc-body > div {
  min-height: 0;
}

/* ---------- v-skel 圖片骨架 ---------- */
.skeleton-img {
  background: linear-gradient(100deg, #f1efec 40%, #e9e7e3 50%, #f1efec 60%);
  background-size: 200% 100%;
  animation: daon-shimmer 1.6s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.skeleton-img.is-loaded {
  animation: none;
  background: none;
  opacity: 1;
}

/* ---------- success check spring ---------- */
.success-check {
  animation: daon-badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
.success-check-inner {
  animation: daon-check-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both;
}
@keyframes daon-check-in {
  from { transform: scale(0) rotate(-30deg); }
  to { transform: scale(1) rotate(0deg); }
}

/* ---------- marquee 無縫化 ----------
   s-marquee 依內容寬度動態決定份數（--marquee-copies），
   位移 -100%/copies 恰好一份寬；份寬 < 視窗寬時不再露空洞。
   預設 2 份時等同原 translateX(-50%) 行為。 */
.marquee-track {
  height: 100%;
  align-items: stretch;
  animation-name: daon-marquee-fill;
}
@keyframes daon-marquee-fill {
  to { transform: translateX(calc(-100% / var(--marquee-copies, 2))); }
}