/* ==========================================================================
   藝品印刷 — 全站動效層 (animations.css)
   精品印刷 / 紙張質感 / 穩重專業：淡入、微上移、細緻 hover、慢速 Ken Burns。
   對應本站真實 class 名稱 (.btn / .nav__menu / .brand / .feature-card …)。
   ========================================================================== */

:root {
  --motion-fast: 180ms;
  --motion-base: 420ms;
  --motion-slow: 900ms;
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);
  /* 沿用既有設計變數：--color-primary 互動藍、--color-yellow 品牌黃 */
  --motion-blue: var(--color-primary, #d8a900);
  --motion-yellow: var(--color-yellow, #f2c300);
}

html { scroll-behavior: smooth; }

/* --------- reduced-motion 保護：完全停用動效 --------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   1. 捲動 reveal 系統 (JS 加 .is-visible)
   ========================================================================== */
.js-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
  will-change: opacity, transform;
}
.js-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

.js-reveal.reveal-left  { transform: translate3d(-28px, 0, 0); }
.js-reveal.reveal-right { transform: translate3d(28px, 0, 0); }
.js-reveal.reveal-left.is-visible,
.js-reveal.reveal-right.is-visible { transform: translate3d(0, 0, 0); }

/* section 整體進場 */
.section-reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
}
.section-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

/* ==========================================================================
   2. 首屏 hero 進場 + Ken Burns
   ========================================================================== */
.hero h1,
.page-head h1 {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  animation: heroTextIn 720ms var(--ease-soft) 140ms forwards;
}
.hero p,
.hero__sub {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: heroTextIn 720ms var(--ease-soft) 300ms forwards;
}
@keyframes heroTextIn { to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* hero 背景圖慢速 Ken Burns。
   本站 hero 背景以 inline background-image 設在 .hero--photo 元素本身，
   ::before(暗色漸層遮罩) 已被佔用，故直接對元素的 background-size 做動畫，
   不影響遮罩與文字層。 */
.hero--photo {
  overflow: hidden;
  background-size: cover;
  background-position: center;
  animation: heroKenBurns 7s var(--ease-soft) both;
}
@keyframes heroKenBurns {
  from { background-size: 116%; }
  to   { background-size: cover; }
}

/* ==========================================================================
   3. 圖片載入淡入
   ========================================================================== */
.js-img-fade {
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
}
.js-img-fade.is-loaded { opacity: 1; }

/* 圖片框紙張質感 hover 放大 (.story__media / .carousel__slide 自動套用) */
.image-frame { overflow: hidden; }
.image-frame img {
  transition: transform var(--motion-slow) var(--ease-soft), filter var(--motion-base) ease;
}
.image-frame:hover img { transform: scale(1.035); filter: contrast(1.03) saturate(1.04); }

/* ==========================================================================
   4. 按鈕 hover / active 微互動
   ========================================================================== */
.btn {
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}
.btn:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 10px 24px rgba(168,115,42,.22); }
.btn:active { transform: translate3d(0, 0, 0) scale(.98); }

/* CTA 內箭頭滑動 (前往購物 →) */
.btn .arrow, .cta-arrow {
  display: inline-block;
  transition: transform var(--motion-fast) var(--ease-out);
}
.btn:hover .arrow, .btn:hover .cta-arrow { transform: translate3d(4px, 0, 0); }

/* ==========================================================================
   5. 導覽列 hover 底線由中央展開
   ========================================================================== */
.nav__menu a {
  position: relative;
  transition: color var(--motion-fast) ease;
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 100%;
  height: 2px;
  background: var(--motion-blue);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 240ms var(--ease-out);
}
.nav__menu a:hover::after { transform: translateX(-50%) scaleX(1); }
/* active 頁已有 border-bottom，避免雙線：隱藏其 ::after */
.nav__menu a.is-active::after { display: none; }

/* logo / header icon hover */
.brand { transition: transform var(--motion-fast) var(--ease-out); }
.brand:hover { transform: scale(1.02); }
.nav__icon { transition: color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out); }
.nav__icon:hover { transform: translate3d(0, -2px, 0); }

