/* ==========================================================================
   CCWDC 2026 特别活动 — 页面专属样式
   复用 ../styles.css 的令牌与组件，这里只放这一页独有的东西。
   设计依据同主站（apple-design）：§12 材质 / §14 无障碍降级 / §16 克制
   ========================================================================== */

/* ---------- 1. 舞台 ---------- */
.event {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  min-height: 100svh;                 /* 移动端按可视高度算，避免地址栏吞掉一截 */
  padding: calc(var(--nav-h) + 88px) 0 104px;
  background: var(--carbon);
  color: #f5f5f7;
  overflow: hidden;
}

/* 装饰层：居中、等比、不吃点击 */
.event__bg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(150vmin, 1040px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.event__bg svg { width: 100%; height: 100%; display: block; }

/* 缓慢自转的虚线弧 —— 唯一的活动元素，且极慢（90s 一圈）。
   注意不是"振荡"，是连续单向转动，不会引起前庭不适。 */
.event__spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: ccwdc-spin 90s linear infinite;
}
@keyframes ccwdc-spin { to { transform: rotate(360deg); } }

/* 环上的一枚光点，做很轻的呼吸 */
.event__node {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: ccwdc-pulse 5s ease-in-out infinite;
}
@keyframes ccwdc-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ---------- 2. 内容 ---------- */
.event__inner { position: relative; z-index: 1; }

.event__eyebrow { color: var(--ink-3); }

/* 大标题：白色→浅灰的纵向渐变，Apple 活动页那种质感。
   下面用 @supports 兜底，万一不支持 background-clip: text 也不会变透明。 */
.event__title {
  margin-top: 16px;
  font-size: clamp(46px, 10.5vw, 128px);
  line-height: 1;
  letter-spacing: -.042em;   /* 字号越大字距越收紧（§15） */
  font-weight: 700;
  color: #f5f5f7;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .event__title {
    background: linear-gradient(180deg, #ffffff 0%, #dcdce0 52%, #8e8e93 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.event__lede {
  max-width: 34ch;
  margin: 26px auto 0;
  color: #a1a1a6;
}

.event__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 38px;
}

/* ---------- 3. 让页脚与深色舞台连成一片 ---------- */
.event ~ .footer {
  background: var(--carbon);
  border-top: .5px solid var(--hairline-d);
}

/* ---------- 4. 无障碍降级（§14） ---------- */
@media (prefers-reduced-motion: reduce) {
  .event__spin,
  .event__node { animation: none; }
  .event__node { opacity: .8; }
}

@media (prefers-contrast: more) {
  .event__eyebrow { color: #f5f5f7; }
  .event__lede { color: #f5f5f7; }
  .event__title,
  .event__title::selection { color: #ffffff; -webkit-text-fill-color: #ffffff; background: none; }
  .event ~ .footer { border-top-color: rgba(255, 255, 255, .6); }
}

/* ---------- 5. 响应式 ---------- */
@media (max-width: 900px) {
  .event { padding: calc(var(--nav-h) + 64px) 0 76px; }
  .event__bg { width: min(150vmin, 760px); }
}
@media (max-width: 734px) {
  .event__title { letter-spacing: -.03em; }
  .event__actions .btn { width: 100%; justify-content: center; }
}