/* =========================================================
   LUMIÈRE 璐光保養 — 全站共用動效 motion.css
   柔和、保養品牌感、慢速淡入上移
   只用 transform / opacity / box-shadow / background-position
   建立於既有設計系統之上（.reveal / .card / .feature / .hero__bg / .section--deep）
   ========================================================= */

:root {
  --motion-fast: 180ms;
  --motion-base: 360ms;
  --motion-slow: 700ms;
  --ease-lumiere: cubic-bezier(.22, .61, .36, 1);
  --ease-soft-out: cubic-bezier(.16, 1, .3, 1);
  --hover-y: -4px;
}

/* ---------- 尊重使用者偏好：降低動態 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   1. 捲動進場 reveal（data-reveal）+ 既有 .reveal 強化
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
      opacity var(--motion-slow) var(--ease-soft-out),
      transform var(--motion-slow) var(--ease-soft-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

  [data-reveal="fade-left"]  { transform: translate3d(-28px, 0, 0); }
  [data-reveal="fade-right"] { transform: translate3d(28px, 0, 0); }
  [data-reveal="zoom"]       { transform: scale(.96); }

  /* 既有 .reveal 容器內的 grid/卡片：自動 stagger（由 JS 設定 --reveal-delay） */
  .reveal .grid > *,
  .reveal .steps > *,
  .reveal .info-grid > * {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity var(--motion-slow) var(--ease-soft-out),
      transform var(--motion-slow) var(--ease-soft-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.is-visible .grid > *,
  .reveal.is-visible .steps > *,
  .reveal.is-visible .info-grid > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* =========================================================
   2. 按鈕 / CTA hover 微上浮 + 柔光陰影；active 輕壓
   ========================================================= */
.btn {
  transition:
    transform var(--motion-fast) var(--ease-lumiere),
    box-shadow var(--motion-fast) var(--ease-lumiere),
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}
.btn:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 10px 24px rgba(84, 64, 91, .16); }
.btn:active { transform: translate3d(0, -1px, 0) scale(.98); box-shadow: 0 4px 12px rgba(84, 64, 91, .12); }

/* =========================================================
   3. Footer 連結底線由中間展開（nav 既有，補 footer）
   ========================================================= */
.footer-col a,
.footer-bottom a {
  position: relative;
  transition: color var(--motion-fast) ease;
}
.footer-col a::after,
.footer-bottom a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--motion-base) var(--ease-lumiere);
  opacity: .7;
}
.footer-col a:hover::after,
.footer-bottom a:hover::after { transform: scaleX(1); }

/* =========================================================
   4. 卡片 hover：上浮、圖片放大、陰影（強化既有 .card）
   .motion-card 為通用別名
   ========================================================= */
.card,
.motion-card {
  transition:
    transform var(--motion-base) var(--ease-lumiere),
    box-shadow var(--motion-base) var(--ease-lumiere),
    border-color var(--motion-base) ease;
  will-change: transform;
}
.card:hover,
.motion-card:hover {
  transform: translate3d(0, var(--hover-y), 0);
  box-shadow: 0 18px 40px rgba(84, 64, 91, .12);
  border-color: var(--color-primary-soft);
}
.card__media,
.motion-card .image-wrap { overflow: hidden; }
.card__media img,
.motion-card .image-wrap img {
  transition:
    transform 900ms var(--ease-soft-out),
    filter var(--motion-base) ease;
}
.card:hover .card__media img,
.motion-card:hover .image-wrap img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.02);
}

/* 成分卡 / 商品卡分類小標籤 hover 微亮 */
.card:hover .tag:not(.tag--hot) { color: var(--color-accent-dark); }

/* =========================================================
   5. 圖片載入淡入
   ========================================================= */
img[data-img-fade] {
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 500ms ease, transform 700ms var(--ease-soft-out);
}
img[data-img-fade].is-loaded { opacity: 1; transform: scale(1); }

/* =========================================================
   6. Hero 背景 Ken Burns + 文字 stagger 進場
   ========================================================= */
