/**
 * GrapheneInfrared.com — 第三阶段设计提升 CSS
 * ============================================
 * SEO影响：零（除信任徽章外，其余为纯CSS）
 * 信任徽章：正面 — 增加信任信号
 */

/* ===========================================================
   #3.1 Emoji → SVG 图标统一样式
   注意：HTML 中的 Emoji 需手动替换为 SVG（见 gr-fix-phase3-icons.html）
   =========================================================== */

/* SVG 图标容器统一 */
.gr-fi svg {
  width: 24px;
  height: 24px;
  stroke: #00d4ff;
  stroke-width: 1.5;
  fill: none;
}

/* 图标框尺寸标准化 */
.gr-fi {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ===========================================================
   #3.2 prefers-reduced-motion 支持
   =========================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .gr-hbg {
    transform: none !important;
  }

  #gr-c {
    display: none;
  }

  .gr-rv,
  .gr-rl,
  .gr-rr {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ===========================================================
   #3.3 按钮 active 按下状态
   =========================================================== */

.gr-bp:active {
  transform: scale(0.97);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.gr-bg:active {
  transform: scale(0.97);
  background: rgba(0, 212, 255, 0.12);
}

.gr-ncta:active {
  transform: scale(0.96);
  background: rgba(0, 212, 255, 0.2);
}

.gr-ibtn:active {
  transform: scale(0.97) translateY(-2px);
}

.gr-home-prod-card:active {
  transform: scale(0.985);
  transition: transform 0.1s ease;
}


/* ===========================================================
   #3.4 WhatsApp 动画限制
   =========================================================== */

.gr-wa {
  animation: wapulse 3s ease-in-out 3;
  animation-delay: 2s;
}

@keyframes wapulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5); }
  50%      { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.7),
                         0 0 0 8px rgba(37, 211, 102, 0.1); }
}


/* ===========================================================
   #3.5 汉堡菜单过渡动画
   =========================================================== */

.gr-mob {
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gr-mob.open {
  opacity: 1;
  visibility: visible;
}

/* 菜单项依次滑入 */
.gr-mob a {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-size: 18px;             /* 22px → 18px */
}

.gr-mob.open a {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger 延迟 */
.gr-mob.open a:nth-child(2) { transition-delay: 0.00s; }
.gr-mob.open a:nth-child(3) { transition-delay: 0.05s; }
.gr-mob.open a:nth-child(4) { transition-delay: 0.10s; }
.gr-mob.open a:nth-child(5) { transition-delay: 0.15s; }
.gr-mob.open a:nth-child(6) { transition-delay: 0.20s; }
.gr-mob.open a:nth-child(7) { transition-delay: 0.25s; }
.gr-mob.open a:nth-child(8) { transition-delay: 0.30s; }


/* ===========================================================
   #3.6 联系表单产品预选 banner 增强
   =========================================================== */

#gr-sel-prod-banner {
  background: rgba(0, 212, 255, 0.12) !important;
  border: 1px solid rgba(0, 212, 255, 0.5) !important;
  border-radius: 8px;
  padding: 14px 20px !important;
  font-size: 15px !important;
  animation: bannerPulse 2s ease-in-out 1;
}

@keyframes bannerPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 212, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
}


/* ===========================================================
   #3.9 产品描述截断省略号
   =========================================================== */

.gr-home-prod-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ===========================================================
   #3.10 关于页光晕装饰弱化
   =========================================================== */

.au-orb-a,
.au-orb-b {
  opacity: 0.3;
}