/* graduations-accent.css — Graduations 页 per-page accent 注入 (节点 9, C14 升级版)
 *
 * 规则（per spec §2.4 + brief C6 + T1 minor M1 + T2 PR1 + C14 motion upgrade）:
 *   1) 唯一 accent 表面: .graduation-time (12 区中的 "8.timestamp" — mood 标签语义)
 *   2) 不重复声明 --accent-current (per T1 minor M1) — 直接 var(--accent-11) 引用
 *      实际 --accent-11: #B89A75 (mood beige — per brief guardrail)
 *      hover → var(--accent-1) #E0D1B6 (beige on forest contrast 9.8:1 ≥4.5 ✓)
 *   3) border-radius: 0 (C13) — card 不例外；form input 用 var(--shape-small)=4px OK (utility)
 *   4) transition 全用 var(--dur-micro) + var(--ease) — 无 cubic-bezier 字面量
 *   5) 无 @keyframes — 全 transition (C5/C11)
 *   6) 占整页表面 ≤5% (单 timestamp 标签 per card，12px 字号)
 *   7) C14 升级: card hover lift -4px (v1 用 -2px)；card stagger entrance via CSS var --i
 */

/* ===== timestamp (唯一 accent 表面) ===== */
.graduation-time {
  color: var(--accent-11);   /* mood beige #B89A75 — 柔和时间戳 */
  font: 500 12px/18px var(--font-utility);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-micro) var(--ease);
}
.graduation-time:hover { color: var(--accent-1); }   /* beige on-surface variant */

/* ===== graduation-card hover lift (升级 -2px → -4px per C14) =====
   stagger entrance via --i CSS var (production script sets it per card index)
   transition-delay = (--i) * 80ms — produces 0.08s offset between cards */
.graduation-card {
  transition:
    transform 0.6s var(--ease),
    opacity 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: transform, opacity;
}
.graduation-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger entrance default (before JS triggers) */
.graduation-card:not(.is-revealed) {
  opacity: 0;
  transform: translateY(24px);
}

/* hover lift — must override entrance transform when card already revealed */
.graduation-card.is-revealed:hover {
  transform: translateY(-4px);
  transition: transform var(--dur-micro) var(--ease);   /* short hover duration */
}

/* focus state for card accessibility */
.graduation-card:focus-within {
  outline: 2px solid var(--accent-1);
  outline-offset: 4px;
}

/* ===== delete button — small ghost utility (destructive) ===== */
.btn--ghost-sm {
  font: 500 11px/18px var(--font-utility);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease);
}
.btn--ghost-sm:hover { color: var(--accent-7); }   /* deep brown destructive affordance */
.btn--ghost-sm:focus { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.btn--ghost-sm:disabled {
  color: rgba(224, 209, 182, 0.3);
  cursor: not-allowed;
}

/* ===== compose counter over-limit state ===== */
.counter[data-over="true"] {
  color: var(--accent-7);
}

/* ===== reveal-word (text split entrance — 复用 home pattern) ===== */
.reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
  will-change: transform, opacity;
}
[data-reveal].is-revealed .reveal-word {
  opacity: 1;
  transform: translateY(0);
}
.reveal-word + .reveal-word { margin-left: 0.25em; }

/* ===== reduced motion 兼容 (C11 follow-up) ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}