/* ============================================================
 * 【全局共享样式 common.css】
 *  PC 端与移动端共用
 *  端专属样式请放 desktop.css 或 mobile.css，切勿在此文件
 *  直接写会影响另一端的全局选择器
 * ============================================================ */

html {
  scroll-behavior: smooth;
}

/* 二维码容器：基础隐藏状态（两端共享，端内触发方式不同） */
.qrcode-container {
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  transform: translateY(10px);
  z-index: 100;
}

/* 二维码显示：统一激活状态（两端共用，但激活方式不同） */
.qrcode-trigger.is-qr-open .qrcode-container,
.qrcode-container.is-qr-open-self {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* 回到顶部按钮动画（两端共享） */
.back-to-top {
  transition: all 0.3s ease;
  transform: translateY(100px);
  opacity: 0;
}
.back-to-top.show {
  transform: translateY(0);
  opacity: 1;
}

/* 渐入动画（两端共享） */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.8s ease forwards; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* 按钮吸引眼球动效（两端共享） */
@keyframes attention {
  0%   { transform: scale(1);   box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); }
  50%  { transform: scale(1.1); box-shadow: 0 8px 24px rgba(34, 197, 94, 0.6), 0 0 30px rgba(34, 197, 94, 0.4); }
  100% { transform: scale(1);   box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); }
}
.animate-attention { animation: attention 3s ease-in-out infinite; }

/* 按钮边框闪烁效果（两端共享） */
@keyframes border-glow {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7), 0 4px 12px rgba(34, 197, 94, 0.3); }
  70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0),  0 4px 12px rgba(34, 197, 94, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0),     0 4px 12px rgba(34, 197, 94, 0.3); }
}
.animate-border-glow { animation: border-glow 2s infinite; }

/* 呼吸灯效果 - 圆点 */
@keyframes breathing {
  0%, 100% { 
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.8);
  }
  50% { 
    opacity: 0.5;
    transform: scale(1.5);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
}
.breathing-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #22c55e;
  animation: breathing 1.5s ease-in-out infinite;
  vertical-align: middle;
  flex-shrink: 0;
}