html {
    scroll-behavior: smooth;
}
/* 全局样式 */
body {
    margin: 0;
    padding: 0;
    font-family: 'AlibabaPuHuiTi', sans-serif;
    background-color: #1a1a1a; /* 更新背景色 */
    color: #fff;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* 动态背景光斑 */
.ambient-light {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.light-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: float-around 20s infinite alternate ease-in-out;
}

.light-orb:nth-child(1) {
    width: 400px;
    height: 400px;
    background: #F18B25;
    top: -10%;
    left: -10%;
    animation-duration: 25s;
}

.light-orb:nth-child(2) {
    width: 300px;
    height: 300px;
    background: #ff5e00;
    bottom: 20%;
    right: -5%;
    animation-delay: -5s;
    animation-duration: 18s;
}

.light-orb:nth-child(3) {
    width: 200px;
    height: 200px;
    background: #ffd700;
    top: 40%;
    left: 60%;
    animation-delay: -10s;
    opacity: 0.2;
}

@keyframes float-around {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(50px, 50px) scale(1.1); }
    100% { transform: translate(-30px, 80px) scale(0.9); }
}

main {
    padding: 0;
    margin: 0 auto;
    width: 100%;
}

/* 首页特定的边框容器调整 */
.border-container {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 恢复正常的 margin/padding */
}

/* 调整边框位置，使其贴近屏幕边缘，并为顶部导航留出空间 */
.border-frame {
    top: 5.5rem !important; /* 顶部下移，避开导航栏 */
    left: 1.5rem !important;
    right: 1.5rem !important;
    bottom: 1.5rem !important;
    z-index: 20; /* 确保边框在一些底层元素之上，但在导航之下 */
}

/* Hero Section Layout */
.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 100vh; /* 全屏高度 */
    position: relative;
    padding: 0 4rem; /* 左右留白，防止内容贴边 */
    box-sizing: border-box;
}

.hero-text {
    flex: 1;
    z-index: 10;
    min-width: 300px;
    padding-right: 2rem;
}

/* Glitch Title Style - Multi-line Safe Version */
.glitch-title {
    display: inline-block;
    /* 使用 clamp 动态调整字号：最小 3.5rem，首选 10vw，最大 8rem */
    font-size: clamp(3.5rem, 10vw, 8rem);
    line-height: 1.1; /* 稍微放松行高以适应多行 */
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin: 0 0 0.3em 0;
    position: relative;
    color: transparent;
    -webkit-text-stroke: 1px rgba(241, 139, 37, 0.5);
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0.9;
    /* 确保多行文本换行方式正确 */
    word-break: break-word;
    overflow-wrap: break-word;
}

.glitch-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #F18B25 0%, #ffcd85 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 0;
    color: transparent;
    opacity: 0.8;
    /* 混合模式产生色彩叠加效果 */
    mix-blend-mode: screen; 
    /* 移除 clip-path，改为位移和透明度闪烁，适应多行文本 */
    animation: glitch-ghost 3s infinite alternate-reverse;
    z-index: -1;
}

.glitch-title::before {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    top: 2px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.4;
    z-index: -2;
    filter: blur(2px);
    animation: glitch-blur 4s infinite alternate;
}

@keyframes glitch-ghost {
    0% { transform: translate(0,0) scale(1); opacity: 0.8; }
    50% { transform: translate(2px, 2px) scale(1.01); opacity: 0.5; }
    55% { transform: translate(-2px, -1px) scale(0.99); opacity: 0.8; }
    60% { transform: translate(1px, 3px) skew(1deg); opacity: 0.6; }
    100% { transform: translate(0,0) scale(1); opacity: 0.8; }
}

@keyframes glitch-blur {
    0% { filter: blur(2px); transform: translate(0,0); }
    50% { filter: blur(4px); transform: translate(-2px,0); }
    100% { filter: blur(2px); transform: translate(2px,2px); }
}

.hero-bubbles {
    flex: 1.5; /* Slightly wider area */
    position: relative;
    height: 650px; /* Taller container */
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Independent Orbit Wrappers */
.orbit-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    /* Each wrapper rotates from its start angle */
    animation: orbit-individual var(--duration) linear infinite;
    pointer-events: none; /* Let clicks pass through the 0x0 wrapper */
}

