/* =====================================================================
 * scroll-interactions.css — 高级滚动交互样式
 * 
 * 配合 scroll-interactions.js 使用
 * 提供方向感知、速度响应、视差效果的视觉反馈
 * ===================================================================== */

/* ===== 1. 滚动进度条 ===== */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg,
    var(--color-primary, #7BA7A6),
    var(--monet-iris, #9B7CB6),
    var(--color-primary, #7BA7A6)
  );
  background-size: 200% 100%;
  z-index: 10000;
  transition: opacity 0.3s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
  opacity: 0;
  pointer-events: none;
  animation: progress-shimmer 2s linear infinite;
}

@keyframes progress-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.scroll-progress-bar::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: progress-glow 1.5s ease-in-out infinite;
}

@keyframes progress-glow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* ===== 2. 导航栏滚动状态 ===== */
.nav, .yardon-nav {
  transition: transform 0.3s var(--ease-out-quart),
              background-color 0.3s var(--ease-out-quart),
              box-shadow 0.3s var(--ease-out-quart);
}

.nav.hidden, .yardon-nav.hidden {
  transform: translateY(-100%);
}

.nav.scrolled, .yardon-nav.scrolled {
  background: var(--glass-nav-bg, rgba(19, 22, 39, 0.9));
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ===== 3. 分区揭示动画 ===== */

/* 从下方进入 */
.reveal-from-bottom {
  animation: revealFromBottom 0.6s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)) forwards;
}

@keyframes revealFromBottom {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 从上方进入 */
.reveal-from-top {
  animation: revealFromTop 0.6s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)) forwards;
}

@keyframes revealFromTop {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 揭示前状态 */
[data-reveal], .reveal-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out-quart),
              transform 0.6s var(--ease-out-quart);
}

[data-reveal].revealed, .reveal-section.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 子元素错开 */
[data-reveal-child] {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s var(--ease-out-quart),
              transform 0.5s var(--ease-out-quart);
}

[data-reveal-child].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 4. 滚动方向指示器 ===== */
.scroll-direction-indicator {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--color-bg-card, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 20px;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  color: var(--color-text-muted, #C5C9D2);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s var(--ease-out-quart);
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.scroll-direction-indicator.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.direction-arrow {
  font-size: 1rem;
  transition: transform 0.2s var(--ease-out-quart);
}

.scroll-down .direction-arrow {
  transform: translateY(2px);
}

.scroll-up .direction-arrow {
  transform: translateY(-2px);
}

/* ===== 5. 卡片滚动响应 ===== */

/* 滚动时卡片微动 */
.series-card,
.project-series-item,
.oss-card,
.lp-card,
.blog-card,
.card-premium {
  transition: transform 0.4s var(--ease-out-quart),
              box-shadow 0.4s var(--ease-out-quart),
              border-color 0.4s var(--ease-out-quart);
}

/* 向下滚动时卡片微微下移 */
.scroll-down .card-visible {
  transform: translateY(2px);
}

/* 向上滚动时卡片微微上移 */
.scroll-up .card-visible {
  transform: translateY(-2px);
}

/* 悬停时覆盖滚动效果 */
.card-hovered {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-card-hover, 0 20px 50px -10px rgba(0, 0, 0, 0.5)) !important;
}

/* ===== 6. Hero 区域视差增强 ===== */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-visual {
  will-change: transform;
  transition: transform 0.1s linear;
}

.hero-decor {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Hero 背景渐变跟随滚动 */
.hero-section::before {
  transition: opacity 0.3s var(--ease-out-quart);
}

.scroll-down .hero-section::before {
  opacity: 0.8;
}

.scroll-up .hero-section::before {
  opacity: 1;
}

/* ===== 7. 方向变化效果 ===== */
.direction-change {
  animation: directionPulse 0.3s var(--ease-out-quart);
}

@keyframes directionPulse {
  0% { opacity: 1; }
  50% { opacity: 0.95; }
  100% { opacity: 1; }
}

/* ===== 8. 滚动速度响应 ===== */

/* 慢速滚动 - 平滑过渡 */
.scroll-slow * {
  transition-duration: 0.4s !important;
}

/* 中速滚动 - 正常过渡 */
.scroll-medium * {
  transition-duration: 0.25s !important;
}

/* 快速滚动 - 快速响应 */
.scroll-fast * {
  transition-duration: 0.15s !important;
}

/* ===== 9. 装饰元素视差 ===== */
.orb-decoration {
  will-change: transform;
  transition: transform 0.15s linear;
}

[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ===== 10. 滚动状态指示 ===== */

/* 滚动中 - 页面边缘发光 */
.is-scrolling::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s;
}

.scroll-down.is-scrolling::before {
  background: linear-gradient(to bottom,
    transparent 95%,
    rgba(123, 167, 166, 0.05) 100%
  );
  opacity: 1;
}

.scroll-up.is-scrolling::before {
  background: linear-gradient(to top,
    transparent 95%,
    rgba(123, 167, 166, 0.05) 100%
  );
  opacity: 1;
}

/* ===== 11. 平滑锚点滚动 ===== */
html {
  scroll-behavior: smooth;
}

/* ===== 12. 减少动效模式 ===== */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress-bar,
  .scroll-direction-indicator {
    display: none !important;
  }
  
  .nav, .yardon-nav {
    transition: none !important;
  }
  
  [data-reveal], .reveal-section,
  [data-reveal-child] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  .reveal-from-bottom,
  .reveal-from-top {
    animation: none !important;
  }
  
  .series-card,
  .project-series-item,
  .oss-card,
  .lp-card,
  .blog-card,
  .card-premium {
    transition: none !important;
  }
  
  .hero-visual,
  .hero-decor,
  .orb-decoration,
  [data-parallax] {
    transition: none !important;
    transform: none !important;
  }
  
  .is-scrolling::before {
    display: none !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* ===== 13. 响应式 ===== */
@media (max-width: 768px) {
  .scroll-direction-indicator {
    display: none;
  }
  
  .scroll-progress-bar {
    height: 2px;
  }
}