/* =====================================================================
   kv-figma.css — 年度頁（歷史頁）從零重建，完全照 Figma
   來源：Figma 6YjT48Rkx5CJiuO60kqGDL
     歷史頁_web 212:2 / 歷史頁_tablet 219:2 / 歷史頁_app 213:2
   不依賴 bootstrap、不參考原站 CSS，尺寸／色票直接取自 Figma。
   ===================================================================== */

:root{
  --f-yellow:#EDD23E;   /* 頁面底 */
  --f-cream:#FBF7EA;    /* 卡片 / 輸入框 */
  --f-ink:#2D2A36;      /* 邊框 / 文字 */
  --f-red:#E64C3D;      /* 訂閱鈕 / 2026 標籤 */
  --f-runner:#8171FF;   /* 卡片串連接線 */
  --f-runner-b:#2D2A36; /* 連接線邊框 */
  --f-font:"Noto Sans TC","PingFang TC",-apple-system,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:var(--f-font); color:var(--f-ink);
  background:var(--f-yellow); -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }

/* 反矯正外框焦點：鍵盤操作看得到 */
a:focus-visible,input:focus-visible,button:focus-visible{
  outline:3px solid var(--f-ink); outline-offset:3px; }

/* 注意：這裡不能用 overflow:hidden，否則會讓 sticky 失效；
   出血的散落背景由 .bg-decor 自己的 overflow:hidden 裁切 */
.page{ position:relative; min-height:100vh; }

