@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   ATLA 肌密館 — animation.css
   動 畫

   ★ 這個檔案不需要修改。

   ── 運作方式 ──────────────────────────────────────────────

   動畫不寫死在頁面位置上，而是綁在 Block 身上。

   每一個 Block 自己宣告要用哪一種動畫：

       <section data-block="story" data-anim="stagger" data-stagger="120">

   區塊裡想要動的元素，加上 class="anim"：

       <p class="anim">這一行會淡入</p>

   script.js 會替每個 Block 建立獨立的進場偵測，
   所以 Block 搬到任何位置、複製幾份，動畫都正常。

   ── 六種動畫 ──────────────────────────────────────────────

     fade      單純淡入
     rise      向上 24px 淡入        ← 多數區塊用這個
     stagger   子元素依序向上淡入
     scale     淡入並由 0.96 放大
     drift     背景極慢位移（給大圖與影片）
     none      不動

   速度依照 Design System：0.6–0.8 秒，ease out，柔和不干擾閱讀。
   ═══════════════════════════════════════════════════════════ */


/* ── 進場前的狀態 ────────────────────────────────────────── */
[data-anim] .anim{
  opacity:0;
  will-change:opacity,transform;
}
[data-anim="rise"] .anim,
[data-anim="stagger"] .anim{
  transform:translateY(24px);
}
[data-anim="scale"] .anim{
  transform:scale(.96);
}
[data-anim="fade"] .anim{
  transform:none;
}
[data-anim="none"] .anim{
  opacity:1;transform:none;
}


/* ── 進場後 ──────────────────────────────────────────────
   --anim-delay 由 script.js 依子元素順序寫入，
   所以複製出來的新區塊會自己重新排序，不需要手動加延遲。
   ──────────────────────────────────────────────────────── */
[data-anim].is-in .anim{
  opacity:1;
  transform:none;
  transition:opacity .7s var(--ease) var(--anim-delay,0ms),
             transform .7s var(--ease) var(--anim-delay,0ms);
}

/* 產品圖放大得慢一點，收尾比較穩 */
[data-anim="scale"].is-in .anim{
  transition:opacity 1.2s var(--ease) var(--anim-delay,0ms),
             transform 1.2s var(--ease) var(--anim-delay,0ms);
}


/* ── drift：背景極慢位移 ───────────────────────────────────
   用在 Hero 影片、Hero 備用圖、品牌理念大圖。
   46 秒一個來回，慢到不會被察覺，但畫面不會死板。
   ──────────────────────────────────────────────────────── */
.drift{
  animation:atla-drift 46s var(--ease) infinite alternate;
}
@keyframes atla-drift{
  from{transform:scale(1.02)}
  to  {transform:scale(1.08) translate3d(-1.2%,-.8%,0)}
}


/* ── 向下箭頭的浮動 ──────────────────────────────────────── */
.arrow{
  display:inline-block;font-style:normal;font-size:20px;line-height:1;
  animation:atla-float 2s var(--ease) infinite;
}
@keyframes atla-float{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(8px)}
}


/* ── 減少動態偏好 ─────────────────────────────────────────
   使用者在系統設定裡開啟「減少動態效果」時，
   全站動畫自動關閉，內容直接顯示。
   ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-anim] .anim{opacity:1;transform:none}
  .myth{opacity:1;transform:none}
}