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

/* ===== Micro-interactions 微交互系统 ===== */

/* ===== 磁性效果 ===== */

/* 磁性按钮 */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

.magnetic:hover {
  transform: scale(1.05);
}

.magnetic:active {
  transform: scale(0.98);
}

/* 磁性卡片 */
.magnetic-card {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s ease;
}

.magnetic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* ===== 波纹效果 ===== */

/* 波纹按钮 */
.ripple {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: none;
  pointer-events: none;
}

.ripple:active::after {
  animation: ripple-effect 0.6s ease-out forwards;
}

@keyframes ripple-effect {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* 波纹卡片 */
.ripple-card {
  position: relative;
  overflow: hidden;
}

.ripple-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
}

.ripple-card:hover::before {
  width: 300%;
  height: 300%;
  opacity: 1;
}

/* ===== 连线效果 ===== */

/* 卡片底部连接线 */
.card-connector {
  position: relative;
}

.card-connector::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--vista-glass-teal), transparent);
  transition: width 0.4s ease, left 0.4s ease;
}

.card-connector:hover::after {
  width: 80%;
  left: 10%;
}

/* 边框连接动画 */
.border-connector {
  position: relative;
}

.border-connector::before,
.border-connector::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--vista-glass-teal), var(--vista-glass-blue));
  transition: width 0.3s ease;
}

.border-connector::before {
  top: 0;
  left: 0;
}

.border-connector::after {
  bottom: 0;
  right: 0;
}

.border-connector:hover::before,
.border-connector:hover::after {
  width: 100%;
}

/* ===== 悬停高亮效果 ===== */

/* 光标跟随高亮 */
.highlight-cursor {
  position: relative;
}

.highlight-cursor::before {
  content: '';
  position: absolute;
  inset: -5px;
  background: radial-gradient(ellipse at center,
    rgba(0, 217, 199, 0.15) 0%,
    transparent 70%
  );
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.highlight-cursor:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* 内部发光 */
.inner-glow {
  transition: box-shadow 0.3s ease;
}

.inner-glow:hover {
  box-shadow: inset 0 0 30px rgba(0, 217, 199, 0.15);
}

/* ===== 文本效果 ===== */

/* 文字下划线动画 */
.text-underline {
  position: relative;
  text-decoration: none;
}

.text-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    var(--vista-glass-teal),
    var(--vista-glass-blue),
    var(--vista-glass-teal)
  );
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease, background-position 0.3s ease;
}

.text-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
  background-position: 100% 0;
}

/* 文字发光 */
.text-glow {
  transition: text-shadow 0.3s ease;
}

.text-glow:hover {
  text-shadow:
    0 0 10px rgba(0, 217, 199, 0.5),
    0 0 20px rgba(0, 217, 199, 0.3),
    0 0 30px rgba(0, 217, 199, 0.2);
}

/* ===== 缩放效果 ===== */

/* 缩放容器 */
.zoom-container {
  overflow: hidden;
  border-radius: inherit;
}