/* Pause ALL orbits when ANY bubble is hovered to prevent overlap */
.hero-bubbles:has(.bubble:hover) .orbit-wrapper {
    animation-play-state: paused;
}

.hero-bubbles:has(.bubble:hover) .bubble {
    animation-play-state: paused;
}

/* Bubbles Styling */
.bubble {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--size);
    height: var(--size);
    /* 
       Translate moves it out to the radius.
       Rotate corrects the orientation so image stays upright.
       We use margins to center the bubble on its pivot point at the end of the radius.
    */
    margin-top: calc(var(--size) / -2);
    margin-left: calc(var(--size) / -2);
    
    transform: translateX(var(--radius)) rotate(calc(-1 * var(--start-angle)));
    
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(241, 139, 37, 0.1), inset 0 0 20px rgba(241, 139, 37, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, width 0.3s ease, height 0.3s ease;
    
    /* Counter-rotate animation to keep upright while orbiting */
    animation: counter-orbit-individual var(--duration) linear infinite;
    
    background: #1a1a1a;
    border: 3px solid rgba(241, 139, 37, 0.5);
    display: block;
    pointer-events: auto; /* Re-enable pointer events for the bubble */
}


.bubble:hover {
    transform: translateX(var(--radius)) rotate(calc(-1 * var(--start-angle))) scale(1.2); /* Scale up in place */
    box-shadow: 0 0 30px rgba(241, 139, 37, 0.8), inset 0 0 30px rgba(241, 139, 37, 0.4);
    border-color: #F18B25;
    cursor: pointer;
}

.bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s ease;
}

.bubble:hover img {
    transform: scale(1.1);
    filter: brightness(0.4);
}

.bubble-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.bubble:hover .bubble-info {
    opacity: 1;
}

/* Fixed description area outside rotating bubbles */
.bubble-description-fixed {
    position: absolute;
    bottom: 3rem;
    right: 3rem;
    max-width: 400px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    color: #F18B25;
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    z-index: 30;
    text-align: right;
}

.bubble-description-fixed.visible {
    opacity: 1;
}

.bubble-name {
    color: #F18B25;
    font-weight: 800;
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-size: 1.2rem;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

@keyframes orbit-individual {
    from { transform: rotate(var(--start-angle)); }
    to { transform: rotate(calc(var(--start-angle) + 360deg)); }
}

@keyframes counter-orbit-individual {
    from { transform: translateX(var(--radius)) rotate(calc(-1 * var(--start-angle))); }
    to { transform: translateX(var(--radius)) rotate(calc(-1 * var(--start-angle) - 360deg)); }
}

/* Mobile Responsive for Hero */
@media (max-width: 900px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
        justify-content: flex-start;
        min-height: auto; /* 移除固定高度，让内容自然流动 */
        padding: 2rem 1rem; /* 移动端减少左右留白 */
        padding-top: 8rem; /* 为导航栏留出空间 */
    }

    .hero-text {
        padding-right: 0;
        margin-bottom: 2rem;
        margin-top: 0; /* 移除顶部margin */
        transform: none; /* 移除transform */
        width: 100%;
    }
    
    /* 移动端样式调整 */
    .glitch-title {
        /* clamp 已经处理了字号，这里只需要确保行高舒适 */
        line-height: 1.2;
    }

    .subtitle {
        margin-left: auto;
        margin-right: auto;
        padding: 0 1rem; /* 移动端文字两边留白 */
        margin-bottom: 2rem; /* 减少底部间距 */
    }
    
    /* Portfolio Card Mobile Adjustments removed as they are now handled in the main media query block above */
    
    /* 在移动端恢复 Bubbles 显示，并进行布局调整 */
    .hero-bubbles {
        display: flex; /* 恢复显示 */
        position: relative; /* 改为相对定位，占用文档流空间 */
        bottom: auto;
        left: auto;
        width: 100%;
        height: 50vh; /* 占据下半屏 */
        min-height: 400px; /* 设置最小高度 */
        transform: scale(0.7); /* 整体缩小 */
        transform-origin: center center;
        pointer-events: none; /* 防止遮挡点击 */
        z-index: 1;
        margin-top: 2rem; /* 添加上边距 */
    }

    /* 让里面的气泡能点击 */
    .hero-bubbles .bubble {
        pointer-events: auto;
    }

    /* 调整轨道中心点，使其看起来像是从底部冒出来的 */
    .orbit-wrapper {
        top: 50%; /* 轨道中心居中 */
    }
    
    /* 移动端调整 border-container */
    .border-container {
        min-height: auto; /* 移除固定最小高度 */
        justify-content: flex-start; /* 改为顶部对齐 */
    }
}