.hero { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  body:not(.reduce-motion) .hero .hero__bg {
    transform-origin: center;
    animation: heroKenBurns 12s var(--ease-soft-out) both;
  }
  @keyframes heroKenBurns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.08); }
  }

  .hero .eyebrow,
  .hero h1,
  .hero .lead,
  .hero .btn-row,
  .hero .hero__stats,
  .hero .page-hero {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    animation: heroTextIn 760ms var(--ease-soft-out) forwards;
  }
  .hero .eyebrow     { animation-delay: 120ms; }
  .hero h1           { animation-delay: 220ms; }
  .hero .lead        { animation-delay: 340ms; }
  .hero .btn-row     { animation-delay: 460ms; }
  .hero .hero__stats { animation-delay: 560ms; }
  .hero .page-hero   { animation-delay: 220ms; }

  @keyframes heroTextIn {
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  /* sets.html 中央紫色文字框 */
  .hero .page-hero {
    animation-name: panelIn;
    animation-duration: 800ms;
  }
  @keyframes panelIn {
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }
}

/* =========================================================
   7. 紫色 CTA 區塊（.section--deep）極慢漸層流動
   ========================================================= */
.section--deep,
.cta-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(201, 142, 109, .20), transparent 32%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .10), transparent 28%),
    var(--color-primary);
  background-size: 160% 160%;
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.reduce-motion) .section--deep,
  body:not(.reduce-motion) .cta-section {
    animation: ctaGradient 14s ease-in-out infinite alternate;
  }
  @keyframes ctaGradient {
    from { background-position: 0% 40%; }
    to   { background-position: 100% 60%; }
  }
}

/* =========================================================
   8. FAQ（既有原生 <details>）展開內容淡入
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p { animation: faqFadeIn var(--motion-base) var(--ease-soft-out) both; }
  @keyframes faqFadeIn {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
}
.faq summary::after { transition: transform var(--motion-base) var(--ease-lumiere); }

/* =========================================================
   9. Feature icon 進場輕彈 + hover 微旋轉
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal.is-visible .feature__icon,
  [data-reveal].is-visible .feature__icon {
    animation: badgePop 520ms var(--ease-soft-out) both;
  }
  @keyframes badgePop {
    0%   { transform: scale(.82); opacity: 0; }
    65%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
}
.feature__icon { transition: transform var(--motion-fast) var(--ease-lumiere); }
.feature:hover .feature__icon { transform: translate3d(0, -3px, 0) rotate(-4deg); }

/* 步驟圓點 hover 放大 */
.step__num { transition: transform var(--motion-fast) var(--ease-lumiere); }
.step:hover .step__num { transform: scale(1.08); }

/* =========================================================
   10. 表單 focus 柔光 + 欄位微上移
   ========================================================= */
.field { transition: transform var(--motion-fast) var(--ease-lumiere); }
.field:focus-within { transform: translate3d(0, -2px, 0); }
.field input, .field textarea, .field select {
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

/* 送出按鈕 loading / success */
.btn[data-submit] { position: relative; }
.btn[data-submit] .btn-label { transition: opacity var(--motion-fast) ease; }
.btn[data-submit]::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--motion-fast) ease;
}
.btn[data-submit].is-loading .btn-label { opacity: 0; }
.btn[data-submit].is-loading::after { opacity: 1; animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   11. 商品篩選 filter pills + 卡片切換
   ========================================================= */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: .6rem;
  justify-content: center;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.filter-pill {
  font: inherit; font-size: .92rem; font-weight: 600;
  padding: .55em 1.3em;
  border-radius: 999px;
  border: 1.5px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  cursor: pointer;
  transition:
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    transform var(--motion-fast) var(--ease-lumiere);
}
.filter-pill:hover { transform: translate3d(0, -2px, 0); border-color: var(--color-primary-soft); }
.filter-pill.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.product-grid .card {
  transition:
    opacity var(--motion-base) ease,
    transform var(--motion-base) var(--ease-lumiere),
    box-shadow var(--motion-base) var(--ease-lumiere);
}
.product-grid .card.is-hidden {
  opacity: 0;
  transform: scale(.96);
  pointer-events: none;
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
  padding: 0; margin: 0; border: 0;
}

/* =========================================================
   12. 知識清單逐項淡入（成分搭配地圖等）
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal.is-visible .checklist li {
    animation: listFadeIn 460ms var(--ease-soft-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  @keyframes listFadeIn {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
}