@charset "utf-8";

/* ==========================================================================
   【動態字典】 Reveal Animations System
   用於捲動到特定位置後觸發的進場動畫
   ========================================================================== */

/* 基礎定義：當 JS 啟動時預設隱藏並設定轉換特效 */
.reveal-enabled [data-reveal]:not(.is-visible) {
    opacity: 0;
}

/* 強制顯示開關：用於截圖或特殊需求 */
.reveal-skip [data-reveal],
.reveal-skip .Decoration::before,
.reveal-skip #About .cirlcle,
.reveal-skip #About .cirlcle img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
    visibility: visible !important;
}

/* 列印模式下強制顯示所有內容 */
@media print {
    /* 強制列印時顯示所有 reveal 元素（包括使用 ?screenshot 時的 html.reveal-skip） */
   html.reveal-skip [data-reveal],
    [data-reveal],
    .Decoration::before,
    #About .cirlcle,
    #About .cirlcle img {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
        animation: none !important;
        visibility: visible !important;
    }

    /* 有時其他檔案會用更高權重將元素隱藏，這裡再保險一層 */
    html.reveal-skip *[data-reveal],
    *[data-reveal] {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }
}

[data-reveal] {
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--delay, 0ms);
    will-change: transform, opacity;
}

[data-reveal="up"],
[data-reveal=""] {
    transform: translateY(60px);
}

/* 向左飛入 */
[data-reveal="left"] {
    transform: translateX(-60px);
}

/* 向右飛入 */
[data-reveal="right"] {
    transform: translateX(60px);
}

/* 縮放進場 */
[data-reveal="zoom"] {
    transform: scale(0.9);
}

/* 容器型觸發 ( 不隱藏自身與子元素 ) */
[data-reveal="none"] {
    opacity: 1 !important;
}


/* ==========================================================================
   觸發狀態：當獲得 .is-visible 類別時執行動畫
   ========================================================================== */
[data-reveal].is-visible {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

/* 僅針對需要遮罩效果的類型套用 clip-path，避免切到陰影 */
[data-reveal="reveal-right"].is-visible {
    clip-path: inset(0 0 0 0) !important;
}

/* 針對 About 裝飾線的特殊處理 */
.reveal-enabled #About .Decoration::before {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
}

#About .Decoration::before {
    transition: none; /* 使用 animation 處理 */
}

/* 當父層 ( 或自身 ) 獲得 .is-visible 或 data-reveal="none" 觸發時執行動畫 */
.is-visible.Decoration::before,
.is-visible .Decoration::before,
#About.is-visible .Decoration::before {
    animation: aboutLineReveal 2.2s cubic-bezier(0.19, 1, 0.22, 1) forwards,
               aboutLineFloat 8s ease-in-out 2.2s infinite;
}

@keyframes aboutLineReveal {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
}

@keyframes aboutLineFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(10px, -15px); }
}