<!--======================================================================
// 自由之光（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 搜尋結果的標題 -->
<style>
  :root{
    --page-bg:#faf7f3;
    --banner-overlay: rgba(255,255,255,0.78);
    --history-bg:#f3f3f3;
    --card-bg:#fff;
    --text:#222;
    --muted:#666;
    --accent:#C7EEFB;
    --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:1px; bottom:100px; width:150px; height:200px; 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 20px 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: 100px !important; height:120px !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.5).png">
     <!-- 平板或桌機用備援大圖 -->
     <img class="banner-img" src="img/官網背景V1.5.png" alt="橫幅（置換：img/banner.png）" style="width:100%; height:100%; object-fit:cover;">
   </picture>

   <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://docs.google.com/forms/d/15ZUsvE6eawAi1QMVxtyVzxeoanUCPEQUHTlw_vCrEbc/edit" id="applyBtn">✨ 申請星希羽</a>
       <a class="btn" href="https://light-of-liberty.github.io/HoshiSuiha.html" id="applyBtn">認識星彗羽 ▶</a>

      </div>
      <!-- 歷史標題改為圖片（請放 img/history-title.png） -->


      <!-- 社群圖示列（請放 img/yt.png 等） -->
      <div class="icon-row" aria-label="社群圖示">
        <a class="icon" href="https://www.youtube.com/@SMD_Kiha" target="_blank" rel="noopener"><img src="img/youtube_PNG15.png" alt="YouTube"></a>
        <a class="icon" href="https://music.youtube.com/channel/UC41l-jw5a8zQPamQpxzBTzg?si=I-Xag8brXGQE5htc" target="_blank" rel="noopener"><img src="img/Youtube_Music_icon.svg.png" alt="YT Music"></a>
        <a class="icon" href="https://music.apple.com/tw/artist/%E6%98%9F%E5%B8%8C%E7%BE%BD/1800846409" target="_blank" rel="noopener"><img src="img/Apple_Music_icon.svg.png" alt="Apple Music"></a>
        <a class="icon" href="https://open.spotify.com/artist/79GjJBcPcD7dFuWA3GWo50?si=EJG0KbJ9Q1eW5dOBuHntgA" target="_blank" rel="noopener"><img src="img/spotify logo.png" alt="spotify"></a>
        <a class="icon" href="https://www.nicovideo.jp/user/140346403" target="_blank" rel="noopener"><img src="img/niconico_logo_icon_248372.png" alt="Niconico动画"></a>
        <a class="icon" href="https://x.com/SMD_Kiha" target="_blank" rel="noopener"><img src="img/X-Logo.png" alt="X"></a>
        <a class="icon" href="https://www.threads.com/@smd_kiha_official" target="_blank" rel="noopener"><img src="img/Threads Logo.png" alt="X"></a>
        <a class="icon" href="https://www.instagram.com/smd_kiha_official/" target="_blank" rel="noopener"><img src="img/Instagram_icon.png" alt="X"></a>


      </div>

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


      <img class="history-title-img" src="img/歷史概要圖示.png" alt="歷史標題（置換：img/history-title.png）">
      <!-- 歷史文字段落 -->
      <div class="history-text" id="historyText">
       星希羽的起源可追溯至2022年,當時創作者Kai受到
       DeepVocal歌手「空詩音レミ」啟發,於2022年11月
       27日創作出虛擬角色「小希」,並於2023年4月更名
       為「耀光」。同年自由之光啟動虛擬歌手研發計
       劃,原先考慮使用Synthesizer V,後因成本與技術
       問題轉向DeepVocal。
       不過該企劃於2023年11月終止。<br><br>
       <br><br>
       2023年12月,自由之光重新啟動計劃,推出男女雙小學生角色虛擬歌手,男性為「星希羽」,繼承部分「耀光」設定,女性為「星彗羽」。<br><br>
       2024年2月22日開設「星樂之夢工作室」,並於4月轉用ACE Studio進行開發。2024年8月14日,星希羽正式發佈1.0版本及首支原創曲《星の夜》,由自由之光代理經營。<br><br>
       2025年2月22日正式由星樂之夢工作室接手並與自由之光共同營運<br><br>
       <br><br>
      </div>

      <!-- 歷史右側小立繪（請放 img/character-small.png） -->
      <div class="history-right-pic" aria-hidden="true">
        <img src="img/星希羽1.5.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>

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

    <!-- ===== 最下方人物區塊 ===== -->
    <section class="character" id="character">
      <div class="character-left">
        <img src="img/星希羽1.5(正).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/星希羽Logo.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">7歲</td></tr>
          <tr><td>身高</td><td id="td-height">122cm</td></tr>
          <tr><td>體重</td><td id="td-age">25kg</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">AB型</td></tr>
          <tr>
           <td>代表色</td>
             <td id="td-age" style="white-space: nowrap;">
               <div style="display: inline-block; width: 20px; height: 20px; background-color: #C7EEFB; 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">✯星幻劇團✯</td></tr>
          <tr><td>相關人或親屬</td><td id="td-voice">星彗羽（姊姊）</td></tr>
          <tr><td>代表曲</td><td id="td-song">《星の夜》《猫の森》</td></tr>
          <tr><td>當前版本</td><td id="td-song">星希羽ACE Ai V1.5</td></tr>
        </table>
        <a href="https://light-of-liberty.github.io/HoshiKiha-Profile.html" style="display: block; width: 200px; padding: 10px; margin-top: 20px; text-align: center; text-decoration: none; background-color: #9bc8fb; color: white; border-radius: 5px; font-weight: bold;">前往詳細資料▶</a>


      </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(){
    if(tip.style.display === 'none') return;
    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/1 - popupW/2;
    const y = window.pageYOffset + rect.top - popupH - -100; // 12px gap above star
    tip.style.left = Math.max(10, x) + 'px';
    tip.style.top  = Math.max(10, 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>