/* ============================================================
   Day 8.12 — 首頁簡易進場動畫（方案 A 純 CSS + IntersectionObserver）
   - data-reveal: 進視窗時 fade-in + slide-up（觀察自動加 .is-visible）
   - data-reveal-delay: 加 stagger 延遲（卡片群錯開入場）
   - hero RUSAN 5 letters 載入時逐字 stagger
   - 卡片 hover scale 微放大 + shadow
   ============================================================ */

/* ---------- 進場（升級版）：blur + scale + slide-up 同時 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px) scale(0.96);
  filter: blur(8px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* chip 改從左滑入（符合 Figma 設計貼齊左邊的視覺邏輯） */
[data-reveal][data-reveal-from="left"],
.rusan-home-value__chip[data-reveal],
.rusan-home-tech__chip[data-reveal],
.rusan-home-products__chip[data-reveal],
.rusan-home-application__chip[data-reveal] {
  transform: translateX(-48px) scale(0.96);
}
[data-reveal][data-reveal-from="left"].is-visible,
.rusan-home-value__chip[data-reveal].is-visible,
.rusan-home-tech__chip[data-reveal].is-visible,
.rusan-home-products__chip[data-reveal].is-visible,
.rusan-home-application__chip[data-reveal].is-visible {
  transform: translateX(0) scale(1);
}

/* 大字：clip-path 從下往上揭開（剪影感，比 fade 更有電影味）*/
.rusan-home-value__display[data-reveal],
.rusan-home-tech__display[data-reveal],
.rusan-home-products__big-word[data-reveal],
.rusan-home-application__display[data-reveal],
.rusan-home-reviews__display[data-reveal] {
  transform: translateY(0) scale(1);
  clip-path: inset(0 0 100% 0);
  filter: blur(0);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.rusan-home-value__display[data-reveal].is-visible,
.rusan-home-tech__display[data-reveal].is-visible,
.rusan-home-products__big-word[data-reveal].is-visible,
.rusan-home-application__display[data-reveal].is-visible,
.rusan-home-reviews__display[data-reveal].is-visible {
  clip-path: inset(0 0 0 0);
}

/* stagger delay tokens（卡片群、letters） */
[data-reveal-delay="100"] { transition-delay: 0.1s; }
[data-reveal-delay="200"] { transition-delay: 0.2s; }
[data-reveal-delay="300"] { transition-delay: 0.3s; }
[data-reveal-delay="400"] { transition-delay: 0.4s; }
[data-reveal-delay="500"] { transition-delay: 0.5s; }
[data-reveal-delay="600"] { transition-delay: 0.6s; }

/* ---------- Hero RUSAN 5 letters 逐字 3D 翻正 + blur 進場（電影感）---------- */
.rusan-home-hero__rusan-letters {
  perspective: 1200px;
}
.rusan-home-hero__letter {
  opacity: 0;
  transform: translateY(60px) rotateX(60deg) scale(0.85);
  filter: blur(12px);
  transform-origin: center bottom;
  animation: rusan-letter-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.rusan-home-hero__letter--r { animation-delay: 0.30s; }
.rusan-home-hero__letter--u { animation-delay: 0.45s; }
.rusan-home-hero__letter--s { animation-delay: 0.60s; }
.rusan-home-hero__letter--a { animation-delay: 0.75s; }
.rusan-home-hero__letter--n { animation-delay: 0.90s; }

@keyframes rusan-letter-in {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
    filter: blur(0);
  }
}

/* ---------- Hero 內容（標題 + 副文）載入 fade-in（純 opacity，不動 transform）
     避免 mobile 的 translate(-50%,-50%) 居中被覆蓋 ---------- */
.rusan-home-hero__content {
  animation: rusan-fade-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
@keyframes rusan-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 卡片 hover：scale + shadow ---------- */
.rusan-home-value__card,
.rusan-home-tech__col,
.rusan-home-products__card,
.rusan-home-application__card {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.rusan-home-value__card:hover,
.rusan-home-tech__col:hover,
.rusan-home-products__card:hover,
.rusan-home-application__card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ---------- prefers-reduced-motion 友善 ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible,
  .rusan-home-hero__letter,
  .rusan-home-hero__content {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
  .rusan-home-value__card:hover,
  .rusan-home-tech__col:hover,
  .rusan-home-products__card:hover,
  .rusan-home-application__card:hover {
    transform: none;
  }
}