@charset "UTF-8";
/* 奇遇手记 · 动效系统
   参考 Material 3 Motion（缓动曲线、时长分级、进入减速 / 离开加速、水波纹按压反馈）
   和 Apple HIG（按下即时缩小回弹、弹簧曲线、动画跟随手势、尊重“减弱动态效果”）。
   全部动效在 prefers-reduced-motion: reduce 时关闭或换成淡入。 */

:root {
  /* Material 3 easing */
  --m3-standard: cubic-bezier(.2, 0, 0, 1);
  --m3-emphasized-decel: cubic-bezier(.05, .7, .1, 1);   /* things arriving */
  --m3-emphasized-accel: cubic-bezier(.3, 0, .8, .15);   /* things leaving */
  /* Apple-style spring (critically under-damped, settles in ~0.5 s); browsers without linear() fall back to a soft overshoot */
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --spring-soft: cubic-bezier(.22, 1.18, .36, 1);
  /* Duration scale */
  --d-press: 90ms;
  --d-short: 160ms;
  --d-medium: 320ms;
  --d-long: 520ms;
  --d-xl: 800ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121 24%, 1.149 26.5%, 1.159, 1.158 30.4%, 1.123 34.1%, 1.017 42.4%, .997 45.1%, .98 48.3%, .977 52.6%, .995 63.4%, 1.001 76.3%, 1);
    --spring-soft: linear(0, .023 1.3%, .093 2.8%, .405 8.4%, .64 13.3%, .807 18.4%, .918 23.6%, .983 29.2%, 1.018 35.4%, 1.031 42.4%, 1.026 51%, 1.008 64.6%, 1);
  }
}

/* ===== 1. 按压反馈：按下立刻缩小（HIG），松开弹回；带水波纹（Material）===== */
:where(.manager-btn, .auth-submit, .masthead-link, .account-chip, .pager a, .read-toggle, .owner-link, .tag-cloud a, .club-more,
  .nav-row nav a, .admin-tabs button, .post-filters button, .mode-switch button, .visibility-pick label, .password-toggle,
  .author-chip, .entry-tags a, .month-link, .side-recent a, .side-authors a, .archive-list li, .manager-nav nav a, .club-notices li > button) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition-property: transform, translate, background-color, color, border-color, box-shadow, opacity;
  transition-duration: var(--d-short);
  transition-timing-function: var(--m3-standard);
  -webkit-user-select: none;
  user-select: none;
}
:where(.manager-btn, .auth-submit, .masthead-link, .pager a, .read-toggle, .owner-link, .tag-cloud a, .club-more, .password-toggle, .admin-tabs button, .account-chip):active:not(:disabled) {
  transform: scale(.96);
  transition-duration: var(--d-press);
}
:where(.nav-row nav a, .post-filters button, .mode-switch button, .author-chip, .entry-tags a, .month-link, .side-recent a, .side-authors a, .manager-nav nav a, .visibility-pick label):active {
  transform: scale(.97);
  transition-duration: var(--d-press);
}
.archive-list li:active, .club-notices li > button:active { transform: scale(.99); transition-duration: var(--d-press); }
.ripple {
  position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  width: var(--r); height: var(--r); left: var(--x); top: var(--y); margin: calc(var(--r) / -2) 0 0 calc(var(--r) / -2);
  background: currentColor; opacity: .14; transform: scale(0);
  animation: ripple-grow var(--d-long) var(--m3-emphasized-decel) forwards;
}
.ripple.out { animation: ripple-grow var(--d-long) var(--m3-emphasized-decel) forwards, ripple-fade var(--d-medium) var(--m3-standard) forwards; }
@keyframes ripple-grow { to { transform: scale(1); } }
@keyframes ripple-fade { to { opacity: 0; } }

/* Cards press in a little on touch, lift on hover (pointer devices) */
@media (hover: hover) and (pointer: fine) {
  .club-card { transition: transform var(--d-medium) var(--spring-soft), box-shadow var(--d-medium) var(--m3-standard), border-color var(--d-medium); }
  .club-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--rule-strong); }
  .avatar { transition: transform var(--d-medium) var(--spring); }
  .author-chip:hover .avatar, .account-chip:hover .avatar, .side-authors a:hover .avatar { transform: scale(1.12) rotate(-6deg); }
}
@media (hover: none), (pointer: coarse) {
  .diary-entry:active, .club-card:active { transform: scale(.985); transition: transform var(--d-press) var(--m3-standard); }
}

