/* =====================================================================
   一起成為改變的力量＋Footer · css/footer.css
   ▸ 所有選擇器以 #footer 開頭，避免污染其他區塊
   ▸ Alethia Footer Big：全幅出血背景影片＋三段 forest 遮罩＋置中 CTA（h2→導言→文字 CTA，間距 24/40/56）
     ＋浮在影片上的巨型字標＋一列欄位＋mono 底列（無分隔線）
   ▸ RWD 斷點：≤1280px（欄位 4 欄）、≤1100px、≤640px；reduced motion 不做位移
   ===================================================================== */

#footer{
  position:relative;z-index:8;overflow:hidden;isolation:isolate;
  /* 底部呼吸帶：底列下方留一段純影片（alethia 底列下約 369px），手機收成 72px */
  /* 2026-09-14 IRON Figma Footer 10771:17385（1440×998）：CTA top 80、字標 top 402、欄位 top 660、底留 40 */
  padding:80px var(--gutter) 40px;
  background:var(--forest);color:var(--on-dark);
  /* 暗底 focus 一律 accent 描邊（覆寫 base 的 --focus-ring／--focus-ring-on-dark） */
  --focus-ring:2px solid var(--accent-on-dark);
  --focus-ring-on-dark:2px solid var(--accent-on-dark);
}
#footer :focus-visible{outline:var(--focus-ring);outline-offset:4px}

/* ---------- 背景影片＋遮罩（alethia footer-video：inset 0 全幅出血） ---------- */
#footer .ft-media{position:absolute;inset:0;z-index:-1;background:var(--forest)}
/* 影片框：Figma 為 1440×1440（寬＝視窗寬的正方形、頂端對齊，超出 footer 的部分被裁掉）；影片（idle_S3，淺底島嶼在右側）高度撐滿框，
   以自身寬度的 66% 對齊中線，讓百合落在畫面正中；poster 用 ::before 同框墊底，避免載入期間跳色 */
#footer .ft-media__frame{position:absolute;left:0;top:0;width:100%;height:max(100%,100vw);overflow:hidden;background:var(--forest)}
#footer .ft-media__frame::before,
#footer .ft-media__video{position:absolute;top:0;left:50%;height:100%;width:auto;max-width:none;aspect-ratio:16 / 9;transform:translateX(-66%)}
#footer .ft-media__frame::before{content:"";background:url("../assets/video/footer-idle-s3-poster.jpg") center / cover no-repeat}
#footer .ft-media__video{object-fit:cover;opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
#footer .ft-media__video.is-playing{opacity:1}
#footer .ft-media__video.is-poster{opacity:0}   /* reduced motion：不播放，只留 frame 的 poster 底 */
/* 三段遮罩：CTA 區壓深（.86→.72）、字標後方最透（.55）、欄位＋底列再收回（.6→.78） */
#footer .ft-media__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,31,16,.86) 0%,rgba(15,31,16,.72) 26%,rgba(15,31,16,.55) 48%,rgba(15,31,16,.6) 70%,rgba(15,31,16,.78) 100%);
}
/* 字標後方再壓一層柔光暗角，讓 accent 字標與百合亮部分開 */
#footer .ft-media__shade{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 58% 34% at 50% 58%,rgba(15,31,16,.38),transparent 72%);
}

