/* ==========================================================================
   折云网络 · 官网 Logo「幻影」动效
   --------------------------------------------------------------------------
   实现方式：JS 复制 logo 图片生成 2 层「重影」，本文件负责动画。
   · 重影层：模糊 + 提亮的同色拖影，左右错开呼吸
   · 本体：极轻微的上下浮动；光晕由本体后方的柔光层负责
   · 鼠标悬停：重影与辉光加强

   性能约定（重要）：filter 一律写成静态属性，动画只驱动 opacity / transform。
   这两个属性由合成器处理，不触发重绘；若把 filter 写进关键帧，
   每帧都要重新栅格化一张 3071x945 的位图，页面会明显变卡。

   注意 1：重影层是复制出来的 <img>，同样带 .horizontal-logosize 类，
          所以针对本体的规则必须用 :not(.logo-phantom) 排除它，
          否则优先级更高会把重影层的定位 / 透明度覆盖掉。
   注意 2：幻影配色需与 logo 主色一致（当前 logo 为红色）。
          换 logo 时只改下面 --ph-* 变量即可。
   ========================================================================== */

/* ---------- 容器：定位基准 + 幻影配色 ---------- */
.horizontal-menu-navbar-logo > a,
.nav-head-logo > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 0;

  /* 幻影辉光配色（跟随 logo 主色：红色） */
  --ph-glow: rgba(255, 72, 56, 0.85);
  --ph-glow-soft: rgba(255, 104, 80, 0.5);
  --ph-halo: rgba(255, 84, 64, 0.28);
}

/* ---------- 本体：只做上下浮动（合成器动画，几乎零开销） ---------- */
.horizontal-menu-navbar-logo > a > img.horizontal-logosize:not(.logo-phantom),
.nav-head-logo > a > img:not(.logo-phantom) {
  position: relative;
  z-index: 2;
  animation: logoPhantomFloat 4.6s ease-in-out infinite;
  will-change: transform;
}

/* ---------- 本体后方的柔光层：呼吸 ---------- */
.horizontal-menu-navbar-logo > a::before,
.nav-head-logo > a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132%;
  height: 172%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--ph-halo), rgba(255, 84, 64, 0) 72%);
  opacity: 0;
  animation: logoPhantomHalo 4.6s ease-in-out infinite;
  will-change: transform, opacity;
}

/* ---------- 重影层：静态滤镜 + 绝对定位 ---------- */
.horizontal-menu-navbar-logo > a > img.logo-phantom,
.nav-head-logo > a > img.logo-phantom {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transform: translateY(-50%);
  /* 静态滤镜：只栅格化一次 */
  filter: blur(7px) saturate(2.1) brightness(1.28) drop-shadow(0 0 8px var(--ph-glow));
  will-change: transform, opacity;
}

.horizontal-menu-navbar-logo > a > img.logo-phantom--a,
.nav-head-logo > a > img.logo-phantom--a {
  animation: logoPhantomDriftLeft 4.6s ease-in-out infinite;
}

.horizontal-menu-navbar-logo > a > img.logo-phantom--b,
.nav-head-logo > a > img.logo-phantom--b {
  animation: logoPhantomDriftRight 4.6s ease-in-out infinite;
  animation-delay: -2.3s; /* 与左层错开半个周期，形成连续拖影 */
}

/* ---------- 关键帧：只动 opacity / transform ---------- */
@keyframes logoPhantomFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

@keyframes logoPhantomHalo {
  0%, 100% { opacity: 0;    transform: translate(-50%, -50%) scale(0.86); }
  45%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
  70%      { opacity: 0.35; transform: translate(-50%, -50%) scale(0.96); }
}

/* 左侧拖影（保留底透明度，拖影不会完全消失） */
@keyframes logoPhantomDriftLeft {
  0%   { opacity: 0.12; transform: translateY(-50%) translateX(-3px)  scale(1.006); }
  26%  { opacity: 0.74; transform: translateY(-50%) translateX(-13px) scale(1.02); }
  52%  { opacity: 0.26; transform: translateY(-50%) translateX(-6px)  scale(1.006); }
  76%  { opacity: 0.48; transform: translateY(-50%) translateX(-10px) scale(1.013); }
  100% { opacity: 0.12; transform: translateY(-50%) translateX(-3px)  scale(1.006); }
}

/* 右侧拖影 */
@keyframes logoPhantomDriftRight {
  0%   { opacity: 0.1;  transform: translateY(-50%) translateX(3px)  scale(1.006); }
  30%  { opacity: 0.68; transform: translateY(-50%) translateX(13px) scale(1.02); }
  56%  { opacity: 0.24; transform: translateY(-50%) translateX(6px)  scale(1.006); }
  80%  { opacity: 0.44; transform: translateY(-50%) translateX(10px) scale(1.013); }
  100% { opacity: 0.1;  transform: translateY(-50%) translateX(3px)  scale(1.006); }
}