.zoom-container img,
.zoom-container .zoom-content {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.zoom-container:hover img,
.zoom-container:hover .zoom-content {
  transform: scale(1.1);
}

/* 放大效果 */
.zoom-on-hover {
  transition: transform 0.3s ease;
}

.zoom-on-hover:hover {
  transform: scale(1.1);
}

/* 缩小效果 */
.zoom-out-hover {
  transition: transform 0.3s ease;
}

.zoom-out-hover:hover {
  transform: scale(0.95);
}

/* ===== 透明度效果 ===== */

/* 淡入淡出 */
.fade-on-hover {
  transition: opacity 0.3s ease;
}

.fade-on-hover:hover {
  opacity: 0.7;
}

/* 渐显 */
.fade-in-element {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.fade-in-element.visible {
  opacity: 1;
}

/* ===== 旋转效果 ===== */

/* 悬停旋转 */
.rotate-on-hover {
  transition: transform 0.3s ease;
  transform-origin: center;
}

.rotate-on-hover:hover {
  transform: rotate(5deg);
}

/* 连续旋转 */
.rotate-continuous {
  animation: rotate-continuous 10s linear infinite;
}

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

/* 悬停时加速旋转 */
.rotate-speed-up {
  transition: transform 0.3s ease;
  transform-origin: center;
}

.rotate-speed-up:hover {
  animation: rotate-speed-up 0.5s ease-out forwards;
}

@keyframes rotate-speed-up {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(90deg);
  }
}

/* ===== 倾斜效果 ===== */

/* 3D 倾斜 */
.tilt-3d {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.tilt-3d:hover {
  transform: rotateX(5deg) rotateY(5deg);
}

/* 悬停倾斜 */
.tilt-hover {
  transition: transform 0.2s ease;
}

.tilt-hover:hover {
  transform: perspective(500px) rotateX(10deg) rotateY(-10deg) scale(1.02);
}

/* ===== 边框效果 ===== */

/* 渐变边框 */
.gradient-border-hover {
  position: relative;
  background: var(--glass-layer-3);
  border-radius: var(--radius-lg);
  z-index: 1;
}

.gradient-border-hover::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg,
    var(--vista-glass-teal),
    var(--vista-glass-blue),
    var(--vista-accent-green)
  );
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gradient-border-hover:hover::before {
  opacity: 1;
}

/* 发光边框 */
.glow-border {
  transition: box-shadow 0.3s ease;
}

.glow-border:hover {
  box-shadow:
    0 0 20px rgba(0, 217, 199, 0.4),
    0 0 40px rgba(0, 217, 199, 0.2);
}

/* ===== 按钮效果 ===== */

/* 箭头移动 */
.arrow-move {
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: gap 0.3s ease;
}

.arrow-move:hover {
  gap: 8px;
}

.arrow-move svg {
  transition: transform 0.3s ease;
}

.arrow-move:hover svg {
  transform: translateX(4px);
}

/* 填充效果 */
.fill-hover {
  position: relative;
  overflow: hidden;
}

.fill-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,
    rgba(0, 217, 199, 0.2),
    rgba(59, 139, 199, 0.2)
  );
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: -1;
}

.fill-hover:hover::before {
  transform: translateX(0);
}

/* ===== 复选框/单选框效果 ===== */

/* 勾选动画 */
.checkbox-animate {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--glass-border-medium);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.checkbox-animate:checked {
  background: var(--vista-glass-teal);
  border-color: var(--vista-glass-teal);
}

.checkbox-animate:checked::after {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 14px;
  animation: checkbox-pop 0.2s ease;
}

@keyframes checkbox-pop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* ===== 加载状态效果 ===== */

/* 加载骨架屏 */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--glass-layer-2) 25%,
    var(--glass-layer-3) 50%,
    var(--glass-layer-2) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ===== 切换效果 ===== */

/* 开关按钮 */
.toggle-switch {
  appearance: none;
  width: 50px;
  height: 26px;
  background: var(--glass-layer-3);
  border-radius: 13px;
  cursor: pointer;
  position: relative;
  transition: background 0.3s ease;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch:checked {
  background: var(--vista-glass-teal);
}

.toggle-switch:checked::after {
  transform: translateX(24px);
}

/* ===== 提示效果 ===== */

/* 工具提示 */
.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  padding: 6px 12px;
  background: var(--glass-layer-4);
  color: white;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 100;
}

.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}

/* ===== 响应式微交互 ===== */
@media (max-width: 768px) {
  .magnetic:hover {
    transform: none;
  }

  .magnetic-card:hover {
    transform: none;
    box-shadow: var(--glass-shadow-medium);
  }

  .tilt-3d:hover,
  .tilt-hover:hover {
    transform: none;
  }

  .tooltip::after {
    display: none;
  }
}

/* ===== 减少动画偏好设置 ===== */
@media (prefers-reduced-motion: reduce) {
  .magnetic,
  .magnetic-card,
  .ripple::after,
  .card-connector::after,
  .text-underline::after,
  .text-glow:hover,
  .zoom-on-hover,
  .fade-on-hover,
  .rotate-on-hover,
  .tilt-3d,
  .tilt-hover,
  .glow-border:hover {
    transition: none;
    animation: none;
    transform: none;
  }

  .highlight-cursor::before {
    opacity: 1;
    transform: scale(1);
  }

  .arrow-move:hover {
    gap: 0;
  }
}

/* ===== 高对比度模式 ===== */
@media (prefers-contrast: high) {
  .text-underline::after {
    background: var(--vista-glass-teal);
    height: 3px;
  }

  .glow-border:hover {
    box-shadow: 0 0 0 2px var(--vista-glass-teal);
  }

  .tooltip::after {
    background: black;
    border: 1px solid white;
  }
}