/* ============================================================
   Casa Aura — About / 關於我
   全寬兩欄分割（手機堆疊），高度 90vh。
   左：圖片（視差）；右：#D9D8D0 文字面板（眉標頂部、文字底部）。
   ============================================================ */

#about {
  display: flex;
  height: clamp(500px, 78vh, 720px);    /* 較緊湊的高度（圖片裁切填滿）*/
  background: var(--color-alt-bg);      /* 後備底色，確保完全遮蓋 hero */

  /* ---- 可調變數 ---- */
  --about-parallax: 0.1;                /* 視差量（佔欄高比例） */
  --about-fade-duration: 900ms;         /* 文字淡入時長 */
  --about-stagger: 170ms;               /* 逐元素交錯 */
}

/* ---- 左欄：圖片 + 視差 -------------------------------- */
.about__media {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;                     /* 裁切視差溢出 */
}

.about__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* 比欄高出 視差量，讓圖片上下漂移時皆不露出空隙 */
  height: calc(100% + 100% * var(--about-parallax));
  object-fit: cover;
  object-position: center;
  will-change: transform;
  transform: translateY(0);
}

/* ---- 右欄：文字面板 ---------------------------------- */
.about__panel {
  position: relative;
  width: 50%;
  align-self: stretch;                  /* 跟左欄（圖片）一樣高 */
  display: flex;
  flex-direction: column;
  justify-content: center;              /* 內容垂直置中，減少中間空白 */
  gap: var(--space-5);                  /* 眉標與文字區塊的間距 */
  background: var(--color-alt-bg);
  /* 左填充加大，使文字遠離圖像（維持 50/50 分割） */
  padding: clamp(2.5rem, 4vw, 4rem) clamp(2.5rem, 5vw, 5.5rem)
    clamp(2.5rem, 5vh, 4.5rem);
}

.about__eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-sm);
  color: var(--color-body);
}

/* 標題 + 段落：連接的區塊，固定在底部 */
.about__textblock {
  max-width: 40rem;
}

.about__title {
  font-family: var(--font-zh-serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.3vw, 2.35rem);
  line-height: 1.55;
  color: var(--color-ink);
}

.about__text {
  margin-top: var(--space-3);
  font-family: var(--font-zh-serif);
  font-weight: 400;
  font-size: var(--fs-md);              /* 舒適、略大的閱讀尺寸 */
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--color-body);
}

/* ---- 進入視圖：逐元素交錯淡入 ------------------------ */
.about__eyebrow,
.about__title,
.about__text {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--about-fade-duration) cubic-bezier(0.33, 0, 0.2, 1),
    transform var(--about-fade-duration) cubic-bezier(0.33, 0, 0.2, 1);
}
#about.is-revealed .about__eyebrow {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}
#about.is-revealed .about__title {
  opacity: 1;
  transform: none;
  transition-delay: var(--about-stagger);
}
#about.is-revealed .about__text {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--about-stagger) * 2);
}

/* 無 JS 退場方案：腳本未執行時直接顯示，不留空白 */
.no-js .about__eyebrow,
.no-js .about__title,
.no-js .about__text {
  opacity: 1;
  transform: none;
}

/* ---- 手機：堆疊 -------------------------------------- */
@media (max-width: 768px) {
  #about {
    flex-direction: column;
    height: auto;                        /* 手機堆疊，高度隨內容 */
  }
  .about__media {
    width: 100%;
    height: 48vh;
  }
  .about__panel {
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-3);                  /* 眉標貼近文字，像連接的區塊 */
    padding: var(--space-6) var(--page-gutter);
  }
  .about__title {
    font-size: clamp(1.4rem, 5.5vw, 1.8rem);
  }
  .about__text {
    font-size: var(--fs-base);
    line-height: 1.9;
  }
}

/* ---- 尊重「減少動態」偏好 ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .about__img {
    transform: none !important;
  }
  .about__eyebrow,
  .about__title,
  .about__text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}