<!--======================================================================
// 自由之光（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">
  <!-- 指定字元編碼，UTF-8 幾乎是標準配置，支援中文、日文、表情符號等 -->
  
  <meta name="description" content="這是一個關於星彗羽的介紹網站，由自由之光團隊星樂之夢工作室開發。">
  <!-- 提供網站摘要，Google 搜尋結果通常會引用這段文字（非常重要，影響點擊率） -->

  <meta name="keywords" content="星彗羽, 自由之光, 星樂之夢, Vtuber, 團隊介紹">
  <!-- 舊式 SEO 用法，Google 幾乎不再使用，但其他小型搜尋引擎可能會參考 -->
  
  <meta name="author" content="自由之光團隊星樂之夢工作室">
  <!-- 作者或團隊署名，主要是資訊標註，不會直接影響搜尋排名 -->

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 讓手機平板用正確比例顯示，開啟響應式設計必備 -->

  <title>星彗羽 - 官方網站</title>
  <!-- 網站標題，會顯示在瀏覽器分頁標籤、Google 搜尋結果的標題 -->
  <link rel="canonical" href="https://light-of-liberty.github.io/HoshiHuiha.html" />
<style>
  :root{
    --page-bg:#faf7f3;
    --banner-overlay: rgba(255,255,255,0.78);
    --history-bg:#f3f3f3;
    --card-bg:#fff;
    --text:#222;
    --muted:#666;
    --accent:#FB9D9E;
    --max-w:1200px;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,Segoe UI,Roboto,Arial;
    background:var(--page-bg);
    color:var(--text);
  }
  .wrap{ max-width:var(--max-w); margin:0 auto; padding:0 18px; position:relative; }

  /* 粒子 canvas（保留） */
  #cursor-canvas{ position:fixed; inset:0; pointer-events:none; z-index:9999; }

/* ===== BANNER: 調整圖片顯示焦點（加入 object-position） ===== */
.banner{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
}

/* 原有規則，這裡我們加入 object-position 預設值 */
.banner img.banner-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 50% 65%; /* ← 預設焦點：水平中間、垂直偏上(45%) */
  display:block;
  z-index:1;
}

/* ---------- 方便在 DevTools 測試的 class ---------- */
/* 把 <img class="banner-img"> 臨時加上 class="move-down" 測試 */
.banner img.banner-img.move-down{
  object-position: 50% 65%; /* 顯示更多圖片下方（視覺上圖片整體往下） */
}

/* 或加上 class="move-up" 測試 */
.banner img.banner-img.move-up{
  object-position: 50% 30%; /* 顯示更多圖片上方（視覺上圖片整體往上） */
}

/* ---------- 手機專用（可微調） ---------- */
@media (max-width: 768px) {
  .banner { height: 60vh; }                /* 手機把 banner 高度縮短 */
  .banner img.banner-img {
    object-position: 50% 10%;              /* 手機顯示焦點：往下顯示更多下方（可改） */
  }
}


  /* 左上 logo 圖（請放 img/logo.png） */
  .banner .logo-img{ position:absolute; left:20px; top:18px; z-index:6; width:120px; background:#fff; padding:6px; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .banner .logo-img img{ width:100%; height:auto; display:block; object-fit:contain; }

  /* 左下小 badge（請放 img/banner-left-badge.png） */
 /*(廢棄) .banner .left-bottom-badge{ position:absolute; left:20px; bottom:20px; z-index:5; width:140px; }

/* ===== 覆蓋 .banner .overlay（只改這裡） ===== */
/* 直接改底下變數以微調位置/大小 */
:root{
  --overlay-width: 34%;        /* 改寬度（px 或 %） */
  --overlay-min-width: 260px;
  --overlay-right: 6%;         /* 右側距離，可改成 8% / 4% */
  --overlay-top: 10%;          /* 距離上方 */
  --overlay-padding: 18px;
}

.banner .overlay{
  position: absolute;
  right: var(--overlay-right);   /* 控制水平位置（靠右） */
  top: var(--overlay-top);       /* 控制垂直位置（靠上） */
  width: var(--overlay-width);
  min-width: var(--overlay-min-width);
  padding: var(--overlay-padding);
  z-index: 7;
  background: var(--banner-overlay);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.12);
  backdrop-filter: blur(3px);

  /* 讓 overlay 內文字垂直 & 水平置中 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直置中 */
  align-items: center;     /* 水平置中（讓 h1/p 都置中） */
  text-align: center;      /* 保險用法 */
}

