/* ============================================
 * 观鼎山首页 · 九宫格交互态 grid-states.css
 * 板块：九宫格
 * 标准：首页设计标准 v1.4 §5.2
 * 6种交互状态
 * ============================================ */

/* 1. 默认静态（由 grid.css 定义）*/

/* 2. Hover：放大 + 阴影加深 */
.gds-cell:hover {
  transform: scale(1.03);
  box-shadow:
    0 4px 24px color-mix(in srgb, var(--gds-cell-color) 20%, transparent),
    0 0 40px color-mix(in srgb, var(--gds-cell-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--gds-cell-color) 130%, white);
  z-index: 2;
}

.gds-cell:hover .gds-cell-gua {
  transform: scale(1.1);
  text-shadow:
    0 0 20px color-mix(in srgb, var(--gds-cell-color) 60%, transparent),
    0 0 40px color-mix(in srgb, var(--gds-cell-color) 40%, transparent);
}

/* 3. Click 按下 */
.gds-cell:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* 4. Pulse 脉冲（归位引导） */
.gds-cell.pulse {
  animation: gds-pulse 1.5s ease-in-out 2;
}

@keyframes gds-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--gds-cell-color) 30%, transparent);
  }
  25% {
    transform: scale(1.06);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--gds-cell-color) 20%, transparent);
  }
  50% {
    transform: scale(1);
    box-shadow: 0 0 0 16px transparent;
  }
  75% {
    transform: scale(1.06);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--gds-cell-color) 20%, transparent);
  }
}

/* 5. Disabled 禁用 */
.gds-cell.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.6);
}

.gds-cell.disabled::after {
  content: '🔒';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  opacity: 0.5;
}

/* 6. 呼吸灯（印章后缀，中宫不显示） */
.gds-seal.breathing {
  animation: gds-breathing 2s ease-in-out infinite;
}

@keyframes gds-breathing {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* 走马灯动画 */
.gds-seal.marquee {
  position: relative;
  overflow: hidden;
}

.gds-seal.marquee::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 168, 67, 0.3) 30%,
    rgba(212, 168, 67, 0.5) 50%,
    rgba(212, 168, 67, 0.3) 70%,
    transparent 100%
  );
  animation: gds-marquee 1.2s linear infinite;
  pointer-events: none;
}

