<!--======================================================================
// 自由之光（Light of Liberty）著作權聲明與使用規範
// Copyright Notice and Terms of Use by Light of Liberty
//
// 本程式碼及相關檔案（包括但不限於圖片、音訊、視訊與文字）之著作權，
// 均屬「自由之光（Light of Liberty）」團隊所有，並受中華民國著作權法
// 及國際法規保護。
//
// This source code and associated files (including but not limited to
// images, audio, video, and text) are the intellectual property of the
// "Light of Liberty" team and are protected by copyright laws.
//
// 未經明確書面許可，嚴禁以任何形式進行以下行為：
// 1. 複製、修改、再分發本程式碼。
// 2. 在未經授權的情況下，使用本作品中的任何圖片或資產。
//
// The following actions are strictly prohibited without prior written permission:
// 1. Reproduction, modification, or redistribution of this source code.
// 2. Unauthorized use of any images or assets contained within this work.
//
// 追溯聲明 (Traceability Notice)：
// 本程式碼包含「自由之光」獨有的標記。任何部分或完整複製本程式碼，
// 皆可能攜帶這些標記，使我們得以追溯其來源。
//
// This code contains unique markers owned by "Light of Liberty." Any
// partial or full reproduction of this code may carry these markers,
// allowing us to trace its origin.
//
// 聯絡信箱（Contact）: light.of.liberty.2023@gmail.com
//
// © 2024 自由之光（Light of Liberty）. 保留所有權利。
// © 2024 Light of Liberty. All Rights Reserved.
// ======================================================================-->
<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Light of Liberty — 首頁</title>
  <meta name="description" content="自由之光，Light of Liberty,虛擬歌手">

  <!-- Open Graph（預留） -->
  <meta property="og:title" content="Light of Liberty — 官方首頁">
  <meta property="og:description" content="自由之光（來自台灣）與旗下星樂之夢工作室官方首頁。">
  <meta property="og:image" content="https://light-of-liberty.github.io/img/自由之光及星樂之夢.png">

  <style>
    /* -------------------------
       變數（方便後續微調顏色 / 強度）
       ------------------------- */
    :root{
      --bg-top: #1b0f3a;         /* 深紫上 */
      --bg-mid: #3b2b8a;         /* 中紫 */
      --bg-bottom: #15203b;      /* 深藍底 */
      --glow-1: rgba(124,77,255,0.14);
      --glow-2: rgba(121,225,255,0.09);
      --card-bg-rgba: rgba(10,12,20,0.56);
      --card-border: rgba(255,255,255,0.05);
      --text-light: #f3f7ff;
      --muted: rgba(210,210,230,0.7);
      --accent: #ffd76b;
      --max-w:1100px;
      --star-opacity: 0.95;
      --glow-blur: 44px;
    }

    *{box-sizing:border-box}
    html,body{height:100%; margin:0; font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,Segoe UI,Roboto,Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

    /* 全局背景（漸層 fallback 不是純黑） */
    body{
      background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%);
      color:var(--text-light);
      min-height:100vh;
    }

    /* ---------- 背景光暈層（視覺重點） ---------- */
    .bg-wrap{ position:fixed; inset:0; z-index:-5; pointer-events:none; overflow:hidden; }
    .glow {
      position:absolute; inset:-25% -10% -25% -10%;
      background:
        radial-gradient(circle at 10% 12%, var(--glow-1), transparent 8%),
        radial-gradient(circle at 86% 28%, var(--glow-1), transparent 12%),
        radial-gradient(circle at 52% 78%, var(--glow-2), transparent 16%);
      filter: blur(var(--glow-blur)) saturate(120%);
      animation: glowMove 16s linear infinite;
      transform-origin:center;
      mix-blend-mode: screen;
    }
    @keyframes glowMove {
      0%{ transform:translateY(0) scale(1) rotate(0deg); }
      50%{ transform:translateY(-5vh) scale(1.02) rotate(6deg); }
      100%{ transform:translateY(0) scale(1) rotate(0deg); }
    }

    /* ---------- 內容容器（在光暈之上） ---------- */
    .wrap{ max-width:var(--max-w); margin:0 auto; padding:36px 18px 72px; position:relative; z-index:2; }

    /* ---------- HERO（歡迎語 + 翻滾文字） ---------- */
    .hero{ text-align:center; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; padding:18px 6px; }
    .welcome-line{ font-weight:800; color:var(--text-light); text-shadow:0 8px 26px rgba(0,0,0,0.6); }
    .welcome-top{ font-size:50px; }
    .welcome-sub{ font-size:15px; color:var(--muted); }

    /* 翻滾視窗（3D 翻牌） */
    .flip-viewport{ width:100%; max-width:900px; margin:8px auto 0; height:56px; perspective:900px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
    .flip-list{ position:relative; width:100%; height:56px; }
    .flip-item{
      position:absolute; left:0; top:0; width:100%; height:100%;
      display:flex; align-items:center; justify-content:center;
      font-size:20px; font-weight:800; color:var(--text-light); backface-visibility:hidden;
      transform-origin:center center; opacity:0;
    }
    .flip-item.in{ animation: flipIn .7s cubic-bezier(.22,.9,.28,1) forwards; }
    .flip-item.out{ animation: flipOut .7s cubic-bezier(.22,.9,.28,1) forwards; }
    @keyframes flipIn{
      0%{ transform: rotateX(90deg) translateY(18px); opacity:0; }
      60%{ transform: rotateX(-10deg) translateY(-4px); opacity:1; }
      100%{ transform: rotateX(0deg) translateY(0); opacity:1; }
    }
    @keyframes flipOut{
      0%{ transform: rotateX(0deg) translateY(0); opacity:1;}
      100%{ transform: rotateX(-90deg) translateY(-18px); opacity:0; }
    }

    /* ---------- 主要卡片：左右兩欄 ---------- */
    .cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; }
    .card{
      background: rgba(6,8,18,0.52);
      border:1px solid var(--card-border);
      border-radius:14px; padding:18px;
      box-shadow:0 18px 46px rgba(2,6,18,0.6);
      min-height:360px; display:flex; flex-direction:column; gap:12px; color:var(--text-light);
    }
    .logo{ display:flex; align-items:center; gap:12px; }
    .logo img{ width:84px; height:auto; object-fit:contain; border-radius:8px; }
    .divider{ height:1px; background: rgba(255,255,255,0.04); margin:8px 0 12px; border-radius:2px; }
    .muted{ color:var(--muted); font-size:14px; line-height:1.6; }
    .icons{ display:flex; gap:10px; align-items:center; }
    .icons img{ width:20px; height:20px; object-fit:contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)); }

    .products{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
    .products a{ padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:700; color:#111; background:var(--accent); box-shadow:0 10px 26px rgba(10,12,20,0.45); }

    .btn-muted{ background: rgba(255,255,255,0.08); color:var(--text-light); box-shadow:none; border:1px solid rgba(255,255,255,0.04); }

    .contact{ margin-top:auto; color:var(--muted); font-size:14px; }

    footer{ text-align:center; color:var(--muted); font-size:13px; margin-top:22px; }

    /* ---------- canvas 設定（層次） ---------- */
    #stars-canvas{ position:fixed; inset:0; z-index:-3; pointer-events:none; }
    #cursor-canvas{ position:fixed; inset:0; z-index:9999; pointer-events:none; }

    /* ---------- 響應式 ---------- */
    @media (max-width:980px){
      .wrap{ padding:20px; }
      .cards{ grid-template-columns:1fr; }
      .card{ min-height:260px; padding:14px; }
      .logo img{ width:72px; }
      .flip-viewport{ height:48px; }
      .flip-item{ font-size:18px; }
    }

    /* === 產品按鈕：角色各自顏色變體 === */
/* 可調變數（改這兩個值即可變色） */
:root{
  --hoshi-color: #C7EEFB;   /* 星希羽色（默认金黃，可改） */
  --sui-color:   #FB9D9E;   /* 星彗羽色（默认冷藍，可改） */
  --btn-text-dark: #3f3f3f;    /* 深色文字，對比黃/淺藍較佳 */
}

/* 基本按鈕樣式（延續現有 .products a） */
.products a{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 8px 20px rgba(6,8,18,0.18);
}

/* 星希羽（暖色） */
.products a.role-hoshi{
  background: var(--hoshi-color);
  color: var(--btn-text-dark);
  border: 3px solid rgba(12, 12, 12, 0.486);
}

/* 星彗羽（冷色） */
.products a.role-sui{
  background: var(--sui-color);
  color: var(--btn-text-dark);
  border: 3px solid rgba(0, 0, 0, 0.486);
}

/* Muted variant (如果你還需要類似 .btn-muted 的風格) */
.products a.btn-muted{
  background: rgba(0, 44, 241, 0.06);
  color: var(--text-light);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: none;
}

/* Hover / focus 效果 */
.products a:hover,
.products a:focus{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(250, 248, 248, 0.39);
  outline: none;
}

/* 無障礙 focus 樣式（鍵盤導航可見） */
.products a:focus{
  box-shadow: 0 0 0 4px rgba(120,130,255,0.12), 0 14px 34px rgba(6,8,20,0.18);
}

/* 如果你希望按鈕文字為淺色（在深色背景上）可改如下：
   color: #fff;
   但預設上面使用深色文字以利黃/淺藍的對比 */
/* --------- 社群 icon（半透明玻璃） --------- */
/* 可調變數 */
:root{
  --social-size: 44px;              /* 外圈尺寸 */
  --social-bg: rgba(255, 255, 255, 0.24); /* 淺灰玻璃背景，調整透明度可改強度 */
  --social-border: rgba(80, 80, 80, 0.116);
  --social-shadow: rgba(255, 255, 255, 0.233);
  --social-blur: 6px;               /* backdrop blur 強度 */
}

/* 容器保持原本行為 */
.icons { display:flex; gap:10px; align-items:center; }

/* 每個 icon 的外觀：半透明灰 + 毛玻璃模糊 + 微邊框 */
.icons .social{
  display:inline-flex;
  width:var(--social-size);
  height:var(--social-size);
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background: var(--social-bg);
  border: 1px solid var(--social-border);
  box-shadow: 0 8px 18px var(--social-shadow);
  text-decoration:none;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  backdrop-filter: blur(var(--social-blur));
  -webkit-backdrop-filter: blur(var(--social-blur));
  overflow:hidden;
}

/* 讓圖片在圓角容器中置中並維持大小 */
.icons .social img{
  width:20px; height:20px; object-fit:contain; display:block;
  filter: none; /* 預設不套濾鏡，保留原 logo */
}

/* Hover / focus 效果（加強可點擊感） */
.icons .social:hover,
.icons .social:focus{
  transform: translateY(-4px);
  box-shadow: 0 18px 34px lab(37.76% 64.76 -98.75);
  background: #8f70ff9a; /* hover 稍微亮一點 */
  outline: none;
}

/* 無障礙鍵盤 focus 可視化 */
.icons .social:focus{
  box-shadow: 0 0 0 4px rgba(120,130,255,0.10), 0 18px 34px rgba(4,6,18,0.35);
}

/* 若某個 logo 太深而依然看不清，使用 invert 將其反色（黑→白） */
/* 注意：invert 會影響彩色 logo（會變色），僅建議用在單色深色 logo */
.icons .social.invert img{
  filter: invert(1) grayscale(0.1) contrast(1.05);
}

/* 小螢幕微調 */
@media (max-width:720px){
  :root{ --social-size: 40px; }
  .icons .social img{ width:18px; height:18px; }
}
/* 新增的鴿子圖片樣式 */
.random-pigeon {
    position: absolute; /* 讓鴿子能在卡片內部自由定位 */
    top: 190px;           /* 調整為 0px 或一個您覺得合適的值，它會相對於卡片頂部定位 */
    width: 100px;        /* 鴿子圖片的寬度，您可以根據需要調整 */
    height: auto;       /* 高度自動調整，保持比例 */
    z-index: 5;         /* 確保鴿子圖片在其他內容之上 */
    opacity: 0;         /* 初始隱藏 */
    transform: translateY(-20px) scale(0.8); /* 初始稍微向上並縮小 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* 出現動畫 */
}

.random-pigeon.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
  </style>
</head>
<body>
  <!-- 背景光暈（purple/blue，已修正，不會黑掉） -->
  <div class="bg-wrap" aria-hidden="true">
    <div class="glow"></div>
  </div>

  <!-- 小星星（canvas） -->
  <canvas id="stars-canvas" aria-hidden="true"></canvas>

  <!-- 滑鼠尾巴 canvas -->
  <canvas id="cursor-canvas" aria-hidden="true"></canvas>

  <div class="wrap" role="main">
    <!-- HERO（歡迎 + 翻滾） -->
    <header class="hero" role="banner">
      <div class="welcome-line welcome-top">你好！歡迎來到 自由之光</div>
      <div class="welcome-line welcome-sub">Hello! Welcome to Light of Liberty</div>

      <div class="flip-viewport" aria-live="polite" aria-atomic="true">
        <div id="flipList" class="flip-list"></div>
      </div>
    </header>

    <!-- 兩欄卡片（左：自由之光，右：星樂之夢） -->
    <section class="cards" aria-label="介紹區塊">
      <article class="card" id="card-left" aria-labelledby="left-title">
        <div class="logo">
          <!-- 佔位：放 img/logo-left.png -->
          <img src="img/自由之光Logo NEW.png" alt="自由之光 LOGO">
          <div>
            <h3 id="left-title">自由之光</h3>
            <div class="muted">一個來自台灣的社群，虛擬的避風港 — 自由創作、安心相聚。</div>
          </div>
        </div>

        <div class="divider"></div>

        <div class="section">
          <div style="flex:1 1 200px;">
            <h4 style="margin:0 0 6px 0">關於我們</h4>
            <div class="muted">來自台灣的創意社群，致力於打造一個友善且受管理的虛擬社群空間，讓有共同興趣的人可以自在交流、合作與創作。</div>
          </div>

          <div style="flex:0 0 140px;">
            <h4 style="margin:0 0 6px 0">社群</h4>
            <div class="icons" role="navigation" aria-label="社群連結">
               <!-- 若 logo 本身是深色（黑）可先不做改；若仍看不清可加 class="invert" 反色處理 -->
             <a class="social invert" href="https://x.com/lightofliberty_" target="_blank" rel="noopener" aria-label="X">
                 <img src="img/X-Logo.png" alt="X">
             </a>

             <a class="social" href="https://www.youtube.com/@light-of-liberty" target="_blank" rel="noopener" aria-label="YouTube">
                 <img src="img/youtube_PNG15.png" alt="YouTube">
             </a>

             <a class="social" href="https://discord.gg/RXuuQHchvu" target="_blank" rel="noopener" aria-label="Discord">
                 <img src="img/Discord.png" alt="Discord">
             </a>
            </div>

          </div>

          <div style="flex:0 0 200px;">
            <h4 style="margin:0 0 6px 0">聯繫我們</h4>
            <div class="muted contact">Email: light.of.liberty.2023@gmail.com</div>
            <div class="muted contact">或 加入我們的discord(活躍管道) </div>
          </div>
        </div>
      </article>

      <article class="card" id="card-right" aria-labelledby="right-title">
        <div class="logo">
          <!-- 佔位：放 img/logo-right.png -->
          <img src="img/SMD Studio Logo.png" alt="星樂之夢 LOGO">
          <div>
            <h3 id="right-title">星樂之夢工作室</h3>
            <div class="muted">自由之光所屬的小型音樂工作室團隊 — 製作溫柔的虛擬聲音。</div>
          </div>
        </div>

        <div class="divider"></div>

        <div class="section">
          <div style="flex:1 1 200px;">
            <h4 style="margin:0 0 6px 0">關於我們</h4>
            <div class="muted">星樂之夢工作室是自由之光所屬的小型工作室團隊，專注於虛擬歌手企劃與音樂製作。</div>
          </div>

          <div style="flex:0 0 140px;">
            <h4 style="margin:0 0 6px 0">社群</h4>
            <div class="icons" role="navigation" aria-label="社群連結">
               <!-- 若 logo 本身是深色（黑）可先不做改；若仍看不清可加 class="invert" 反色處理 -->
             <a class="social invert" href="https://x.com/SMD_Studio_LOL" target="_blank" rel="noopener" aria-label="X">
                 <img src="img/X-Logo.png" alt="X">
             </a>

             <a class="social" href="https://www.youtube.com/@SMD_Studio_LOL" target="_blank" rel="noopener" aria-label="YouTube">
                 <img src="img/youtube_PNG15.png" alt="YouTube">
             </a>

            </div>

          <div style="flex:0 0 200px;">
            <h4 style="margin:0 0 6px 0">ACE Ai歌手系列</h4>
            <div class="products">
            <!-- 佔位按鈕：修改 href 指向你的歌手頁 -->
             <a href="https://light-of-liberty.github.io/HoshiKiha.html" class="role-hoshi" aria-label="前往 星希羽">星希羽</a>
             <a href="https://light-of-liberty.github.io/HoshiSuiha.html" class="role-sui" aria-label="前往 星彗羽">星彗羽</a>
            </div>
            </div>
            <div style="flex:0 0 200px;">
            <h4 style="margin:0 0 6px 0">聯繫我們</h4>
            <div class="muted contact">Email: starmusicdreamstudio@gmail.com</div>
          </div>
        </div>

        <div class="contact">自由之光所屬子團隊「星樂之夢工作室」</div>
      </article>
    </section>

    <footer id="site-footer">© 2025 自由之光</footer>
  </div>

  <!-- ========== scripts：翻滾文字、星星 canvas、鼠標尾巴 ========== -->
  <script>
  /* == flip carousel == */
  (function(){
    const texts = [
      "星希羽 — 官方資料與作品",
      "Welcome — HoshiKiha official",      
      "星彗羽 — 官方資料與作品",
      "Welcome — HoshiSuiha official",
      "歡迎加入自由之光",
      "你好！人類！很高興見到你。"
    ];
    const container = document.getElementById('flipList');
    let idx = 0;
    texts.forEach((t,i)=>{
      const d = document.createElement('div');
      d.className = 'flip-item' + (i===0 ? ' in' : '');
      d.textContent = t;
      if(i!==0) d.style.opacity = 0;
      container.appendChild(d);
    });
    const items = Array.from(container.children);
    function showNext(){
      const curr = items[idx];
      const nextIdx = (idx+1) % items.length;
      const next = items[nextIdx];
      curr.classList.remove('in'); curr.classList.add('out');
      next.classList.remove('out'); next.classList.add('in');
      setTimeout(()=>{ curr.classList.remove('out'); curr.style.opacity = 0; next.style.opacity = 1; }, 720);
      idx = nextIdx;
    }
    setInterval(showNext, 3200);
  })();

  /* == stars canvas (twinkling points) == */
  (function(){
    const cvs = document.getElementById('stars-canvas');
    if(!cvs) return;
    const ctx = cvs.getContext('2d');
    let W = innerWidth, H = innerHeight, DPR = devicePixelRatio || 1;
    function resize(){ W = innerWidth; H = innerHeight; cvs.width = W * DPR; cvs.height = H * DPR; cvs.style.width = W + 'px'; cvs.style.height = H + 'px'; ctx.setTransform(DPR,0,0,DPR,0,0); }
    window.addEventListener('resize', resize); resize();

    const stars = [];
    const COUNT = Math.max(80, Math.floor((W*H)/90000));
    function rand(min,max){ return Math.random()*(max-min)+min; }
    for(let i=0;i<COUNT;i++){
      stars.push({ x: rand(0,W), y: rand(0,H), r: rand(0.4,1.8), base: rand(0.25,0.95), speed: rand(0.002,0.016), offset: Math.random()*1000 });
    }

    function draw(now){
      ctx.clearRect(0,0,W,H);
      for(const s of stars){
        const t = (Math.sin((now/1000) * s.speed + s.offset) * 0.5 + 0.5) * 0.9;
        const alpha = Math.max(0.12, Math.min(1, s.base * t));
        ctx.beginPath();
        ctx.fillStyle = `rgba(255,255,255,${alpha})`;
        ctx.arc(s.x, s.y, s.r, 0, Math.PI*2);
        ctx.fill();
        // soft halo
        ctx.beginPath();
        ctx.fillStyle = `rgba(180,200,255,${alpha*0.06})`;
        ctx.arc(s.x, s.y, s.r*3, 0, Math.PI*2);
        ctx.fill();
      }
      requestAnimationFrame(draw);
    }
    requestAnimationFrame(draw);
  })();

  /* == cursor star trail == */
  (function(){
    const canvas = document.getElementById('cursor-canvas');
    if(!canvas) return;
    const ctx = canvas.getContext('2d');
    const DPR = devicePixelRatio || 1;
    let W = innerWidth, H = innerHeight;
    function resize(){ W = innerWidth; H = innerHeight; canvas.width = W * DPR; canvas.height = H * DPR; canvas.style.width = W + 'px'; canvas.style.height = H + 'px'; ctx.setTransform(DPR,0,0,DPR,0,0); }
    window.addEventListener('resize', resize); resize();

    const particles = [];
    const colors = ['#FFD966','#FF9AA2','#A2D9FF','#F4D1FF','#B8FFB0'];
    function starPath(ctx, x, y, r){
      ctx.beginPath();
      const spikes = 5;
      const outer = r;
      const inner = r * 0.44;
      let rot = Math.PI/2 * 3;
      let cx = x; let cy = y;
      let step = Math.PI / spikes;
      ctx.moveTo(cx, cy - outer);
      for(let i=0;i<spikes;i++){
        ctx.lineTo(cx + Math.cos(rot) * outer, cy + Math.sin(rot) * outer);
        rot += step;
        ctx.lineTo(cx + Math.cos(rot) * inner, cy + Math.sin(rot) * inner);
        rot += step;
      }
      ctx.closePath();
    }
    function addParticle(x,y){
      const a = Math.random()*Math.PI*2;
      const s = 0.6 + Math.random()*1.8;
      const size = 4 + Math.random()*7;
      particles.push({ x, y, vx:Math.cos(a)*s, vy:Math.sin(a)*s-0.6, size, life: 380+Math.random()*750, born:performance.now(), color: colors[Math.floor(Math.random()*colors.length)], rot: Math.random()*Math.PI*2 });
      if(particles.length > 160) particles.shift();
    }
    window.addEventListener('mousemove', (e)=>{ for(let i=0;i<2;i++){ addParticle(e.clientX + (Math.random()-0.5)*6, e.clientY + (Math.random()-0.5)*6);} }, {passive:true});
    window.addEventListener('touchmove', (e)=>{ const t=e.touches[0]; if(t) addParticle(t.clientX, t.clientY); }, {passive:true});

    function draw(now){
      ctx.clearRect(0,0,W,H);
      for(let i=particles.length-1;i>=0;i--){
        const p = particles[i];
        const age = now - p.born;
        if(age > p.life){ particles.splice(i,1); continue; }
        p.vy += 0.02; p.x += p.vx; p.y += p.vy;
        const alpha = 1 - (age/p.life);
        ctx.save();
        ctx.globalAlpha = alpha;
        ctx.translate(p.x, p.y);
        ctx.rotate(p.rot + age*0.001);
        ctx.fillStyle = p.color;
        starPath(ctx, 0, 0, p.size * (0.6 + alpha*0.6));
        ctx.fill();
        ctx.restore();
      }
      requestAnimationFrame(draw);
    }
    requestAnimationFrame(draw);
  })();
document.addEventListener('DOMContentLoaded', () => {
    // 透過 ID 取得左右兩個卡片元素
    const cardLeft = document.getElementById('card-left');
    const cardRight = document.getElementById('card-right');
    const cards = [cardLeft, cardRight];

    // 檢查兩個卡片元素是否都存在
    if (cardLeft && cardRight) {
        // 隨機產生一個 0 或 1 的數字
        const randomIndex = Math.floor(Math.random() * cards.length);
        
        // 根據隨機數選取一個卡片
        const randomCard = cards[randomIndex];

        // 創建鴿子圖片元素
        const pigeonImg = document.createElement('img');
        pigeonImg.src = 'img/蔥鴿.png'; // 確保圖片路徑正確
        pigeonImg.alt = '鴿子';
        pigeonImg.className = 'random-pigeon';
        // 新增的程式碼：加入 title 屬性
        pigeonImg.title = '我是蔥鴿！自由之光官方吉祥物。';

        // 將鴿子圖片添加到選定的卡片中
        randomCard.appendChild(pigeonImg);

        // 在圖片載入完成後，給予隨機位置並顯示動畫
        pigeonImg.onload = () => {
            // 計算隨機的 X 軸位置 (在卡片寬度內)
            const cardWidth = randomCard.clientWidth;
            const pigeonWidth = pigeonImg.offsetWidth;
            
            // 調整隨機 X 軸範圍，確保鴿子不會超出卡片邊界
            const minX = 10;
            const maxX = cardWidth - pigeonWidth + 500;
            const randomX = Math.random() * (maxX - minX) + minX;
            
            pigeonImg.style.left = `${randomX}px`;
            
            // 觸發顯示動畫
            setTimeout(() => {
                pigeonImg.classList.add('show');
            }, 100);
        };
    } 
});
  </script>
</body>
</html>