/* 標題與段落微調（直接修改字級/行高） */
.banner .overlay h1{
  margin: 0 0 8px 0;
  font-size: 24px;   /* 可改成 20/26 等 */
  font-weight: 800;
  line-height: 1.05;
}
.banner .overlay p{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;   /* 可改成 14px 在窄螢幕 */
}

/* 如果要把 overlay 從右側改成畫面正中，於 HTML 加上 class="overlay centered" 即可 */
.banner .overlay.centered{
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  top: var(--overlay-top);
  width: clamp(300px, 38%, 520px);
}


  /* ===== 中間大區塊（intro + history 在同一個大區塊裡） ===== */
  main{ padding-top:18px; }

  .history-block{ margin-top:-8px; } /* 連接 banner */
  .intro {
    background:transparent;
    padding:18px;
    max-width:1000px;
    margin: 0 auto 8px auto;
    text-align:center;
    color:var(--muted);
    font-size:15px;
    line-height:1.8;
  }

  .history {
    background:var(--history-bg);
    border-radius:12px;
    padding:28px;
    box-shadow:0 10px 26px rgba(0,0,0,0.06);
    position:relative;
    overflow:visible;
    opacity:0; transform:translateY(20px); transition:all 600ms cubic-bezier(.2,.9,.2,1);
  }
  .history.visible{ opacity:1; transform:translateY(0); }

  /* 歷史標題改成圖片（請放 img/history-title.png） */
  .history .history-title-img{ display:block; margin:0 auto 16px auto; width:260px; max-width:60%; height:auto; }

  .icon-row{ display:flex; gap:15px; justify-content:center; margin-bottom:16px; flex-wrap:wrap; }
  .icon{ width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:8px; box-shadow:0 6px 14px rgba(0,0,0,0.07); text-decoration:none; overflow:hidden; }
  .icon img{ width:26px; height:26px; object-fit:contain; }

  .history .history-text{ max-width:920px; margin:0 auto; text-align:center; color:var(--muted); line-height:1.9; font-size:15px; }

  /* 歷史右側小立繪（下面有個小星星） */
  .history .history-right-pic{ position:absolute; right:18px; top: 100px ;  width:150px; z-index:3; }
  .history .history-right-pic img{ width:100%; display:block; }
  .history .history-small-star { 
    position: absolute; 
    right: 8px; 
    bottom: 100px; 
    
    width: 150px;   /* 寬度維持你想要的設定 */
    height: auto;   /* ✅ 修改這裡：由原本的 200px 改為 auto */
    
    z-index: 4; 
    cursor: pointer; 
}

  /* Tip 圖片（會被 JS 定位到小星星上方）：
     - 這裡使用 <img id="tipImage" src="img/tip.png"> 放到 body 底層
     - 右上角有一個 X 可關閉（button#tipClose） */
  #tipImage{
    position:absolute; width:220px; height:auto; display:none; z-index:1250; transform:translateY(6px) scale(.98); transition:all 260ms ease;
    box-shadow:0 12px 30px rgba(0,0,0,0.18); border-radius:10px; background:var(--card-bg);
  }
  #tipImage.show{ display:block; transform:translateY(0) scale(1); }
  #tipCloseBtn{
    position:absolute; z-index:1260; display:none; background:transparent; border:none; font-weight:700; cursor:pointer; color:var(--muted);
  }
  #tipCloseBtn.show{ display:block; }

  /* ===== 下方人物區塊 ===== */
  .character{ display:flex; gap:24px; align-items:flex-start; margin-top:28px; opacity:0; transform:translateY(18px); transition:all 600ms cubic-bezier(.2,.9,.2,1); }
  .character.visible{ opacity:1; transform:translateY(0); }
  .character-left{ flex:0 0 320px; position:relative; }
  .character-left img{ width:100%; border-radius:10px; display:block; box-shadow:0 8px 24px rgba(0,0,0,0.12); }
  .character-left .small-star{ position:absolute; left:230px; bottom:20px; width:100px; height:100px; }
  .character-right{ flex:1; background:var(--card-bg); padding:18px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.08); min-height:320px; }
  .character-right .title-image{ width:220px; height:auto; display:block; margin-bottom:12px; }


  /* 若 header 必須留在 .wrap 裡，使用此 CSS 讓 banner 撐滿視窗 */
  body {
  overflow-x: hidden; /* 隱藏水平方向的捲軸 */
 }
 .wrap > .banner {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
 }

 /* 灰色歷史區塊最上方的左右按鈕列 */
 .history .history-buttons{
   display:flex;
   justify-content:center;   /* 左右兩側各一顆；想改成置中可用 center */
   gap:12px;
   top:-40px;
   position:relative;               /* 讓 z-index 生效，避免被右側小圖蓋住 */
   z-index:4;                       /* 右側小立繪是 z-index:3，這裡設 4 就在上面 */
 }

 /* 按鈕外觀（你可再調色） */
 .history .history-buttons .btn{
   display:inline-block;
   padding:10px 14px;
   border-radius:10px;
   text-decoration:none;
   font-weight:700;
   font-size:14px;
   line-height:1;
   background: var(--accent, #f2c94c);
   color:#222;
   box-shadow:0 6px 16px rgba(0,0,0,.08);
   border: 1px solid rgba(0,0,0,.06);
   transition: transform .15s ease, box-shadow .2s ease;
 }
 .history .history-buttons .btn:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
 }


 /* 讓錨點滾動更順（不用寫 JS 也行） */
 html { scroll-behavior: smooth; }


