/* ==========================================================================
   Deep Sea × Mantle — event page theme
   --------------------------------------------------------------------------
   掛在 event yaml 的 `themeCss` 上使用（後台「外觀主題」可上傳同格式檔案）。
   原理：/event/* 頁面所有顏色／材質都讀 .event-page 上的 --ev-* 變數
   （預設值以 :where() 權重 0 宣告），本檔用 `.event-page { … }` 覆寫變數
   即整頁換皮；另外加上幾層深海光影裝飾（god rays、上升氣泡、玻璃擬態）。
   Palette 取自 mantle.tools：navy #071127/#1A3062、teal #00B7C7、
   mint #6EFACD、ink #E8ECF8，字體 IBM Plex Sans / Mono。
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+TC:wght@500;700&family=Noto+Serif+TC:wght@600;700&display=swap');

.event-page {
  /* ---- 基本面 ---- */
  --ev-page-bg: #071127;
  --ev-ink: #E8ECF8;
  --ev-body: #B9C4E2;
  --ev-muted: #8B97B8;
  --ev-accent: #00B7C7;
  --ev-accent-dark: #0072A4;
  --ev-accent-2: #6EFACD;

  /* ---- 眉標（mono，像 mantle.tools 的 code 徽章）---- */
  --ev-eyebrow-color: #6EFACD;
  --ev-eyebrow-font: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ev-eyebrow-mark: '// ';

  /* ---- Hero：自海面透下來的光 ---- */
  --ev-hero-bg:
    radial-gradient(88% 70% at 76% -12%, rgba(110, 250, 205, 0.17) 0%, rgba(110, 250, 205, 0) 55%),
    radial-gradient(120% 90% at 8% 115%, rgba(0, 114, 164, 0.38) 0%, rgba(0, 114, 164, 0) 62%),
    linear-gradient(168deg, #143059 0%, #0B1F3F 46%, #071127 100%);
  --ev-title-gradient: linear-gradient(100deg, #FFFFFF 0%, #9BE8FF 42%, #6EFACD 100%);
  --ev-chip-bg: rgba(13, 32, 66, 0.55);
  --ev-chip-border: rgba(110, 250, 205, 0.28);
  --ev-chip-shadow: 0 4px 18px rgba(2, 10, 30, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ev-htag-border: rgba(110, 250, 205, 0.55);
  --ev-htag-ink: #6EFACD;
  --ev-htag-bg: rgba(0, 183, 199, 0.1);
  --ev-hero-card-border: rgba(110, 250, 205, 0.32);
  --ev-hero-card-shadow: 0 34px 80px rgba(1, 8, 24, 0.8), 0 0 44px rgba(0, 183, 199, 0.26);

  /* ---- 按鈕：teal→mint 漸層、深色字（同 mantle 的 Start building）---- */
  --ev-btn-bg: linear-gradient(115deg, #35E0C2 0%, #00C6D4 100%);
  --ev-btn-bg-hover: linear-gradient(115deg, #6EFACD 0%, #00D5E4 100%);
  --ev-btn-fg: #062D2A;

  /* ---- 提醒卡（玻璃擬態）---- */
  --ev-note-bg: linear-gradient(158deg, rgba(21, 43, 84, 0.92) 0%, rgba(11, 26, 56, 0.92) 100%);
  --ev-note-border: rgba(110, 250, 205, 0.22);
  --ev-note-ink: #C9D4EF;
  --ev-note-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  --ev-note-curl: 0 17px 18px rgba(0, 0, 0, 0.5);

  /* ---- 課程大綱表格：Noto Sans TC 黑體、放大、mint 編號 ---- */
  --ev-syl-font: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --ev-syl-size: 17.5px;
  --ev-syl-bg: rgba(13, 30, 61, 0.62);
  --ev-syl-border: rgba(110, 250, 205, 0.2);
  --ev-syl-ink: #EAF1FF;
  --ev-syl-num: #6EFACD;
  --ev-syl-note-ink: #8B97B8;

  /* ---- 結語金句：明體＋青綠→水藍→薰紫的獨角獸漸層，帶水光暈 ---- */
  --ev-quote-font: 'Noto Serif TC', 'Source Han Serif TC', 'Songti TC', 'PMingLiU', serif;
  --ev-quote-gradient: linear-gradient(100deg, #6EFACD 0%, #7FE9E6 32%, #9BD4FF 62%, #C4B5FD 100%);
  --ev-quote-glow: drop-shadow(0 0 24px rgba(110, 250, 205, 0.32));
  --ev-quote-rule: linear-gradient(90deg, transparent, #6EFACD, transparent);

  /* ---- 報名區：更深的海溝色帶＋玻璃卡片 ---- */
  --ev-band-bg:
    radial-gradient(110% 130% at 50% -20%, rgba(0, 183, 199, 0.2) 0%, rgba(0, 183, 199, 0) 55%),
    linear-gradient(180deg, #0A1C3A 0%, #06102A 100%);
  --ev-band-fg: #EAF1FF;
  --ev-band-fg-soft: rgba(200, 214, 243, 0.75);
  --ev-band-eyebrow: rgba(110, 250, 205, 0.75);
  --ev-card-bg: rgba(13, 30, 61, 0.78);
  --ev-card-radius: 22px;
  --ev-card-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(110, 250, 205, 0.16),
    0 0 50px -18px rgba(0, 183, 199, 0.35);
  --ev-card-ink: #EAF1FF;
  --ev-card-body: #AAB8DD;
  --ev-card-muted: #7D89AC;

  /* ---- 表單控件 ---- */
  --ev-label: #6EFACD;
  --ev-req: rgba(110, 250, 205, 0.6);
  --ev-hint: #7D89AC;
  --ev-input-ink: #EAF1FF;
  --ev-input-border: rgba(151, 158, 175, 0.35);
  --ev-input-focus: #6EFACD;
  --ev-input-placeholder: rgba(151, 158, 175, 0.55);
  --ev-pill-border: rgba(151, 158, 175, 0.28);
  --ev-pill-border-hover: rgba(110, 250, 205, 0.45);
  --ev-pill-ink: #B9C4E2;
  --ev-pill-radius: 12px;
  --ev-pill-checked-border: #4BE8C8;
  --ev-pill-checked-bg: rgba(0, 183, 199, 0.13);
  --ev-pill-checked-ink: #6EFACD;
  --ev-control-accent: #00B7C7;
  --ev-tip-ink: #6EFACD;
  --ev-tip-bg: rgba(0, 183, 199, 0.12);

  /* ---- 交通區（若日後補上地點也不會破圖）---- */
  --ev-panel-bg: rgba(13, 30, 61, 0.6);
  --ev-panel-border: rgba(151, 158, 175, 0.22);
  --ev-panel-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.6);
  --ev-ic-gradient: linear-gradient(135deg, #00B7C7, #0072A4);
  --ev-tag-bg: rgba(0, 183, 199, 0.16);
  --ev-tag-fg: #6EFACD;
  --ev-bullet: #00B7C7;
  --ev-table-head-bg: rgba(0, 183, 199, 0.12);
  --ev-table-head-fg: #6EFACD;
  --ev-table-border: rgba(151, 158, 175, 0.18);
  --ev-table-row-alt: rgba(255, 255, 255, 0.03);

  /* ---- 整頁字體與表單控件配色 ---- */
  font-family: 'IBM Plex Sans', ui-sans-serif, -apple-system, 'Segoe UI', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', Roboto, sans-serif;
  color-scheme: dark;
}

.event-page ::selection { background: rgba(0, 183, 199, 0.35); }

/* ==== 深海光影裝飾 ==================================================== */

/* 整頁上升的微小氣泡（fixed 疊層，不擋互動） */
.event-page {
  position: relative;
}
.event-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 22% 84%, rgba(191, 253, 235, 0.14) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 42%, rgba(191, 253, 235, 0.12) 0 2.5px, transparent 4px),
    radial-gradient(circle at 48% 63%, rgba(155, 232, 255, 0.1) 0 1.6px, transparent 3px);
  background-size: 340px 340px, 520px 520px, 760px 760px;
  animation: ev-bubbles 90s linear infinite;
  opacity: 0.75;
}
@keyframes ev-bubbles {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 -2040px, 0 -2080px, 0 -2280px; }
}

/* Hero 的 god rays：自水面斜射下來、緩慢搖曳的光束 */
.event-page .ev-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    72deg,
    transparent 0 90px,
    rgba(191, 253, 235, 0.05) 90px 128px,
    transparent 128px 240px,
    rgba(143, 233, 208, 0.035) 240px 275px,
    transparent 275px 420px
  );
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), transparent 78%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), transparent 78%);
  animation: ev-rays 16s ease-in-out infinite alternate;
}
@keyframes ev-rays {
  from { background-position: 0 0; }
  to { background-position: 120px 0; }
}

