/* ============================================================
   SUNCA 首頁進場動態（方案 A 精簡版）
   每個模組獨立：拔掉某模組 → sunca-anim.js 開關設 false 即可，
   CSS 規則全部 scope 在 .sunca-anim-ready 下，JS 沒跑＝全部正常顯示。
   prefers-reduced-motion: reduce → 全部停用。
   ============================================================ */

/* ---------- [A1] Hero Ken Burns（背景圖緩慢放大） ---------- */
.sunca-anim-ready.sa-kenburns #hero-swiper .swiper-slide-active img.absolute,
.sunca-anim-ready.sa-kenburns #hero-swiper .swiper-slide:only-child img.absolute {
  animation: sunca-kb 8s ease-out forwards;
}
@keyframes sunca-kb {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* ---------- [A2] Hero 標題對焦進場（blur→清晰 + 微 scale） ---------- */
.sunca-anim-ready.sa-herotitle #hero-swiper .swiper-slide-active h1,
.sunca-anim-ready.sa-herotitle #hero-swiper .swiper-slide:only-child h1 {
  animation: sunca-focus .8s ease-out both;
}
.sunca-anim-ready.sa-herotitle #hero-swiper .swiper-slide-active h1 + p,
.sunca-anim-ready.sa-herotitle #hero-swiper .swiper-slide:only-child h1 + p {
  animation: sunca-focus .8s ease-out .15s both;
}
.sunca-anim-ready.sa-herotitle #hero-swiper .swiper-slide-active .btn-blue-glow,
.sunca-anim-ready.sa-herotitle #hero-swiper .swiper-slide:only-child .btn-blue-glow {
  animation: sunca-focus .8s ease-out .3s both;
}
@keyframes sunca-focus {
  from { opacity: 0; filter: blur(8px); transform: scale(.97); }
  to   { opacity: 1; filter: blur(0);  transform: scale(1); }
}

/* ---------- [A3] 區塊標題進場（blur→清晰 + 上移） ---------- */
.sunca-anim-ready.sa-sectiontitle main section[data-section] h2.sunca-st {
  opacity: 0; filter: blur(6px); transform: translateY(12px);
  transition: opacity .7s ease-out, filter .7s ease-out, transform .7s ease-out;
}
.sunca-anim-ready.sa-sectiontitle main section[data-section] h2.sunca-st.is-inview {
  opacity: 1; filter: blur(0); transform: translateY(0);
}

/* ---------- [A4] 卡片 stagger（產品 15 卡 / News 卡） ---------- */
.sunca-anim-ready.sa-stagger .sunca-stagger > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease-out, transform .55s ease-out;
  transition-delay: var(--sa-delay, 0ms);
}
.sunca-anim-ready.sa-stagger .sunca-stagger.is-inview > * {
  opacity: 1; transform: translateY(0);
}
/* stagger 完成後解除 transform，避免影響卡片自身 hover 浮起效果 */
.sunca-anim-ready.sa-stagger .sunca-stagger.is-done > * {
  transition: none; transform: none; opacity: 1;
}

/* ---------- [A5] Why Choose 數字（非數字者對焦進場；數字滾動在 JS） ---------- */
.sunca-anim-ready.sa-countup .sunca-count.sunca-count-text {
  opacity: 0; filter: blur(6px);
  transition: opacity .8s ease-out, filter .8s ease-out;
}
.sunca-anim-ready.sa-countup .sunca-count.sunca-count-text.is-inview {
  opacity: 1; filter: blur(0);
}

/* ---------- 無障礙：使用者要求減少動態 → 全關 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sunca-anim-ready #hero-swiper .swiper-slide-active img.absolute,
  .sunca-anim-ready #hero-swiper .swiper-slide-active h1,
  .sunca-anim-ready #hero-swiper .swiper-slide-active h1 + p,
  .sunca-anim-ready #hero-swiper .swiper-slide-active .btn-blue-glow {
    animation: none !important;
  }
  .sunca-anim-ready main section[data-section] h2.sunca-st,
  .sunca-anim-ready .sunca-stagger > *,
  .sunca-anim-ready .sunca-count {
    opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important;
  }
}