/* ---------- 最小手機適配補丁（貼在 style 最後） ---------- */
/* 手機斷點：980px 以下 */
/* =========================
   手機專用：統一管理（貼在 style 最底）
   斷點：max-width: 980px
   ========================= */
@media (max-width: 980px) {

  /* ---------- banner：提高高度、避免下方被裁切 ---------- */
  .banner {
    height: 100vh !important;       /* 可改為 75vh / 70vh 看需求 */
    min-height: 480px;             /* 避免過短 */
    overflow: hidden !important;
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  /* banner 圖片（object-position 控制可視焦點） */
  .banner img.banner-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 65% !important; /* 調整為顯示更多下方（畫面視覺往下） */
    display: block !important;
    z-index: 1;
    transition: object-position .18s ease, transform .18s ease;
  }

  /* ---------- overlay 置中靠上且縮小，避免遮住太多圖 ---------- */
  .banner .overlay {
    position: absolute !important;
    top: 90% !important;
    left: 60% !important;
    transform: translateX(-50%) !important;
    width: 10% !important;
    max-width: calc(100% - 30px) !important;
    padding: 10px !important;
    text-align: center !important;
    z-index: 6;
    backdrop-filter: blur(3px);
  }
  .banner .overlay h1 { font-size: 18px; margin:0 0 6px 0; }
  .banner .overlay p  { font-size: 13px; line-height:1.4; margin:0; }

  /* ---------- 調整中間區塊避免蓋住 banner ---------- */
  .history-block, main {
    margin-top: 14px !important;    /* 清除負 margin */
    padding-top: 12px !important;
    position: relative !important;
    z-index: 2;
  }

  /* 歷史區塊小立繪與小星星（手機縮小或隱藏） */
  .history .history-right-pic { display: none !important; }
  .history .history-small-star { width: 44px !important; height:44px !important; right: 12px !important; bottom: 8px !important; }

  /* tip 小提示（手機預設隱藏，可如需再顯示改此處） */
  #tipImage, #tipCloseBtn { display: none !important; }

  /* 人物區改縱向排列 */
  .character { flex-direction: column !important; }
  .character-left { width: 100% !important; flex: unset !important; }

  /* Icon / 按鈕列微調 */
  .history .history-buttons { top: 0 !important; gap: 10px; justify-content: center; }
  .history .history-buttons .btn { padding: 10px 12px; font-size: 14px; }

  /* 圖片統一響應式 */
  img { max-width: 100%; height: auto; display: block; }
}


    footer {
      text-align:center;
      padding:30px;
      color:#555;
      font-size:14px;
    }
