/* ============================================================
   Casa Aura — Base / Reset
   CSS 重置、box-sizing 基準、全高 html/body、移除預設邊距、
   平滑滾動、裁切水平溢出（不產生捲軸）。
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  /* 平滑滾動改由 JS 自訂（緩慢 1.8s ease-in-out），故此處用 auto，
     避免瀏覽器原生平滑與 JS 每幀 scrollTo 互相干擾 */
  scroll-behavior: auto;
  scroll-padding-top: 5.5rem;        /* 原生錨點後備時避開固定導覽列 */
  -webkit-text-size-adjust: 100%;
  /* overflow 裁剪放在 html，讓「視窗」作為滾動容器，window.scrollTo 才正常；
     放到 body 會把 body 升格為滾動容器，破壞 scrollTo 與 hero 的 sticky */
  overflow-x: clip;
}

body {
  /* 不可用 height:100%，否則 body 高度被鎖在一屏，hero 的 sticky 只能在第一屏作用 */
  min-height: 100dvh;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-body);
  background: var(--color-page-bg);
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  text-wrap: balance;               /* 避免標題尾行孤字 */
}

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;       /* 移除點擊延遲 */
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;       /* 移除點擊延遲 */
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---- 跳至主要內容（無障礙） ----------------------------- */
.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--color-page-bg);
  color: var(--color-ink);
  border: 1px solid var(--color-divider);
  transform: translateY(-150%);     /* 預設藏起，聚焦時滑入 */
  transition: transform 0.2s ease;
}
.skip-link:focus {
  transform: translateY(0);
}

/* ---- 視覺隱藏（保留給螢幕報讀） ------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---- Section base：全寬堆疊區塊 -------------------------- */
.section {
  position: relative;
  width: 100%;
}

/* ---- 主視覺之後：白色/不透明區塊滑過固定的 hero ----------
   hero 為 position:sticky; z-index:0；以下區塊用更高堆疊順序
   與純色背景，滾動時從固定的 hero（含其導覽列）上方經過。   */
#quote,
#about,
#services,
#projects,
#contact {
  position: relative;
  z-index: 1;
}

/* ---- 動畫系統（時間軸驅動就緒） -------------------------
   支援 scroll-timeline 的瀏覽器可掛上捲動驅動動畫；
   不支援時自然降級（不影響版面）。                          */
@supports (animation-timeline: view()) {
  .section {
    /* 為各區塊預留可用的時間軸名稱，之後可掛動畫 */
    view-timeline-name: --section-view;
    view-timeline-axis: block;
  }
}

/* ---- 尊重「減少動態」偏好 ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}