/* 遮罩上滑進場(10-14 比較版 index-reveal.html,搭配 reveal.js;移植自 EAJY CAZE 官網 LineReveal)
   原理:元素往下推一整個自身高度,同時把下半截剪掉 —— 兩者同速同曲線,所以「底邊」永遠固定在原位,內容像從那條線下面升上來。
   進場 1 秒、逐行錯開 0.12 秒(--rvd 由 reveal.js 給);收回 0.6 秒、不錯開 */
:root { --rv-ease: cubic-bezier(.22, 1, .36, 1); }
.rv .rv-wait { visibility: hidden; }                 /* 字型載完、切好行之前先藏(不佔位改變,版面不跳) */
.rv-l { display: block; }
.nb { white-space: nowrap; }                         /* 標點跟前一個字黏住,不落行首(reveal.js 開頭) */

/* 文字行、按鈕等整塊:從自己的底邊升上來 */
.rv-a { transform: translateY(100%); clip-path: inset(0 0 100% 0); transition: transform .6s var(--rv-ease), clip-path .6s var(--rv-ease); }
.rv-in .rv-a, .rv-a.rv-in { transform: none; clip-path: inset(0); transition: transform 1s var(--rv-ease) var(--rvd, 0s), clip-path 1s var(--rv-ease) var(--rvd, 0s); }
/* 文字行最後的遮罩往外放一點(10-18 Eric:標題遮罩切錯 —— 思源的 g 尾巴比行高低、會被切掉):上下左右各多留,只放寬終點,升起的過程不變 */
.rv-in .rv-l.rv-a, .rv-l.rv-a.rv-in { clip-path: inset(-.2em -.2em -.35em -.2em); }
/* 按鈕自己有滑過變色,變色不能被進場的延遲拖慢 */
.btn.rv-a { transition: transform .6s var(--rv-ease), clip-path .6s var(--rv-ease), background .3s, color .3s, border-color .3s; }
.rv-in .btn.rv-a, .btn.rv-a.rv-in { transition: transform 1s var(--rv-ease) var(--rvd, 0s), clip-path 1s var(--rv-ease) var(--rvd, 0s), background .3s, color .3s, border-color .3s; }

/* 照片:框不動,畫面從底邊往上揭開;裡面的圖從偏下、微放大歸位 */
.rv-img { clip-path: inset(100% 0 0 0); transition: clip-path .6s var(--rv-ease); }
.rv-img img { transform: translateY(10%) scale(1.12); transition: transform .6s var(--rv-ease); }
.rv-in .rv-img, .rv-img.rv-in { clip-path: inset(0); transition: clip-path 1.2s var(--rv-ease) var(--rvd, 0s); }
.rv-in .rv-img img, .rv-img.rv-in img { transform: none; transition: transform 1.4s var(--rv-ease) var(--rvd, 0s); }

.rv-off .rv-a, .rv-off .rv-img, .rv-off .rv-img img { transform: none; clip-path: none; }

/* 桌機四項信念:原本 CSS 預設透明、由 JS 淡入;遮罩版改成一直不透明,靠遮罩上滑出現 */
.rv .fq-bt, .rv .fq-beliefs li { opacity: 1; }
/* 四項信念上方的細線:跟著那一條一起從左往右畫出來(官網 AnimatedLine 同語言),收回時一起收 */
.rv .fq-beliefs li { border-top-color: transparent; position: relative; }
.rv .fq-beliefs li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(0, 0, 0, .14); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--rv-ease); }
.rv .fq-beliefs li.rv-in::before { transform: none; transition: transform 1s var(--rv-ease); }
@media (min-width: 1280px) { .rv .fq-beliefs li::before { background: rgba(255, 255, 255, .3); } }