</style>
</head>
<body>

<!-- 粒子 Canvas（保留） -->
<canvas id="cursor-canvas"></canvas>

<div class="wrap">

  <!-- ===== BANNER（100vh） ===== -->
  <header class="banner" id="banner">
    <!-- 橫幅背景圖（放 img/banner.png） -->
   <picture>
     <!-- 手機小圖：螢幕 ≤ 768px 用這張 -->
     <source media="(max-width: 768px)" srcset="img/星彗羽官網背景(手機1).png">
     <!-- 平板或桌機用備援大圖 -->
     <img class="banner-img" src="img/星彗羽官網背景.png" alt="橫幅（置換：img/banner.png）" style="width:100%; height:100%; object-fit:cover;">
   </picture>

    <!-- 左上 logo（請放 img/logo.png） -->
   <div class="logo-img" aria-hidden="true">
     <a href="https://light-of-liberty.github.io/index.html">
        <img src="img/自由之光及星樂之夢.png" alt="logo（置換：img/logo.png）">
     </a>
   </div>

    
    <!-- 右側 overlay：非輸入框，直接從程式碼修改文字 -->
    <div class="overlay" role="region" aria-label="橫幅介紹">
      <h1 id="banner-title">💫星彗羽</h1>
      <p id="banner-desc">
        ✨台灣女童聲虛擬歌手。<br>
    </div>
  </header>

  <!-- ===== 中間大區塊（intro + history 在同一個 .history-block） ===== -->
  <main class="history-block">


    <section class="history" id="history">
    <!-- 歷史（同一大區塊內的第二小區塊） -->
    <!-- 小簡介（intro）：放在 history 的上方，但屬於同一個中間區塊 -->

      <div class="history-buttons" id="historyButtons" style="opacity:0; transform:translateY(12px); transition:all 450ms ease;">
       <a class="btn" href="https://acestudio.ai/?utm_source=google&utm_medium=cpc&utm_campaign=21772961459&utm_content=169125691380&utm_term=ace%20studio&matchtype=p&cl=a11&gad_source=1&gad_campaignid=21772961459&gbraid=0AAAAA-IZpVW_VAJeLF7sVQiZzxJjSSFbm&gclid=Cj0KCQjwqqDFBhDhARIsAIHTlkt0tOKJ9L_86DKtTaPXzPwRsdF_Ypv2KO5En_1ngLlvprHofdvWwDQaAgtCEALw_wcB" target="_blank">◀ 前往 ACE Studio</a>
       <a class="btn" href="https://acestudio.ai/app/creative-library/voices" id="applyBtn">✨ 前往ACE社群</a>
       <a class="btn" href="https://light-of-liberty.github.io/HoshiKiha.html" id="applyBtn">認識星希羽 ▶</a>
      </div>
      <!-- 歷史標題改為圖片（請放 img/history-title.png） -->


      <!-- 社群圖示列（請放 img/yt.png 等） -->
      <div class="icon-row" aria-label="社群圖示">
        <a class="icon" href="https://music.youtube.com/channel/UCSU2lJKyLldTOXNdDTTu5GQ?si=Z1_TDHwvYqE3rerp" target="_blank" rel="noopener"><img src="img/Youtube_Music_icon.svg.png" alt="YT Music"></a>
      </div>

    
    <div class="intro" id="introBlock">
      星彗羽,是由自由之光團隊旗下的子團隊星樂之夢工作室開發並營運的女性兒童聲虛擬歌手,<br><br>
      基於使用ACE Studio歌聲合成引擎製作,台灣女性小學生錄製。
    </div>


      <img class="history-title-img" src="img/歷史概要(彗).png" alt="歷史標題（置換：img/history-title.png）">
      <!-- 歷史文字段落 -->
      <div class="history-text" id="historyText">
       
       2023年12月,自由之光重新啟動計劃,推出男女雙小學生角色虛擬歌手。男性為「星希羽」,女性為「星彗羽」。<br><br>
       2024年2月22日開設「星樂之夢工作室」,並於4月轉用ACE Studio進行開發。<br><br>
       2025年1月7日開始研發,2月22日正式由星樂之夢工作室接手開發,2025年4月9日正式發佈1.0版本並與自由之光共同營運,於同年11月2日發布首張EP專輯“黎明”<br><br>
       <br><br>
      </div>

      <!-- 歷史右側小立繪（請放 img/character-small.png） -->
      <div class="history-right-pic" aria-hidden="true">
        <img src="img/星彗羽校服立繪1.1.png" alt="歷史右側小立繪（置換：img/character-small.png）">
      </div>

      <!-- 歷史右側下方小星星（放 img/small-star-right.png）：提示圖片會定位到上方 -->
      <img id="historySmallStar" class="history-small-star" src="img/安可提示.png" alt="小星星（置換：img/small-star-right.png）">
    </section>

     
    </section>

    <!-- Tip 圖片 & Close 按鈕（由 JS 定位到 historySmallStar 上方並顯示） -->
    <!-- 圖片請放 img/tip.png（內容即為你要的「小小提示圖案」） -->
    <!-- 關閉後預設不再自動彈出（如需可改為存在 localStorage） -->

    <!-- ===== 最下方人物區塊 ===== -->
    <section class="character" id="character">
      <div class="character-left">
        <img src="img/星彗羽2.0.png" alt="角色立繪（置換：img/character.png）">
        <img class="small-star" src="img/奇可提示.png" alt="小星星（置換：img/small-star.png）" >
      </div>

      <div class="character-right">
        <img class="title-image" src="img/星彗羽2.0Logo.png" alt="標題圖（置換：img/title-image.png）">
        <table>
          <tr><td style="width:140px">姓名</td><td id="td-name">星彗羽</td></tr>
          <tr><td>性別</td><td id="td-height">女生</td></tr>
          <tr><td>年齡</td><td id="td-age">9歲</td></tr>
          <tr><td>身高</td><td id="td-height">135cm</td></tr>
          <tr><td>體重</td><td id="td-age">35kg</td></tr>
          <tr><td>生日</td><td id="td-age">8月14日</td></tr>
          <tr><td>星座</td><td id="td-age">獅子座</td></tr>
          <tr><td>血型</td><td id="td-age">O型</td></tr>
          <tr>
           <td>代表色</td>
             <td id="td-age" style="white-space: nowrap;">
               <div style="display: inline-block; width: 20px; height: 20px; background-color: #FB9D9E; margin-right: 8px; vertical-align: middle;"></div>
                馬卡龍粉
           </td>
          </tr>
          <tr><td>經紀公司</td><td id="td-age">星樂之夢工作室</td></tr>
          <tr><td>所屬團體</td><td id="td-age">星幻之城 × StarLeo</td></tr>
          <tr><td>相關人或親屬</td><td id="td-voice">星希羽(弟弟)</td></tr>
          <tr><td>當前版本</td><td id="td-song">星彗羽ACE Ai V1.1</td></tr>
        </table>
          <!-- Cute 播放器 -->
         <div class="audio-player" style="margin-bottom:20px;">
           <br>
           <audio controls style="width:100%;">
             <source src="wav\夢想前行Huiha.wav" type="audio/wav">
             您的瀏覽器不支援 audio 播放器。
          </audio>
      </div>
    </section>
  </main>