/* 玻璃擬態：卡片、chips、提醒卡 */
.event-page .ev-card,
.event-page .ev-note {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.event-page .ev-chip,
.event-page .ev-syl-item {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 金句：漸層極慢橫向流動，像水面折射的光 */
.event-page .ev-quote {
  background-size: 220% 100%;
  animation: ev-quote-flow 14s ease-in-out infinite alternate;
}
@keyframes ev-quote-flow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* 大綱卡 hover 時亮起水光 */
.event-page .ev-syl-item:hover {
  background: rgba(0, 183, 199, 0.13) !important;
  box-shadow: 0 12px 30px -14px rgba(0, 183, 199, 0.5);
}

/* 按鈕改成 mantle 的膠囊形＋水光暈 */
.event-page .ev-btn { border-radius: 999px !important; }
.event-page .ev-btn-primary,
.event-page .ev-submit {
  box-shadow: 0 10px 30px -8px rgba(0, 183, 199, 0.55);
}
.event-page .ev-btn-outline { border-color: rgba(110, 250, 205, 0.55) !important; color: #6EFACD !important; }
.event-page .ev-btn-outline:hover { background: rgba(0, 183, 199, 0.16) !important; color: #6EFACD !important; }

/* 眉標：mono 不加粗才像 code 註解 */
.event-page .ev-eyebrow,
.event-page .ev-eyebrow-center {
  font-weight: 500 !important;
  letter-spacing: 0.26em !important;
}

/* 標題用 IBM Plex Sans（勝過全站 display 字體 utility）。
   line-height 1.0 的漸層字（background-clip: text）會把最後一行的
   下伸部（g、y）裁掉——描繪區塊撐不到字墨的最低點；補一點行高與
   padding-bottom 讓「Coding 課程」的 g 完整露出。 */
.event-page .ev-title {
  font-family: 'IBM Plex Sans', ui-sans-serif, -apple-system, 'PingFang TC', 'Noto Sans TC', sans-serif;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  padding-bottom: 0.14em;
  word-break: keep-all; /* 手機上「課程」不拆行 */
}

/* 表單錯誤訊息在深色玻璃上改用半透明紅 */
.event-page .bg-red-50 {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #FCA5A5 !important;
}

/* 動畫敏感使用者：關掉光影動態 */
@media (prefers-reduced-motion: reduce) {
  .event-page::before,
  .event-page .ev-hero::after,
  .event-page .ev-quote {
    animation: none;
  }
}