/* 标题样式 */
.title {
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-weight: 800;
    font-size: 3em;
    color: #F18B25;
    margin-bottom: 0.5em;
}

.subtitle {
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: #F18B25;
    margin-bottom: 2em;
    line-height: 1.6;
    opacity: 0.8;
    max-width: 500px;
}

.subtitle p {
    margin: 0.25em 0;
}

/* 作品集底部区域样式 - 精致卡片版 */
.portfolio-footer-section {
    padding: 0 2rem;
    margin: 6rem auto 2rem;
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
}

.portfolio-card {
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(241, 139, 37, 0.2);
    border-radius: 4px;
    padding: 2.5rem;
    position: relative;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.portfolio-card:hover {
    border-color: rgba(241, 139, 37, 0.5);
    box-shadow: 0 0 30px rgba(241, 139, 37, 0.05);
    transform: translateY(-2px);
}

/* 装饰性角标 */
.portfolio-card::before,
.portfolio-card::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(241, 139, 37, 0.6);
    transition: all 0.4s ease;
    pointer-events: none; /* 确保不会阻止点击事件 */
    z-index: 0; /* 确保在内容之下 */
}

.portfolio-card::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}

.portfolio-card::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

.portfolio-card:hover::before,
.portfolio-card:hover::after {
    width: 100%;
    height: 100%;
    border-color: rgba(241, 139, 37, 0.3);
    opacity: 0; /* Hover时扩散消失的效果 */
}

/* 头部区域 */
.portfolio-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    opacity: 0.8;
    position: relative;
    z-index: 1; /* 确保在伪元素之上 */
}

.portfolio-label {
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #F18B25;
    text-transform: uppercase;
    white-space: nowrap;
}

.portfolio-line {
    height: 1px;
    background: linear-gradient(90deg, rgba(241, 139, 37, 0.5) 0%, rgba(241, 139, 37, 0) 100%);
    flex-grow: 1;
}

/* 主体区域 */
.portfolio-main {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1; /* 确保在伪元素之上 */
}

.portfolio-download-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2.5rem;
    background: rgba(241, 139, 37, 0.05);
    border: 1px solid rgba(241, 139, 37, 0.4);
    color: #F18B25;
    text-decoration: none;
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.05em;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    z-index: 2; /* 确保按钮在最上层，可点击 */
    pointer-events: auto; /* 明确启用点击事件 */
    cursor: pointer;
}

.portfolio-download-btn:hover {
    background: rgba(241, 139, 37, 0.9);
    color: #1a1a1a;
    box-shadow: 0 0 20px rgba(241, 139, 37, 0.4);
    border-color: transparent;
}

.portfolio-download-btn .download-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.portfolio-download-btn:hover .download-icon {
    transform: translateY(2px);
}

/* 底部信息区域 */
.portfolio-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
    position: relative;
    z-index: 1; /* 确保在伪元素之上 */
}

.copyright-badge a {
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(241, 139, 37, 0.85);
    border: 1px solid rgba(241, 139, 37, 0.5);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(241, 139, 37, 0.08);
}

.copyright-badge a:hover {
    border-color: rgba(241, 139, 37, 0.9);
    color: rgba(241, 139, 37, 1);
    background: rgba(241, 139, 37, 0.15);
    box-shadow: 0 0 10px rgba(241, 139, 37, 0.2);
}