</div>

<script>
/* ========== banner fade & reveal ========== */
(function(){
  const banner = document.getElementById('banner');
  const history = document.getElementById('history');
  const character = document.getElementById('character');
  const intro = document.getElementById('introBlock');
  const historyButtons = document.getElementById('historyButtons');

  function onScroll(){
    const scrolled = window.scrollY;
    const bannerH = banner.offsetHeight || window.innerHeight;
    let t = Math.min(Math.max(scrolled / (bannerH * 0.65), 0), 1);
    banner.style.opacity = (1 - t).toString();

    if(scrolled > bannerH * 0.15){
      history.classList.add('visible');
        if(historyButtons){
       historyButtons.style.opacity = '1';
       historyButtons.style.transform = 'translateY(0)';
      }
    } else {
      history.classList.remove('visible');
    }
    if(character.getBoundingClientRect().top < window.innerHeight - 80){
      character.classList.add('visible');
    }
  }
  window.addEventListener('scroll', onScroll, {passive:true});
  onScroll();
})();

/* ========== tip image：定位到 historySmallStar 上方並顯示（只顯示一次） ========== */
(function(){
  const star = document.getElementById('historySmallStar');
  const tip = document.getElementById('tipImage'); // img element
  const tipClose = document.getElementById('tipCloseBtn');

  if(!star || !tip) return;
  let shown = false;

  function placeTipAboveStar(){
    const rect = star.getBoundingClientRect();
    const popupW = tip.naturalWidth || 220;
    const popupH = tip.naturalHeight || 120;
    // compute document coords
    const x = window.pageXOffset + rect.left + rect.width/2 - popupW/2;
    const y = window.pageYOffset + rect.top - popupH - -100; // 12px gap above star
    tip.style.left = Math.max(8, x) + 'px';
    tip.style.top  = Math.max(8, y) + 'px';
    tip.classList.add('show');

    // position close button near the top-right of the tip image
    // create/show button if exists
    if(tipClose){
      tipClose.style.left = (parseFloat(tip.style.left) + popupW - 120) + 'px';
      tipClose.style.top  = (parseFloat(tip.style.top) + 6) + 'px';
      tipClose.classList.add('show');
    }
  }

  const observer = new IntersectionObserver((entries)=>{
    entries.forEach(en=>{
      if(en.isIntersecting && !shown){
        // Wait image loaded to get accurate size
        if(tip.complete){
          placeTipAboveStar();
        } else {
          tip.onload = placeTipAboveStar;
        }
        tip.style.display = 'block';
        shown = true;
        observer.unobserve(star);
        // Keep tip positioned if user scrolls/resizes while visible
        window.addEventListener('resize', placeTipAboveStar);
        window.addEventListener('scroll', placeTipAboveStar, {passive:true});
      }
    });
  }, {threshold:0.35});
  observer.observe(star);

  // close behavior: hide tip + close button; won't auto reopen
  if(tipClose){
    tipClose.addEventListener('click', ()=>{
      tip.classList.remove('show');
      tip.style.display = 'none';
      tipClose.classList.remove('show');
    });
  }
})();