/* ---------- 悬停：幻影加强 ---------- */
.horizontal-menu-navbar-logo > a:hover > img.horizontal-logosize:not(.logo-phantom),
.nav-head-logo > a:hover > img:not(.logo-phantom) {
  animation: logoPhantomFloatHot 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 14px var(--ph-glow));
}

.horizontal-menu-navbar-logo > a:hover > img.logo-phantom,
.nav-head-logo > a:hover > img.logo-phantom {
  filter: blur(14px) saturate(2.3) brightness(1.4) drop-shadow(0 0 14px var(--ph-glow));
}

.horizontal-menu-navbar-logo > a:hover > img.logo-phantom--a,
.nav-head-logo > a:hover > img.logo-phantom--a {
  animation: logoPhantomHotLeft 1.6s ease-in-out infinite;
}

.horizontal-menu-navbar-logo > a:hover > img.logo-phantom--b,
.nav-head-logo > a:hover > img.logo-phantom--b {
  animation: logoPhantomHotRight 1.6s ease-in-out infinite;
  animation-delay: -0.8s;
}

.horizontal-menu-navbar-logo > a:hover::before,
.nav-head-logo > a:hover::before {
  opacity: 1;
  animation-duration: 1.6s;
}

@keyframes logoPhantomFloatHot {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.035); }
}

@keyframes logoPhantomHotLeft {
  0%   { opacity: 0.5;  transform: translateY(-50%) translateX(-6px)  scale(1.012); }
  50%  { opacity: 0.95; transform: translateY(-50%) translateX(-20px) scale(1.05); }
  100% { opacity: 0.5;  transform: translateY(-50%) translateX(-6px)  scale(1.012); }
}

@keyframes logoPhantomHotRight {
  0%   { opacity: 0.5;  transform: translateY(-50%) translateX(6px)  scale(1.012); }
  50%  { opacity: 0.9;  transform: translateY(-50%) translateX(20px) scale(1.05); }
  100% { opacity: 0.5;  transform: translateY(-50%) translateX(6px)  scale(1.012); }
}

/* ---------- 手机端：幅度收敛，避免遮挡菜单 ---------- */
@media (max-width: 768px) {
  .horizontal-menu-navbar-logo > a > img.logo-phantom,
  .nav-head-logo > a > img.logo-phantom {
    filter: blur(7px) saturate(2) brightness(1.26) drop-shadow(0 0 6px var(--ph-glow));
  }

  .horizontal-menu-navbar-logo > a > img.logo-phantom--a,
  .nav-head-logo > a > img.logo-phantom--a {
    animation-name: logoPhantomDriftLeftSm;
  }

  .horizontal-menu-navbar-logo > a > img.logo-phantom--b,
  .nav-head-logo > a > img.logo-phantom--b {
    animation-name: logoPhantomDriftRightSm;
  }

  .horizontal-menu-navbar-logo > a:hover > img.logo-phantom--a,
  .nav-head-logo > a:hover > img.logo-phantom--a {
    animation: logoPhantomDriftLeftSm 3s ease-in-out infinite;
  }

  .horizontal-menu-navbar-logo > a:hover > img.logo-phantom--b,
  .nav-head-logo > a:hover > img.logo-phantom--b {
    animation: logoPhantomDriftRightSm 3s ease-in-out infinite;
  }

  .horizontal-menu-navbar-logo > a::before,
  .nav-head-logo > a::before {
    width: 118%;
    height: 150%;
  }
}

@keyframes logoPhantomDriftLeftSm {
  0%, 100% { opacity: 0.08; transform: translateY(-50%) translateX(-2px); }
  30%      { opacity: 0.6;  transform: translateY(-50%) translateX(-7px); }
  60%      { opacity: 0.2;  transform: translateY(-50%) translateX(-3px); }
}

@keyframes logoPhantomDriftRightSm {
  0%, 100% { opacity: 0.08; transform: translateY(-50%) translateX(2px); }
  34%      { opacity: 0.56; transform: translateY(-50%) translateX(7px); }
  64%      { opacity: 0.18; transform: translateY(-50%) translateX(3px); }
}

/* ---------- 用户关闭动画时全部静止 ---------- */
@media (prefers-reduced-motion: reduce) {
  .horizontal-menu-navbar-logo > a > img,
  .nav-head-logo > a > img,
  .horizontal-menu-navbar-logo > a::before,
  .nav-head-logo > a::before {
    animation: none !important;
  }
  .horizontal-menu-navbar-logo > a > img.logo-phantom,
  .nav-head-logo > a > img.logo-phantom {
    display: none;
  }
}