/* ══════════════════════════════════════════════════════════════
   site.css — ÉCRU 執行期補充樣式（globals.css 之外的運作層）
   品牌樣式（eyebrow/roll-link/marquee/img-elegant…）在 tailwind.build.css
   ══════════════════════════════════════════════════════════════ */

/* ---------- 字型變數落地（原作 next/font 變數 → Google Fonts 實名） ---------- */
:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-tw-serif: "Noto Serif TC", serif;
  --font-tw-sans: "Noto Sans TC", sans-serif;
  --font-latin-sans: "Manrope", sans-serif;
}

/* ---------- 掛點：不產生額外盒 ---------- */
[data-island] { display: contents; }
/* 需要實體盒的掛點由自身 class 覆蓋（header/footer 等） */
header[data-island], footer[data-island], div[data-island].ecru-box { display: block; }

/* ---------- 商品卡進場（對映 framer animate：opacity 0/y24 → 0） ---------- */
@keyframes ecru-card-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ecru-card-in { animation: ecru-card-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ---------- 骨架屏進場 ---------- */
@keyframes ecru-skel-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ecru-skel-in { animation: ecru-skel-in 0.4s ease both; }

/* ---------- hero 遮罩標題行 ---------- */
.hl-mask { overflow: hidden; }
.hl-line {
  display: block;
  transform: translateY(115%);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.ecru-hero-in .hl-line { transform: translateY(0%); }

/* ---------- hero 各元素進場（全由 .ecru-hero-in 觸發，delay 逐字對齊原作） ---------- */
.hi-fade {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.ecru-hero-in .hi-fade, .hi-fade.in { opacity: 1; }
.hi-rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.ecru-hero-in .hi-rise { opacity: 1; transform: translateY(0); }
.hi-card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ecru-hero-in .hi-card { opacity: 1; transform: translateY(0); }
.hi-clip {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.25s cubic-bezier(0.76, 0, 0.24, 1);
}
.ecru-hero-in .hi-clip { clip-path: inset(0% 0 0 0); }
/* 捲動提示：雙條件門控（introStarted && !scrolledPast），可再淡出 */
.hi-scroll { opacity: 0; transition: opacity 0.6s ease; }
.hi-scroll.in { opacity: 1; }

/* ---------- SCROLL 提示線（原作：y -100%→100% 1.8s 無限 easeInOut） ---------- */
@keyframes ecru-scroll-line {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}
.ecru-scroll-line { animation: ecru-scroll-line 1.8s ease-in-out infinite; }

/* ---------- 換頁布幕（兩層，常駐 -101% 頂上；cover 自頂落下、reveal 向上掀離） ---------- */
.ecru-curtain-sec, .ecru-curtain-main {
  transform: translateY(-101%);
  transition: transform 0.62s cubic-bezier(0.76, 0, 0.24, 1);
}
.ecru-curtain.covering .ecru-curtain-sec  { transform: translateY(0%);    transition-delay: 0.08s; }
.ecru-curtain.covering .ecru-curtain-main { transform: translateY(0%); }
.ecru-curtain.revealing .ecru-curtain-sec { transform: translateY(-101%); transition-delay: 0.02s; }
.ecru-curtain.revealing .ecru-curtain-main{ transform: translateY(-101%); }
.ecru-mono {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ecru-curtain.covering .ecru-mono  { opacity: 1; transform: translateY(0);    transition-delay: 0.42s; }
.ecru-curtain.revealing .ecru-mono { opacity: 0; transform: translateY(-10px); }
.ecru-mono-line {
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.ecru-curtain.covering .ecru-mono-line { transform: scaleX(1); transition-delay: 0.62s; }
.ecru-curtain-bar {
  width: 0%;
  transition: width 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}
.ecru-curtain.covering .ecru-curtain-bar { width: 100%; transition-delay: 0.3s; }

/* ---------- Loader ---------- */
.ecru-loader { transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1); }
.ecru-loader.lifting { transform: translateY(-100%); }
.ecru-loader-letter {
  display: inline-block;
  opacity: 0; transform: translateY(26px); filter: blur(8px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.ecru-loader.on .ecru-loader-letter { opacity: 1; transform: translateY(0); filter: blur(0); }
.ecru-loader-hairline {
  width: 0;
  transition: width 1.1s cubic-bezier(0.76, 0, 0.24, 1) 0.9s;
}
.ecru-loader.on .ecru-loader-hairline { width: 200px; }
.ecru-loader-fade { opacity: 0; transition: opacity 0.8s ease; }
.ecru-loader.on .ecru-loader-fade { opacity: 1; }
.ecru-loader-count { transition: opacity 0.4s ease; }
.ecru-loader.lifting .ecru-loader-count { opacity: 0; }

/* ---------- 浮層 transition（Vue <Transition>） ---------- */
.ecru-fade-enter-active { transition: opacity 0.45s ease; }
.ecru-fade-leave-active { transition: opacity 0.45s ease; }
.ecru-fade-enter-from, .ecru-fade-leave-to { opacity: 0; }

.ecru-qv-enter-active { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.ecru-qv-leave-active { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.ecru-qv-enter-from, .ecru-qv-leave-to { transform: translateX(100%); }

.ecru-sheet-enter-active { transition: transform 0.5s ease-in-out; }
.ecru-sheet-leave-active { transition: transform 0.3s ease-in-out; }
.ecru-sheet-enter-from, .ecru-sheet-leave-to { transform: translateX(100%); }

.ecru-menu-enter-active, .ecru-menu-leave-active { transition: opacity 0.4s ease; }
.ecru-menu-enter-from, .ecru-menu-leave-to { opacity: 0; }

/* menu 內項目（由 .ecru-menu-in 觸發） */
.ecru-menu-item {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ecru-menu-in .ecru-menu-item { opacity: 1; transform: translateY(0); }
.ecru-menu-foot { opacity: 0; transition: opacity 0.6s ease 0.5s; }
.ecru-menu-in .ecru-menu-foot { opacity: 1; }

/* ---------- 願望清單 badge 彈入 ---------- */
@keyframes ecru-badge-in {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.ecru-badge-in { animation: ecru-badge-in 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both; }

/* ---------- wishlist 項目進出 ---------- */
.ecru-wl-item { transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.ecru-wl-leave { opacity: 0; transform: translateX(40px); }

/* ---------- 日誌展開（height 0→auto 對映 framer） ---------- */
.ecru-expand {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ecru-expand.open { grid-template-rows: 1fr; opacity: 1; }
.ecru-expand > div { overflow: hidden; min-height: 0; }

/* ---------- toast（sonner 對映：bottom-right 白卡） ---------- */
.ecru-toast {
  transform: translateY(16px); opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.ecru-toast.in { transform: translateY(0); opacity: 1; }
.ecru-toast.out { opacity: 0; transform: translateY(8px) scale(0.98); }

/* ---------- 自訂游標 ---------- */
.ecru-cursor-dot, .ecru-cursor-ring { will-change: transform; }
.ecru-cursor-ring { transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
.cursor-ring-default { width: 34px; height: 34px; background-color: rgba(38,38,42,0); border: 1px solid rgba(163,161,156,0.7); }
.cursor-ring-hover   { width: 52px; height: 52px; background-color: rgba(38,38,42,0);  border: 1px solid rgba(38,38,42,0.25); }
.cursor-ring-view    { width: 72px; height: 72px; background-color: rgba(38,38,42,0.92); border: 1px solid rgba(38,38,42,0.25); }
.ecru-cursor-label { opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.2s; }
.cursor-ring-view .ecru-cursor-label { opacity: 1; transform: scale(1); }

/* ---------- select 下拉 ---------- */
.ecru-select-pop {
  transform-origin: top;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ecru-select-pop.out { opacity: 0; transform: scaleY(0.96) translateY(-4px); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ecru-card-in, .ecru-skel-in, .ecru-badge-in { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hl-line, .hi-fade, .hi-rise, .hi-card, .hi-clip, .hi-scroll,
  .ecru-loader-letter, .ecru-loader-hairline, .ecru-loader-fade,
  .ecru-curtain-sec, .ecru-curtain-main, .ecru-mono, .ecru-mono-line, .ecru-curtain-bar,
  .ecru-menu-item, .ecru-menu-foot, .ecru-expand, .ecru-toast, .ecru-wl-item { transition: none !important; }
  .ecru-scroll-line { animation: none !important; }
}