/**
 * ===========================================
 * Athena 图书管理系统 - 登录页面样式 (login.css)
 * ===========================================
 * 
 * 设计风格：
 * - 玻璃态设计（Glassmorphism）
 * - 深色主题配合金色强调色
 * - 动态光球背景动画
 * - 流畅的过渡动画效果
 * 
 * 技术特点：
 * - CSS 变量实现主题一致性
 * - backdrop-filter 实现毛玻璃效果
 * - CSS 动画实现视觉吸引力
 */

/* ==================== CSS 变量定义 ==================== */
:root {
    /* 主色调 - 金色系 */
    --primary-gold: #D4AF37;          /* 主金色 */
    --primary-gold-hover: #F2C94C;    /* 金色悬停态 */
    
    /* 强调色 */
    --accent-purple: #7b4397;         /* 紫色强调 */
    --accent-red: #dc2430;            /* 红色强调 */
    
    /* 玻璃态效果变量 */
    --glass-bg: rgba(255, 255, 255, 0.05);        /* 玻璃背景 */
    --glass-border: rgba(255, 255, 255, 0.12);    /* 玻璃边框 */
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);  /* 玻璃阴影 */
    
    /* 文本颜色 */
    --text-main: #ffffff;                          /* 主文本白色 */
    --text-secondary: rgba(255, 255, 255, 0.7);   /* 次要文本 */
    
    /* 输入框颜色 */
    --input-bg: rgba(0, 0, 0, 0.2);               /* 输入框背景 */
    --input-focus: rgba(0, 0, 0, 0.3);            /* 输入框聚焦背景 */
}

/* ==================== 基础样式重置 ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 页面主体样式 */
body {
    font-family: 'Poppins', sans-serif;
    /* 深色渐变背景 */
    background: #0f0c29;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0c29 100%);
    min-height: 100vh;
    /* 内容居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--text-main);
    overflow-x: hidden;
    position: relative;
}

/* ==================== 动态背景光球 ==================== */
/* 装饰性背景元素，增加视觉层次感 */
.background-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;  /* 不响应鼠标事件 */
}

/* 单个光球基础样式 */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);   /* 模糊效果形成光晕 */
    opacity: 0.5;
    animation: float 12s infinite ease-in-out;
}

/* 第一个光球 - 左上紫色 */
.blob:nth-child(1) {
    top: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, var(--accent-purple), #8e54e9);
    animation-duration: 15s;
}

/* 第二个光球 - 右下红色 */
.blob:nth-child(2) {
    bottom: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, var(--accent-red), #f27121);
    animation-delay: -3s;      /* 错开动画起始时间 */
    animation-duration: 18s;
}

/* 第三个光球 - 中央金色 */
.blob:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-hover));
    opacity: 0.3;
    animation-delay: -6s;
    animation-duration: 20s;
}

/* 光球浮动动画 - 缓慢飘动效果 */
@keyframes float {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
    }
    33% { 
        transform: translate(50px, -30px) scale(1.1); 
    }
    66% { 
        transform: translate(-30px, 50px) scale(0.9); 
    }
}

/* ==================== 登录容器 ==================== */
/* 主要的登录表单容器，采用玻璃态设计 */
.login-container {
    /* 玻璃态背景效果 */
    background: var(--glass-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);  /* Safari 兼容 */
    
    /* 边框和阴影 */
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), 
                0 0 80px rgba(212, 175, 55, 0.1);  /* 金色光晕 */
    
    /* 圆角和尺寸 */
    border-radius: 30px;
    width: 100%;
    max-width: 460px;
    padding: 55px 50px;
    
    /* 入场动画 */
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    
    position: relative;
    overflow: hidden;
}

/* 容器渐变边框光效 - 装饰性元素 */
.login-container::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    /* 对角渐变：左上金色 → 右下紫色 */
    background: linear-gradient(135deg, 
        var(--primary-gold), 
        transparent 40%, 
        transparent 60%, 
        var(--accent-purple));
    border-radius: 30px;
    opacity: 0.4;
    z-index: -1;
    animation: borderShine 3s ease-in-out infinite;
}

/* 边框光效呼吸动画 */
@keyframes borderShine {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.6; }
}

