/* ═══════════════════════════════════════════════════════════
   光與材質
   ───────────────────────────────────────────────────────────
   純黑底加細線是一個平面，所有東西都在同一個距離上。
   這個檔案負責把 z 軸加回來：線稿浮在一團光上、材質有被打到光的邊、
   往前靠的東西會亮起來。

   全部都是極低對比的東西 —— 單獨看幾乎看不到，拿掉就會發現整站變平。
   ═══════════════════════════════════════════════════════════ */

/* ── 線稿底下的環境光 ─────────────────────────────────────
   兩層：一層中性的，讓圖看起來是「被照亮的」而不是漂在虛空裡；
   一層強調色的，跟著最後一拍亮起來 —— 收尾的重音除了放大還有變亮。
   .project__visual 本身是 sticky，已經是定位基準，不必再加 position。 */
.project__visual::before,
.project__visual::after {
  content: "";
  position: absolute;
  inset: -12% -8%;
  pointer-events: none;
}

.project__visual::before {
  background: radial-gradient(58% 52% at 50% 46%, #ffffff0f, transparent 72%);
}

.project__visual::after {
  background: radial-gradient(
    46% 40% at 50% 54%,
    color-mix(in srgb, var(--accent) 16%, transparent),
    transparent 74%
  );
  opacity: var(--s4, 0);
}

/* ── 材質的亮邊 ───────────────────────────────────────────
   實體材質的上緣會接到光。一條 5% 白的內陰影就夠了，
   它是「這塊東西有厚度」跟「這是一塊色塊」的差別。 */
.bento__cell--full,
.project-mini__art {
  box-shadow: inset 0 1px 0 #ffffff14, inset 0 0 0 1px #ffffff0a;
}

/* ── Hero 背後的一團光 ───────────────────────────────────
   整頁第一眼不該是全黑。很淡，但會讓標題像是站在某個空間裡。 */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10% -20% 20%;
  pointer-events: none;
  background:
    radial-gradient(46% 44% at 26% 42%, #ffffff12, transparent 70%),
    radial-gradient(34% 34% at 64% 56%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%);
}

/* ── Bento 中心的一團光 ──────────────────────────────────
   中心是不動的錨點，讓它自己發一點光，周圍飛進來的格子才有東西可以圍。 */
.bento__core { position: relative; }
.bento__core::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, #ffffff0a, transparent 70%);
}

@media (prefers-contrast: more) {
  /* 高對比偏好：光暈只會降低對比，全部關掉 */
  .project__visual::before,
  .project__visual::after,
  .hero::before,
  .bento__core::before { display: none; }
}