/* ==========================================================================
   归浦AI · Logo 2D 分层绘制动画
   --------------------------------------------------------------------------
   素材：官方 Logo（logo-light.png）白底精确抠图，按真实拓扑拆成 5 条独立透明层。
        5 层共用同一画布 684×487，位置天然对齐，因此可逐条独立驱动。
        拆分验证：各层完全互斥（层间重叠 0），零像素遗漏，拼合与官图一致。

   动效：
     1) 逐带绘制生长 —— clip-path 沿每条带自身走向扫出，错时 190ms
     2) 鼠标视差跟随 —— 指针驱动位移 + 轻微倾斜（2D 变换）
     3) 背景辉光呼吸 —— 纯 CSS 关键帧
     4) 环绕光点     —— canvas 粒子，品牌四色
     5) 滚动视差推进 —— 首屏内滚动时缩放上移
   无障碍：prefers-reduced-motion 下直接呈现完整 Logo。
   ========================================================================== */

/* ---------- 舞台 ---------- */
.gp-logo-stage{
  position:relative;
  width:100%;
  max-width:640px;
  margin-left:auto;
  aspect-ratio:684 / 487;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.gp-logo-layers{position:absolute;inset:0}

/* ---------- 分层 ---------- */
.gp-logo-layers .band{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;
  /* v7.css 有一条通用规则 html.dark7 .band{background:var(--d-800)}（给页面分区用的），
     而这里的分层图恰好也叫 .band，会被误命中、在 Logo 周围糊出一个矩形暗块。
     分层必须是纯透明底，显式声明并加 !important 压过通用规则。 */
  background:transparent !important;
  opacity:0;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.35s cubic-bezier(.32,.72,.24,1), opacity .45s cubic-bezier(.22,1,.36,1);
  will-change:clip-path,opacity;
}

/* 层序：还原原稿的前后叠压关系 */
.gp-logo-layers .band-leftRing  {z-index:1}
.gp-logo-layers .band-topCyan   {z-index:2}
.gp-logo-layers .band-rightOuter{z-index:3}
.gp-logo-layers .band-diagMain  {z-index:4}
.gp-logo-layers .band-rightInner{z-index:5}

/* 逐带绘制初态：遮罩方向贴合每条带自身走向 */
.gp-logo-layers .band-leftRing  {clip-path:inset(0 100% 12% 0)}
.gp-logo-layers .band-topCyan   {clip-path:inset(0 0 0 100%)}
.gp-logo-layers .band-rightOuter{clip-path:inset(0 100% 10% 0)}
.gp-logo-layers .band-diagMain  {clip-path:inset(0 100% 24% 0)}
.gp-logo-layers .band-rightInner{clip-path:inset(0 0 0 100%)}

/* 绘制完成态 */
.gp-logo-layers .band.draw{clip-path:inset(0 0 0 0);opacity:1}

/* ---------- 背景辉光 ---------- */
.gp-logo-glow{
  position:absolute;left:50%;top:50%;
  width:88%;height:88%;transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 62%, rgba(64,208,240,.28), transparent 58%),
    radial-gradient(circle at 62% 38%, rgba(216,72,216,.26), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(72,96,240,.22), transparent 68%);
  filter:blur(48px);
  animation:gp-glow-breathe 7.5s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes gp-glow-breathe{
  0%,100%{opacity:.60;transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:.95;transform:translate(-50%,-50%) scale(1.09)}
}

/* ---------- 环绕光点 ---------- */
.gp-orbit-sparks{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .gp-logo-stage{max-width:480px;margin:0 auto}
}
@media (max-width:640px){
  .gp-logo-stage{max-width:300px}
}

/* ---------- 无障碍 ---------- */
@media (prefers-reduced-motion: reduce){
  .gp-logo-layers .band{transition:none;clip-path:inset(0 0 0 0);opacity:1}
  .gp-logo-glow{animation:none}
  .gp-logo-stage{transform:none!important}
}