/* ============================================================
   安馨居家照護 — 全站輕量動效系統 animations.css
   溫暖、安心、專業：進場節奏 / 捲動 reveal / hover 回饋
   只動畫 opacity / transform（少量 box-shadow），不動 layout 屬性
   配合既有 assets/style.css 的 class 命名
   ============================================================ */

:root {
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring-soft: cubic-bezier(0.16, 1, 0.3, 1);

  --motion-fast: 180ms;
  --motion-base: 420ms;
  --motion-slow: 720ms;

  --reveal-y: 24px;
  --hover-y: -6px;
}

/* ---------- 0. 頁面整體淡入 ---------- */
body {
  opacity: 0;
  animation: pageFadeIn 240ms ease-out forwards;
}
@keyframes pageFadeIn { to { opacity: 1; } }

/* ---------- 1. 捲動 reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0);
  transition:
    opacity var(--motion-slow) var(--ease-out-soft),
    transform var(--motion-slow) var(--ease-out-soft);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 列表逐條 stagger：在 <ul data-reveal class="reveal-list"> 上使用 */
.reveal-list li {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 480ms var(--ease-out-soft),
    transform 480ms var(--ease-out-soft);
}
.reveal-list.is-visible {           /* ul 本身不再位移，交給 li */
  opacity: 1;
  transform: none;
}
.reveal-list.is-visible li { opacity: 1; transform: none; }
.reveal-list.is-visible li:nth-child(1) { transition-delay: 60ms; }
.reveal-list.is-visible li:nth-child(2) { transition-delay: 120ms; }
.reveal-list.is-visible li:nth-child(3) { transition-delay: 180ms; }
.reveal-list.is-visible li:nth-child(4) { transition-delay: 240ms; }
.reveal-list.is-visible li:nth-child(5) { transition-delay: 300ms; }
.reveal-list.is-visible li:nth-child(6) { transition-delay: 360ms; }
.reveal-list.is-visible li:nth-child(7) { transition-delay: 420ms; }
.reveal-list.is-visible li:nth-child(8) { transition-delay: 480ms; }

/* ---------- 2. Hero / page-hero 首屏分層進場 ---------- */
.hero, .page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero::before, .page-hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.16), transparent 28%),
    radial-gradient(circle at 80% 12%, rgba(255,255,255,0.10), transparent 34%);
  transform: translate3d(0, var(--hero-parallax-y, 0), 0);
  animation: heroGlow 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroGlow {
  from { transform: translate3d(-1.5%, calc(-1% + var(--hero-parallax-y, 0)), 0) scale(1);    opacity: .75; }
  to   { transform: translate3d(1.5%,  calc(1% + var(--hero-parallax-y, 0)), 0)  scale(1.04); opacity: 1; }
}

/* 子元素依序淡入上移（不需改 HTML，直接鎖既有結構） */
.hero h1, .hero p, .hero .btns, .hero .hero-badges, .hero .hero-rotator,
.page-hero .breadcrumb, .page-hero h1, .page-hero p, .page-hero .btns {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  animation: heroFadeUp var(--motion-slow) var(--ease-out-soft) forwards;
}
.page-hero .breadcrumb { animation-delay: 80ms; }
.hero h1, .page-hero h1 { animation-delay: 180ms; }
.hero p,  .page-hero p  { animation-delay: 300ms; }
.hero .hero-rotator     { animation-delay: 380ms; }
.hero .btns, .page-hero .btns { animation-delay: 440ms; }
.hero .hero-badges      { animation-delay: 560ms; }
@keyframes heroFadeUp { to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* 信任標籤逐一 stagger（hero-badges 內 span） */
.hero-badges span {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: heroFadeUp 520ms var(--ease-out-soft) forwards;
}
.hero-badges span:nth-child(1) { animation-delay: 620ms; }
.hero-badges span:nth-child(2) { animation-delay: 720ms; }
.hero-badges span:nth-child(3) { animation-delay: 820ms; }

/* 首頁 hero 熱門需求輪播 */
.hero-rotator {
  margin: 14px 0 0;
  color: #eafaf6;
  font-size: 1rem;
}
.hero-rotator [data-rotator] {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  transition: opacity 260ms ease, transform 260ms var(--ease-out-soft);
}
.hero-rotator [data-rotator].is-changing {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}

/* ---------- 3. Header 捲動微互動 ---------- */
.site-header {
  transition:
    box-shadow var(--motion-base) var(--ease-out-soft),
    background-color var(--motion-base) var(--ease-out-soft);
}
.site-header.is-scrolled {
  box-shadow: 0 8px 28px rgba(31, 90, 81, 0.12);
  background: rgba(255,255,255,0.98);
}
/* nav link 底線滑入 */
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--motion-base) var(--ease-out-soft);
}
.nav-links a:hover::after,
.nav-links a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-links a:hover { text-decoration: none; }

/* ---------- 4. 按鈕 hover / active + 光澤掃過 ---------- */
.btn, .nav-cta {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--motion-fast) var(--ease-out-soft),
    box-shadow var(--motion-fast) var(--ease-out-soft),
    opacity var(--motion-fast) ease;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.34), transparent);
  transform: skewX(-16deg);
  transition: left 520ms var(--ease-out-soft);
  pointer-events: none;
}
.btn:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 12px 26px rgba(6, 199, 85, 0.20);
}
.btn:hover::after { left: 140%; }
.btn:active { transform: translate3d(0, 0, 0) scale(0.98); }
.nav-cta:hover { transform: translate3d(0, -2px, 0); }

/* ---------- 5. 卡片 hover ---------- */
.card, .why-item, .step, .pricebox {
  transition:
    transform var(--motion-base) var(--ease-out-soft),
    box-shadow var(--motion-base) var(--ease-out-soft),
    background-color var(--motion-base) ease;
  will-change: transform;
}
.card:hover, .step:hover, .pricebox:hover {
  transform: translate3d(0, var(--hover-y), 0);
  box-shadow: 0 18px 42px rgba(31, 90, 81, 0.16);
}
.why-item:hover {
  transform: translate3d(0, -4px, 0);
  background-color: rgba(6, 199, 85, 0.05);
  box-shadow: 0 14px 30px rgba(31, 90, 81, 0.10);
}
/* icon / 箭頭位移 */
.card .ico { transition: transform var(--motion-base) var(--ease-out-soft); }
.card:hover .ico { transform: translate3d(0, -3px, 0) scale(1.06); }
.card .more { transition: transform var(--motion-base) var(--ease-out-soft); display: inline-block; }
.card:hover .more { transform: translate3d(5px, 0, 0); }

/* ---------- 6. Steps 數字 pop + 連線 ---------- */
.step::before {
  transition: transform 520ms var(--ease-spring-soft);
}
[data-reveal] .step::before,
.step[data-reveal]::before { transform: scale(0.86); }
.is-visible .step::before,
.step.is-visible::before { transform: scale(1); }

/* ---------- 7. CTA 橘色區塊：進場放大 + 柔光掃過 ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band[data-reveal] {
  transform: translate3d(0, 26px, 0) scale(0.98);
}
.cta-band[data-reveal].is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.14) 45%, transparent 70%);
  transform: translateX(-120%);
  animation: ctaShine 5.5s ease-in-out infinite;
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
@keyframes ctaShine {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

/* ---------- 8. FAQ（沿用原生 <details class="faq">） ---------- */
details.faq {
  transition:
    transform var(--motion-base) var(--ease-out-soft),
    box-shadow var(--motion-base) var(--ease-out-soft),
    background-color var(--motion-base) ease;
}
details.faq:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 14px 30px rgba(31, 90, 81, 0.10);
}
details.faq[open] {
  background: rgba(6, 199, 85, 0.025);
  box-shadow: 0 12px 30px rgba(31, 90, 81, 0.10);
}
/* 加號旋轉 */
details.faq summary::after {
  display: inline-block;
  transition: transform var(--motion-base) var(--ease-out-soft);
}
details.faq[open] summary::after { transform: rotate(180deg); }
/* 答案展開淡入 */
details.faq[open] p {
  animation: faqOpen var(--motion-base) var(--ease-out-soft);
}
@keyframes faqOpen {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- 9. 浮動 LINE / 電話按鈕 ---------- */
.floating { opacity: 0; transform: translate3d(20px, 0, 0); animation: floatIn 560ms var(--ease-out-soft) 800ms forwards; }
.fab {
  transition:
    transform var(--motion-fast) var(--ease-out-soft),
    box-shadow var(--motion-fast) var(--ease-out-soft);
}
.fab:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.20);
}
.fab-line { animation: softPulse 4s ease-in-out infinite; }
@keyframes floatIn { to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes softPulse {
  0%, 70%, 100% { box-shadow: 0 6px 18px rgba(6, 199, 85, 0.30); }
  80%           { box-shadow: 0 0 0 9px rgba(6, 199, 85, 0.10); }
}

/* ---------- 10. contact 表單 focus / 聯絡列 hover ---------- */
.form input, .form select, .form textarea {
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    transform var(--motion-fast) var(--ease-out-soft);
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--line);
  box-shadow: 0 0 0 4px rgba(6, 199, 85, 0.12);
  transform: translate3d(0, -1px, 0);
  outline: none;
}
.form label { transition: color var(--motion-fast) ease; }
/* 送出按鈕 loading spinner */
.btn.is-loading { pointer-events: none; opacity: 0.86; }
.btn .spinner {
  display: inline-block;
  width: 15px; height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: #fff;
  border-radius: 999px;
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* 直接聯絡列 hover（contact 右欄 pricebox 內 p） */
.contact-row {
  transition: color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out-soft);
}
.contact-row:hover { color: var(--brand-dark); transform: translate3d(3px, 0, 0); }

/* ---------- 11. medical-escort「熱門」badge 微動態 ---------- */
.tag-hot {
  display: inline-block;
  transform-origin: center;
  animation:
    badgePop 560ms var(--ease-spring-soft) 720ms both,
    badgePulse 6s ease-in-out 2s infinite;
}
@keyframes badgePop {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes badgePulse {
  0%, 80%, 100% { transform: scale(1); }
  88%           { transform: scale(1.10); }
}

/* ---------- 頁別 hero glow 微調 ---------- */
.page-postpartum .page-hero::before {
  background:
    radial-gradient(circle at 22% 28%, rgba(238, 136, 72, 0.18), transparent 32%),
    radial-gradient(circle at 80% 12%, rgba(255,255,255,0.10), transparent 36%);
}

/* ============================================================
   prefers-reduced-motion：全部回到靜態狀態
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body { opacity: 1; }
  [data-reveal], .reveal-list li,
  .hero h1, .hero p, .hero .btns, .hero .hero-badges, .hero .hero-rotator,
  .hero-badges span,
  .page-hero .breadcrumb, .page-hero h1, .page-hero p, .page-hero .btns,
  .floating {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero::before, .page-hero::before, .cta-band::before, .fab-line, .tag-hot {
    animation: none !important;
  }
}