/* css/module3_services.css */

.services-section {
    padding: 120px 0;
    background-color: #030508;
    position: relative;
    /* 增加一个微弱的网格背景增加科技感 */
    background-image: 
        linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 标题样式 (与模块二保持设计语言一致) */
.section-header { text-align: center; margin-bottom: 80px; }
.cyan-heading { font-family: 'Courier New', Courier, monospace; color: #00f3ff; font-size: 1rem; letter-spacing: 4px; margin-bottom: 10px; text-shadow: 0 0 10px rgba(0, 243, 255, 0.4); }
.main-title { font-size: 2.5rem; color: #ffffff; letter-spacing: 2px; margin-bottom: 20px; }
.heading-line { width: 60px; height: 3px; background: #00f3ff; margin: 0 auto; box-shadow: 0 0 15px #00f3ff; }

/* 2x2 网格布局 */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* ==========================================
   卡片本体与霓虹发光逻辑
   ========================================== */
.service-card {
    position: relative;
    background: rgba(10, 15, 30, 0.6);
    border-radius: 12px;
    /* 开启 3D 视界，配合 JS 实现倾斜 */
    transform-style: preserve-3d;
    cursor: crosshair; /* 极客风十字光标 */
}

/* 内容层 */
.card-content {
    position: relative;
    padding: 40px;
    z-index: 2;
    transform: translateZ(30px); /* 3D悬浮高度 */
}

/* 常规边框状态 */
.card-border {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid rgba(0, 243, 255, 0.1);
    border-radius: 12px;
    transition: all 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

/* 悬停时的霓虹发光框 */
.service-card:hover .card-border {
    border-color: #00f3ff;
    box-shadow: 
        0 0 20px rgba(0, 243, 255, 0.4),
        inset 0 0 15px rgba(0, 243, 255, 0.2);
}

.service-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    display: inline-block;
    filter: drop-shadow(0 0 10px rgba(0, 243, 255, 0.5));
}

.service-card p {
    color: #94a3b8;
    line-height: 1.7;
    font-size: 0.95rem;
    margin: 0;
}

/* ==========================================
   代码故障 (Glitch) 悬停动效
   ========================================== */
.service-title {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

/* 使用伪元素克隆文字来制作错位 */
.glitch-hover::before,
.glitch-hover::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.glitch-hover::before {
    color: #00f3ff;
    z-index: -1;
}

.glitch-hover::after {
    color: #ff00c8; /* 品红配色，经典赛博朋克冲突色 */
    z-index: -2;
}

/* 鼠标悬停时触发故障动画 */
.service-card:hover .glitch-hover::before {
    opacity: 1;
    animation: glitch-anim-1 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

.service-card:hover .glitch-hover::after {
    opacity: 1;
    animation: glitch-anim-2 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite reverse;
}

/* 故障关键帧 */
@keyframes glitch-anim-1 {
    0% { transform: translate(0); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
    20% { transform: translate(-2px, 2px); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
    40% { transform: translate(-2px, -2px); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
    60% { transform: translate(2px, 2px); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
    80% { transform: translate(2px, -2px); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
    100% { transform: translate(0); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
}

@keyframes glitch-anim-2 {
    0% { transform: translate(0); clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); }
    20% { transform: translate(2px, -2px); clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); }
    40% { transform: translate(2px, 2px); clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); }
    60% { transform: translate(-2px, -2px); clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); }
    80% { transform: translate(-2px, 2px); clip-path: polygon(0 23%, 100% 23%, 100% 23%, 0 23%); }
    100% { transform: translate(0); clip-path: polygon(0 50%, 100% 50%, 100% 59%, 0 59%); }
}

/* ==========================================
   滚动浮现动画 (与模块二类似，但类名为 s-reveal)
   ========================================== */
.s-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.s-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 移动端适配 */
@media (max-width: 992px) {
    .services-grid { grid-template-columns: 1fr; }
}