/* ---- 半透明散落 SVG 背景（參考原站 index.html，集中左側與下方空白）------ */
.bg-decor{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.bg-decor .d{ position:absolute; opacity:.5; }
/* 左緣：訂閱框「左側」邊緣（在它旁邊、非後方，出血到頁面外）*/
.d-headph{ left:-2%;   top:calc(27% + 130px); width:105px; transform:rotate(-7deg); } /* 下移共 130px */
.d-audio { left:3%;    top:calc(52% + 90px); width:80px;  transform:rotate(-11deg); } /* 下移共 90px */
.d-ya    { left:calc(4% + 100px); bottom:6%; width:86px; transform:rotate(7deg); } /* 縮小、移左下角、再右移 100px */
/* 卡片左側（x 錯落）*/
.d-notepk{ left:58%;   top:20%;    width:48px;  transform:rotate(11deg); }
.d-ball  { left:55%;   bottom:44%; width:88px;  transform:rotate(9deg); } /* 與 Hat 交換：SV 球下到背景空隙 */
.d-kb    { left:52%;   bottom:5%;  width:170px; transform:rotate(-4deg); }
/* 卡片右側（right 錯落、高低不齊）*/
.d-photo { right:8%;    top:4%;     width:62px;  transform:rotate(-8deg); } /* 移到右上角、第一張卡上方 */
.d-notebl{ right:1.5%;  bottom:14%; width:104px; transform:rotate(-6deg); } /* 與 letter 交換位置 */
.d-letter{ right:3%;    top:calc(48% - 60px); width:118px; transform:rotate(10deg); } /* 與 Note-BL 交換、再上移共 60px */

/* ---- Nav：SV Logo 靠左（Figma nav px-42 py-36）---------------------- */
/* 捲動時 logo 釘在頂端跟著視窗（參考 2026 頁 fixed nav） */
.nav{ position:sticky; top:0; z-index:20; max-width:1200px; margin:0 auto;
  padding:36px 42px; }
.nav__logo{ position:relative; display:inline-block; line-height:0; }
.nav__logo-dark{ width:220px; height:auto; aspect-ratio:220 / 27; display:block;
  transition:opacity .18s ease; } /* web 220px，正常深色 */
.nav__logo-pur{ position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:100%; height:auto; opacity:0; transition:opacity .18s ease; } /* 紫色版疊上、預設隱藏 */
/* 游標移入 / 聚焦 / 按下 → 切換成紫色 #5E5CF7 */
.nav__logo:hover .nav__logo-dark,
.nav__logo:focus-visible .nav__logo-dark,
.nav__logo:active .nav__logo-dark{ opacity:0; }
.nav__logo:hover .nav__logo-pur,
.nav__logo:focus-visible .nav__logo-pur,
.nav__logo:active .nav__logo-pur{ opacity:1; }

/* ---- 主內容：桌機左右兩欄（左欄 570 + 卡串 330，space-between）------- */
.wrap{ position:relative; z-index:2; max-width:1200px; margin:0 auto;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:0 80px 100px 42px; } /* Figma 新版：frame 無上留白，卡片緊貼 nav 下 */

/* 左欄：標題 + 副標 + 表單 + 說明（Figma 左 Frame 570，內 pt-100）------ */
.intro{ flex:0 0 570px; width:570px; padding-top:100px;
  display:flex; flex-direction:column; align-items:center;
  position:sticky; top:24px; align-self:flex-start; } /* 捲動時左欄停留 */
/* Title.svg 無出血、緊貼版（423×187，比例同原版），依 Figma 上 56 下 10 留白 */
.intro__title{ position:relative; padding:56px 0 10px; }
.intro__title .title-kv{ position:relative; z-index:1;
  width:400px; height:auto; aspect-ratio:423 / 187; }
/* 標題裝飾：綠星（左上）/ SV球（中上）/ 笑臉星（右上），置於標題後方 */
.intro__title .tdeco{ position:absolute; z-index:0; pointer-events:none; opacity:.5; }
.td-star { top:42px;  left:6px;    width:60px;  transform:rotate(-16deg); } /* 右下各移 40px */
.td-hat  { top:-32px; left:110px;  width:110px; transform:rotate(6deg); } /* 帽子上到標題、放大 1.2×、上移 16px */
.td-smile{ top:6px;   right:-32px; width:112px; transform:rotate(9deg); }

/* ---- 進場動態：Title 抖動 → 三個裝飾從標題後方彈出到定位 -------------- */
@media (prefers-reduced-motion:no-preference){
  .intro__title .title-kv{ animation:title-shake .6s ease-in-out .15s both; }
  /* 抖動保持（translate/rotate 不變）＋ 加入縮放：0.82 放大、微過衝到 1.05 再落回 */
  @keyframes title-shake{
    0%  { transform:translate(0,0)      rotate(0)       scale(.82); }
    12% { transform:translate(-5px,2px) rotate(-2.2deg) scale(.9); }
    26% { transform:translate(5px,-2px) rotate(2.2deg)  scale(.98); }
    40% { transform:translate(-4px,1px) rotate(-1.6deg) scale(1.05); }
    54% { transform:translate(4px,-1px) rotate(1.6deg)  scale(1.01); }
    70% { transform:translate(-2px,1px) rotate(-.9deg)  scale(1); }
    85% { transform:translate(2px,0)    rotate(.6deg)   scale(1); }
    100%{ transform:translate(0,0)      rotate(0)       scale(1); }
  }
  /* 抖動期間躲在標題後（縮小＋位移到標題中心＋透明），抖完依序彈出 */
  .td-star { animation:pop-star  .55s cubic-bezier(.2,1.5,.35,1) .70s both; }
  .td-hat  { animation:pop-hat   .55s cubic-bezier(.2,1.5,.35,1) .80s both; }
  .td-smile{ animation:pop-smile .55s cubic-bezier(.2,1.5,.35,1) .90s both; }
  @keyframes pop-star { 0%{ opacity:0; scale:.2; translate:164px 78px; }  100%{ opacity:.5; scale:1; translate:0 0; } }
  @keyframes pop-hat  { 0%{ opacity:0; scale:.2; translate:35px 147px; }  100%{ opacity:.5; scale:1; translate:0 0; } }
  @keyframes pop-smile{ 0%{ opacity:0; scale:.2; translate:-176px 90px; } 100%{ opacity:.5; scale:1; translate:0 0; } }
}

/* 副標：用 subtitle.svg（426×26 現行版，HTML index.html:53 引用）；舊 subtitle-group.svg 已移除 */
.intro__subtitle{ width:425.987px; max-width:100%; }
.intro__subtitle img{ display:block; width:100%; height:auto; }

/* 表單：Email（圓角奶白框）+ 訂閱鈕（紅），Figma Form pt-32 gap-8 --------- */
.form{ width:570px; display:flex; gap:8px; justify-content:center;
  padding-top:32px; }
.form__email{ width:417px; height:51px; padding:0 22.2px;
  background:var(--f-cream); border:3px solid var(--f-ink); border-radius:999px;
  box-shadow:4px 4px 0 var(--f-ink);
  font-family:var(--f-font); font-weight:500; font-size:16px; color:var(--f-ink); }
.form__email::placeholder{ color:#8A877E; }
/* 聚焦 Email：不出現黑外框，改為邊框＋硬陰影轉靛紫（2D2A36 → 5E5CF7）*/
.form__email:focus, .form__email:focus-visible{
  outline:none;
  border-color:#5E5CF7;
  box-shadow:4px 4px 0 #5E5CF7; }
.form__btn{ height:51.338px; padding:0 20.75px;
  background:var(--f-red); color:#fff; border:3.277px solid var(--f-ink);
  border-radius:999px; box-shadow:4.369px 4.369px 0 var(--f-ink);
  font-family:var(--f-font); font-weight:900; font-size:24.03px; line-height:1;
  white-space:nowrap; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease; }
.form__btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--f-ink); }
/* 按下：變成 Figma pressed 樣式（粉紅底 #FD83DB＋深色字）*/
.form__btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--f-ink);
  background:#FD83DB; color:var(--f-ink); }

