/* =========================================================================
   机器人浮现动画 —— 性能优化版样式
   -------------------------------------------------------------------------
   原实现为什么卡：
   1) .robot-image 的 reveal 动画逐帧改变 filter: blur(18px → 0) 和
      drop-shadow 半径。图片是 941×1672（渲染约 640×920），每一帧都要
      以最大 18px 的核重新做一次模糊 + 重新生成阴影，属于「每帧重新光栅化」，
      开销极大。
   2) 3 个覆盖层（.metal-light 的 inset:-20%、.intro-noise、.intro-vignette
      的 200px 内阴影）都铺满整个视口，机器人每动一下它们就要跟着重绘。
   3) .navbar 的 backdrop-filter: blur(16px) 在开场层下面全程运行，
      每帧都要对整条导航栏做真实模糊。
   4) 1.9MB 的 PNG 每帧参与重绘。

   优化做法：
   - reveal 只动 opacity + transform（这两个属性由合成器处理，不需要重绘）
   - blur / drop-shadow 全部改为静态值，只在末尾用 opacity 叠加一个发光层
   - 覆盖层的绘制范围收进机器人容器内部
   - 开场期间关闭导航栏的 backdrop-filter
   - 移动端进一步降低负载（关掉 blur/backdrop-filter，缩短动画）
   ========================================================================= */

/* ---------- 1. 机器人出场：只动 opacity + transform ---------- */

@keyframes robotRevealFast{

    0%{
        opacity:0;
        transform:
            translate3d(0,60px,0)
            scale(.90);
    }

    45%{
        opacity:.55;
    }

    100%{
        opacity:1;
        transform:
            translate3d(0,0,0)
            scale(1);
    }
}

.robot-image{

    /* 静态滤镜：只在首次光栅化时算一次，之后不再随动画重算 */
    filter:
        brightness(.78)
        contrast(1.42)
        saturate(1.12);

    /* 用合成器友好的属性做动画；时长略有缩短，观感更利落 */
    animation:
        robotRevealFast
        3.4s
        cubic-bezier(.16,.6,.22,1)
        forwards;

    animation-delay:.35s;

    /* 提示浏览器为这层单独建合成层 */
    will-change:opacity, transform;
    transform:translateZ(0);
    backface-visibility:hidden;
}

/* 发光的 drop-shadow 改由独立伪元素承担：它不参与动画，一次光栅化即可 */
.robot-frame::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    background:
        radial-gradient(
            ellipse 62% 52% at 50% 44%,
            rgba(255,0,0,.17),
            transparent 70%
        );
}

/* ---------- 2. 覆盖层收进容器内，避免整屏重绘 ---------- */

.metal-light{
    /* 原来是 inset:-20%，会超出容器、导致视口大范围重绘 */
    inset:0;
}

/* 黑色遮罩改为纯透明度过渡，不再逐帧算大范围渐变 */
.robot-darkness{
    animation:darknessFade 3.6s ease forwards;
    animation-delay:.3s;
}

@keyframes darknessFade{
    0%{ opacity:1; }
    60%{ opacity:.5; }
    100%{ opacity:.1; }
}

/* ---------- 3. 开场期间关掉导航栏的 backdrop-filter ---------- */

body:has(.intro:not(.hide)) .navbar{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

/* ---------- 4. 移动端降负载 ---------- */

@media(max-width:950px){

    .robot-image{
        filter:brightness(.8) contrast(1.38);
        animation-duration:2.6s;
    }

    .intro-noise,
    .intro-vignette{
        display:none;
    }

    .metal-light{
        display:none;
    }

    .red-fog{
        filter:blur(40px);
    }
}

/* ---------- 5. 尊重系统「减少动态效果」 ---------- */

@media(prefers-reduced-motion:reduce){

    .robot-image{
        animation:none;
        opacity:1;
        transform:none;
    }

    .robot-float,
    .ring-one,
    .ring-two,
    .red-fog,
    .metal-light,
    .robot-scan,
    .robot-darkness{
        animation:none;
    }

    .robot-darkness{
        opacity:.08;
    }

    .robot-scan{
        opacity:.5;
    }
}