/* 容器入场动画 - 从下向上滑入 */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==================== 登录头部 ==================== */
/* ==================== 登录头部区域 ==================== */
.login-header {
    text-align: center;
    margin-bottom: 45px;
}

/* Logo 图标容器 */
.login-header .logo {
    width: 80px;
    height: 80px;
    /* 金色渐变背景 */
    background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-hover));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    /* 金色发光阴影 */
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5),
                inset 0 -2px 8px rgba(0, 0, 0, 0.2);
    animation: logoFloat 3s ease-in-out infinite;
    position: relative;
}

/* Logo 光环效果 - 外圈装饰 */
.login-header .logo::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 2px solid var(--primary-gold);
    opacity: 0.3;
    animation: pulse 2s ease-in-out infinite;
}

/* Logo 浮动动画 - 轻微晃动效果 */
@keyframes logoFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(2deg); }
    75% { transform: translateY(-8px) rotate(-2deg); }
}

/* 光环脉冲动画 */
@keyframes pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.3;
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.5;
    }
}

/* Logo 图标本身 */
.login-header .logo i {
    font-size: 36px;
    color: #1a1a2e;   /* 深色图标，与金色背景形成对比 */
}

/* 页面标题 */
.login-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: var(--text-main);
    margin-bottom: 12px;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
    font-weight: 700;
    letter-spacing: 1px;
}

/* 副标题 */
.login-header p {
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 300;
}

/* ==================== 表单组样式 ==================== */
.form-group {
    margin-bottom: 26px;
}

/* 表单标签 */
.form-group label {
    display: block;
    margin-bottom: 10px;
    color: var(--text-main);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* 输入框容器 - 包含图标和输入框 */
.input-group {
    position: relative;
}

/* 输入框前置图标 */
.input-group i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-gold);
    z-index: 1;
    transition: all 0.3s ease;
}

/* 输入框样式 */
.input-group input {
    width: 100%;
    padding: 16px 18px 16px 50px;  /* 左侧留出图标空间 */
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    font-size: 15px;
    background: var(--input-bg);
    color: var(--text-main);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Poppins', sans-serif;
}

/* 输入框占位符样式 */
.input-group input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* 输入框聚焦状态 */
.input-group input:focus {
    outline: none;
    border-color: var(--primary-gold);
    /* 金色聚焦光晕 */
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15),
                0 4px 12px rgba(212, 175, 55, 0.2);
    background: var(--input-focus);
    transform: translateY(-2px);  /* 轻微上浮效果 */
}

/* 聚焦时图标变化 */
.input-group input:focus + i {
    color: var(--primary-gold-hover);
    transform: translateY(-50%) scale(1.1);
}

/* ==================== 表单选项区域 ==================== */
/* 记住我 / 忘记密码 行 */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    font-size: 14px;
}

/* 复选框组 - 记住我 */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* 复选框样式 */
.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-gold);  /* 选中颜色 */
}

/* 复选框标签文字 */
.checkbox-group label {
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.3s;
}

/* 悬停时标签变亮 */
.checkbox-group:hover label {
    color: var(--text-main);
}

/* ==================== 忘记密码链接 ==================== */
.forgot-password {
    color: var(--primary-gold);
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
}

/* 下划线动画效果 - 从左到右展开 */
.forgot-password::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;              /* 初始宽度为0 */
    height: 1px;
    background: var(--primary-gold-hover);
    transition: width 0.3s ease;
}

/* 悬停时下划线展开至100% */
.forgot-password:hover::after {
    width: 100%;
}

/* 悬停时文字颜色变化 */
.forgot-password:hover {
    color: var(--primary-gold-hover);
}

/* ==================== 登录按钮样式 ==================== */
.btn-login {
    width: 100%;
    padding: 17px;
    /* 金色渐变背景 */
    background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-hover));
    color: #1a1a2e;        /* 深色文字，与金色背景形成对比 */
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    /* 贝塞尔曲线过渡，带来更自然的动画效果 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* 金色发光阴影 */
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    position: relative;
    overflow: hidden;      /* 隐藏光效溢出部分 */
}

/* 按钮扫光效果 - 悬停时从左到右扫过 */
.btn-login::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;           /* 初始位置在按钮左侧外 */
    width: 100%;
    height: 100%;
    /* 白色渐变光带 */
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    transition: left 0.5s;
}