/* ---------- CTA ---------- */
/* 眉標：Figma 玻璃小標（blur 11.2＋rgba(21,37,26,.36)、radius 2、Lexend Exa 500 14/14、tracking .28），覆寫 .pill 樣式 */
#footer .ft-cta__eyebrow{
  display:inline-flex;align-items:center;gap:0;height:auto;padding:4.2px 8.4px;border:0;border-radius:2px;box-shadow:none;
  background:rgba(21,37,26,.36);-webkit-backdrop-filter:blur(11.2px);backdrop-filter:blur(11.2px);
  font-family:var(--font-en);font-size:14px;line-height:14px;font-weight:500;letter-spacing:.28px;text-transform:uppercase;color:#fff;
}
#footer .ft-cta__eyebrow::before,#footer .ft-cta__eyebrow::after{content:none}
#footer .ft-cta{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:1100px;margin:0 auto}
#footer .ft-cta__title{
  margin-top:0;font-family:var(--font-tc);font-size:72px;line-height:normal;font-weight:600;
  letter-spacing:-1.44px;color:#D4EBAF;text-wrap:balance;
}
#footer .ft-cta__lead{
  margin-top:20px;max-width:34em;font-family:var(--font-tc);font-size:21px;line-height:33.6px;
  color:rgba(244,239,230,.78);text-wrap:balance;
  text-shadow:0 1px 14px rgba(15,31,16,.65);
}