/* 說明文字：Figma 515×52，兩行置中 */
.intro__note{ width:515px; margin:0; padding:20px 0;
  font-weight:500; font-size:16px; line-height:26px; text-align:center;
  color:var(--f-ink); }

/* ---- 右欄：歷屆卡片串（Card_Years 330 寬，中央靛紫連接線）----------- */
.years{ position:relative; flex:0 0 330px; width:330px;
  display:flex; flex-direction:column; align-items:center; gap:29px;
  padding:10px 0; }
/* 中央連接線（Figma 14px 靛紫 + 3px 黑邊 + 3px 硬陰影）*/
.years::before{ content:""; position:absolute; z-index:0;
  left:50%; transform:translateX(-50%); top:62px; bottom:104px; width:14px;
  background:var(--f-runner); border:3px solid var(--f-runner-b);
  border-radius:999px; box-shadow:3px 3px 0 var(--f-runner-b); }

.year{ position:relative; z-index:2; display:flex; flex-direction:column;
  width:238px; padding:3px; background:var(--f-cream);
  border:3px solid var(--f-ink); border-radius:18px;
  box-shadow:4px 4px 0 var(--f-ink); overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.year:nth-child(odd){ transform:rotate(-2.5deg); }
.year:nth-child(even){ transform:rotate(2.5deg); }
/* hover / 點擊：墨黑框線與硬陰影轉靛紫 #5E5CF7 */
.year:hover{ transform:rotate(0) scale(1.04); border-color:#5E5CF7;
  box-shadow:7px 7px 0 #5E5CF7; z-index:6; }
.year:active{ border-color:#5E5CF7; box-shadow:4px 4px 0 #5E5CF7; }
.year__img img{ width:100%; height:232px; object-fit:cover;
  border-radius:15px 15px 0 0; }
.year__label{ text-align:center; font-weight:900; font-size:13.6px;
  line-height:22.7px; color:var(--f-ink); background:var(--f-cream);
  padding:6.4px 4.8px; border-radius:0 0 15px 15px; transition:color .15s ease; }
/* 非 2026 卡的深色標籤字，hover/點擊時一起轉靛紫（2026 為紅底白字，不動）*/
.year:not(.year--feat):hover .year__label,
.year:not(.year--feat):active .year__label{ color:#5E5CF7; }

/* 2026 置頂大卡：紅標 + 較大 */
.year--feat{ width:284px; }
.year--feat .year__img img{ height:278px; }
.year--feat .year__label{ background:var(--f-red); color:#fff; font-size:15.2px;
  line-height:25.4px; }

/* ---- 年卡「藤蔓生長」進場：連接線由頂往下長，年卡 2026→2022 依序長出 ---- */
@media (prefers-reduced-motion:no-preference){
  /* 連接線：2026 卡先出現後才從頂端往下生長（放慢）*/
  .years::before{ transform-origin:top center;
    animation:vine-line 2.4s cubic-bezier(.35,0,.15,1) .55s both; }
  @keyframes vine-line{
    from{ transform:translateX(-50%) scaleY(0); }
    to  { transform:translateX(-50%) scaleY(1); }
  }
  /* 年卡：縮小下沉透明 → 長出；用 translate/scale 個別屬性以保留 rotate 傾斜 */
  .year{ animation:vine-card .6s cubic-bezier(.2,1.3,.35,1) both; }
  .year:nth-child(1){ animation-delay:.20s; }  /* 2026 先出 */
  .year:nth-child(2){ animation-delay:1.00s; }
  .year:nth-child(3){ animation-delay:1.55s; }
  .year:nth-child(4){ animation-delay:2.10s; }
  .year:nth-child(5){ animation-delay:2.60s; }
  .year:nth-child(6){ animation-delay:3.10s; }
  .year:nth-child(7){ animation-delay:3.60s; }
  @keyframes vine-card{
    from{ opacity:0; translate:0 30px; scale:.82; }
    to  { opacity:1; translate:0 0;    scale:1; }
  }
}

/* ---- 材質紋理：全頁 soft-light 疊層（Figma Texture 227:1790，三版通用）---- */
.texture{ position:absolute; inset:0; z-index:4; pointer-events:none;
  background:url(../images/figma/texture.png) top left;
  background-size:100px 100px; mix-blend-mode:soft-light; }

/* =====================================================================
   RWD — 對齊 Figma 歷史頁_tablet(768) / 歷史頁_app(390)：改上下堆疊置中
   ===================================================================== */
@media (max-width:991px){
  /* tablet/app 只保留 web 版「年卡後面」那幾個插圖；表單旁的 3 個隱藏 */
  .d-headph, .d-audio, .d-ya{ display:none; }
  /* tablet/app：logo 不停留，跟著頁面一起往下捲（改回 static，蓋掉 base 的 sticky）*/
  .nav{ position:static; text-align:center; }
  .nav__logo-dark{ width:200px; }         /* tablet（指定值） */
  .wrap{ flex-direction:column; align-items:center;
    padding:24px 24px 72px; gap:8px; }
  .intro{ flex:none; width:100%; max-width:570px; padding-top:0;
    position:static; align-self:center; } /* tablet/app 不釘住、置中（重設桌機的 align-self:flex-start）*/
  .form{ width:100%; max-width:570px; }   /* 對齊 Figma tablet 表單寬 */
  .form__email{ flex:1 1 auto; width:auto; }
  .intro__note{ width:100%; max-width:515px; }
  .years{ flex:none; margin-top:16px; }
}

/* tablet：只留 web 年卡後面那 6 個，環繞置中卡片欄（左 3 右 3）*/
@media (min-width:576px) and (max-width:991px){
  .d-ball  { left:4%;   right:auto; top:34%; bottom:auto; }
  .d-notepk{ left:6%;   right:auto; top:58%; bottom:auto; }
  .d-kb    { left:3%;   right:auto; top:82%; bottom:auto; }
  .d-photo { left:auto; right:6%;   top:32%; bottom:auto; }
  .d-notebl{ left:auto; right:4%;   top:56%; bottom:auto; }
  .d-letter{ left:auto; right:5%;   top:80%; bottom:auto; }
}

/* 手機（對齊 Figma app）：表單改上下、Email 滿版、鈕置中縮小 */
@media (max-width:575px){
  .nav{ padding:26px 24px; }
  .nav__logo-dark{ width:176px; } /* app（指定值） */
  .intro__title{ padding:36px 0 8px; }
  .intro__title .title-kv{ width:290px; }
  /* 標題裝飾手機版縮小＋重新定位（相對 290px 標題）*/
  /* 與 tablet/桌機同比例（標題 290/400=0.725，尺寸與位置偏移都 ×0.725）*/
  .td-star { width:44px; left:4px;   top:30px; }
  .td-hat  { width:80px; left:80px;  top:-23px; }
  .td-smile{ width:81px; right:-23px; top:4px; }
  .intro__subtitle{ width:298px; }
  .form{ flex-direction:column; align-items:center; gap:14px; }
  .form__email{ width:100%; height:46px; }
  .form__btn{ height:auto; padding:9px 22px; font-size:19px; }
  .intro__note{ font-size:14px; line-height:22px; }
  /* app：只留那 6 個，貼左右邊緣縮小，從置中年卡後方露出（出血由 .bg-decor 裁）*/
  .d-ball  { left:1%;   right:auto; top:35%; bottom:auto; width:60px; }
  .d-notepk{ left:5%;   right:auto; top:56%; bottom:auto; width:40px; }
  .d-kb    { left:-5%;  right:auto; top:80%; bottom:auto; width:118px; }
  .d-photo { left:auto; right:3%;   top:33%; bottom:auto; width:54px; }
  .d-notebl{ left:auto; right:-4%;  top:56%; bottom:auto; width:82px; }
  .d-letter{ left:auto; right:-2%;  top:80%; bottom:auto; width:90px; }
}