/* =========================================================
   MOTION SYSTEM
   所有动画集中在此文件，便于统一调整速度和强度。
   ========================================================= */
@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-fast: 220ms;
  --motion-base: 420ms;
  --motion-slow: 900ms;
}

/* 1. 页面加载：进度线 + 柔和退场 */
.page-loader__line i {
  animation: loader-progress 900ms var(--ease-out-expo) 120ms both;
}

.page-loader {
  animation: loader-exit 700ms var(--ease-out-expo) 1.15s forwards;
}

.page-loader.is-hidden {
  animation: loader-exit 540ms var(--ease-out-expo) forwards;
}

@keyframes loader-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes loader-exit {
  0% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    visibility: visible;
  }
  99% {
    visibility: visible;
  }
  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
  }
}

/* 2. 首屏入场：标题逐行上浮、内容柔和显现 */
.hero__eyebrow,
.hero-intro,
.hero-cta,
.hero-notes {
  animation: hero-fade-up 950ms var(--ease-out-expo) both;
}

.hero__eyebrow {
  animation-delay: 180ms;
}

.hero-title__line > span {
  animation: hero-line-in 1150ms var(--ease-out-expo) both;
}

.hero-title__line:nth-child(1) > span {
  animation-delay: 280ms;
}

.hero-title__line:nth-child(2) > span {
  animation-delay: 400ms;
}

.hero-intro {
  animation-delay: 520ms;
}

.hero-cta {
  animation-delay: 620ms;
}

.hero-notes {
  animation-delay: 720ms;
}

.hero-visual {
  animation: hero-visual-in 1200ms var(--ease-out-expo) 430ms both;
}

.hero__foot {
  animation: hero-fade-up 900ms var(--ease-out-expo) 850ms both;
}

.site-header,
.site-ambient {
  animation: page-fade-in 900ms ease 480ms both;
}

@keyframes hero-line-in {
  from {
    opacity: 0;
    transform: translateY(110%) rotate(1.2deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-visual-in {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.97);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 3. 打字机光标 */
.type-cursor {
  animation: cursor-blink 950ms steps(1, end) infinite;
}

@keyframes cursor-blink {
  0%,
  48% {
    opacity: 1;
  }
  49%,
  100% {
    opacity: 0;
  }
}

/* 4. 滚动渐入：由 IntersectionObserver 添加 .is-visible */
.motion-ready [data-reveal]:not(.is-visible) {
  opacity: 0;
  translate: 0 28px;
}

[data-reveal] {
  transition:
    opacity 850ms var(--ease-out-soft) var(--reveal-delay, 0ms),
    translate 950ms var(--ease-out-expo) var(--reveal-delay, 0ms);
}

.motion-ready [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

/* 5. 视差：位置由 JS 写入 CSS 自定义属性 */
[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

.floating-note[data-parallax] {
  --base-rotation: 0deg;
}

.floating-note--quiet[data-parallax] {
  --base-rotation: 3deg;
  transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(var(--base-rotation));
}

.floating-note--work[data-parallax] {
  --base-rotation: -2deg;
  transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(var(--base-rotation));
}

.visual-orbit[data-parallax] {
  transform:
    translate(-50%, calc(-50% + var(--parallax-y, 0px)))
    rotate(var(--orbit-rotation, -18deg));
}

.visual-orbit--outer {
  --orbit-rotation: -18deg;
}

.visual-orbit--inner {
  --orbit-rotation: 33deg;
}

.visual-halo {
  transform: translate(-50%, calc(-50% + var(--parallax-y, 0px)));
}

.ambient-orb[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

/* 6. 导航状态过渡 */
.desktop-nav {
  transition:
    background var(--motion-base) ease,
    border-color var(--motion-base) ease,
    box-shadow var(--motion-base) ease;
}

.site-header.is-scrolled .desktop-nav {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(31, 41, 38, 0.06);
}

.site-header.is-scrolled .brand__mark {
  transform: scale(0.96);
}

.mobile-nav {
  transition:
    opacity 320ms ease,
    visibility 320ms ease,
    transform 420ms var(--ease-out-expo);
}

/* 7. 文章卡片：上浮、阴影增加、柔和渐变描边 */
.article-card {
  transform: translate3d(0, 0, 0);
  transition:
    transform 520ms var(--ease-out-expo),
    border-color 320ms ease,
    box-shadow 520ms var(--ease-out-expo),
    background 320ms ease;
}

.article-card:hover {
  border-color: rgba(83, 105, 94, 0.17);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(249, 248, 244, 0.52));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    var(--shadow-hover);
  transform: translate3d(0, -7px, 0);
}

.article-card:hover::before {
  opacity: 1;
  animation: border-flow 6s linear infinite;
}

.article-card .article-cover {
  transition: transform 900ms var(--ease-out-expo);
}

.article-card:hover .article-cover {
  transform: scale(1.012);
}

.article-card .cover-glass {
  transition: transform 700ms var(--ease-out-expo);
}

.article-card:hover .cover-glass {
  transform: rotate(2deg) translateY(-5px);
}

.article-card .paper-stack {
  transition: transform 800ms var(--ease-out-expo);
}

.article-card:hover .paper-stack {
  transform: translateY(-6px) rotate(2deg);
}

.article-card .row-sun {
  transition:
    transform 800ms var(--ease-out-expo),
    box-shadow 800ms ease;
}

.article-card:hover .row-sun {
  box-shadow:
    0 0 0 27px rgba(255, 255, 255, 0.05),
    0 0 0 52px rgba(255, 255, 255, 0.025);
  transform: scale(1.035);
}

@keyframes border-flow {
  to {
    --border-angle: 360deg;
  }
}

/* 8. 按钮流光扫过，只在 hover 时触发 */
.shine-button::after {
  position: absolute;
  inset: -2px;
  z-index: 1;
  content: "";
  background:
    linear-gradient(
      118deg,
      transparent 20%,
      rgba(255, 255, 255, 0.22) 42%,
      rgba(255, 255, 255, 0.05) 55%,
      transparent 74%
    );
  transform: translateX(-130%);
  transition: transform 760ms var(--ease-out-expo);
  pointer-events: none;
}

.shine-button:hover::after {
  transform: translateX(130%);
}

.button--ghost::after {
  background:
    linear-gradient(
      118deg,
      transparent 20%,
      rgba(164, 184, 173, 0.2) 42%,
      rgba(201, 192, 208, 0.16) 56%,
      transparent 74%
    );
}

/* 9. 侧栏 / 归档 / 页脚的轻量交互 */
.side-card {
  transition:
    transform 420ms var(--ease-out-expo),
    box-shadow 420ms ease,
    border-color 320ms ease;
}

.side-card:hover {
  border-color: rgba(83, 105, 94, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 20px 45px rgba(39, 49, 44, 0.08);
  transform: translateY(-3px);
}

.scroll-cue__track i {
  animation: scroll-dot 2.1s var(--ease-out-soft) infinite;
}

@keyframes scroll-dot {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  25% {
    opacity: 1;
  }
  70% {
    opacity: 0;
    transform: translate(-50%, 11px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 11px);
  }
}

.archive__link {
  transition: transform 380ms var(--ease-out-expo);
}

.archive__link:hover {
  transform: translateY(-3px);
}

/* 10. 尊重系统“减少动态效果”设置 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .page-loader {
    display: none;
  }

  .motion-ready [data-reveal]:not(.is-visible) {
    opacity: 1;
    translate: none;
  }

  [data-parallax] {
    --parallax-y: 0px !important;
  }

  .type-cursor {
    display: none;
  }
}