/* 悬停时光带从左扫到右 */
.btn-login:hover::before {
    left: 100%;
}

/* 悬停状态 - 上浮效果和增强阴影 */
.btn-login:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.6);
}

/* 按下状态 - 轻微下沉 */
.btn-login:active {
    transform: translateY(-1px);
}

/* 禁用状态 - 降低透明度 */
.btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* 禁用状态悬停 - 保持原样 */
.btn-login:disabled:hover {
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

/* ==================== 分隔线样式 ==================== */
/* "或" 分隔线，用于区分登录和注册区域 */
.divider {
    text-align: center;
    margin: 32px 0;
    position: relative;
}

/* 分隔线本体 - 渐变淡出效果 */
.divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    /* 两端透明，中间显示的渐变效果 */
    background: linear-gradient(90deg, 
        transparent, 
        var(--glass-border), 
        transparent);
}

/* 分隔线中间文字 */
.divider span {
    position: relative;
    background: var(--glass-bg);    /* 背景遮挡线条 */
    backdrop-filter: blur(10px);
    padding: 0 24px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 300;
}

/* ==================== 注册链接区域 ==================== */
/* 底部"没有账号？立即注册"文字 */
.register-link {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

/* 注册链接样式 */
.register-link a {
    color: var(--primary-gold);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    position: relative;
}

/* 下划线动画效果 */
.register-link a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-gold-hover);
    transition: width 0.3s ease;
}

/* 悬停时下划线展开 */
.register-link a:hover::after {
    width: 100%;
}

/* 悬停时文字颜色变化 */
.register-link a:hover {
    color: var(--primary-gold-hover);
}

/* ==================== 返回首页链接 ==================== */
.back-home {
    text-align: center;
    margin-top: 24px;
}

/* 返回首页按钮样式 */
.back-home a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;              /* 图标和文字间距 */
    transition: all 0.3s;
    padding: 8px 16px;
    border-radius: 8px;
}

/* 悬停效果 - 金色文字和淡金色背景 */
.back-home a:hover {
    color: var(--primary-gold);
    background: rgba(212, 175, 55, 0.1);
}

/* 返回图标过渡 */
.back-home a i {
    transition: transform 0.3s;
}

/* 悬停时箭头向左移动，暗示返回 */
.back-home a:hover i {
    transform: translateX(-4px);
}

/* ==================== 通用动画定义 ==================== */
/* 淡入动画 - 用于页面元素入场 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);  /* 从下方进入 */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== 响应式设计 - 移动端适配 ==================== */
/* 小屏幕设备 (宽度 <= 540px) */
@media (max-width: 540px) {
    body {
        padding: 16px;     /* 减小边距 */
    }
    
    /* 登录容器调整 */
    .login-container {
        padding: 40px 28px;
        border-radius: 24px;
    }
    
    /* 标题缩小 */
    .login-header h2 {
        font-size: 30px;
    }
    
    /* Logo 缩小 */
    .login-header .logo {
        width: 70px;
        height: 70px;
    }
    
    .login-header .logo i {
        font-size: 32px;
    }
    
    /* 表单选项垂直排列 */
    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    /* 按钮调整 */
    .btn-login {
        font-size: 15px;
        padding: 15px;
    }
    
    /* 背景模糊减弱，提升性能 */
    .blob {
        filter: blur(80px);
    }
}

/* 超小屏幕设备 (宽度 <= 400px) */
@media (max-width: 400px) {
    /* 进一步减小内边距 */
    .login-container {
        padding: 32px 20px;
    }
    
    /* 标题再缩小 */
    .login-header h2 {
        font-size: 26px;
    }
    
    /* 输入框紧凑化 */
    .input-group input {
        padding: 14px 16px 14px 45px;
        font-size: 14px;
    }
}

/* ==================== 加载状态动画 ==================== */
/* 按钮加载中的旋转图标 */
.btn-login i.fa-spinner {
    animation: spin 0.8s linear infinite;
}

/* 旋转动画 - 360度循环 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==================== 自定义滚动条样式 ==================== */
/* WebKit 浏览器滚动条 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;            /* 滚动条宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);  /* 半透明轨道 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: var(--primary-gold);
    border-radius: 4px;
}

/* 滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-gold-hover);
}