/* =========================================================
   Announcement Shadow Soft Fix
   首頁公告區陰影柔化補丁
   用法：
   1. 放到 css/announcement-shadow-fix.css
   2. 在 index.html 的 motion-effects.css 後面加入：
      <link rel="stylesheet" href="css/announcement-shadow-fix.css">
   ========================================================= */

.announcement-section {
  position: relative;
  isolation: isolate;
}

/* 讓水平公告區保留滑動，但減少「整排黑影」的感覺 */
.announcement-strip {
  gap: 20px;
  padding: 10px 4px 30px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

/* 單張公告卡自己的柔光，不讓三張卡的陰影疊成一整條硬色塊 */
.announcement-card {
  position: relative;
  isolation: isolate;
  border-color: rgba(255, 255, 255, 0.13);
  background:
    radial-gradient(circle at 18% 0%, rgba(242, 167, 198, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.052));
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22),
    0 2px 10px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

/* 內層淡淡的夢境柔光，取代很重的外陰影 */
.announcement-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 0%, rgba(232, 201, 129, 0.12), transparent 42%),
    radial-gradient(circle at 90% 90%, rgba(242, 167, 198, 0.10), transparent 46%);
  opacity: 0.85;
  pointer-events: none;
}

.announcement-card:hover {
  transform: translateY(-3px);
  border-color: rgba(232, 201, 129, 0.32);
  background:
    radial-gradient(circle at 18% 0%, rgba(242, 167, 198, 0.15), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.092), rgba(255, 255, 255, 0.060));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.24),
    0 4px 14px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.announcement-card.pinned {
  border-color: rgba(232, 201, 129, 0.36);
  background:
    radial-gradient(circle at 18% 0%, rgba(232, 201, 129, 0.13), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.088), rgba(255, 255, 255, 0.055));
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(232, 201, 129, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 避免 loading / empty 卡片也吃到太重陰影 */
.announcement-card.announcement-loading,
.announcement-card.announcement-empty {
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 手機版保留柔和感，避免卡片太貼邊造成陰影被切 */
@media (max-width: 760px) {
  .announcement-strip {
    padding-inline: 2px;
    padding-bottom: 24px;
  }

  .announcement-card {
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}