/* ============================================================
   沐星科技发卡商城 · 纯白液态玻璃 UI 体系 (V2.4.2)
   Bootstrap 5 适配 · 全动效覆盖 · 硬件加速
   ============================================================ */

/* -------- CSS 变量与缓动函数 -------- */
:root {
  --ease-ios: cubic-bezier(0.2, 0.58, 0.3, 0.99);
  --ease-modal: cubic-bezier(0.32, 0.99, 0.38, 1.03);
  --ease-page: cubic-bezier(0.22, 0.82, 0.22, 1);
  --ease-jelly: cubic-bezier(0.62, -0.12, 0.26, 1.14);
  --ease-fast: cubic-bezier(0.4, 0, 0.2, 1);
  --sky-color: 201, 226, 255;
  --sky-solid: #C9E2FF;
}

/* -------- 全局基底：浅蓝-纯白三段无缝渐变 -------- */
.bg-gradient-sky {
  background: linear-gradient(180deg, #F0F7FF 0%, #F8FBFF 35%, #FFFFFF 70%, #FFFFFF 100%) !important;
  background-attachment: fixed;
}

/* -------- 毛玻璃基底（三级） -------- */
.bg-glass-nav {
  background: rgba(240, 247, 255, 0.88) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bg-glass-modal {
  background: rgba(252, 254, 255, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bg-glass-float {
  background: rgba(248, 251, 255, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* -------- 柔雾渐变 -------- */
.bg-gradient-soft {
  background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%) !important;
}

.bg-gradient-standard {
  background: linear-gradient(135deg, #EBF4FF 0%, #FDFEFF 100%) !important;
}

.bg-gradient-high {
  background: linear-gradient(135deg, #E0EFFE 0%, #F8FCFF 100%) !important;
}

/* -------- 浅蓝雾感 RGBA 辅助 -------- */
.bg-sky-4  { background: rgba(var(--sky-color), 0.04) !important; }
.bg-sky-6  { background: rgba(var(--sky-color), 0.06) !important; }
.bg-sky-12 { background: rgba(var(--sky-color), 0.12) !important; }
.bg-sky-20 { background: rgba(var(--sky-color), 0.20) !important; }
.border-sky-6  { border-color: rgba(var(--sky-color), 0.06) !important; }
.border-sky-12 { border-color: rgba(var(--sky-color), 0.12) !important; }
.border-sky { border-color: var(--sky-solid) !important; }

/* -------- 语义柔化色 -------- */
.text-success-soft { color: #34C759 !important; }
.text-warning-soft { color: #FF9500 !important; }
.text-danger-soft  { color: #FF3B30 !important; }
.text-info-soft    { color: #007AFF !important; }

/* -------- 阴影柔化 -------- */
.shadow-sm {
  box-shadow: 0 3px 12px rgba(var(--sky-color), 0.08) !important;
}

.shadow {
  box-shadow: 0 10px 28px rgba(var(--sky-color), 0.12) !important;
}

.shadow-lg {
  box-shadow: 0 15px 40px rgba(var(--sky-color), 0.15) !important;
}

/* -------- 全局字体与排版 -------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  color: #1a1a1a;
  overflow-x: hidden;
}

/* -------- 禁止 Emoji 渲染 -------- */
* {
  font-variant-emoji: none;
}

/* 隐藏滚动条 */
::-webkit-scrollbar { display: none; }

/* -------- 全局过渡 -------- */
.transition-all {
  transition: all 0.2s var(--ease-ios);
}

/* -------- 导航栏滚动联动 -------- */
.navbar-scrolled {
  box-shadow: 0 10px 28px rgba(var(--sky-color), 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* -------- 页面切入切出动画 -------- */
.page-enter {
  animation: pageSlideIn 0.32s var(--ease-page) forwards;
}

.page-exit {
  animation: pageSlideOut 0.32s var(--ease-page) forwards;
}

@keyframes pageSlideIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pageSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0.85;
    transform: translateX(-12px);
  }
}

/* 返回专用（反向） */
.page-enter-reverse {
  animation: pageSlideInReverse 0.32s var(--ease-page) forwards;
}

.page-exit-reverse {
  animation: pageSlideOutReverse 0.32s var(--ease-page) forwards;
}

@keyframes pageSlideInReverse {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pageSlideOutReverse {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0.85;
    transform: translateX(24px);
  }
}

/* 元素级联入场 */
.element-cascade {
  opacity: 0;
  transform: translateY(12px);
  animation: elementFadeIn 0.24s var(--ease-ios) forwards;
}

@keyframes elementFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------- 卡片悬浮微动效 -------- */
.card-hover-float {
  transition: all 0.28s var(--ease-ios);
}

.card-hover-float:hover {
  transform: translateY(-2.5px);
  box-shadow: 0 10px 28px rgba(var(--sky-color), 0.12) !important;
  background: linear-gradient(135deg, #E0EFFE 0%, #F8FCFF 100%) !important;
}

/* -------- 按钮点击果冻弹性 -------- */
.btn-jelly {
  transition: all 0.12s var(--ease-jelly);
}

.btn-jelly:active {
  transform: scale(0.975);
  transition: transform 0.08s var(--ease-fast);
}

/* -------- 输入框聚焦微动效 -------- */
.form-control-focus {
  transition: all 0.18s var(--ease-ios);
}

.form-control-focus:focus {
  border-color: var(--sky-solid) !important;
  box-shadow: 0 0 0 4px rgba(var(--sky-color), 0.12) !important;
  transform: translateY(-1px);
}

/* -------- 自定义弹窗（Bootstrap 增强） -------- */
.custom-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease-ios), visibility 0.2s var(--ease-ios);
}

.custom-modal.active {
  opacity: 1;
  visibility: visible;
}

.custom-modal-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.2s var(--ease-ios);
}

.custom-modal.active .custom-modal-overlay {
  opacity: 1;
}

.custom-modal-content {
  position: relative;
  width: 90%;
  max-width: 460px;
  transform: scale(0.95) translateY(10px);
  transition: all 0.32s var(--ease-modal);
}

.custom-modal.active .custom-modal-content {
  transform: scale(1) translateY(0);
}

/* -------- Toast 提示动画 -------- */
.toast-msg {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 99999;
  opacity: 0;
  transition: all 0.4s var(--ease-jelly);
  pointer-events: none;
}

.toast-msg.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* -------- 浅蓝流光（微光流动） -------- */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--sky-color), 0.12), transparent);
  animation: shimmerSlide 3s infinite;
}

@keyframes shimmerSlide {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* -------- 成功/错误/警告反馈动画 -------- */
@keyframes successPop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes warningBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.animate-success { animation: successPop 0.3s var(--ease-jelly) forwards; }
.animate-error { animation: errorShake 0.3s var(--ease-fast) forwards; }
.animate-warning { animation: warningBounce 0.3s var(--ease-ios) forwards; }