@keyframes gds-marquee {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 闪电动画 */
.gds-seal.lightning {
  position: relative;
  overflow: hidden;
}

.gds-seal.lightning::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 60%
  );
  animation: gds-lightning 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes gds-lightning {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* 慢变多色 */
.gds-seal.slow-multi {
  animation: gds-slow-multi 12s ease-in-out infinite;
}

@keyframes gds-slow-multi {
  0% { color: #D4A843; }
  25% { color: #E8914F; }
  50% { color: #7B61A5; }
  75% { color: #45B5AA; }
  100% { color: #D4A843; }
}

/* ---------- 外宫主推印章角标 ---------- */
.gds-seal {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-family: var(--font-serif);
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  opacity: 0.9;
  z-index: 1;
  pointer-events: none;
  transition: opacity var(--transition);
}

/* 金级 */
.gds-seal[data-seal-level="gold"] {
  color: #8B6914;
  background: linear-gradient(135deg, #D4A843, #c49a3a);
  box-shadow: 0 0 6px rgba(212, 168, 67, 0.4);
}

/* 银级 */
.gds-seal[data-seal-level="silver"] {
  color: #4a5568;
  background: linear-gradient(135deg, #c0c8d8, #a8b2c8);
  box-shadow: 0 0 6px rgba(192, 200, 216, 0.3);
}

/* 铜级 */
.gds-seal[data-seal-level="bronze"] {
  color: #5a3a2a;
  background: linear-gradient(135deg, #CD7F4B, #b86e3e);
  box-shadow: 0 0 6px rgba(205, 127, 75, 0.3);
}

/* 中宫不显示外宫印章 */
.gds-cell--center .gds-seal {
  display: none;
}

/* 移动端缩小印章 */
@media (max-width: 480px) {
  .gds-seal {
    font-size: 0.5rem;
    padding: 1px 4px;
    bottom: 3px;
    right: 4px;
  }
}

/* ---------- 移动端触控反馈 ---------- */
@media (hover: none) {
  .gds-cell:hover {
    transform: none;
    box-shadow: none;
  }
  .gds-cell:active {
    transform: scale(0.97);
  }
}

/* ============================================
 * 锦鲤鼠标跟踪动效
 * 红蓝锦鲤绕圈游动，仅限九宫格内
 * 参考：抖音「遇见锦鲤好运来」风格
 * ============================================ */

/* 跟随器容器 */
.gds-fish-follower {
  position: fixed;
  width: 160px;
  height: 160px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  transform: translate(-50%, -50%);
}

.gds-fish-follower.active {
  opacity: 1;
}

/* 鱼群容器 */
.gds-fish-swarm {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 单条鱼 */
.gds-fish {
  position: absolute;
  width: 64px;
  height: 32px;
  top: 50%;
  left: 50%;
  margin-left: -32px;
  margin-top: -16px;
}

/* 红锦鲤（领先，0°起始） */
.gds-fish--red {
  animation: gds-fish-orbit-red 3s linear infinite;
}

/* 蓝锦鲤（追逐，180°起始） */
.gds-fish--blue {
  animation: gds-fish-orbit-blue 3s linear infinite;
}

/* 鱼体 SVG */
.gds-fish svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 双鱼微摆尾游动 */
.gds-fish--red svg {
  animation: gds-fish-swim 1s ease-in-out infinite alternate;
}

.gds-fish--blue svg {
  animation: gds-fish-swim 1s ease-in-out infinite alternate-reverse;
}

/* 锦鲤摆尾 */
@keyframes gds-fish-swim {
  0%   { transform: rotate(-3deg) scaleY(1); }
  100% { transform: rotate(3deg) scaleY(1); }
}

/* 红锦鲤绕圈（顺时针，0°→360°） */
@keyframes gds-fish-orbit-red {
  0%   { transform: translate(-50%, -50%) rotate(0deg) translateX(52px) rotate(-90deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(52px) rotate(-90deg); }
}

/* 蓝锦鲤绕圈（顺时针，180°→540°，始终落后红鱼180°） */
@keyframes gds-fish-orbit-blue {
  0%   { transform: translate(-50%, -50%) rotate(180deg) translateX(52px) rotate(-90deg); }
  100% { transform: translate(-50%, -50%) rotate(540deg) translateX(52px) rotate(-90deg); }
}

/* 水波纹涟漪 */
.gds-fish-follower::before,
.gds-fish-follower::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 200, 50, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gds-fish-follower::before {
  animation: gds-ripple 2.5s ease-out infinite;
}

.gds-fish-follower::after {
  animation: gds-ripple 2.5s ease-out 1.25s infinite;
}

@keyframes gds-ripple {
  0% {
    width: 20px;
    height: 20px;
    opacity: 0.8;
  }
  100% {
    width: 140px;
    height: 140px;
    opacity: 0;
  }
}

/* 锦鲤光晕（金色好运主题） */
.gds-fish-follower.active {
  filter: drop-shadow(0 0 20px rgba(232, 69, 43, 0.45))
          drop-shadow(0 0 32px rgba(37, 99, 235, 0.35))
          drop-shadow(0 0 12px rgba(255, 200, 50, 0.35));
}

/* 吉祥光点粒子 */
.gds-fish-follower .gds-fish-swarm::after {
  content: '✦';
  position: absolute;
  top: 25%;
  left: 25%;
  font-size: 18px;
  color: rgba(255, 200, 50, 0.85);
  animation: gds-sparkle 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes gds-sparkle {
  0%, 100% { opacity: 0.1; transform: scale(0.4) translate(0, 0); }
  50% { opacity: 1; transform: scale(1.4) translate(-6px, -8px); }
}

/* ---------- 昼模式：波纹/光点改为翡翠绿（更通透） ---------- */
[data-theme="light"] .gds-fish-follower::before,
[data-theme="light"] .gds-fish-follower::after {
  border-color: rgba(16, 185, 129, 0.5);
}

[data-theme="light"] .gds-fish-follower.active {
  filter: drop-shadow(0 0 20px rgba(232, 69, 43, 0.4))
          drop-shadow(0 0 32px rgba(37, 99, 235, 0.3))
          drop-shadow(0 0 12px rgba(16, 185, 129, 0.35));
}

[data-theme="light"] .gds-fish-follower .gds-fish-swarm::after {
  color: rgba(16, 185, 129, 0.85);
}

/* 移动端隐藏 */
@media (hover: none) {
  .gds-fish-follower {
    display: none !important;
  }
}