/* =========================================
   动画系统
   ========================================= */
/* 入场动画 */
.header {
  transform: translateY(-100%);
  opacity: 0;
  transition:
    transform var(--time-slow) var(--ease-in),
    opacity var(--time-slow) ease;
}

.hero-content {
  transform: translateY(40px);
  opacity: 0;
  transition:
    transform var(--time-slow) var(--ease-in),
    opacity var(--time-slow) ease;
}

.time-widget {
  transform: translateY(40px);
  opacity: 0;
  transition:
    transform var(--time-slow) var(--ease-in),
    opacity var(--time-slow) ease;
}

.icons-grid {
  transform: translateY(40px);
  opacity: 0;
  transition:
    transform var(--time-slow) var(--ease-in),
    opacity var(--time-slow) ease;
}

.settings-trigger {
  transform: translateX(40px);
  opacity: 0;
  transition:
    transform var(--time-slow) var(--ease-in),
    opacity var(--time-slow) ease;
}

/* 入场动画激活状态 */
.animate-in {
  transform: translate(0, 0) !important;
  opacity: 1 !important;
}

/* =========================================
   按钮交互效果
   ========================================= */
.grid-item {
  will-change: transform;
}

.grid-item:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.grid-item:active {
  transition: transform var(--time-fast) var(--ease-out);
}

/* =========================================
   悬停效果
   ========================================= */
.grid-item:hover .grid-icon {
  animation: iconHover 0.6s var(--ease-bounce);
}

@keyframes iconHover {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.25) rotate(10deg);
  }
  100% {
    transform: scale(1.15) rotate(5deg);
  }
}

/* =========================================
   背景光斑动画
   ========================================= */
.wallpaper-layer {
  --blob1-x: 48%;
  --blob1-y: 28%;
  --blob2-x: 52%;
  --blob2-y: 32%;
  --blob3-x: 45%;
  --blob3-y: 25%;
  --blob4-x: 55%;
  --blob4-y: 30%;
  --blob-scale: 0.7;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: visible;
  background: linear-gradient(135deg, #e8f4ff 0%, #d7e4ff 50%, #e8fffe 100%);
}

.wallpaper-layer::before,
.wallpaper-layer::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transition: none;
}

.wallpaper-layer::before {
  width: 65vmax;
  height: 65vmax;
  background: radial-gradient(circle, rgba(45, 136, 240, 0.45) 0%, rgba(45, 136, 240, 0.15) 45%, transparent 65%);
  top: var(--blob1-y);
  left: var(--blob1-x);
  transform: translate3d(-50%, -50%, 0) scale(var(--blob-scale));
}

.wallpaper-layer::after {
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(circle, rgba(171, 138, 255, 0.45) 0%, rgba(171, 138, 255, 0.15) 45%, transparent 65%);
  top: var(--blob2-y);
  left: var(--blob2-x);
  transform: translate3d(-50%, -50%, 0) scale(var(--blob-scale));
}

.wallpaper-layer .blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transition: none;
}

.wallpaper-layer .blob-1 {
  width: 40vmax;
  height: 40vmax;
  background: radial-gradient(circle, rgba(100, 194, 220, 0.4) 0%, rgba(100, 194, 220, 0.12) 40%, transparent 60%);
  top: var(--blob3-y);
  left: var(--blob3-x);
  transform: translate3d(-50%, -50%, 0) scale(var(--blob-scale));
}

.wallpaper-layer .blob-2 {
  width: 35vmax;
  height: 35vmax;
  background: radial-gradient(circle, rgba(140, 200, 255, 0.4) 0%, rgba(140, 200, 255, 0.12) 40%, transparent 60%);
  top: var(--blob4-y);
  left: var(--blob4-x);
  transform: translate3d(-50%, -50%, 0) scale(var(--blob-scale));
}