/* ==========================================================================
   6. 卡片 hover 提升質感
   ========================================================================== */
.feature-card,
.idea-card,
.login-card,
.empty-cart-card,
.contact-card2,
.value-card {
  transition:
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    border-color var(--motion-base) ease;
}
.feature-card:hover,
.idea-card:hover,
.login-card:hover,
.empty-cart-card:hover,
.contact-card2:hover,
.value-card:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 18px 48px rgba(20, 35, 55, .12);
  border-color: rgba(31, 122, 224, .28);
}

/* feature 卡 icon hover 放大 */
.feature-card .ico,
.feature-card svg,
.idea-card svg {
  transition: transform var(--motion-fast) var(--ease-out), color var(--motion-fast) ease;
}
.feature-card:hover .ico,
.feature-card:hover svg,
.idea-card:hover svg { transform: scale(1.1); color: var(--motion-blue); }

/* ==========================================================================
   7. 點點背景緩慢漂移 (.page-head / .quote-band)
   ========================================================================== */
.page-head,
.quote-band { background-size: 22px 22px; animation: dotsDrift 18s linear infinite; }
@keyframes dotsDrift { from { background-position: 0 0; } to { background-position: 44px 22px; } }

/* ==========================================================================
   8. 流程步驟 / 服務流程依序出現 + hover
   ========================================================================== */
.process__step { transition: transform var(--motion-base) var(--ease-out); }
.process__num { transition: background-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out); }
.process__step:hover .process__num { transform: scale(1.08); background: var(--motion-yellow); }

/* ==========================================================================
   9. footer 進場 stagger + 社群 icon hover
   ========================================================================== */
.footer-grid > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}
.site-footer.is-visible .footer-grid > * { opacity: 1; transform: translate3d(0, 0, 0); }
.site-footer.is-visible .footer-grid > *:nth-child(2) { transition-delay: 90ms; }
.site-footer.is-visible .footer-grid > *:nth-child(3) { transition-delay: 180ms; }
.site-footer.is-visible .footer-grid > *:nth-child(4) { transition-delay: 270ms; }

.footer-social a {
  transition:
    transform var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}
.footer-social a:hover { transform: translate3d(0, -3px, 0); background: var(--motion-blue); color: #fff; }

/* ==========================================================================
   10. carousel 箭頭 hover (本站 .carousel__arrow 已 transform:translateY(-50%))
   ========================================================================== */
.carousel__arrow {
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) ease;
}
.carousel__arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 24px rgba(20,35,55,.18); }

/* ==========================================================================
   11. 卡片 / 首屏進場 keyframe & 空車 icon 微彈
   ========================================================================== */
.login-card.card-enter,
.empty-cart-card.card-enter {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.985);
  animation: cardEnter 700ms var(--ease-soft) 240ms forwards;
}
@keyframes cardEnter { to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }

.empty-cart-icon {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.9);
  animation: emptyIconIn 520ms var(--ease-soft) 520ms forwards;
}
@keyframes emptyIconIn {
  70%  { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.06); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* 浮動小圖 (about 品牌故事疊圖) */
.float-card { animation: floatCard 4.8s ease-in-out infinite; }
@keyframes floatCard { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-8px,0); } }

/* ==========================================================================
   12. 表單 focus 細緻互動 + 送出 loading
   ========================================================================== */
.contact-form, form[data-static] {
  transition: box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) ease;
}
input, textarea, select {
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--motion-blue);
  box-shadow: 0 0 0 4px rgba(216,169,0,.14);
  outline: none;
}
.login-card.is-error { animation: formShake 360ms var(--ease-out); }
@keyframes formShake {
  0%,100% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(-6px,0,0); }
  50% { transform: translate3d(6px,0,0); }
  75% { transform: translate3d(-3px,0,0); }
}

button.is-loading { pointer-events: none; opacity: .82; }
button.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-left: 8px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }