@charset "UTF-8";

/* =========================================
   高级灯塔信令服务器扫描动画 (纯 CSS + 极客隐喻)
   ========================================= */

/* 1. 灯塔图片暗网化处理：反相+透明度+微弱光晕 */
.lighthouse-img {
    filter: invert(1) brightness(0.9) opacity(0.85) drop-shadow(0 0 15px rgba(255,255,255,0.1));
    z-index: 20;
    /* 让服务器像在数据海洋中一样有极其微弱的呼吸浮动感 */
    animation: server-hover 5s ease-in-out infinite;
}

@keyframes server-hover {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* 2. 雷达光束容器（用于制造 3D 透视角度） */
.lighthouse-beam-container {
    perspective: 800px;
    z-index: 10;
}

/* 3. 信令探照光束 (扫描网络节点) */
.lighthouse-beam {
    width: 100%;
    height: 100%;
    /* 核心渐变：两侧透明，中间高亮模拟光束 */
    background: conic-gradient(from 180deg at 50% 100%,
        transparent 145deg,
        rgba(255, 255, 255, 0.05) 170deg,
        rgba(255, 255, 255, 0.4) 180deg,
        rgba(255, 255, 255, 0.05) 190deg,
        transparent 215deg
    );
    transform-origin: 50% 100%;
    
    /* 增加 will-change 开启 GPU 硬件加速，保证手机端扫射顺滑 */
    will-change: transform;
    
    /* 雷达左右扫描动画 */
    animation: radar-sweep 3s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
    
    /* 增加遮罩，让光束往上逐渐消散，边缘融合得更自然 */
    mask-image: radial-gradient(ellipse at 50% 100%, black 10%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 100%, black 10%, transparent 80%);
}

@keyframes radar-sweep {
    0% { transform: rotate(-50deg); }
    100% { transform: rotate(50deg); }
}

/* 4. 寻址成功后的文字高光泛出特效 (极客白光) */
.premium-glow {
    color: #ffffff !important;
    text-shadow: 
        0 0 20px rgba(255, 255, 255, 0.9), 
        0 0 40px rgba(255, 255, 255, 0.5),
        0 0 80px rgba(255, 255, 255, 0.2);
    transition: text-shadow 0.8s ease, color 0.8s ease;
    /* 模拟电子荧光屏的细微闪烁感 */
    animation: slight-flicker 4s infinite;
}

@keyframes slight-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 24%, 55% { opacity: 0.85; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
}

/* =========================================
   页面基础特效样式 (从原文件提取，原封不动)
   ========================================= */

/* 状态呼吸灯特效 */
.status-pulse { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); animation: pulse-white 2s infinite; }
@keyframes pulse-white {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* 极客终端日志字体 */
.font-mono-geek { font-family: 'Courier New', Courier, monospace; }

/* 平滑滚动 */
html { scroll-behavior: smooth; }

/* 滚动显现过渡 */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* 海鸥悬浮动画 */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* 终端光标闪烁 */
.blink { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }