/* =============================================================
   home-hero.css — 首頁 Hero Section
   Day 6 Lux 重做（Figma 1:1 直抄）
   來源 node-ids: 42:117 / 42:118 / 42:431 / 42:435 / 42:130 / 42:128 / 42:129 / 42:125
   參考：vite-prototype index.html 行 76-105 + 798-846
   斷點：mobile <768 / tablet 768-1023 / desktop 1024+
   桌機 1024-1439 由 page-home wrapper 的 zoom 機制縮放（root inline style）
   ============================================================= */

/* ===== 桌機基準（Figma 1440 座標系） ===== */
.rusan-home-hero {
  position: relative;
  width: 100%;
  /* Day 8: Hero = 100vh（screen 第一屏）+ min-height 避免太矮 */
  height: 100vh;
  min-height: 600px;
  max-height: 1080px;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-bg-primary);
  color: var(--color-white);
}
/* Day 6.5 Anna 反饋「白框離選單太遠 + 底下也要補空」— Figma 設計 page 從 y:0 開始 + sticky header overlay
   把整個 .rusan-home main 上推 72，所有 section 跟著上移，header overlay 蓋最上方 */
.rusan-home {
  margin-top: -72px;
}

/* 1440 桌機 — 內部用 1440 寬度容器 + margin auto 對齊原 Figma 座標 */
.rusan-home-hero > * {
  /* 子元素都用 absolute / 相對於 hero（1440 設計稿原點） */
}

/* ============================================================
   42:118 雪山背景 mask group（contents 容器 → 不佔位，子元素絕對）
   ============================================================ */
.rusan-home-hero__bg-group {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 42:122 雪山主圖 — h:1988 left:248 top:calc(50%-3390.5+500) */
.rusan-home-hero__bg-mountain-a {
  position: absolute;
  width: 1590px;
  height: 1988px;
  left: 248px;
  top: calc(50% - 994px);     /* -translate-y-1/2 + Figma top */
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: -248px 1144px;
          mask-position: -248px 1144px;
  -webkit-mask-size: 1440px 1024px;
          mask-size: 1440px 1024px;
}
.rusan-home-hero__bg-mountain-a img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* 42:123 雪山次圖 — Figma 原值（恢復）：h:1467 left:-20 top:-343 w:1834
   Day 6.2 一度改 mix-blend-mode 但 get_design_context 確認 Figma 三層都同一個矩形 mask + b 完全蓋 a，
   不需要 blend；視覺暗是 42:124 黑色 70% overlay 造成的 */
.rusan-home-hero__bg-mountain-b {
  position: absolute;
  width: 1834px;
  height: 1467px;
  left: -20px;
  top: -343px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 20px 343px;
          mask-position: 20px 343px;
  -webkit-mask-size: 1440px 1024px;
          mask-size: 1440px 1024px;
}
.rusan-home-hero__bg-mountain-b img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* 42:124 黑色 70% overlay */
.rusan-home-hero__bg-overlay {
  position: absolute;
  inset: 0;
  width: 1440px;
  height: 1024px;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-size: 1440px 1024px;
          mask-size: 1440px 1024px;
}

/* ============================================================
   42:431 左眼鏡 mask group
   Day 6.2 一度從 172 改 80 解 Anna「眼鏡再高一點」反饋；
   後 get_design_context 確認 Figma 真值 top:162（42:434 flip-wrap top）
   恢復到 162 — Anna 反饋的「太低」應該由 Hero section 整體 layout 而非單獨 group 移動處理
   ============================================================ */
/* group 用 hero 全寬定位錨點（Figma JSX 用 contents） */
.rusan-home-hero__glasses-group {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 1024px;
  z-index: 3;        /* 降到 RUSAN letters(7) 之下 */
  pointer-events: none;
}

/* Day 6.4 Anna 再次確認「只有一張綠色眼鏡的圖」→ 拔掉 glasses-b */
.rusan-home-hero__glasses-flip-wrap {
  display: none !important;
}

/* 42:433 眼鏡主圖
   Figma 真值 top:161，但實際 viewport <1024 時眼鏡下半被切，白框上半空。
   Anna 反饋「圖片位置有問題，因為那邊都空的」→ 把眼鏡上移 151px，
   讓 mask 視窗（650 高）落在白框內中央 (白框 y:92-944, 視窗 y:143-793)
   留白 50px 上下對稱 */
.rusan-home-hero__glasses-a {
  position: absolute;
  width: 806px;
  height: 1007px;
  left: -161px;
  top: -40px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 161px 183px;
          mask-position: 161px 183px;
  -webkit-mask-size: 645px 650px;
          mask-size: 645px 650px;
}
.rusan-home-hero__glasses-a img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* 42:434 鏡架 — flex wrapper 垂直翻轉 + rotate180（h:760 left:-350 top:162 w:1140） */
.rusan-home-hero__glasses-flip-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1140px;
  height: 760px;
  left: -350px;
  top: 162px;
}
.rusan-home-hero__glasses-flip-inner {
  transform: scaleY(-1) rotate(180deg);
  flex: none;
}
.rusan-home-hero__glasses-b {
  position: relative;
  width: 1140px;
  height: 760px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 350px 10px;
          mask-position: 350px 10px;
  -webkit-mask-size: 645px 650px;
          mask-size: 645px 650px;
}
.rusan-home-hero__glasses-b img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* ============================================================
   42:130 白色大邊框 — 1320x852 居中 top:92
   ============================================================ */
