/* ========================================================
 * 首頁 Logo 線條描繪登場動畫 (index.html #indexTittle)
 * 流程：光點亮起 → 發光線條描出外框與條紋 → 掃描光由下往上顯現 Logo
 *       → 光環擴散 → 標語與向下箭頭出現 → 接回原本的浮動 / 呼吸光暈動畫
 * 播放條件：#indexTittle 有 .logo-intro-play（同一個瀏覽分頁只播放一次，其餘為 .logo-intro-skip）
 * 主題配色：依 #theme-host 的 data-theme 切換 --intro-line（線條）與 --intro-arrow（向下箭頭）
 * ======================================================== */

/* ===== 主題配色 ===== */
#indexTittle {
    --intro-line: 96, 165, 250;    /* 預設：粒子 */
    --intro-arrow: 59, 130, 246;
}

#theme-host[data-theme="bg-particles"] ~ main #indexTittle  { --intro-line: 96, 165, 250;  --intro-arrow: 59, 130, 246; }
#theme-host[data-theme="bg-dark"] ~ main #indexTittle       { --intro-line: 255, 255, 255; --intro-arrow: 255, 255, 255; }
#theme-host[data-theme="bg-aurora"] ~ main #indexTittle     { --intro-line: 0, 217, 255;   --intro-arrow: 0, 217, 255; }
#theme-host[data-theme="bg-matrix"] ~ main #indexTittle     { --intro-line: 0, 217, 255;   --intro-arrow: 0, 217, 255; }
#theme-host[data-theme="bg-blackhole"] ~ main #indexTittle  { --intro-line: 192, 132, 252; --intro-arrow: 192, 132, 252; }
#theme-host[data-theme="bg-abyss"] ~ main #indexTittle      { --intro-line: 0, 242, 254;   --intro-arrow: 45, 212, 191; }
#theme-host[data-theme="bg-stars"] ~ main #indexTittle      { --intro-line: 224, 242, 254; --intro-arrow: 255, 255, 255; }
#theme-host[data-theme="bg-tech-clean"] ~ main #indexTittle { --intro-line: 0, 229, 255;   --intro-arrow: 0, 229, 255; }

/* ===== 向下箭頭：跟隨主題配色 ===== */
#indexTittle .scroll-indicator a {
    color: rgb(var(--intro-arrow));
    border-color: rgb(var(--intro-arrow));
    background: rgba(var(--intro-arrow), 0.1);
    box-shadow: 0 0 20px rgba(var(--intro-arrow), 0.3);
}

#indexTittle .scroll-indicator a:hover {
    background: rgba(var(--intro-arrow), 0.2);
    box-shadow: 0 0 30px rgba(var(--intro-arrow), 0.6);
}

/* ===== Logo 舞台（與 Logo 圖片同尺寸，疊放描繪線條與特效） ===== */
.logo-intro {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.logo-intro-draw,
.logo-intro-spark,
.logo-intro-ring,
.logo-intro-scan {
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.logo-intro-draw {
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.logo-intro-draw path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.logo-intro-draw .outer {
    stroke: rgb(var(--intro-line));
    stroke-width: 2.4;
}

.logo-intro-draw .inner {
    stroke: #e6f6ff;
    stroke-width: 1.6;
}

/* 啟動光點 */
.logo-intro-spark {
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 20px 6px rgba(var(--intro-line), 0.9);
}

/* 完成時的光環 */
.logo-intro-ring {
    inset: 10%;
    border-radius: 50%;
    border: 2px solid rgba(var(--intro-line), 0.8);
}

/* 掃描光條 */
.logo-intro-scan {
    left: -8%;
    right: -8%;
    top: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(var(--intro-line), 1) 20%, #fff 50%, rgba(var(--intro-line), 1) 80%, transparent);
    box-shadow: 0 0 18px 4px rgba(var(--intro-line), 0.7);
}

/* ===== 播放登場動畫（約 3 秒；每個瀏覽器、每個主題只播一次） =====
   時間軸需與 logo_intro_svg.html 內各路徑的 animation-delay（外框 0.25s、條紋 0.60s～1.44s）一致：
   0.25–1.95s 外框描線 → 0.6–2.44s 條紋依序描繪 → 2.15s 掃描線顯現 Logo → 2.5s 線條淡出 → 2.85s 光環 → 文字 */
.logo-intro-play .logo-intro-draw {
    animation: introDrawFade 0.7s ease 2.5s backwards;
    opacity: 0;
}

.logo-intro-play .logo-intro-draw path {
    animation-name: introDraw;
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
    animation-fill-mode: forwards;
}

.logo-intro-play .logo-intro-draw .outer { animation-duration: 1.7s; }
.logo-intro-play .logo-intro-draw .inner { animation-duration: 1s; }

.logo-intro-play .logo-intro-spark { animation: introSpark 0.6s ease-out; }
.logo-intro-play .logo-intro-scan  { animation: introScan 0.75s cubic-bezier(0.65, 0, 0.35, 1) 2.15s; }
.logo-intro-play .logo-intro-ring  { animation: introRing 1s ease-out 2.85s; }

/* Logo 圖片：描線完成後由掃描線顯現 → 接回原本的浮動動畫 */
#indexTittle.logo-intro-play img {
    animation: introReveal 0.75s cubic-bezier(0.65, 0, 0.35, 1) 2.15s backwards,
               logoFloating 4.5s ease-in-out 2.9s infinite;
}

@media (max-width: 991px), (max-height: 900px) {
    #indexTittle.logo-intro-play img {
        animation: introReveal 0.75s cubic-bezier(0.65, 0, 0.35, 1) 2.15s backwards,
                   glow 3s ease-in-out 2.9s infinite alternate;
    }
}

/* 極簡黑：登場後維持原本的靜止 Logo */
#theme-host[data-theme="bg-dark"] ~ main #indexTittle.logo-intro-play img {
    animation: introReveal 0.75s cubic-bezier(0.65, 0, 0.35, 1) 2.15s backwards !important;
}

/* 標語與向下箭頭：Logo 顯現後接著出現（比最初版本提早約 0.4 秒，減少等待感） */
#indexTittle.logo-intro-play p {
    animation: introUp 0.6s ease-out 2.7s backwards;
}

#indexTittle.logo-intro-play .scroll-indicator a {
    animation: introFade 0.5s ease 3.0s backwards;
}

/* ===== 不播放時（同一分頁再次回到首頁）：簡單淡入 ===== */
#indexTittle.logo-intro-skip > div:first-child {
    animation: introFade 0.5s ease backwards;
}

/* ===== Keyframes ===== */
@keyframes introDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes introDrawFade {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes introSpark {
    0% { opacity: 0; transform: scale(0.2); }
    40% { opacity: 1; transform: scale(1.6); }
    100% { opacity: 0; transform: scale(0.4); }
}

@keyframes introScan {
    0% { top: 100%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 0%; opacity: 0; }
}

@keyframes introRing {
    0% { opacity: 0.9; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* 用 polygon 顯現（左右與下方超出圖片邊界），Logo 光暈不會被裁成方形 */
@keyframes introReveal {
    from { clip-path: polygon(-50% 100%, 150% 100%, 150% 100%, -50% 100%); transform: none; }
    to { clip-path: polygon(-50% -5%, 150% -5%, 150% 150%, -50% 150%); transform: none; }
}

@keyframes introUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes introFade {
    from { opacity: 0; }
    to { opacity: 1; }
}