/* 
 * 响应式样式
 * 包含网站在不同设备尺寸下的样式调整
 * 主要断点:
 * - 大型设备: >1200px
 * - 中型设备: 992px-1200px
 * - 平板设备: 768px-991px
 * - 移动设备: 576px-767px
 * - 小型移动设备: <576px
 * - 极小型移动设备: <400px
 */

/*=====================================================
  大型设备 (大于1200px)
=====================================================*/
@media (min-width: 1201px) {
    .container {
        max-width: 1140px;
    }
    
    .hero-title {
        font-size: 4rem;
    }
    
    .hero-subtitle {
        font-size: 1.8rem;
    }
}

/*=====================================================
  中型设备 (992px-1200px)
=====================================================*/
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
    
    .features-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*=====================================================
  平板设备 (768px-991px)
=====================================================*/
@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.4rem;
    }
    
    /* 布局调整 */
    .features-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .feature-card {
        padding: 20px;
    }
    
    .skills-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/*=====================================================
  移动设备 (576px-767px)
=====================================================*/
@media (max-width: 767px) {
    /* 容器调整 */
    .container {
        max-width: 540px;
    }
    
    /* 导航栏移动端适配 */
    .navbar-container {
        flex-direction: column;
        padding: 10px;
    }
    
    .nav-links {
        display: none;
        width: 100%;
        text-align: center;
        margin-top: 15px;
        position: static;
        transform: none;
        left: auto;
    }
    
    .nav-links.active {
        display: flex;
        flex-direction: column;
        animation: fadeIn 0.3s ease-in-out forwards;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .nav-links li {
        margin: 10px 0;
    }
    
    /* 移动端导航活动链接样式 */
    .nav-links a.active {
        color: var(--primary-color) !important;
        font-weight: 600 !important;
        position: relative;
    }
    
    .nav-links a.active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100% !important;
        height: 2px !important;
        background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
        opacity: 0.8;
    }
    
    /* 黑暗模式下移动端导航活动链接 */
    body.dark-theme .nav-links a.active {
        color: #3498db !important;
        text-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
    }
    
    body.dark-theme .nav-links a.active::after {
        background: linear-gradient(to right, #3498db, #2ecc71) !important;
        box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
    }
    
    /* 移动菜单按钮 */
    .mobile-only {
        display: block !important;
        will-change: transform;
        transition: transform var(--transition-speed);
    }
    
    /*--------------------------------------
      英雄区域移动端优化
    --------------------------------------*/
    /* 禁用动画效果 */
    .hero {
        animation: none !important;
    }
    
    /* 英雄内容区域样式 */
    .hero-content {
        padding: 20px;
        transform: none !important;
        animation: none !important;
        box-shadow: none !important;
        background: rgba(255, 255, 255, 0.7) !important;
    }
    
    /* 黑暗模式下的磨砂玻璃效果 */
    body.dark-theme .hero-content {
        background: rgba(40, 45, 50, 0.8) !important; 
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* 标题样式 */
    .hero-title {
        font-size: 2.5rem;
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* 黑暗模式下的标题文字增强可见性 */
    body.dark-theme .hero-title {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
        color: #ecf0f1 !important;
    }
    
    .hero-title .animated-text {
        animation: none !important;
        transform: none !important;
        display: inline-block;
    }
    
    /* 副标题样式 */
    .hero-subtitle {
        font-size: 1.2rem;
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* 黑暗模式下的副标题文字增强可见性 */
    body.dark-theme .hero-subtitle {
        color: #ecf0f1 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* 隐藏动画元素 */
    .animated-bg {
        display: none !important;
    }
    
    .floating-element {
        display: none !important;
    }
    
    /*--------------------------------------
      移动端打字机效果优化
    --------------------------------------*/
    /* 移动端专用动画 */
    @keyframes mobileBlink {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
    }
    
    /* 打字机基础样式 */
    .typewriter {
        position: relative;
        display: inline-block;
        min-width: 1em;
        white-space: nowrap;
    }
    
    /* 打字机光标 */
    .typewriter::after {
        content: '|';
        position: absolute;
        display: inline-block;
        right: -0.1em;
        animation: mobileBlink 0.7s infinite;
        color: var(--primary-color);
        font-weight: bold;
        font-size: 1.2em;
        line-height: 1;
    }
    
    /* 打字机容器 */
    .typewriter-container {
        display: inline-block;
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        padding: 2px 6px;
        min-width: 10ch;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    /* 打字机文本 */
    .typewriter-text {
        font-weight: 500;
        color: #333;
    }
    
    /* 黑暗模式下的打字机样式增强 */
    body.dark-theme .typewriter-container {
        background-color: rgba(60, 70, 80, 0.5) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    body.dark-theme .typewriter::after {
        color: #2ecc71 !important;
        text-shadow: 0 0 5px rgba(46, 204, 113, 0.8) !important;
    }
    
    body.dark-theme .typewriter-text {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
        font-weight: 600 !important;
    }
    
    /*--------------------------------------
      按钮和布局调整
    --------------------------------------*/
    /* 按钮容器 */
    .hero-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        opacity: 1;
        animation-play-state: running;
        animation-fill-mode: forwards;
    }
    
    /* 按钮样式 */
    .btn {
        width: auto;
        min-width: 120px;
        font-size: 0.9rem;
        padding: 8px 15px;
    }
    
    /* 特性和技能容器 */
    .features-container {
        grid-template-columns: 1fr;
    }
    
    .skills-container {
        grid-template-columns: 1fr;
    }
    
    /* 标题 */
    .section-title {
        font-size: 2rem;
    }
    
    /* 社交图标 */
    .social-icons {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    
    /* 通知提示 */
    .toast {
        padding: 10px 20px;
        font-size: 0.9rem;
        max-width: 85%;
    }
    
    .toast.show {
        bottom: 30px;
    }
}

/*=====================================================
  小型移动设备 (小于576px)
=====================================================*/
@media (max-width: 575px) {
    /* 容器调整 */
    .container {
        padding: 0 15px;
    }
    
    /* 英雄区域调整 */
    .hero-title {
        font-size: 2rem;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    .hero-title .animated-text {
        animation: none !important;
        transform: none !important;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    .hero-buttons {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
    
    .hero-content {
        padding: 15px;
        max-width: 90%;
        transform: none !important;
        animation: none !important;
        background: rgba(255, 255, 255, 0.7) !important;
    }
    
    /* 小屏幕黑暗模式下的特殊处理 */
    body.dark-theme .hero-content {
        background: rgba(40, 45, 50, 0.85) !important;
    }
    
    /* 特性卡片调整 */
    .feature-icon {
        font-size: 2.5rem;
    }
    
    .feature-title {
        font-size: 1.3rem;
    }
    
    /* 技能区域调整 */
    .skill-category {
        padding: 20px 15px;
    }
    
    .skill-category h3 {
        font-size: 1.2rem;
    }
    
    .skill-category h3 i {
        font-size: 1.4rem;
    }
    
    /* 社交图标调整 */
    .social-icons {
        margin-top: 0;
    }
    
    .social-icon {
        margin-left: 10px;
        font-size: 1.2rem;
    }
    
    /* 通知提示调整 */
    .toast {
        padding: 10px 20px;
        font-size: 0.9rem;
        max-width: 85%;
    }
    
    .toast.show {
        bottom: 30px;
    }
    
    /* 动画元素微调 */
    .floating-element {
        opacity: 0.2;
    }
}

/*=====================================================
  极小型移动设备 (小于400px)
=====================================================*/
@media (max-width: 400px) {
    /* 按钮垂直排列 */
    .hero-buttons {
        flex-direction: column;
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* 按钮占满宽度 */
    .btn {
        width: 100%;
        margin-bottom: 5px;
    }
    
    /* 字体大小缩小 */
    .hero-title {
        font-size: 1.8rem;
        animation: none !important;
        transform: none !important;
    }
    
    .hero-title .animated-text {
        animation: none !important;
        transform: none !important;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
        animation: none !important;
        transform: none !important;
    }
    
    /* 英雄内容区域调整 */
    .hero-content {
        padding: 12px;
        max-width: 95%;
        transform: none !important;
        animation: none !important;
    }
    
    /* 极小屏幕黑暗模式下的特殊处理 */
    body.dark-theme .hero-content {
        background: rgba(40, 45, 50, 0.9) !important;
        padding: 15px !important;
    }
    
    /* 保持打字机效果 */
    .typewriter {
        font-size: 0.9rem;
    }
    
    .typewriter-container {
        min-width: 8ch;
    }
}

/*=====================================================
  通用响应式组件
=====================================================*/
/* 移动端菜单按钮样式 */
.mobile-only {
    display: none;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block !important;
        will-change: transform;
        transition: transform var(--transition-speed);
    }
}

/* 移动端菜单图标变换 */
#menu-toggle.active i:before {
    content: "\f00d"; /* 叉号图标 */
}

/* 滚动导航栏样式 */
.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

body.dark-theme .navbar.scrolled {
    background-color: rgba(26, 28, 32, 0.95);
}

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

/*=====================================================
  动画效果
=====================================================*/
/* 滚动动画类 */
.animate-on-scroll.hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/*=====================================================
  黑暗模式特定样式
=====================================================*/
/* 黑暗模式下按钮的样式调整 */
body.dark-theme .btn-outline {
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-theme .btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}