.wallpaper-layer .blob-3 {
  width: 30vmax;
  height: 30vmax;
  background: radial-gradient(circle, rgba(255, 195, 100, 0.3) 0%, rgba(255, 195, 100, 0.1) 40%, transparent 60%);
  top: 60%;
  left: 30%;
  transform: translate3d(-50%, -50%, 0) scale(var(--blob-scale));
  animation: blobMove3 20s infinite alternate ease-in-out;
}

.wallpaper-layer .blob-4 {
  width: 45vmax;
  height: 45vmax;
  background: radial-gradient(circle, rgba(100, 180, 255, 0.35) 0%, rgba(100, 180, 255, 0.1) 40%, transparent 60%);
  top: 40%;
  left: 70%;
  transform: translate3d(-50%, -50%, 0) scale(var(--blob-scale));
  animation: blobMove4 25s infinite alternate ease-in-out;
}

@keyframes blobMove3 {
  0% {
    transform: translate3d(calc(-50% + 10vw), calc(-50% + 5vh), 0) scale(var(--blob-scale));
  }
  100% {
    transform: translate3d(calc(-50% - 15vw), calc(-50% + 20vh), 0) scale(var(--blob-scale));
  }
}

@keyframes blobMove4 {
  0% {
    transform: translate3d(calc(-50% - 10vw), calc(-50% + 10vh), 0) scale(var(--blob-scale));
  }
  100% {
    transform: translate3d(calc(-50% + 5vw), calc(-50% - 15vh), 0) scale(var(--blob-scale));
  }
}

/* =========================================
   视差滚动效果
   ========================================= */
@keyframes parallaxMove {
  0% {
    transform: translate3d(-50%, -50%, 0);
  }
  50% {
    transform: translate3d(calc(-50% + 2vw), calc(-50% + 2vh), 0);
  }
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
}

.wallpaper-layer.parallax-active .blob-1 {
  animation: parallaxMove 20s infinite alternate ease-in-out;
}

.wallpaper-layer.parallax-active .blob-2 {
  animation: parallaxMove 25s infinite alternate ease-in-out;
}

.wallpaper-layer.parallax-active .blob-3 {
  animation: parallaxMove 18s infinite alternate ease-in-out;
}

.wallpaper-layer.parallax-active .blob-4 {
  animation: parallaxMove 22s infinite alternate ease-in-out;
}

/* =========================================
   深色主题背景
   ========================================= */
[data-theme="dark"] .wallpaper-layer {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

[data-theme="dark"] .wallpaper-layer::before {
  background: radial-gradient(circle, rgba(100, 172, 255, 0.35) 0%, rgba(100, 172, 255, 0.1) 45%, transparent 65%);
}

[data-theme="dark"] .wallpaper-layer::after {
  background: radial-gradient(circle, rgba(150, 100, 255, 0.35) 0%, rgba(150, 100, 255, 0.1) 45%, transparent 65%);
}

[data-theme="dark"] .wallpaper-layer .blob-1 {
  background: radial-gradient(circle, rgba(150, 200, 255, 0.3) 0%, rgba(150, 200, 255, 0.08) 40%, transparent 60%);
}

[data-theme="dark"] .wallpaper-layer .blob-2 {
  background: radial-gradient(circle, rgba(100, 150, 255, 0.3) 0%, rgba(100, 150, 255, 0.08) 40%, transparent 60%);
}

[data-theme="dark"] .wallpaper-layer .blob-3 {
  background: radial-gradient(circle, rgba(255, 200, 100, 0.25) 0%, rgba(255, 200, 100, 0.08) 40%, transparent 60%);
}

[data-theme="dark"] .wallpaper-layer .blob-4 {
  background: radial-gradient(circle, rgba(100, 150, 255, 0.3) 0%, rgba(100, 150, 255, 0.08) 40%, transparent 60%);
}

/* =========================================
   模态框动画
   ========================================= */
.frame-raw-overlay {
  transition: opacity var(--time-normal) var(--ease-standard), visibility var(--time-normal) var(--ease-standard);
}

.overlay-content {
  transition: transform var(--time-normal) var(--ease-in);
}