@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   hero.css — Chapter 01｜Hero

   ── 規格（已定案）──────────────────────────────────────
     ① 100vh 滿版
     ② 一張高品質品牌照片，鋪滿整個 Hero
     ③ 一句品牌訊息
     ④ 一個「開始探索」按鈕
     ⑤ 固定底部按鈕（全站共用，樣式在 cta.css）

   ── 動畫 ────────────────────────────────────────────────
     只有一個：Hero 淡入
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   頁首：Hero 存在時改為透明浮層

   讓照片真正滿版到畫面最上緣，Logo 浮在照片上。

   ※ 若瀏覽器不支援 :has()，頁首維持白色橫條，
     Hero 仍然正常，只是照片從頁首下方開始。
   ═══════════════════════════════════════════ */
body:has(.sec-hero) .site-header{
  position:fixed;
  background:transparent;
  border-bottom-color:transparent;
}

/* 白字版的 Hero，Logo 與選單也要跟著轉白 */
body:has(.sec-hero.hero--light) .site-header{ color:var(--c-white) }
body:has(.sec-hero.hero--light) .site-nav a{ color:var(--c-white) }
body:has(.sec-hero.hero--light) .site-header__logo img{
  /* 深色 Logo 轉成白色。若之後改用白色版 Logo 檔，把這行刪掉 */
  filter:brightness(0) invert(1);
}


/* ═══════════════════════════════════════════
   ① 100vh 滿版
   ═══════════════════════════════════════════ */
.sec-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  min-height:100vh;
  min-height:100svh;
  padding-block:0;

  display:flex;
  align-items:flex-end;          /* 內容靠下 */

  background:var(--c-gray-1);

  /* ── 動畫：Hero 淡入 ──
     元素插入畫面就播放一次，不需要 JS 觸發 */
  animation:hero-in 1s var(--ease) both;
}

@keyframes hero-in{
  from{ opacity:0 }
  to  { opacity:1 }
}


/* ═══════════════════════════════════════════
   ② 品牌照片
   鋪滿整個 Hero，不裁邊、不加圓角、不加陰影。
   ═══════════════════════════════════════════ */
.sec-hero .hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.sec-hero .hero__media picture{
  position:absolute;
  inset:0;
  display:block;
}
.sec-hero .hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ── 薄紗 ──
   單一顏色，不是漸層。濃度由 config 的 overlay 控制。
   目的只是讓文字讀得清楚，預設 0.2 幾乎看不出來。 */
.sec-hero .hero__veil{
  position:absolute;
  inset:0;
  z-index:-1;
}
.sec-hero.hero--light .hero__veil{
  background:rgba(20,22,20,var(--hero-overlay,.2));
}
.sec-hero.hero--dark .hero__veil{
  background:rgba(255,255,255,var(--hero-overlay,.2));
}


/* ═══════════════════════════════════════════
   ③④ 訊息與按鈕
   靠左下角。其餘畫面全部留給照片。
   ═══════════════════════════════════════════ */
.sec-hero .hero__content{
  position:relative;
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;

  padding-inline:var(--gutter);
  /* 下方讓出固定底部按鈕的高度，訊息不會被蓋住 */
  padding-bottom:calc(var(--floating-h) + var(--s-7));
  padding-top:var(--s-7);
}

/* ── 一句品牌訊息 ── */
.sec-hero .hero__message{
  max-width:20ch;
  font-size:clamp(28px, 1.4rem + 2vw, 48px);
  font-weight:500;
  line-height:1.4;
  letter-spacing:.1em;
}

/* ── 開始探索 ──
   細框線按鈕。沒有底色、沒有陰影，不像卡片。
   滑過時整顆反白，只有顏色變化，沒有位移。 */
.sec-hero .hero__cta{
  display:inline-flex;
  align-items:center;
  margin-top:var(--s-5);
  padding:14px 40px;
  border:1px solid currentColor;
  border-radius:var(--r-btn);
  background:transparent;
  font-size:var(--fs-note);
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.4;
  transition:background var(--t-hover) var(--ease),
             color      var(--t-hover) var(--ease);
}


/* ── 白字版 ── */
.sec-hero.hero--light{ color:var(--c-white) }
.sec-hero.hero--light .hero__cta:hover{
  background:var(--c-white);
  color:var(--c-ink);
}

/* ── 深字版 ── */
.sec-hero.hero--dark{ color:var(--c-ink) }
.sec-hero.hero--dark .hero__cta:hover{
  background:var(--c-ink);
  color:var(--c-white);
}


/* ═══════════════════════════════════════════
   手機與平板
   ═══════════════════════════════════════════ */
@media (max-width:900px){
  .sec-hero .hero__content{
    padding-bottom:calc(var(--floating-h) + var(--s-6));
  }
  .sec-hero .hero__message{
    max-width:16ch;
    letter-spacing:.06em;
  }
}

@media (max-width:600px){
  .sec-hero .hero__cta{ padding:14px 32px }
}

/* 矮螢幕：收緊下方留白，維持完整一屏 */
@media (max-height:700px){
  .sec-hero .hero__content{
    padding-bottom:calc(var(--floating-h) + var(--s-4));
    padding-top:var(--s-5);
  }
  .sec-hero .hero__cta{ margin-top:var(--s-4) }
}


/* ═══════════════════════════════════════════
   減少動態偏好
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .sec-hero{ animation:none }
}