/* 全局重置 */
* {
    margin: 0; /* 清除默认外边距 */
    padding: 0; /* 清除默认内边距 */
    box-sizing: border-box; /* 标准盒模型 */
}

/* 页面主体样式 */
body {
    font-family: 'Segoe UI', Arial, sans-serif; /* 设置字体 */
    background: radial-gradient(circle at top left, #a8e6ff 0%, #f0f0f0 35%, #ffffff 100%); /* 径向渐变背景 */
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 占满视口高度 */
    margin: 0; /* 清除默认边距 */
}


/* 标题样式 */
h1 {
    font-size: 28px; /* 字体大小 */
    margin-bottom: 16px; /* 底部间距 */
    color: #1a2438; /* 文字颜色 */
    letter-spacing: 0.02em; /* 字间距 */
}

/* 分割线 */
.line-short {
    width: 70px; /* 宽度 */
    height: 3px; /* 高度 */
    background: linear-gradient(90deg, #000000, #000000); /* 渐变背景 */
    margin: 0 auto 32px; /* 居中+底部间距 */
    border-radius: 999px; /* 圆角 */
    animation: lineExpand 0.8s ease 0.4s both; /* 线条展开动画 */
}

/* 按钮容器 */
.buttons {
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
    gap: 18px; /* 子元素间距 */
}

/* 主容器样式 */
.container {
    transition: transform 0.3s ease-out; /* 平滑过渡倾斜效果 */
}

/* 动画按钮 */
.action-button {
    position: relative; /* 相对定位 */
    overflow: hidden; /* 隐藏溢出内容 */
    width: 100%; /* 宽度100% */
    max-width: 260px; /* 最大宽度 */
    padding: 16px 24px; /* 内边距 */
    font-size: 18px; /* 字体大小 */
    font-weight: 600; /* 字体粗细 */
    color: #ffffff; /* 文字颜色 */
    background: linear-gradient(135deg, #000000 0%, #000000 100%); /* 渐变背景 */
    border: none; /* 无边框 */
    cursor: pointer; /* 鼠标指针 */
    transition: transform 0.25s ease, filter 0.25s ease; /* 过渡效果 */
}

.action-button:hover {
    transform: translateY(-3px) scale(1.03); /* 上移+微放大 */
    filter: brightness(1.03); /* 提升亮度 */
}

.action-button:active {
    transform: translateY(0px) scale(0.99); /* 复位+微缩小 */
}

/* 波纹点击效果 */
.ripple-effect {
    position: absolute; /* 绝对定位 */
    border-radius: 50%; /* 圆形 */
    background: rgba(255, 255, 255, 0.4); /* 半透明白色 */
    opacity: 0.8; /* 透明度 */
    transform: scale(0); /* 初始缩放 */
    animation: rippleGrow 0.6s ease-out; /* 波纹动画 */
    pointer-events: none; /* 禁止鼠标事件 */
}

@keyframes rippleGrow {
    to {
        transform: scale(11.14514); /* 放大 */
        opacity: 0; /* 透明消失 */
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0; /* 初始透明 */
        transform: translateY(28px); /* 初始下移 */
    }
    to {
        opacity: 1; /* 完全显示 */
        transform: translateY(0); /* 位置复位 */
    }
}

@keyframes lineExpand {
    from {
        width: 0; /* 初始宽度 */
        opacity: 0; /* 初始透明 */
    }
    to {
        width: 70px; /* 最终宽度 */
        opacity: 1; /* 完全显示 */
    }
}

@media (max-width: 480px) { /* 手机端适配 */
    .container {
        padding: 28px 18px; /* 减小内边距 */
    }

    h1 {
        font-size: 24px; /* 减小字号 */
    }

    .action-button {
        max-width: 100%; /* 按钮满宽 */
    }
}