/* 文字 CTA：h4 字級＋32px go 圓鈕；常駐 hairline，hover 時實線由左長出 */
#footer .ft-cta__links{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 48px;margin-top:56px}
#footer .ft-bigLink{
  position:relative;display:inline-flex;align-items:center;gap:12px;padding:4px 0 12px;
  font-family:var(--font-tc);font-size:22px;font-weight:500;line-height:30.8px;letter-spacing:0;
  color:#F4EFE6;transition:color var(--dur-1) var(--ease-out);
}
#footer .ft-bigLink::before,
#footer .ft-bigLink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px}
#footer .ft-bigLink::before{background:rgba(244,239,230,.18)}
#footer .ft-bigLink::after{
  height:2px;background:var(--accent-on-dark);
  transform:scaleX(0);transform-origin:right center;transition:transform var(--dur-2) var(--ease-out);
}
#footer .ft-bigLink__go{flex:0 0 32px;width:32px;height:32px;background:#D4EBAF;color:#0F1F10;transition:transform var(--dur-2) var(--ease-out),background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
#footer .ft-bigLink__go svg{width:12px;height:12px;transition:none}
@media (hover:hover) and (pointer:fine){#footer a.ft-bigLink:hover .ft-bigLink__go svg{transform:none}}   /* 位移作用在圓鈕本身，不疊加 base 的箭頭右移 */

#footer .ft-bigLink:focus-visible{color:var(--accent-on-dark)}
@media (hover:hover) and (pointer:fine){#footer .ft-bigLink:hover{color:var(--accent-on-dark)}}

#footer .ft-bigLink:focus-visible::after{transform:scaleX(1);transform-origin:left center}
@media (hover:hover) and (pointer:fine){#footer .ft-bigLink:hover::after{transform:scaleX(1);transform-origin:left center}}

#footer .ft-bigLink:focus-visible .ft-bigLink__go{transform:translateX(var(--nudge))}
@media (hover:hover) and (pointer:fine){#footer .ft-bigLink:hover .ft-bigLink__go{transform:translateX(var(--nudge))}}
#footer .ft-bigLink:active .ft-bigLink__go{transform:translateX(var(--nudge)) scale(.94);transition-duration:.08s}

/* ---------- 巨型字標（浮在影片上） ---------- */
#footer .ft-mark{margin:38px calc(var(--gutter) * -1) 0;padding:0 var(--gutter)}
#footer .ft-mark__word{
  /* Figma：Lexend Exa 500 190px（1440 寬）、行高 193.536、tracking −12.096、#D4EBAF，框高 218（上 13.5） */
  font-family:var(--font-en);font-weight:500;font-size:13.194vw;line-height:1.0186;letter-spacing:-.06366em;
  color:#D4EBAF;white-space:nowrap;text-align:center;
  overflow:hidden;padding:.071em 0 .058em;          /* 讓字母由下升起時被裁切，不裁到上緣 */
  user-select:none;
}
#footer .ft-mark__line{display:inline-block;will-change:transform}
#footer .ft-mark__char{display:inline-block;will-change:transform}

/* ---------- 品牌＋欄位（一列，無分隔線） ---------- */
#footer .ft-info{
  display:grid;grid-template-columns:minmax(0,303px) minmax(0,1061px);justify-content:space-between;align-items:center;gap:20px;
  margin-top:40px;padding-top:32px;border-top:1px solid rgba(217,217,217,.5);
}
#footer .ft-brand__logo{display:block;width:72px;height:30px;margin-bottom:18px;filter:brightness(0) invert(1);opacity:.92}
#footer .ft-brand__zh{font-family:var(--font-tc);font-size:var(--fs-body);font-weight:500;line-height:var(--lh-h4);letter-spacing:var(--ls-tc);color:var(--on-dark)}
#footer .ft-brand__en{margin-top:6px;font-family:var(--font);font-size:13px;line-height:1.5;color:var(--on-dark-2)}

/* 社群（原 CTA 下方的社群列，移到品牌欄） */
#footer .ft-social{margin-top:28px}
#footer .ft-social__list{display:flex;gap:10px}
#footer .ft-social__btn{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(244,239,230,.32);color:var(--on-dark);
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
#footer .ft-social__btn svg{width:18px;height:18px}

#footer .ft-social__btn:focus-visible{background:var(--accent-on-dark);border-color:var(--accent-on-dark);color:var(--forest)}
@media (hover:hover) and (pointer:fine){#footer .ft-social__btn:hover{background:var(--accent-on-dark);border-color:var(--accent-on-dark);color:var(--forest)}}
#footer .ft-social__btn:active{transform:scale(.94);transition-duration:.08s}

/* 欄位區共用 26.6px 行距網格（14px × 1.9）：欄標、連結、備註同一基線節奏；解憂雜貨店欄稍寬，欄標不換行 */
#footer .ft-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.25fr) minmax(0,1fr);gap:40px 20px}
#footer .ft-col__label{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0;line-height:26.6px;
  text-transform:uppercase;white-space:nowrap;color:rgba(244,239,230,.5);
}
#footer .ft-col ul{margin-top:0;display:flex;flex-direction:column;gap:0}
#footer .ft-col li{font-family:var(--font-tc);font-size:14px;line-height:1.9}
#footer .ft-col a{
  position:relative;display:inline-block;color:var(--on-dark);
  background:linear-gradient(currentColor,currentColor) no-repeat left bottom / 0 1px;
  transition:color var(--dur-1) var(--ease-out),background-size var(--dur-2) var(--ease-out);
}

#footer .ft-col a:focus-visible{color:var(--accent-on-dark);background-size:100% 1px}
@media (hover:hover) and (pointer:fine){#footer .ft-col a:hover{color:var(--accent-on-dark);background-size:100% 1px}}
#footer .ft-col__tel{font-family:var(--font);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}
#footer .ft-col__note{font-size:12px!important;line-height:26.6px!important;color:var(--on-dark-2)}

/* ---------- 底列（alethia footer-bottom：mono 12、三段、無線） ---------- */
#footer .ft-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;
  margin-top:32px;padding-top:32px;border-top:1px solid rgba(217,217,217,.5);
  font-family:var(--mono);font-size:12px;line-height:1.6;letter-spacing:0;color:rgba(244,239,230,.6);
}
#footer .ft-bottom__copy{margin-right:0}
#footer .ft-bottom__link,
#footer .ft-bottom__top{
  display:inline-flex;align-items:center;gap:8px;padding:6px 0;font-family:var(--font-tc);color:var(--on-dark-2);
  background:linear-gradient(currentColor,currentColor) no-repeat left calc(100% - 4px) / 0 1px;
  transition:color var(--dur-1) var(--ease-out),background-size var(--dur-2) var(--ease-out);
}
#footer .ft-bottom__top svg{transition:transform var(--dur-2) var(--ease-out)}
#footer .ft-bottom__link:focus-visible,#footer .ft-bottom__top:focus-visible{color:var(--on-dark);background-size:100% 1px}
@media (hover:hover) and (pointer:fine){#footer .ft-bottom__link:hover,#footer .ft-bottom__top:hover{color:var(--on-dark);background-size:100% 1px}}

#footer .ft-bottom__top:focus-visible svg{transform:translateY(calc(var(--nudge) * -1))}
@media (hover:hover) and (pointer:fine){#footer .ft-bottom__top:hover svg{transform:translateY(calc(var(--nudge) * -1))}}
#footer .ft-bottom__top:active svg{transform:translateY(calc(var(--nudge) * -1)) scale(.94);transition-duration:.08s}

/* Figma 內容區 left 40、寬 1360（全站 --gutter 28 只在 footer 桌機放寬到 40） */
@media (min-width:1101px){#footer{padding-left:40px;padding-right:40px}#footer .ft-mark{margin-left:-40px;margin-right:-40px;padding:0 28px}}

/* ---------- RWD ---------- */
@media (max-width:1280px){
  #footer .ft-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1100px){
  #footer{padding-top:72px}
  #footer .ft-cta__title{font-size:56px}
  #footer .ft-cta__lead{font-size:18px;line-height:1.7}
  #footer .ft-bigLink{font-size:20px}
  #footer .ft-cta__links{gap:20px 44px;margin-top:48px}
  #footer .ft-mark{margin-top:40px}
  #footer .ft-info{grid-template-columns:1fr;gap:40px;margin-top:64px}
  #footer .ft-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  #footer .ft-col li{font-size:15px}
}
@media (max-width:640px){
  #footer{padding-top:64px;padding-bottom:40px}
  /* 手機 footer 很長：影片框仍全幅出血，object-position 往字標所在的上中段靠 */
  #footer .ft-media__frame::before,#footer .ft-media__video{transform:translateX(-64%)}
  #footer .ft-media__shade{background:radial-gradient(ellipse 90% 18% at 50% 42%,rgba(15,31,16,.38),transparent 72%)}
  #footer .ft-cta__title{font-size:40px;letter-spacing:-.8px}
  #footer .ft-cta__lead{margin-top:16px;font-size:16px}
  #footer .ft-cta__links{flex-direction:column;align-items:center;gap:16px;margin-top:40px}
  #footer .ft-bigLink{font-size:18px;padding-bottom:10px}
  #footer .ft-mark{margin-top:32px}
  #footer .ft-mark__word{font-size:13.2vw}
  #footer .ft-info{margin-top:48px}
  #footer .ft-social{margin-top:20px}
  #footer .ft-social__btn{width:44px;height:44px}
  #footer .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  #footer .ft-col__label{font-size:11px}
  #footer .ft-bottom{margin-top:48px;flex-direction:column;align-items:flex-start;gap:4px}
  #footer .ft-bottom__copy{order:3;margin-top:8px}
}
@media (pointer:coarse){
  #footer .ft-col a{display:inline-block;padding:9px 0}
  #footer .ft-bottom__link,#footer .ft-bottom__top{min-height:44px;display:inline-flex;align-items:center}
  #footer .ft-social__btn{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  #footer .ft-bigLink__go,#footer .ft-bigLink::after,#footer .ft-bottom__top svg,#footer .ft-media__video,#footer .ft-social__btn{transition:none}
  #footer .ft-bigLink:active .ft-bigLink__go,#footer .ft-social__btn:active,#footer .ft-bottom__top:active svg{transform:none}
}

/* ---------- nav 在 footer 上：無色塊的毛玻璃（footer.js 切 .nav--over-footer） ----------
   不用暗底段共用的 rgba(15,31,16,.8) 實底，改成極淡 forest＋較強 blur／saturate，底色直接取自下方影片；維持硬邊 */
.nav.nav--over-footer{--nav-tint-0:rgba(15,31,16,.14);--nav-tint-1:rgba(15,31,16,.1);--nav-blur:blur(20px) saturate(1.25)}
@media (max-width:1100px){.nav.nav--over-footer:not(.nav-open)::after{background:linear-gradient(180deg,var(--nav-tint-0) 0,var(--nav-tint-1) 100%)}}