/*
# scroll-driven.css
# Written by: 广州羲驭科技有限公司
# Description: Scroll-driven animations for Vista Geometric Glass.
# Copyright: © 2024-2025 广州羲驭科技有限公司. All rights reserved. | 粤ICP备2025458335号
*/

/* ===== Scroll-Driven Animations 系统 ===== */

/* ===== 滚动进度条 ===== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--vista-glass-teal) 0%,
    var(--vista-glass-blue) 50%,
    var(--vista-accent-green) 100%
  );
  width: 0%;
  z-index: 9999;
  will-change: width;
  animation: scroll-progress linear both;
  animation-timeline: scroll(root);
}

@keyframes scroll-progress {
  to {
    width: 100%;
  }
}

/* 细条进度条 */
.scroll-progress-thin {
  height: 2px;
  background: var(--vista-glass-teal);
}

.scroll-progress-thin::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100%;
  background: inherit;
  filter: blur(10px);
  opacity: 0.5;
}

/* 渐隐式进度条 */
.scroll-progress-fade {
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.scrolling .scroll-progress-fade {
  opacity: 1;
}

/* ===== 滚动触发的元素揭示动画 ===== */

/* 基础滚动揭示 */
.scroll-reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 滚动揭示 - 左侧 */
.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-60px) scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-reveal-left.revealed {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* 滚动揭示 - 右侧 */
.scroll-reveal-right {
  opacity: 0;
  transform: translateX(60px) scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-reveal-right.revealed {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* 滚动揭示 - 缩放 */
.scroll-reveal-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* 滚动揭示 - 旋转 */
.scroll-reveal-rotate {
  opacity: 0;
  transform: rotate(-10deg) scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-reveal-rotate.revealed {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* ===== 视差效果 ===== */

/* 基础视差容器 */
.parallax-container {
  perspective: 1000px;
  overflow-x: hidden;
}

.parallax-layer {
  transform-style: preserve-3d;
  will-change: transform;
}

/* 视差层级 - 背景移动慢 */
.parallax-bg {
  transform: translateZ(-2px) scale(3);
  z-index: -10;
}

/* 视差层级 - 中景 */
.parallax-mid {
  transform: translateZ(-1px) scale(2);
  z-index: -5;
}

/* 视差层级 - 前景 */
.parallax-front {
  transform: translateZ(0);
}

/* 视差遮罩效果 */
.parallax-mask {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.1s ease;
}

/* ===== 滚动时的固定效果 ===== */

/* 滚动时固定在顶部的元素 */
.scroll-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* 滚动时淡入淡出的导航栏 */
.nav-scroll-effect {
  transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

.nav-scroll-effect.scrolled {
  background: rgba(13, 43, 80, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* ===== 滚动触发的进度指示器 ===== */

/* 圆形进度指示器 */
.scroll-circle-progress {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  z-index: 100;
}

.scroll-circle-progress circle {
  fill: none;
  stroke-width: 3;
  transform: rotate(-90deg);
  transform-origin: center;
}

.scroll-circle-progress .bg {
  stroke: var(--glass-layer-2);
}

.scroll-circle-progress .progress {
  stroke: var(--vista-glass-teal);
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  stroke-linecap: round;
  animation: circle-progress linear both;
  animation-timeline: scroll(root);
  animation-range: 0% 100%;
}

@keyframes circle-progress {
  to {
    stroke-dashoffset: 0;
  }
}

/* ===== 元素跟随滚动位置变化 ===== */

/* 滚动时旋转的元素 */
.scroll-rotate {
  animation: scroll-rotate linear both;
  animation-timeline: scroll(root);
  animation-range: 0% 100%;
}

@keyframes scroll-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 滚动时缩放的元素 */
.scroll-scale {
  animation: scroll-scale linear both;
  animation-timeline: scroll(root);
  animation-range: 0% 100%;
}

@keyframes scroll-scale {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  to {
    transform: scale(1);
  }
}

/* 滚动时改变透明度的元素 */
.scroll-fade {
  animation: scroll-fade linear both;
  animation-timeline: scroll(root);
  animation-range: 0% 100%;
}

@keyframes scroll-fade {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

/* ===== 视差卡片效果 ===== */

/* 3D 翻转卡片 */
.parallax-card {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.parallax-card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
}

.parallax-card:hover .parallax-card-inner {
  transform: rotateY(10deg) rotateX(5deg);
}

/* 滚动视差遮罩 */
.scroll-mask-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-mask-reveal.revealed {
  clip-path: inset(0 0 0 0);
}

/* ===== 滚动触发的字间距动画 ===== */
.scroll-text-spacing {
  letter-spacing: 0;
  transition: letter-spacing 0.8s ease;
}

.scroll-text-spacing.revealed {
  letter-spacing: 0.02em;
}

/* ===== 滚动触发的下划线动画 ===== */
.scroll-underline {
  position: relative;
}

.scroll-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--vista-glass-teal), var(--vista-glass-blue));
  transition: width 0.6s ease;
}

.scroll-underline.revealed::after {
  width: 100%;
}

/* ===== 滚动触发的计数动画 ===== */
.scroll-count {
  animation: scroll-count linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

@keyframes scroll-count {
  from {
    --count: 0;
  }
  to {
    --count: var(--target);
  }
}

/* ===== CSS 原生 Scroll-Driven Animations (Chrome 115+) ===== */

/* 滚动进度条 - 原生实现 */
.scroll-progress-native {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--vista-glass-teal), var(--vista-glass-blue));
  width: 0%;
  z-index: 9999;
  animation: progress-native linear both;
  animation-timeline: scroll(root);
}

@keyframes progress-native {
  to {
    width: 100%;
  }
}

/* 原生滚动揭示 - view() */
.scroll-reveal-native {
  animation: reveal-native linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
}

@keyframes reveal-native {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 原生视差效果 */
.scroll-parallax-native {
  animation: parallax-native linear both;
  animation-timeline: scroll(root);
  animation-range: 0% 100%;
}

@keyframes parallax-native {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100px);
  }
}

/* ===== 进度条检测 ===== */
.progress-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-indicator::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid var(--glass-layer-2);
  border-radius: 50%;
}

.progress-indicator::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid transparent;
  border-top-color: var(--vista-glass-teal);
  border-radius: 50%;
  animation: indicator-spin 1s linear infinite;
}

@keyframes indicator-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== 滚动触发的背景颜色变化 ===== */
.scroll-bg-shift {
  transition: background 0.5s ease;
}

.scroll-bg-shift.dark-scroll {
  background: rgba(0, 0, 0, 0.8);
}

/* ===== 响应式滚动动画 ===== */
@media (max-width: 768px) {
  .scroll-progress {
    height: 2px;
  }

  .scroll-circle-progress {
    width: 40px;
    height: 40px;
    right: 10px;
  }

  .scroll-circle-progress .progress {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
  }

  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right {
    transform: translateY(40px) scale(0.98);
  }
}

/* ===== 减少动画偏好设置 ===== */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-scale,
  .scroll-reveal-rotate {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-progress-native,
  .scroll-reveal-native,
  .scroll-parallax-native {
    animation: none;
  }

  .scroll-underline::after {
    width: 100%;
  }
}

/* ===== 渐进增强 - 不支持滚动驱动的浏览器 ===== */
@supports not (animation-timeline: view()) {
  .scroll-reveal-native {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .scroll-reveal-native.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}