/* ===== 2. 主导航：滑动指示块（Apple 分段控件 / Material 选项卡）===== */
.nav-row nav { position: relative; isolation: isolate; }
.nav-row nav.has-indicator a[aria-current="page"] { background: transparent; box-shadow: none; }
.nav-indicator {
  position: absolute; z-index: -1; top: 4px; left: 0; height: calc(100% - 8px); width: var(--w, 0);
  border-radius: 999px; background: var(--paper-raised); box-shadow: var(--shadow-sm);
  transform: translateX(var(--x, 0)); opacity: 0;
  transition: transform var(--d-long) var(--spring), width var(--d-long) var(--spring), opacity var(--d-short);
}
.nav-indicator.ready { opacity: 1; }
.nav-indicator.instant { transition: none; }

/* ===== 3. 大动画：首次打开时的开场 ===== */
.intro .site-title .ch {
  display: inline-block; opacity: 0; transform: translateY(.6em) rotate(6deg); filter: blur(4px);
  animation: char-in var(--d-xl) var(--spring) forwards; animation-delay: calc(80ms + var(--i) * 70ms);
}
.intro .site-title .title-dot { animation: dot-drop var(--d-xl) var(--spring) both; animation-delay: calc(140ms + var(--n, 4) * 70ms); }
.intro .header-note { animation: pop-in var(--d-long) var(--spring) both; animation-delay: 560ms; }
.intro .site-description { animation: rise-in var(--d-long) var(--m3-emphasized-decel) both; animation-delay: 640ms; }
.intro .nav-row { animation: rise-in var(--d-long) var(--m3-emphasized-decel) both; animation-delay: 720ms; }
.intro .masthead-account { animation: fade-in var(--d-long) var(--m3-standard) both; animation-delay: 800ms; }
.intro .sidebar { animation: slide-in-side var(--d-xl) var(--m3-emphasized-decel) both; animation-delay: 760ms; }
.site-header { animation: none; }
@keyframes char-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes dot-drop { 0% { opacity: 0; transform: translateY(-1.2em) scale(.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in-side { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }

/* 页面切换（不支持 View Transitions 的浏览器）：新页面从下方减速浮入 */
@supports not (view-transition-name: none) { .page-enter { animation: page-in var(--d-long) var(--m3-emphasized-decel) both; } }
@keyframes page-in { from { opacity: 0; transform: translateY(22px) scale(.992); } to { opacity: 1; transform: none; } }
/* View Transitions（共享元素变形、方向切换）见文件末尾的第 8 节 */

/* 日记卡片：滚动到才浮现（标题从左到右“写出来”，段落依次浮起）；首屏的卡片在页面打开时错开入场 */
.motion .reveal { transition: opacity var(--d-xl) var(--m3-emphasized-decel), transform var(--d-xl) var(--spring-soft), box-shadow var(--d-medium) var(--m3-standard), border-color var(--d-medium); }
.motion .reveal.pending { opacity: 0; transform: translateY(48px) scale(.97); }
.motion .reveal .entry-header h2 { transition: clip-path 900ms var(--m3-emphasized-decel) 120ms; }
.motion .reveal.pending .entry-header h2 { clip-path: inset(0 100% 0 0); }
.motion .reveal .entry-prose > * { transition: opacity var(--d-long) var(--m3-standard), transform var(--d-long) var(--m3-emphasized-decel); }
.motion .reveal .entry-prose > :nth-child(1) { transition-delay: 200ms; }
.motion .reveal .entry-prose > :nth-child(2) { transition-delay: 280ms; }
.motion .reveal .entry-prose > :nth-child(3) { transition-delay: 360ms; }
.motion .reveal .entry-prose > :nth-child(n+4) { transition-delay: 440ms; }
.motion .reveal.pending .entry-prose > * { opacity: 0; transform: translateY(14px); }
.first-load .reveal { animation: card-in 1s var(--spring-soft) both; animation-delay: calc(900ms + var(--stagger, 0) * 110ms); }
.first-load .reveal .entry-header h2 { animation: title-wipe 1s var(--m3-emphasized-decel) both; animation-delay: calc(1050ms + var(--stagger, 0) * 110ms); }
.first-load .reveal .entry-prose > * { animation: rise-in var(--d-long) var(--m3-emphasized-decel) both; animation-delay: calc(1150ms + var(--stagger, 0) * 110ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(56px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes title-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* 阅读进度条：带光晕的渐变 */
.read-progress span { box-shadow: 0 0 10px color-mix(in srgb, var(--clay) 60%, transparent); }

/* 侧栏的小本子：随滚动轻微视差（支持滚动驱动动画的浏览器）*/
@supports (animation-timeline: scroll()) {
  .notebook-sketch svg { animation: float 6s ease-in-out infinite, sketch-parallax linear both; animation-timeline: auto, scroll(root); }
}
@keyframes sketch-parallax { to { translate: 0 60px; rotate: 8deg; } }

/* ===== 4. 展开 / 收起：高度平滑过渡（grid 0fr → 1fr）===== */
.collapse { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--d-long) var(--m3-emphasized-decel), opacity var(--d-medium) var(--m3-standard); }
.collapse > div { min-height: 0; overflow: hidden; }
.collapse[data-open="true"] { grid-template-rows: 1fr; opacity: 1; }
.collapse[data-open="false"] { transition-timing-function: var(--m3-emphasized-accel), var(--m3-standard); transition-duration: var(--d-medium), var(--d-short); }
.entry-prose > .entry-rest.collapse { margin-top: 0; }
.entry-rest.collapse > div > * + * { margin-top: 1.05em; }
.entry-rest.collapse[data-open="true"] > div { padding-top: 1.05em; }
.read-toggle span { transition: transform var(--d-medium) var(--spring); }
.read-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.read-toggle[aria-expanded="true"]:hover span { transform: rotate(180deg) translateY(2px); }

/* ===== 5. 加载骨架屏：微光扫过（Material skeleton）===== */
.skeleton { display: grid; gap: 28px; }
.skeleton-card { padding: 32px 36px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-raised); display: grid; gap: 14px; }
.skeleton-line { height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--paper-sunk) 0%, color-mix(in srgb, var(--paper-sunk) 40%, var(--paper-raised)) 50%, var(--paper-sunk) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton-line.title { height: 26px; width: 60%; }
.skeleton-line.short { width: 40%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ===== 6. 社团近况 ===== */
.first-load .club-card { animation: club-in var(--d-xl) var(--spring-soft) both; animation-delay: calc(820ms + var(--i, 0) * 110ms); }
@keyframes club-in { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
.club-spark { animation: spark-spin 8s linear infinite; }
@keyframes spark-spin { to { transform: rotate(360deg); } }
.club-countdown { animation: pop-in var(--d-long) var(--spring) both; }
.club-deco { animation: coin-wobble 5s ease-in-out infinite; }
@keyframes coin-wobble { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-5px); } }
.notice-badge { animation: badge-pulse 2.4s var(--m3-standard) infinite; }
@keyframes badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); } 60% { box-shadow: 0 0 0 7px transparent; } }
.notice-chevron { transition: transform var(--d-medium) var(--spring); }
.club-notices li.open .notice-chevron { transform: rotate(225deg) translate(-2px, -2px); }

/* ===== 7. 其他小动效 ===== */
.manager-notice, .manager-error, .entry-banner { animation: toast-in var(--d-long) var(--spring) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
.status-tag, .entry-category, .entry-visibility { transition: transform var(--d-medium) var(--spring); }
.diary-entry:hover .entry-category { transform: translateY(-1px) scale(1.04); }
.owner-link { animation: pop .7s .9s var(--spring) both; }
.journal-end span { display: inline-block; animation: dots 2.4s var(--m3-standard) infinite; }
@keyframes dots { 0%, 100% { letter-spacing: .5em; opacity: .7; } 50% { letter-spacing: .8em; opacity: 1; } }
input, textarea, select { transition: border-color var(--d-short) var(--m3-standard), box-shadow var(--d-medium) var(--m3-standard), background-color var(--d-short); }

/* ===== 减弱动态效果 ===== */
@media (prefers-reduced-motion: reduce) {
  .intro .site-title .ch, .intro .site-title .title-dot, .intro .header-note, .intro .site-description, .intro .nav-row,
  .intro .masthead-account, .intro .sidebar, .club-card, .page-enter, .owner-link, .first-load .reveal, .first-load .reveal .entry-header h2, .first-load .reveal .entry-prose > *, .ambient span { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .ripple, .club-spark, .club-deco, .notice-badge, .journal-end span, .notebook-sketch svg { animation: none !important; }
  .collapse, .nav-indicator, .read-toggle span, .notice-chevron { transition: none !important; }
  :where(.manager-btn, .auth-submit, .pager a, .read-toggle, .diary-entry, .club-card):active { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
@media print {
  .collapse { grid-template-rows: 1fr !important; opacity: 1 !important; }
  .club-board { display: none; }
}