/* ========== cursor particle trail（保留） ========= */
/* ========== cursor star-particles ========= */
(function(){
  const canvas = document.getElementById('cursor-canvas');
  const ctx = canvas.getContext('2d');
  const DPR = window.devicePixelRatio || 1;

  function resize(){
    canvas.width = innerWidth * DPR;
    canvas.height = innerHeight * DPR;
    canvas.style.width = innerWidth + 'px';
    canvas.style.height = innerHeight + 'px';
    ctx.setTransform(DPR,0,0,DPR,0,0);
  }
  resize();
  window.addEventListener('resize', resize);

  // ====== 可調參數（你可以直接編輯這裡） ======
  const palette = ['#FFD966','#FF9AA2','#A2D9FF','#F4D1FF','#B8FFB0']; // 預設顏色
  const maxParticles = 160;      // 畫面上最多粒子數
  const spawnPerMove = 3;        // 每次 mousemove 生成幾顆
  const starPoints = 5;          // 星星尖數（5 = 五角星）
  const minSize = 4;             // 星星最小半徑
  const maxSize = 10;            // 星星最大半徑
  const gravity = 0.02;          // 重力感（讓星星往下落）
  const useImage = false;        // 若要使用外部圖檔改成 true（見下方說明）
  const starImageSrc = 'img/star-particle.png'; // 若 useImage = true，請放這個路徑

  // ====== 內部狀態 ======
  const particles = [];
  let starImg = null;
  if(useImage){
    starImg = new Image();
    starImg.src = starImageSrc;
  }

  function randBetween(a,b){ return a + Math.random()*(b-a); }

  // 畫一顆星星（多邊形）在 ctx 的原點(0,0)，向右為 0 度
  function drawStarPath(ctx, radiusOuter, radiusInner, spikes){
    const step = Math.PI / spikes;
    ctx.beginPath();
    let rot = -Math.PI/2; // 從上方開始
    for(let i=0;i<spikes;i++){
      const x1 = Math.cos(rot) * radiusOuter;
      const y1 = Math.sin(rot) * radiusOuter;
      ctx.lineTo(x1, y1);
      rot += step;
      const x2 = Math.cos(rot) * radiusInner;
      const y2 = Math.sin(rot) * radiusInner;
      ctx.lineTo(x2, y2);
      rot += step;
    }
    ctx.closePath();
  }

  function addParticle(x,y){
    if(particles.length >= maxParticles) particles.shift();
    const size = randBetween(minSize, maxSize);
    const inner = size * 0.48; // 內圈比例(調整可改)
    const outer = size;
    const angle = Math.random() * Math.PI * 2;
    const speed = randBetween(0.2, 1.6);
    const vx = Math.cos(angle) * speed;
    const vy = Math.sin(angle) * speed * 0.25 - 0.6; // 初始略往上
    const col = palette[Math.floor(Math.random()*palette.length)];
    particles.push({
      x, y,
      vx, vy,
      sizeOuter: outer,
      sizeInner: inner,
      born: performance.now(),
      life: 600 + Math.random()*700,
      color: col,
      rot: Math.random()*Math.PI*2,
      drot: (Math.random()-0.5)*0.06
    });
  }

  // 監聽滑鼠 / 觸控
  window.addEventListener('mousemove', (e)=>{
    for(let i=0;i<spawnPerMove;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) return;
    for(let i=0;i<2;i++) addParticle(t.clientX, t.clientY);
  }, {passive:true});

  // 主繪製迴圈
  function draw(now){
    ctx.clearRect(0,0,innerWidth, innerHeight);

    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 += gravity;
      p.x += p.vx;
      p.y += p.vy;
      p.rot += p.drot;
      const t = 1 - (age / p.life); // 1 -> 0
      const alpha = Math.max(0, t);

      ctx.save();
      ctx.globalAlpha = alpha;
      ctx.translate(p.x, p.y);
      ctx.rotate(p.rot);

      if(useImage && starImg && starImg.complete){
        // 若使用圖片模式，畫圖檔（可選）
        const w = p.sizeOuter * 2;
        const h = p.sizeOuter * 2;
        ctx.drawImage(starImg, -w/2, -h/2, w, h);

        // 若想疊色（用 color 作為疊層），可用 globalCompositeOperation hack（可另外要求）
      } else {
        // 用向量畫星星（可用顏色填滿）
        ctx.fillStyle = p.color;
        // outer, inner, spikes
        drawStarPath(ctx, p.sizeOuter, p.sizeInner, starPoints);
        ctx.fill();
      }

      ctx.restore();
    }

    requestAnimationFrame(draw);
  }

  requestAnimationFrame(draw);

})();

</script>

  <footer>
    © 2025 星樂之夢工作室/自由之光
  </footer>
</body>

</html>