/* ============================================================
   PM 覺醒 — 敘事重構層
   全螢幕 scroll-snap 分段 · 軟引導 · 浮動 CTA · 導覽高亮
   ============================================================ */

/* anchor 跳段時補償 sticky header（72px）高度 */
html { scroll-padding-top: 80px; }

/* ---------- Hero 向下軟引導 ---------- */
.hero-hint { margin-top: 34px; }
.scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 0;
  transition: color .2s ease;
}
.scroll-hint:hover { color: var(--accent-cyan); }
.scroll-hint-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-glow);
  background: rgba(24, 216, 255, .07);
  color: var(--accent-cyan);
  animation: hintbob 1.8s ease-in-out infinite;
}
.scroll-hint-arrow svg { width: 16px; height: 16px; }
@keyframes hintbob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint-arrow { animation: none; }
}

/* ---------- 全程浮動 CTA ---------- */
.float-cta {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  font-family: var(--font-zh);
  background: linear-gradient(135deg, var(--accent-cyan), #5fc8ff 60%, var(--accent-blue));
  color: #04111c;
  box-shadow: 0 0 0 1px rgba(24,216,255,.4), 0 14px 34px rgba(24,216,255,.34);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.96);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
  pointer-events: none;
}
.float-cta svg { width: 18px; height: 18px; flex-shrink: 0; }
.float-cta.show {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.float-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(24,216,255,.6), 0 18px 44px rgba(24,216,255,.46);
}
@media (max-width: 560px) {
  .float-cta {
    left: 14px;
    right: 14px;
    bottom: 12px;
    justify-content: center;
    padding: 14px;
  }
}

/* ---------- 導覽列當前段高亮 ---------- */
.nav-links a.active { color: var(--text-primary); }
.nav-links a.active::after { right: 0; }

/* ---------- 桌機：全螢幕 scroll-snap 敘事 ---------- */
@media (min-width: 1080px) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y proximity; }

  .snap { scroll-snap-align: start; scroll-snap-stop: normal; }

  /* 敘事段吃滿一屏、內容垂直置中（內容超過一屏時自然增高、不裁切） */
  .hero.snap,
  section.snap {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* 長內容段不參與吸附（課程 5 張、技能樹、FAQ） */
  #courses,
  #skills,
  #faq { scroll-snap-align: none; }
}

/* ---------- reduced-motion：關閉吸附 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}

/* ---------- 手機：不吸附，改順暢分段捲動 ---------- */
@media (max-width: 1079px) {
  html { scroll-snap-type: none; }
}