.copyright-text {
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-size: 0.8rem;
    color: rgba(241, 139, 37, 0.7);
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .portfolio-footer-section {
        padding: 0 1rem;
        margin: 4rem auto 1rem;
    }
    
    .portfolio-card {
        padding: 1.5rem;
        gap: 1.5rem;
    }
    
    .portfolio-download-btn {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* 按钮样式 */
.works-button {
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-weight: 700;
    display: inline-block;
    background-color: #F18B25;
    color: #252525;
    padding: 0.8em 2em;
    text-decoration: none;
    border-radius: 50px; /* 圆角按钮 */
    margin-top: 2em;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(241, 139, 37, 0.3);
}

.works-button:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(241, 139, 37, 0.5);
}

/* 页脚样式 */
footer {
    font-family: 'AlibabaPuHuiTi', sans-serif;
    background-color: #212121;
    color: #F18B25;
    text-align: center;
    padding: 1em 0;
    width: 100%;
    margin-top: 2em;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
}

footer p {
    margin: 0.5em 0;
    font-weight: 400;
}

footer .divider {
    width: 50px;
    height: 1px;
    background-color: rgba(241, 139, 37, 0.3);
    margin: 0.8em auto;
}

footer a {
    color: #F18B25;
    text-decoration: none;
    font-weight: 400;
}

footer a:hover {
    text-decoration: underline;
}

footer .contact {
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-weight: 400;
}

footer .contact a {
    color: #F18B25;
    text-decoration: none;
}

footer .contact a:hover {
    text-decoration: underline;
}

footer .contact a[href^="mailto:"] {
    cursor: pointer;
}

footer .contact a[href^="mailto:"]:hover {
    text-decoration: underline;
}

footer .contact a[href^="https://beian.miit.gov.cn"] {
    cursor: pointer;
}

footer .contact a[href^="https://beian.miit.gov.cn"]:hover {
    text-decoration: underline;
}

/* 移除所有超链接的下划线 */
a {
    text-decoration: none;
}

.embodied-design {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.framework-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}

.framework-image-container {
    width: 100%;
    text-align: center;
}

.framework-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.framework-image:hover {
    transform: scale(1.02);
}

.framework-description {
    max-width: 800px;
    text-align: left;
}

.framework-description h2 {
    text-align: left;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: #F18B25;
}

.framework-description p {
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #F18B25;
}

.framework-description ul {
    list-style-type: none;
    padding: 0;
}

.framework-description li {
    margin-bottom: 0.4rem;
    padding-left: 1.2rem;
    position: relative;
    font-size: 0.85rem;
    color: #F18B25;
}

.framework-description li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #F18B25;
}

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    overflow: auto;
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.close-modal {
    position: absolute;
    right: 25px;
    top: 15px;
    color: #f1f1f1;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover {
    color: #F18B25;
}

@media (min-width: 768px) {
    .framework-container {
        flex-direction: row-reverse;
        align-items: flex-start;
        justify-content: space-between;
    }
    
    .framework-image-container {
        flex: 2;
        padding-left: 2rem;
    }
    
    .framework-description {
        flex: 1;
    }
}

/* 近期作品回顾部分样式 */
.recent-works {
    padding: 6rem 2rem;
    margin: 4rem 0;
    position: relative;
}

.recent-works-container {
    max-width: 1200px;
    margin: 0 auto;
}

.recent-works h2 {
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    color: transparent;
    -webkit-text-stroke: 1px rgba(241, 139, 37, 0.5);
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.recent-works h2::after {
    content: "Recent Works";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #F18B25 0%, #ffcd85 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 0;
    color: transparent;
    opacity: 0.8;
}

.recent-works-video {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.recent-works-video .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 比例 */
    height: 0;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08); /* 毛玻璃边框风格 */
}

.recent-works-video .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.recent-works-video h3 {
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: #F18B25;
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.recent-works-video + .recent-works-video {
    margin-top: 3rem;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .recent-works {
        padding: 2rem 1rem;
        margin: 2rem 0;
    }
    
    .recent-works h2 {
        font-size: 28px;
        margin-bottom: 2rem;
    }
}

/* DevLog 预览部分样式 */
.devlog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
    gap: 2rem;
    margin-top: 2rem;
    justify-content: start;
}

#devlog .collection-item {
    min-height: 250px;
}