/* 往下滑的時候,標題、內文、卡片、照片一項接一項淡入並往上浮(搭配 appear.js)。
   數字照 Apple 產品頁的「依序淡入」:淡入 0.9 秒、往上浮 30px 花 0.7 秒、一項接一項間隔 0.15 秒、先慢後快再慢(easeInOutQuad)。

   開關:所有規則都掛在 html.ap 底下,appear.js 確認可以做才會加(開了「減少動態效果」或瀏覽器太舊就不加,頁面照原本的方式出現)。
   appear.js 在每一項上放記號:data-ap="wait"(還沒滑到)→ "in"(正在出現)→ 拿掉(演完,回到一般狀態)。
   規矩:只動 opacity 和 translate(獨立的屬性,不會和卡片自己的 transform、滑鼠傾斜打架),不影響排版;
        看不見只發生在「還沒滑到」的時候,列印時一律顯示。 */

html.ap main .reveal { transition: none; }      /* 原本的進場方式由這裡取代 */
html.ap main [data-ap] { opacity: 0; translate: 0 30px; }
html.ap main [data-ap="wait"] { pointer-events: none; }      /* 還看不見的東西不能被點到 */
/* 選擇器寫兩次 [data-ap] 是為了贏過原版 photos.css 裡「第 2、3 張照片」自己的延遲,間隔才會照 --ap-delay */
html.ap main [data-ap][data-ap="in"] {
  opacity: 1; translate: 0 0;
  transition: opacity .9s cubic-bezier(.455, .03, .515, .955) var(--ap-delay, 0s), translate .7s cubic-bezier(.455, .03, .515, .955) var(--ap-delay, 0s);
}
@media print { html.ap main [data-ap] { opacity: 1 !important; translate: none !important; transition: none !important; } }