/* Bug fix: Anna 反饋「白框寬度不對」根因 Day 6.2 從 20 砍 4 → 恢復 Figma 真值 20px white
   z-index: Anna 反饋「眼鏡圖會在白框之上」→ 白框 z-index 降到 2，眼鏡 z-index:6 蓋過 */
.rusan-home-hero__frame {
  position: absolute;
  /* Day 8: 白框寬度自適應 + Anna「白框往下一點」top 8.98% → 13% */
  left: 60px;
  right: 60px;
  top: 11%;
  bottom: 7.81%;
  border: 20px solid var(--color-white);
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
}

/* ============================================================
   42:435 RUSAN 5 字母大字 — Group 16
   Figma inset 比例：top 11.86%、bottom 85.45% → 高度約 2.69% × 1024 = 約 27.5px? 不對
   實際上 Group 是放在 Index_PC 整頁（很長）裡。Hero 區內以 absolute 對齊：
   - 字母上下：top:764 ~ bottom:944 → 高 180px
   - 5 字母均分 1124 寬，從 left:160 到 left:1284（中心置中）
   參考 vite-prototype 行 810 inset 是相對 Index_PC，這裡轉換成 Hero 內 absolute
   ============================================================ */
/* Day 6.3 還原 Figma 真值（42:435 Group 16）：x:320 y:764 w:800 h:179.33
   Anna 反饋「框線跟字 RUSAN 不會交錯」根因 — letters bottom 超出 frame bottom 4px → 改 top:764 h:180 對齊 Figma */
.rusan-home-hero__rusan-letters {
  position: absolute;
  /* Day 8.1: letters 用 bottom 定位 + height auto（letter 180px 自然撐）
     跟 .rusan-home-hero__frame 同 bottom %，視窗任何高度都對齊 */
  left: 50%;
  transform: translateX(-50%);
  bottom: 7.81%;       /* (1024-944)/1024 — 跟 frame bottom 同步 */
  width: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 7;
  pointer-events: none;
}
.rusan-home-hero__letter {
  width: 160px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rusan-home-hero__letter-flip {
  transform: rotate(180deg) scaleX(-1);   /* -rotate-180 -scale-x-100 */
  width: 100%;
  height: 100%;
  display: block;
}
.rusan-home-hero__letter-img {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.rusan-home-hero__letter-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
  object-fit: contain;
}

/* ============================================================
   右側內容區 — 42:129 標題 / 42:128 副文 / 42:125 雙按鈕
   Figma 1440 座標：標題 left=705 top=367 / 副文 left=705 top=445 / 按鈕 left=705 top=579
   全部左對齊在 x=705（右半藍底卡 layout）
   ============================================================ */
.rusan-home-hero__content {
  position: absolute;
  /* Day 8: Banner 文字靠右 + top 用 % 跟 Hero 100vh */
  right: 140px;
  top: 35.84%;         /* 367/1024 */
  width: max-content;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 4;
  text-align: left;
}

/* 42:129 「如山光學」h1 */
.rusan-home-hero__heading {
  margin: 0;
  font-family: var(--font-en), var(--font-jp), var(--font-zh);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);    /* 48px */
  line-height: var(--leading-tight);
  color: var(--color-white);
  white-space: nowrap;
}

/* 42:128 副文（445 - 367 = 78 距離） */
.rusan-home-hero__subtitle {
  margin: 30px 0 0;              /* 367 → 445 = 78px，扣 heading 行高 ~58 → 約 20-30 */
  font-family: var(--font-en), var(--font-jp), var(--font-zh);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);   /* 18px */
  line-height: var(--leading-relaxed);
  color: var(--color-white);
}
.rusan-home-hero__subtitle p {
  margin: 0;
  line-height: var(--leading-relaxed);
  white-space: nowrap;
}

/* 42:125 Actions — 兩按鈕 left=705 top=579（579 - 445 ≈ 134 距離；扣副文兩行 ~54 → 約 80） */
.rusan-home-hero__actions {
  margin-top: 80px;
  display: flex;
  gap: var(--spacing-5);         /* 16px */
  align-items: center;
  justify-content: flex-start;
}

/* 42:126 / 42:127 共用按鈕 */
.rusan-home-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  width: 140px;
  height: 48px;
  padding: 11px 20px;
  font-family: var(--font-en), var(--font-jp);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);     /* 16px */
  line-height: var(--leading-relaxed);
  color: var(--color-white);
  text-decoration: none;
  border: 0;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}

/* 42:126 探索（outline） */
.rusan-home-hero__btn--explore {
  background: transparent;
  border: 2px solid var(--color-white);
  padding: 9px 18px;             /* 扣 2px border 維持 48 高 */
}
.rusan-home-hero__btn--explore:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-white-90);
}

/* 42:127 聯絡（primary 藍） */
.rusan-home-hero__btn--contact {
  background: var(--color-blue-primary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.rusan-home-hero__btn--contact:hover {
  background: var(--color-blue-medium);
}

.rusan-home-hero__btn:focus-visible {
  outline: 2px solid var(--color-blue-bright);
  outline-offset: 2px;
}

/* ============================================================
   斷點：Tablet 768-1023 — Reflow（眼鏡縮小、邊框內縮、RUSAN 大字隱藏）
   ============================================================ */
@media (max-width: 1023px) {
  .rusan-home-hero {
    height: 100vh;
    min-height: 560px;
    padding: 0;
  }

  /* 雪山背景：滿版 cover，不用 mask */
  .rusan-home-hero__bg-mountain-a,
  .rusan-home-hero__bg-mountain-b {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .rusan-home-hero__bg-mountain-a img,
  .rusan-home-hero__bg-mountain-b img {
    object-position: center;
  }
  .rusan-home-hero__bg-mountain-b { display: none; }
  .rusan-home-hero__bg-overlay {
    width: 100%;
    height: 100%;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  /* 左眼鏡：縮小 + 移到右下角當裝飾，opacity 降低避免擋字 */
  .rusan-home-hero__glasses-group {
    top: auto;
    bottom: -80px;
    right: -120px;
    left: auto;
    width: 460px;
    height: 460px;
    opacity: 0.35;
  }
  .rusan-home-hero__glasses-a {
    width: 460px;
    height: 460px;
    left: 0;
    top: 0;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .rusan-home-hero__glasses-flip-wrap { display: none; }

  /* Day 8.2 Anna：縮小後拔白框 + RUSAN 大字（已隱藏），只留標題 */
  .rusan-home-hero__rusan-letters { display: none; }
  .rusan-home-hero__frame { display: none; }

  /* Day 8.3 Anna：縮小後標題置中（垂直水平都置中） */
  .rusan-home-hero__content {
    position: absolute;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 48px);
    max-width: 600px;
    align-items: center;
    text-align: center;
    padding: 0;
  }
  .rusan-home-hero__heading {
    font-size: var(--text-2xl);   /* 30px */
    white-space: normal;
  }
  .rusan-home-hero__subtitle {
    margin-top: var(--spacing-7);
    font-size: var(--text-sm);
    max-width: 600px;
  }
  .rusan-home-hero__subtitle p {
    white-space: normal;
  }
  .rusan-home-hero__actions {
    margin-top: var(--spacing-10);
    flex-wrap: wrap;
  }
}

/* ============================================================
   斷點：Mobile <768 — 純文字置中、按鈕全寬
   ============================================================ */
@media (max-width: 767px) {
  .rusan-home-hero {
    min-height: 480px;
    padding: 0;
  }

  /* 雪山背景：保留底色 + 圖片 */
  .rusan-home-hero__bg-mountain-a img {
    object-position: center;
  }

  /* 左眼鏡：手機完全隱藏（避免太擠） */
  .rusan-home-hero__glasses-group { display: none; }

  /* Day 8.2: 白框已在 1023 媒體查詢隱藏，這邊不重複 */

  /* 內容區：保留 absolute + 水平置中偏下，調縮字體 */
  .rusan-home-hero__content {
    width: calc(100% - 32px);
    padding: 0;
  }
  .rusan-home-hero__heading {
    font-size: 28px;
  }
  .rusan-home-hero__subtitle {
    margin-top: var(--spacing-5);
    font-size: var(--text-xs);    /* 14px */
  }
  .rusan-home-hero__subtitle p {
    line-height: var(--leading-loose);
  }

  /* 按鈕全寬、垂直堆疊 */
  .rusan-home-hero__actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    gap: var(--spacing-3);
  }
  .rusan-home-hero__btn {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   斷點：超寬螢幕 ≥1440 — 對齊設計稿 1440 寬度（外加 inner wrapper）
   page-home wrapper 不縮放，hero 直接用 1440 內容置中
   ============================================================ */
@media (min-width: 1440px) {
  .rusan-home-hero {
    /* 內容對齊 1440 中軸：用 max-width + margin auto 包一個 inner */
    max-width: none;
  }
  /* 子元素已用 left:50% / translateX(-50%)，會自動置中於視窗 */
}