/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #000;
    margin: 0;
    padding: 0;
}

/* 基础样式 */
body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
    background-color: #000;
    margin: 0;
    padding: 0;
}

/* 浏览器仍在读取页面资源时的项目切换提示 */
.project-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 24px;
    color: #111111;
    background: #f7f7f5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 320ms;
}

.project-loading-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 160ms ease,
        visibility 0s linear 0s;
}

.project-loading-panel {
    width: min(430px, calc(100vw - 48px));
}

.project-loading-label {
    margin: 0 0 1.55rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.19em;
}

.project-loading-copy {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 0.9rem;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    font-weight: 500;
    letter-spacing: 0.035em;
}

.project-loading-state {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.project-loading-track {
    position: relative;
    width: 100%;
    height: 2px;
    overflow: hidden;
    background: rgba(17, 17, 17, 0.14);
}

.project-loading-scan {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background: #111111;
    transform: scaleX(var(--project-loading-progress, 0));
    transform-origin: left center;
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .project-loading-overlay {
        transition-duration: 0.01ms;
    }

    .project-loading-scan {
        transition-duration: 0.01ms;
    }
}

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



/* 主视觉区域样式 */
.hero {
    height: 100vh;
    background:
        radial-gradient(ellipse 68% 74% at 73% 13%, rgba(79, 34, 55, 0.30) 0%, rgba(29, 14, 24, 0.14) 42%, transparent 72%),
        radial-gradient(ellipse 72% 82% at 12% 88%, rgba(24, 69, 45, 0.34) 0%, rgba(8, 31, 20, 0.18) 44%, transparent 74%),
        linear-gradient(128deg, #020504 0%, #07110d 42%, #0d080d 72%, #010302 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding: 0 40px;
    z-index: 1000;
    background-color: #020504;
}

.hero-atmosphere {
    position: absolute;
    inset: -5%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
}

.atmosphere-haze,
.atmosphere-light-beam,
.atmosphere-foliage {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
}

.atmosphere-haze {
    border-radius: 50%;
    mix-blend-mode: screen;
}

.atmosphere-haze-rose {
    top: -31%;
    right: 5%;
    width: 64vw;
    height: 67vw;
    max-width: 1180px;
    max-height: 1180px;
    background: radial-gradient(ellipse at center, rgba(113, 49, 75, 0.20) 0%, rgba(61, 25, 43, 0.10) 37%, transparent 70%);
    opacity: 0.56;
    animation: greenhouseRoseBreath 17s ease-in-out infinite alternate;
}

.atmosphere-haze-moss {
    left: -19%;
    bottom: -42%;
    width: 72vw;
    height: 78vw;
    max-width: 1320px;
    max-height: 1320px;
    background: radial-gradient(ellipse at center, rgba(42, 101, 65, 0.20) 0%, rgba(16, 54, 33, 0.11) 40%, transparent 71%);
    opacity: 0.82;
    animation: greenhouseMossBreath 21s ease-in-out infinite alternate;
}

/* 左上至右下的温室体积光，置于粒子花朵后方，让粒子边缘自然受光。 */
.atmosphere-light-beam {
    left: -22vw;
    top: -43vh;
    z-index: 1;
    width: 138vw;
    height: 56vh;
    min-height: 360px;
    transform-origin: 0 50%;
    transform: rotate(25deg);
    background: linear-gradient(90deg,
        rgba(255, 244, 234, 0) 0%,
        rgba(255, 244, 234, 0.050) 11%,
        rgba(255, 238, 229, 0.135) 27%,
        rgba(255, 229, 220, 0.310) 50%,
        rgba(218, 232, 211, 0.500) 66%,
        rgba(225, 237, 216, 0.250) 80%,
        rgba(225, 237, 216, 0.070) 92%,
        rgba(225, 237, 216, 0) 100%);
    -webkit-mask-image: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.10) 13%,
        rgba(0, 0, 0, 0.68) 35%,
        #000 50%,
        rgba(0, 0, 0, 0.68) 65%,
        rgba(0, 0, 0, 0.10) 87%,
        transparent 100%);
    mask-image: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.10) 13%,
        rgba(0, 0, 0, 0.68) 35%,
        #000 50%,
        rgba(0, 0, 0, 0.68) 65%,
        rgba(0, 0, 0, 0.10) 87%,
        transparent 100%);
    filter: blur(22px);
    mix-blend-mode: screen;
    opacity: 0.78;
    animation: greenhouseLightBreathe 12s ease-in-out infinite alternate;
}

.atmosphere-light-beam::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.atmosphere-light-beam::after {
    inset: 12% 4% 10%;
    background:
        radial-gradient(ellipse 31% 25% at 54% 50%, rgba(255, 247, 238, 0.16), transparent 80%),
        radial-gradient(ellipse 28% 22% at 78% 51%, rgba(225, 237, 216, 0.13), transparent 82%);
    opacity: 0.48;
}

.atmosphere-foliage {
    width: min(42vw, 760px);
    height: 112%;
    top: -6%;
    opacity: 0.62;
    mix-blend-mode: screen;
}

.atmosphere-foliage-left {
    left: -11%;
    background:
        radial-gradient(ellipse 38% 14% at 27% 14%, rgba(62, 96, 68, 0.19) 0 38%, transparent 69%),
        radial-gradient(ellipse 40% 15% at 51% 29%, rgba(40, 83, 55, 0.18) 0 39%, transparent 70%),
        radial-gradient(ellipse 44% 16% at 24% 49%, rgba(53, 91, 61, 0.20) 0 37%, transparent 70%),
        radial-gradient(ellipse 41% 15% at 55% 68%, rgba(32, 76, 49, 0.18) 0 39%, transparent 70%),
        radial-gradient(ellipse 42% 15% at 29% 86%, rgba(57, 95, 63, 0.17) 0 38%, transparent 72%),
        linear-gradient(103deg, transparent 47%, rgba(47, 86, 56, 0.15) 49%, rgba(47, 86, 56, 0.15) 50%, transparent 52%);
    transform: translate3d(var(--foliage-left-x, 0px), var(--foliage-left-y, 0px), 0) rotate(-10deg) scale(1.08);
    animation: greenhouseLeavesLeft 24s ease-in-out infinite alternate;
}

.atmosphere-foliage-right {
    right: -12%;
    background:
        radial-gradient(ellipse 41% 14% at 72% 11%, rgba(73, 89, 66, 0.15) 0 38%, transparent 70%),
        radial-gradient(ellipse 43% 15% at 46% 31%, rgba(46, 76, 55, 0.16) 0 39%, transparent 71%),
        radial-gradient(ellipse 45% 16% at 77% 49%, rgba(72, 91, 64, 0.17) 0 37%, transparent 70%),
        radial-gradient(ellipse 40% 15% at 49% 70%, rgba(42, 76, 53, 0.16) 0 39%, transparent 71%),
        radial-gradient(ellipse 42% 15% at 74% 88%, rgba(66, 88, 61, 0.15) 0 38%, transparent 72%),
        linear-gradient(77deg, transparent 47%, rgba(54, 80, 57, 0.13) 49%, rgba(54, 80, 57, 0.13) 50%, transparent 52%);
    transform: translate3d(var(--foliage-right-x, 0px), var(--foliage-right-y, 0px), 0) rotate(9deg) scale(1.10);
    animation: greenhouseLeavesRight 28s ease-in-out infinite alternate;
}

.hero-particle-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

/* 首页边缘 WebGL 液体折射：粒子画面作为纹理，中央区域由遮罩保护。 */
.hero-rain-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    mix-blend-mode: screen;
    filter: grayscale(1) saturate(0) contrast(1.18) brightness(1.08);
    -webkit-mask-image: radial-gradient(ellipse 64% 62% at 52% 50%, transparent 0 58%, rgba(0, 0, 0, 0.12) 72%, #000 100%);
    mask-image: radial-gradient(ellipse 64% 62% at 52% 50%, transparent 0 58%, rgba(0, 0, 0, 0.12) 72%, #000 100%);
    transition: opacity 3200ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 3200ms;
}

.hero-rain-canvas.is-liquid-ready {
    opacity: 0.62;
    visibility: visible;
    animation: liquidEdgeReveal 4800ms linear both;
    transition: visibility 0s linear 0s;
}

@keyframes liquidEdgeReveal {
    0% { opacity: 0; filter: grayscale(1) saturate(0) contrast(1.02) brightness(0.56); }
    20% { opacity: 0.07; filter: grayscale(1) saturate(0) contrast(1.04) brightness(0.66); }
    45% { opacity: 0.19; filter: grayscale(1) saturate(0) contrast(1.08) brightness(0.78); }
    72% { opacity: 0.38; filter: grayscale(1) saturate(0) contrast(1.13) brightness(0.92); }
    100% { opacity: 0.62; filter: grayscale(1) saturate(0) contrast(1.18) brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-rain-canvas {
        display: none;
    }
}

.hero.particles-ready {
    background-color: #020504;
}

.hero.particles-ready::before {
    background:
        radial-gradient(circle at 53% 48%, transparent 0 29%, rgba(0, 0, 0, 0.08) 58%, rgba(0, 0, 0, 0.30) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.26) 0%, transparent 30% 71%, rgba(0, 0, 0, 0.22) 100%);
}

@keyframes greenhouseRoseBreath {
    from { transform: translate3d(-1.4%, -0.8%, 0) scale(0.96); opacity: 0.60; }
    to { transform: translate3d(2.2%, 1.4%, 0) scale(1.07); opacity: 0.88; }
}

@keyframes greenhouseMossBreath {
    from { transform: translate3d(-1%, 1.4%, 0) scale(1.02); opacity: 0.68; }
    to { transform: translate3d(2.6%, -1.2%, 0) scale(1.09); opacity: 0.90; }
}

@keyframes greenhouseLightBreathe {
    from { transform: rotate(24.7deg) translate3d(-0.3%, -0.4%, 0); opacity: 0.46; }
    to { transform: rotate(25.3deg) translate3d(0.5%, 0.5%, 0); opacity: 0.60; }
}

@keyframes greenhouseLeavesLeft {
    from { translate: -5px 0; opacity: 0.50; }
    to { translate: 8px 0; opacity: 0.68; }
}

@keyframes greenhouseLeavesRight {
    from { translate: 6px 0; opacity: 0.48; }
    to { translate: -9px 0; opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
    .atmosphere-haze,
    .atmosphere-light-beam,
    .atmosphere-foliage {
        animation: none;
    }

    .atmosphere-light-beam {
        opacity: 0.54;
    }
}

/* file:// 本地打开时的无跨域点云降级层 */
.hero.particles-css-fallback {
    background-image: none;
    background-color: #071018;
}

.hero.particles-css-fallback::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('./images/zipai.jpg') center center / cover no-repeat;
    -webkit-mask-image: radial-gradient(circle, #000 0 2.15px, transparent 2.35px);
    mask-image: radial-gradient(circle, #000 0 2.15px, transparent 2.35px);
    -webkit-mask-size: 8px 8px;
    mask-size: 8px 8px;
    -webkit-mask-position: center;
    mask-position: center;
    animation: localParticleGather 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    pointer-events: none;
}

@keyframes localParticleGather {
    0% {
        opacity: 0;
        filter: blur(8px) saturate(0.65);
        transform: scale(1.1);
    }
    45% {
        opacity: 0.58;
    }
    100% {
        opacity: 1;
        filter: blur(0) saturate(1);
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero.particles-css-fallback::after {
        animation: none;
    }
}

/* 左侧图片区域样式（带Contact文字覆盖） */
.hero-image-section {
    flex: 0 0 350px;
    z-index: 2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 100px;
}

.hero-image-container {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    width: 300px;
    height: 600px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: fadeInUp 1.5s ease-out 0.5s both;
}

.hero-image-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
    animation: imageScroll 20s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;

}

.hero-image-container:hover .hero-image {
    animation: jellyEffect 0.6s ease-in-out forwards;
    filter: brightness(1.1) contrast(1.05);
}

@keyframes imageScroll {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes jellyEffect {
    0% {
        transform: scale(1.08) translateY(-5px);
    }
    25% {
        transform: scale(1.12) translateY(-8px);
    }
    50% {
        transform: scale(1.15) translateY(-10px);
    }
    75% {
        transform: scale(1.12) translateY(-8px);
    }
    100% {
        transform: scale(1.08) translateY(-5px);
    }
}

/* 板块背景动画 */
@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(5px, 5px);
    }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}



@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* About Me 右侧边缘触发与滑出面板 */
.about-trigger {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 5;
    width: 42px;
    padding: 0;
    border: 0;
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.42);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.25));
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    backdrop-filter: blur(5px);
    border-radius: 0;
    transition: width 0.3s ease, background-color 0.3s ease, opacity 0.2s ease;
}

.about-trigger span {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.about-trigger:hover,
.about-trigger:focus-visible {
    width: 48px;
    background: rgba(0, 0, 0, 0.72);
    outline: 1px solid rgba(255, 255, 255, 0.72);
    outline-offset: -1px;
}

.contact-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.1) 30%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0.4) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 2rem;
    border-radius: 25px;
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
    animation: none;
}


.contact-title {
    color: white;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    animation: fadeInUp 1s ease-out 1s both;
}

.self-intro {
    margin-bottom: 2rem;
    text-align: center;
    animation: fadeInUp 1s ease-out 1.2s both;
}

.intro-text, .intro-text-cn {
    color: white;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 0.8rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.intro-text-container {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    cursor: none;
    max-height: 300px;
    padding-right: 10px;
}

/* 自定义滚动条样式 */
.intro-text-container::-webkit-scrollbar {
    width: 6px;
}

.intro-text-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
}

.intro-text-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.38);
    border-radius: 3px;
}

.intro-text-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.56);
}

.intro-text {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

.intro-text-cn {
    font-size: 0.8rem;
    opacity: 0.9;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    margin-top: 2rem;
    position: relative;
    z-index: 4;
    animation: fadeInUp 1s ease-out 1.4s both;
}

.contact-overlay .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.2rem;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: white !important;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    font-weight: 400;
    letter-spacing: 0.5px;
}

.contact-overlay .social-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.social-text {
    font-size: 0.85rem;
    font-weight: 400;
}

/* 内容显示区域样式 */
.content-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 999;
    overflow-y: auto;
    display: none;
}

.content-area.active {
    display: block;
}

/* 项目页面样式 */
.project-page {
    display: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scroll-behavior: auto;
}

.project-page.active {
    display: block;
}

/* 返回主页按钮样式 */
.back-to-home {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-size: 14px;
    transition: all 0.3s ease;
    display: none;
}

.back-to-home.active {
    display: block;
}

.back-to-home:hover {
    background: rgba(0, 0, 0, 1);
    transform: translateY(-2px);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    top: -1.5rem;
    z-index: 2;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82), 0 0 18px rgba(0, 0, 0, 0.48);
    animation: fadeInUp 1s ease-out 0.5s both;
    text-align: center;
    max-width: 500px;
    flex: 1;
    margin-left: 50px;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    animation: slideInDown 1.2s ease-out 0.7s both;
}

.hero-subtitle-cn {
    font-size: 1.5rem;
    font-weight: 300;
    opacity: 0.8;
    animation: slideInUp 1.4s ease-out 0.9s both;
    margin-bottom: 2rem;
    font-style: italic;
}

.hero-navigation {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.38);
}

.hero-nav-item {
    position: relative;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.3s ease, padding-left 0.3s ease, background-color 0.3s ease;
    padding: 0.95rem 3rem 0.95rem 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hero-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.95);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-nav-item::after {
    content: '↗';
    position: absolute;
    top: 50%;
    right: 0.2rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1rem;
    font-weight: 300;
    transform: translateY(-50%);
    transition: color 0.3s ease, transform 0.3s ease;
}

.hero-nav-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.035);
    padding-left: 0.75rem;
    box-shadow: none;
}

.hero-nav-item:hover::before {
    width: 100%;
}

.hero-nav-item:hover::after {
    color: #ffffff;
    transform: translate(0.2rem, calc(-50% - 0.2rem));
}

.hero-nav-item:active {
    padding-left: 0.5rem;
}

.nav-text-en {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.01em;
}

.nav-text-cn {
    font-size: 0.9rem;
    font-weight: 300;
    opacity: 0.8;
    color: rgba(255, 255, 255, 0.8);
}

.hero-subtitle-en {
    font-size: 1.2rem;
    font-weight: 300;
    opacity: 0.8;
    animation: slideInUp 1.6s ease-out;
    margin-bottom: 2rem;
    font-style: italic;
}

.hero-info {
    position: relative;
    margin-top: 2rem;
    animation: fadeInUp 1.8s ease-out 1.1s both;
}

/* 首页右侧独立实习导航 */
.internship-navigation {
    position: fixed;
    top: 50%;
    right: clamp(5rem, 9vw, 9rem);
    z-index: 2;
    width: min(320px, 26vw);
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82), 0 0 18px rgba(0, 0, 0, 0.48);
    text-align: left;
    transform: translateY(-50%);
    animation: internshipFadeInDown 1s ease-out 0.5s both;
}

.internship-portfolio-heading {
    margin-bottom: 2.1rem;
    text-align: left;
}

.internship-portfolio-title {
    margin: 0 0 0.25rem;
    color: #ffffff;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: clamp(3.3rem, 4vw, 4.6rem);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: -0.018em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82), 0 0 18px rgba(0, 0, 0, 0.48);
}

.internship-portfolio-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-family: 'Noto Serif SC', 'STSong', 'SimSun', serif;
    font-size: 1.08rem;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0.14em;
}

.text-roll-enhanced {
    display: inline-block;
}

.text-roll-char {
    position: relative;
    display: inline-block;
    width: auto;
    perspective: 10000px;
    transform-style: preserve-3d;
    vertical-align: baseline;
}

.text-roll-face {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.text-roll-face-out {
    transform-origin: 50% 25%;
    animation: textRollOutLoop var(--roll-cycle, 5200ms) cubic-bezier(0.55, 0, 1, 0.45) infinite both;
    animation-delay: calc(var(--roll-start, 0ms) + var(--roll-index) * var(--roll-step, 60ms));
}

.text-roll-face-in {
    transform-origin: 50% 100%;
    animation: textRollInLoop var(--roll-cycle, 5200ms) cubic-bezier(0.55, 0, 1, 0.45) infinite both;
    animation-delay: calc(var(--roll-start, 0ms) + var(--roll-index) * var(--roll-step, 60ms));
}

.text-roll-spacer {
    visibility: hidden;
}

@keyframes textRollOutLoop {
    0% {
        transform: rotateX(0deg);
    }
    9.6%,
    100% {
        transform: rotateX(90deg);
    }
}

@keyframes textRollInLoop {
    0%,
    3.8% {
        transform: rotateX(90deg);
    }
    13.4%,
    99.9% {
        transform: rotateX(0deg);
    }
    100% {
        transform: rotateX(90deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .text-roll-face-out {
        display: none;
        animation: none;
    }

    .text-roll-face-in {
        transform: none;
        animation: none;
    }
}

@keyframes internshipFadeInDown {
    from {
        opacity: 0;
        transform: translateY(calc(-50% - 50px));
    }
    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}

.internship-nav-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.internship-nav-title {
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.internship-nav-title-cn {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.82rem;
    font-weight: 300;
}

.internship-company-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.9rem 2.5rem 0.9rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.internship-company-item.is-upcoming {
    color: rgba(255, 255, 255, 0.62);
}

.internship-company-item.is-upcoming .nav-text-en,
.internship-company-item.is-upcoming .nav-text-cn {
    color: inherit;
}

.internship-company-item.is-upcoming::after {
    content: 'COMING SOON';
    position: absolute;
    top: 50%;
    right: 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    transform: translateY(-50%);
}

.hero-name {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-name-en {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.015em;
}

.hero-name-cn {
    font-family: 'Noto Serif SC', 'STSong', 'SimSun', serif;
    font-size: 1.62rem;
    font-weight: 400;
    letter-spacing: 0.07em;
}

.hero-education {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0.01em;
    margin-bottom: 0.45rem;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-education-cn {
    font-family: 'Noto Serif SC', 'STSong', 'SimSun', serif;
    font-size: 1.02rem;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.08em;
    opacity: 0.8;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-education-entry + .hero-education-entry {
    position: absolute;
    top: 100%;
    left: 50%;
    width: min(650px, calc(100vw - 2rem));
    margin-top: 0.45rem;
    transform: translateX(-50%);
}

/* 内容板块通用样式 */
.section {
    padding: 5rem 0;
    position: relative;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #ffffff;
    position: relative;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #ffffff, #cccccc);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* 各板块特色背景 */
.animation-section {
    background: url('./images/3.jpg') center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.animation-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.8) 50%,
        rgba(0, 0, 0, 0.4) 75%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 1;
}

.animation-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 250px 90px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 300px 120px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 350px 150px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 400px 180px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 50px 10px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 120px 15px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 180px 25px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 280px 35px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 380px 45px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 30px 5px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 80px 8px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 150px 12px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 220px 18px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 320px 22px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 420px 28px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 70px 3px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 140px 7px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 210px 11px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 290px 16px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 370px 20px, rgba(255, 255, 255, 1.0), transparent);
    background-repeat: repeat;
    background-size: 500px 300px;
    animation: twinkle 4s ease-in-out infinite;
    z-index: 1.5;
}

.animation-section .container {
    position: relative;
    z-index: 2;
}

.film-section {
    background: url('./images/3.jpg') center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.film-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1;
}

.film-section .container {
    position: relative;
    z-index: 2;
}

.modeling-section {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.internship-section {
    background: url('./images/shun1.jpg') center center;
    background-color: #527da8;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    position: relative;
    isolation: isolate;
    transform: none !important;
}

.internship-section.has-water-ripple {
    background-image: none;
}

.sf-water-ripple-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
    contain: paint;
}

.sf-water-ripple-layer.is-ready {
    opacity: 1;
}

.sf-water-ripple-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.internship-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(9, 22, 35, 0.12) 0%, rgba(4, 10, 16, 0.32) 100%);
    z-index: 1;
}



.internship-section .container {
    position: relative;
    z-index: 2;
}

.internship-section .section-title {
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
    .sf-water-ripple-layer {
        display: none;
    }
}

/* 新浪微博曲线路径画廊 */
.content-area.weibo-mode {
    background: #ffffff;
}

.section.weibo-section {
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    color: #111111;
    background: #ffffff;
}

.weibo-page-shell {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    isolation: isolate;
}

.weibo-page-shell::before {
    content: "";
    position: absolute;
    inset: -2.25rem;
    z-index: 0;
    background-image: radial-gradient(circle, rgba(23, 25, 24, 0.24) 0 1px, transparent 1.15px);
    background-position: 0 0;
    background-size: 18px 18px;
    pointer-events: none;
    will-change: transform;
    animation: weiboDotFieldDrift 7s linear infinite;
}

@keyframes weiboDotFieldDrift {
    from { transform: translate3d(-18px, -18px, 0); }
    to { transform: translate3d(0, 0, 0); }
}

.weibo-corner-logo {
    position: absolute;
    top: clamp(1.15rem, 2.8vh, 1.9rem);
    right: clamp(1.15rem, 2.4vw, 2.35rem);
    z-index: 150;
    width: clamp(4.7rem, 7.5vw, 7rem);
    height: auto;
    object-fit: contain;
    opacity: 1;
    filter: drop-shadow(0 0.45rem 0.8rem rgba(17, 17, 17, 0.1));
    pointer-events: none;
    user-select: none;
}

.weibo-path-stage {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100dvh;
    min-height: 620px;
    margin: 0;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    isolation: isolate;
}

.weibo-path-stage.is-dragging,
.weibo-path-stage.is-dragging .weibo-path-item {
    cursor: grabbing;
}

.weibo-drag-hint {
    position: absolute;
    left: 46%;
    bottom: clamp(4rem, 8vh, 5.2rem);
    z-index: 140;
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    color: rgba(17, 17, 17, 0.52);
    pointer-events: none;
    transform: translateX(-50%);
}

.weibo-drag-control {
    display: flex;
    align-items: center;
    gap: 0.72rem;
}

.weibo-drag-mouse {
    position: relative;
    display: block;
    width: 1.35rem;
    height: 2rem;
    border: 1px solid rgba(17, 17, 17, 0.58);
    border-radius: 0.72rem;
    animation: weiboMouseDrift 3.2s ease-in-out infinite;
}

.weibo-drag-wheel {
    position: absolute;
    top: 0.34rem;
    left: 50%;
    width: 1px;
    height: 0.38rem;
    background: currentColor;
    transform: translateX(-50%);
}

.weibo-drag-arrow {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1;
    opacity: 0.56;
}

.weibo-drag-arrow-left {
    animation: weiboArrowLeft 3.2s ease-in-out infinite;
}

.weibo-drag-arrow-right {
    animation: weiboArrowRight 3.2s ease-in-out infinite;
}

.weibo-drag-copy {
    font-family: 'Montserrat', 'Microsoft YaHei', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    white-space: nowrap;
}

.weibo-video-drawer {
    --video-rail-height: 2rem;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 170;
    height: clamp(19.5rem, calc(44dvh + var(--video-rail-height)), 26.5rem);
    border-top: 1px solid rgba(17, 17, 17, 0.12);
    background: rgba(252, 252, 251, 0.97);
    box-shadow: 0 -24px 60px rgba(26, 29, 34, 0.12);
    cursor: default;
    pointer-events: auto;
    user-select: auto;
    transform: translate3d(0, calc(100% - var(--video-rail-height)), 0);
    transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.weibo-video-drawer.is-open {
    transform: translate3d(0, 0, 0);
}

.weibo-video-drawer-toggle {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: var(--video-rail-height);
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 0;
    background: linear-gradient(to bottom, rgba(20, 20, 20, 0.9), rgba(20, 20, 20, 0.74));
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Montserrat', 'Microsoft YaHei', sans-serif;
    cursor: pointer;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.weibo-video-drawer-toggle:active {
    background: rgba(20, 20, 20, 0.94);
}

.weibo-video-drawer-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.76);
    outline-offset: -2px;
}

.weibo-video-drawer-content {
    height: calc(100% - var(--video-rail-height));
    margin-top: var(--video-rail-height);
    padding: clamp(0.72rem, 1.6vh, 1rem) clamp(1rem, 4vw, 3.6rem) clamp(0.9rem, 2vh, 1.2rem);
}

.weibo-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.7rem, 1.4vw, 1.2rem);
    height: 100%;
}

.weibo-video-card {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.13);
    border-radius: 3px;
    background: #f7f7f5;
    box-shadow: 0 10px 26px rgba(22, 25, 30, 0.08);
}

.weibo-video-card.is-featured {
    border-color: rgba(217, 77, 38, 0.36);
    box-shadow: 0 14px 32px rgba(174, 59, 28, 0.12);
}

.weibo-video-frame {
    min-height: 0;
    overflow: hidden;
    background: #171717;
}

.weibo-video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    background: #171717;
    object-fit: contain;
}

.weibo-video-caption {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0.65rem;
    min-height: 2.7rem;
    padding: 0.58rem 0.72rem;
    background: rgba(255, 255, 255, 0.94);
    color: #171717;
    font-family: 'Montserrat', 'Microsoft YaHei', sans-serif;
}

.weibo-video-caption span {
    color: #b23c20;
    font-size: 0.6rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.weibo-video-caption strong {
    overflow: hidden;
    font-size: clamp(0.72rem, 0.9vw, 0.88rem);
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weibo-path-stage.has-video-drawer-open .weibo-drag-hint {
    opacity: 0;
}

@keyframes weiboMouseDrift {
    0%, 100% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
}

@keyframes weiboArrowLeft {
    0%, 100% { transform: translateX(2px); opacity: 0.38; }
    50% { transform: translateX(-2px); opacity: 0.72; }
}

@keyframes weiboArrowRight {
    0%, 100% { transform: translateX(-2px); opacity: 0.38; }
    50% { transform: translateX(2px); opacity: 0.72; }
}

.weibo-path-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.weibo-path-line {
    fill: none;
    stroke: none;
}

.weibo-barrage {
    position: absolute;
    inset: 0;
    z-index: auto;
    overflow: hidden;
    pointer-events: none;
}

.weibo-barrage-item {
    --barrage-scale: 1;
    position: absolute;
    top: var(--barrage-top);
    left: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.15rem;
    padding: 0.48rem 0.78rem;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 24px rgba(21, 25, 32, 0.07);
    color: rgba(17, 17, 17, 0.72);
    font-family: 'Montserrat', 'Microsoft YaHei', sans-serif;
    font-size: clamp(0.67rem, 0.82vw, 0.78rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    will-change: transform;
    animation: weiboBarrageDrift var(--barrage-duration) linear var(--barrage-delay) infinite;
}

.weibo-barrage-item.is-depth-back {
    --barrage-scale: 0.9;
    z-index: 4;
    opacity: 0.64;
}

.weibo-barrage-item.is-depth-mid {
    --barrage-scale: 0.97;
    z-index: 48;
    opacity: 0.84;
}

.weibo-barrage-item.is-depth-front {
    --barrage-scale: 1.04;
    z-index: 94;
    opacity: 0.98;
}

.weibo-barrage-item.is-topic-only {
    min-height: 1.75rem;
    padding: 0.34rem 0.58rem;
    border-color: rgba(17, 17, 17, 0.08);
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 5px 16px rgba(21, 25, 32, 0.05);
    font-size: clamp(0.6rem, 0.7vw, 0.69rem);
    letter-spacing: 0.015em;
}

.weibo-barrage-item.is-topic-only strong {
    color: rgba(17, 17, 17, 0.68);
    font-weight: 560;
}

.weibo-barrage-item strong {
    color: #171717;
    font-weight: 650;
}

.weibo-barrage-item > span:not(.weibo-barrage-fire) {
    padding-left: 0.7rem;
    border-left: 1px solid rgba(17, 17, 17, 0.13);
}

.weibo-barrage-item.is-hot {
    border-color: rgba(211, 75, 35, 0.3);
    background: rgba(255, 247, 242, 0.9);
    box-shadow: 0 10px 28px rgba(190, 65, 29, 0.12);
    color: #7e3b27;
}

.weibo-barrage-item.is-hot strong {
    color: #8e2f18;
}

.weibo-barrage-fire {
    display: grid;
    width: 1.38rem;
    height: 1.38rem;
    place-items: center;
    border-radius: 3px;
    background: #d94d26;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    font-size: 0.83rem;
    line-height: 1;
}

.weibo-barrage-rank {
    color: #b13a1e;
    font-weight: 700;
}

@keyframes weiboBarrageDrift {
    from { transform: translate3d(calc(100vw + 4rem), 0, 0) scale(var(--barrage-scale)); }
    to { transform: translate3d(calc(-100% - 4rem), 0, 0) scale(var(--barrage-scale)); }
}

.weibo-path-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent;
    color: inherit;
    cursor: zoom-in;
    will-change: transform;
    backface-visibility: hidden;
}

.weibo-path-card {
    --image-ratio: 4 / 3;
    --path-angle: 0deg;
    --expand-shift-x: 0px;
    --expand-shift-y: 0px;
    display: block;
    width: clamp(3.5rem, 5.6vw, 4.5rem);
    aspect-ratio: 1;
    overflow: hidden;
    border: 0;
    border-radius: 3px;
    background: transparent;
    box-shadow:
        0 14px 28px rgba(20, 24, 32, 0.18),
        0 4px 10px rgba(20, 24, 32, 0.12);
    transform: translate(-50%, -50%) rotate(var(--path-angle));
    transform-origin: center;
    transition:
        width 420ms cubic-bezier(0.2, 0.78, 0.2, 1),
        aspect-ratio 420ms cubic-bezier(0.2, 0.78, 0.2, 1),
        filter 220ms ease;
}

.weibo-path-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    transition: none;
    user-select: none;
}

.weibo-path-item:hover,
.weibo-path-item:focus-visible,
.weibo-path-item.is-expanded {
    z-index: 100 !important;
    outline: none;
}

.weibo-path-item:hover .weibo-path-card,
.weibo-path-item:focus-visible .weibo-path-card,
.weibo-path-item.is-expanded .weibo-path-card {
    width: min(16vw, 220px);
    aspect-ratio: var(--image-ratio);
    transform: translate(calc(-50% + var(--expand-shift-x)), calc(-50% + var(--expand-shift-y))) rotate(var(--path-angle));
    box-shadow:
        0 22px 46px rgba(20, 24, 32, 0.22),
        0 7px 16px rgba(20, 24, 32, 0.14);
}

.weibo-path-item:hover .weibo-path-card img,
.weibo-path-item:focus-visible .weibo-path-card img,
.weibo-path-item.is-expanded .weibo-path-card img {
    object-fit: contain;
    filter: none;
}

@media (max-width: 767px) {
    .weibo-page-shell {
        padding: 0;
    }

    .weibo-page-shell::before {
        background-size: 22px 22px;
        opacity: 0.82;
        animation-duration: 8.5s;
    }

    .weibo-corner-logo {
        top: 0.9rem;
        right: 0.9rem;
        width: 4rem;
    }

    .weibo-path-stage {
        height: calc(100dvh - 50px);
        min-height: 620px;
        margin: 0;
    }

    .weibo-drag-hint {
        bottom: 3.8rem;
    }

    .weibo-video-drawer {
        height: min(calc(62dvh + var(--video-rail-height)), 34rem);
    }

    .weibo-video-drawer-content {
        overflow-x: auto;
        padding-right: 0.8rem;
        padding-left: 0.8rem;
    }

    .weibo-video-grid {
        grid-template-columns: repeat(3, minmax(15rem, 1fr));
        width: max-content;
        min-width: 100%;
    }

    .weibo-barrage-item {
        gap: 0.5rem;
        padding: 0.42rem 0.62rem;
        font-size: 0.64rem;
    }

    .weibo-barrage-item > span:not(.weibo-barrage-fire) {
        padding-left: 0.5rem;
    }

    .weibo-path-card {
        width: clamp(3.2rem, 17vw, 4.4rem);
    }

    .weibo-path-item:hover .weibo-path-card {
        width: clamp(3.2rem, 17vw, 4.4rem);
        aspect-ratio: 1;
    }

    .weibo-path-item:hover .weibo-path-card img {
        object-fit: cover;
        filter: none;
    }

    .weibo-path-item.is-expanded .weibo-path-card,
    .weibo-path-item:focus-visible .weibo-path-card {
        width: min(82vw, 380px);
        aspect-ratio: var(--image-ratio);
    }

    .weibo-path-item.is-expanded .weibo-path-card img,
    .weibo-path-item:focus-visible .weibo-path-card img {
        object-fit: contain;
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .weibo-drag-mouse,
    .weibo-drag-arrow-left,
    .weibo-drag-arrow-right {
        animation: none;
    }

    .weibo-path-card,
    .weibo-path-card img {
        transition-duration: 0.01ms;
    }

    .weibo-barrage {
        inset: 1.25rem 1rem auto;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 0.45rem;
        overflow: visible;
    }

    .weibo-barrage-item {
        position: relative;
        top: auto;
        left: auto;
        z-index: auto;
        opacity: 1;
        animation: none;
        transform: none;
    }

    .weibo-video-drawer {
        transition-duration: 0.01ms;
    }
}

/* 澳大利亚影响者公会：竖屏视频扇形轮播 */
.content-area.australian-mode {
    background: #f4f5f3;
}

.section.australian-section {
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    color: #171918;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.96), rgba(244, 245, 243, 0.74) 52%, rgba(232, 235, 231, 0.9) 100%),
        #f4f5f3;
}

.australian-page-shell {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    overflow: hidden;
    isolation: isolate;
}

.australian-page-shell::before {
    content: "";
    position: absolute;
    inset: -2.25rem;
    z-index: 0;
    background-image: radial-gradient(circle, rgba(23, 25, 24, 0.24) 0 1px, transparent 1.15px);
    background-position: 0 0;
    background-size: 18px 18px;
    pointer-events: none;
    will-change: transform;
    animation: australianDotFieldDrift 7s linear infinite;
}

@keyframes australianDotFieldDrift {
    from { transform: translate3d(-18px, -18px, 0); }
    to { transform: translate3d(0, 0, 0); }
}

.australian-heading {
    position: absolute;
    top: clamp(1.3rem, 4.2vh, 2.75rem);
    left: 50%;
    z-index: 30;
    width: min(88vw, 720px);
    text-align: center;
    pointer-events: none;
    transform: translateX(-50%);
}

.australian-heading h1 {
    margin: 0;
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-size: clamp(1.3rem, 2.2vw, 2.15rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.australian-heading p {
    margin: 0.45rem 0 0;
    color: rgba(23, 25, 24, 0.52);
    font-family: 'Noto Sans SC', sans-serif;
    font-size: clamp(0.72rem, 0.9vw, 0.86rem);
    font-weight: 400;
    letter-spacing: 0.12em;
}

.australian-fan-stage {
    position: absolute;
    inset: clamp(5.4rem, 11vh, 7rem) 0 clamp(6rem, 13vh, 8.5rem);
    z-index: 10;
    overflow: hidden;
    outline: none;
    touch-action: pan-y;
    cursor: grab;
}

.australian-fan-stage:active {
    cursor: grabbing;
}

.australian-fan-stage.is-dragging,
.australian-fan-stage.is-dragging .australian-fan-card {
    cursor: grabbing;
}

.australian-fan-stage.is-dragging .australian-fan-card {
    transition: none;
}

.australian-fan-stage:focus-visible::after {
    content: '';
    position: absolute;
    inset: 0.75rem;
    border: 1px solid rgba(23, 25, 24, 0.18);
    border-radius: 20px;
    pointer-events: none;
}

.australian-fan-card {
    position: absolute;
    top: 46%;
    left: 50%;
    width: clamp(8.4rem, 14.5vw, 12.6rem);
    aspect-ratio: 9 / 16;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: clamp(14px, 1.55vw, 22px);
    background: #d9dcd8;
    box-shadow:
        0 24px 44px rgba(77, 88, 81, 0.14),
        0 8px 16px rgba(77, 88, 81, 0.1);
    cursor: pointer;
    transform:
        translate(-50%, -50%)
        translate3d(var(--fan-x, 0px), var(--fan-y, 0px), 0)
        rotate(var(--fan-rotation, 0deg))
        scale(var(--fan-scale, 1));
    transform-origin: 50% 88%;
    transition:
        transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 420ms ease,
        filter 420ms ease,
        box-shadow 420ms ease;
    will-change: transform;
    backface-visibility: hidden;
}

.australian-fan-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: inherit;
    pointer-events: none;
}

.australian-fan-card video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #d9dcd8;
    pointer-events: none;
}

.australian-fan-card:not(.is-current):not(.is-hovered) video {
    filter: saturate(0.86) brightness(0.93);
}

.australian-fan-card.is-current {
    box-shadow:
        0 34px 60px rgba(65, 76, 69, 0.2),
        0 10px 20px rgba(65, 76, 69, 0.12);
}

.australian-fan-card.is-hovered,
.australian-fan-card:focus-visible {
    outline: none;
    box-shadow:
        0 38px 72px rgba(65, 76, 69, 0.24),
        0 12px 24px rgba(65, 76, 69, 0.14);
}

.australian-fan-card.is-unavailable {
    opacity: 0.52;
    filter: grayscale(1);
}

.australian-fan-controls {
    position: absolute;
    left: 50%;
    bottom: clamp(2.8rem, 6.2vh, 4.4rem);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    transform: translateX(-50%);
}

.australian-fan-arrow {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(23, 25, 24, 0.16);
    border-radius: 50%;
    color: rgba(23, 25, 24, 0.72);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 8px 24px rgba(72, 82, 76, 0.08);
    font-family: Arial, sans-serif;
    font-size: 1rem;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: transform 240ms ease, background-color 240ms ease, border-color 240ms ease;
}

.australian-fan-arrow:hover,
.australian-fan-arrow:focus-visible {
    border-color: rgba(23, 25, 24, 0.34);
    outline: none;
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.australian-fan-arrow:active {
    transform: translateY(0) scale(0.96);
}

.australian-fan-dots {
    display: flex;
    align-items: center;
    gap: 0.42rem;
}

.australian-fan-dot {
    width: 0.38rem;
    height: 0.38rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(23, 25, 24, 0.18);
    cursor: pointer;
    transition: transform 280ms ease, background-color 280ms ease;
}

.australian-fan-dot.is-current {
    background: rgba(23, 25, 24, 0.72);
    transform: scale(1.28);
}

.australian-active-title {
    position: absolute;
    left: 50%;
    bottom: clamp(1.25rem, 2.8vh, 2rem);
    z-index: 40;
    margin: 0;
    color: rgba(23, 25, 24, 0.54);
    font-family: 'Noto Sans SC', 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    white-space: nowrap;
    transform: translateX(-50%);
}

body.australian-modal-open {
    overflow: hidden;
}

.australian-video-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    padding: clamp(1rem, 3vw, 2.5rem);
    place-items: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 360ms ease, visibility 0s linear 360ms;
}

.australian-video-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 360ms ease, visibility 0s linear 0s;
}

.australian-video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 11, 10, 0.7);
    backdrop-filter: blur(14px) saturate(0.72);
    -webkit-backdrop-filter: blur(14px) saturate(0.72);
}

.australian-video-modal-panel {
    position: relative;
    z-index: 1;
    width: fit-content;
    max-width: 92vw;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    background: #0e100f;
    box-shadow:
        0 42px 100px rgba(0, 0, 0, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(18px) scale(0.95);
    transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.australian-video-modal.is-open .australian-video-modal-panel {
    transform: translateY(0) scale(1);
}

.australian-video-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 4;
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    padding: 0 0 0.12rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.94);
    background: rgba(14, 16, 15, 0.58);
    font-family: Arial, sans-serif;
    font-size: 1.45rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background-color 220ms ease, transform 220ms ease;
}

.australian-video-modal-close:hover,
.australian-video-modal-close:focus-visible {
    outline: none;
    background: rgba(14, 16, 15, 0.86);
    transform: scale(1.05);
}

.australian-video-modal-close:active {
    transform: scale(0.96);
}

.australian-video-modal-player {
    display: block;
    width: auto;
    height: min(70dvh, 720px);
    max-width: 88vw;
    aspect-ratio: 9 / 16;
    object-fit: contain;
    background: #050606;
}

.australian-video-modal-controls {
    padding: 0.85rem 1rem 0.95rem;
    color: rgba(255, 255, 255, 0.78);
    background: #0e100f;
}

.australian-video-progress {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 1.15rem;
    margin: 0;
    accent-color: #f0f2ef;
    cursor: ew-resize;
    touch-action: none;
}

.australian-video-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.42rem;
}

.australian-video-time {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

.australian-video-sound {
    margin: 0;
    padding: 0;
    border: 0;
    color: rgba(255, 255, 255, 0.78);
    background: transparent;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.australian-video-sound:hover,
.australian-video-sound:focus-visible {
    color: #ffffff;
    outline: none;
}

@media (max-width: 767px) {
    .australian-page-shell::before {
        background-size: 22px 22px;
        opacity: 0.82;
        animation-duration: 8.5s;
    }

    .australian-heading {
        top: 4.6rem;
    }

    .australian-heading h1 {
        font-size: 1.22rem;
    }

    .australian-fan-stage {
        inset: 8.3rem 0 7.8rem;
    }

    .australian-fan-card {
        top: 45%;
        width: clamp(6.4rem, 31vw, 8.6rem);
        border-radius: 14px;
    }

    .australian-fan-controls {
        bottom: 3.55rem;
    }

    .australian-active-title {
        bottom: 1.45rem;
    }

    .australian-video-modal {
        padding: 0.75rem;
    }

    .australian-video-modal-panel {
        border-radius: 16px;
    }

    .australian-video-modal-player {
        height: min(72dvh, 650px);
        max-width: 92vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .weibo-page-shell::before,
    .australian-page-shell::before {
        animation: none;
        transform: none;
    }

    .australian-fan-card,
    .australian-fan-arrow,
    .australian-fan-dot {
        transition-duration: 0.01ms;
    }

    .australian-video-modal,
    .australian-video-modal-panel {
        transition-duration: 0.01ms;
    }
}



/* 顺丰Logo样式 */
.sf-logo {
    text-align: center;
    margin-bottom: 0.5rem;
    animation: logoSlideDown 0.6s ease-out 0.2s both;
}

.sf-logo-img {
    max-width: 200px;
    height: auto;
    filter: brightness(1.2) contrast(1.1);
}

@keyframes logoSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 实习板块描述文字样式 */
.internship-description {
    text-align: center;
    margin-bottom: 4rem;
    color: #ffffff;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.internship-description p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    opacity: 0.9;
}

/* 实习板块视频样式 */
.internship-videos {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.internship-video-item {
    width: 100%;
    max-width: 1600px;
}

.video-container {
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    aspect-ratio: 42 / 9;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 视频外部标题样式 */
.video-title-external {
    margin-top: 1rem;
    text-align: center;
    padding: 0 20px;
}

.video-title-cn {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 8px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    line-height: 1.3;
    font-family: 'Montserrat', 'Arial', sans-serif;
    letter-spacing: 1px;
}



/* Exegesis板块样式 */
.exegesis-section {
    margin-top: 4rem;
    text-align: left;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.exegesis-title {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    font-family: 'Montserrat', 'Arial', sans-serif;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1.4;
}

.exegesis-subtitle {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-family: 'Montserrat', 'Arial', sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.exegesis-section-title {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    font-family: 'Montserrat', 'Arial', sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.exegesis-content {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.7;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.exegesis-list {
    margin: 1rem 0 1.5rem 0;
    padding-left: 2rem;
}

.exegesis-list li {
    margin-bottom: 1rem;
    opacity: 0.9;
}

.exegesis-sublist {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
}

.exegesis-sublist li {
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.exegesis-content strong {
    color: #ffffff;
    font-weight: 700;
}

.video-title-en {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    line-height: 1.2;
    opacity: 0.95;
    font-family: 'Montserrat', 'Arial', sans-serif;
    letter-spacing: 0.5px;
}



.script-section {
    background: url('./images/3.jpg') center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.script-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(133, 64, 77, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1;
}

.script-section .container {
    position: relative;
    z-index: 2;
}

/* 作品网格布局 */
.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

/* 动画板块样式 */
.animation-block {
    margin-bottom: 4rem;
    padding: 2rem;
    border-radius: 20px;
    background: transparent;
    border: none;
    backdrop-filter: none;
    position: relative;
    overflow: visible;
}

/* 视频和艺术家声明容器 */
.video-statement-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

/* 建模与游戏环境设计页面样式 */
.modeling-section {
    background: url('./images/3.jpg') center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    min-height: 100vh;
    padding: 80px 0;
}

.modeling-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1;
}

.modeling-section .container {
    position: relative;
    z-index: 2;
}

.modeling-section .section-title {
    color: #ffffff;
    text-align: left;
    margin-bottom: 60px;
    font-size: 2.5rem;
    font-weight: 300;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.3);
    font-family: 'Playfair Display', 'Times New Roman', serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.modeling-section .section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    transform: none;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #ffffff, #cccccc);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* 建模作品布局 */
.modeling-works {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* 建模描述文字样式 */
.modeling-description-text {
    margin-top: 30px;
    color: #e0e0e0;
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 建模板块第二部分文案样式 */
.modeling-content-layout-game .modeling-description-text {
    margin-top: 200px;
}

.modeling-description-text p {
    margin-bottom: 15px;
    text-align: justify;
}

.modeling-work-item {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    backdrop-filter: none;
    border: none;
    transition: all 0.4s ease;
    width: 100%;
}



.modeling-images {
    display: flex;
    gap: 30px;
    padding: 0;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.modeling-image {
    overflow: hidden;
    border-radius: 5px;
    flex-shrink: 0;
}

.modeling-image.square {
    width: 330px;
    height: 300px;
}

.modeling-image.wide {
    width: 760px;
    height: 300px;
}

/* 游戏环境设计内容布局 */
.modeling-content-layout-game {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* 游戏环境设计图片布局 */
.modeling-images-game {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    align-items: flex-start;
    flex-shrink: 0;
}

.game-image {
    width: 800px;
    height: 450px;
    overflow: hidden;
    border-radius: 5px;
    flex-shrink: 0;
}

.game-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}



.game-video {
    width: 800px;
    height: 450px;
    border-radius: 5px;
    overflow: hidden;
}

.game-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modeling-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}



.modeling-content {
    padding: 0 0 30px 0;
    color: #333333;
}

.modeling-title {
    color: #ffffff;
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 300;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.3);
    font-family: 'Playfair Display', 'Times New Roman', serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.modeling-description {
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 1.2rem;
    text-align: left;
    font-weight: 300;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-family: 'Playfair Display', 'Times New Roman', serif;
    letter-spacing: 0.5px;
}

.modeling-details {
    background: rgba(255, 255, 255, 0.2);
    padding: 25px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

.modeling-details p {
    color: rgba(0, 0, 0, 0.8);
    margin: 10px 0;
    font-size: 0.95rem;
}

.modeling-details strong {
    color: #333333;
    font-weight: 600;
}

/* 影视板块图片横向滚动样式 */
/* Sunspots film project */
.sunspots-project {
    margin: clamp(3rem, 7vw, 6.5rem) 0 clamp(2.25rem, 4vw, 4rem);
    color: #ffffff;
}

.sunspots-project-header {
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.sunspots-project-header h3 {
    margin: 0;
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    text-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}

.sunspots-project-header p {
    margin: 0.9rem 0 0 1.8rem;
    color: rgba(255, 255, 255, 0.62);
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.sunspots-media-grid {
    --sunspots-media-lift: clamp(4.5rem, 8.5vw, 9rem);
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(330px, 0.82fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 5rem);
    margin-bottom: calc(-1 * var(--sunspots-media-lift));
    transform: translateY(calc(-1 * var(--sunspots-media-lift)));
}

.sunspots-video-panel {
    position: relative;
    z-index: 2;
}

.sunspots-video-panel video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 3px;
    background: #000000;
    box-shadow: 0 30px 80px rgba(2, 8, 16, 0.48);
}

.sunspots-bts-collage {
    position: relative;
    min-height: clamp(470px, 42vw, 620px);
    isolation: isolate;
}

.sunspots-bts {
    --bts-rotation: 0deg;
    position: absolute;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 3px;
    background: #111111;
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.42);
    transform: rotate(var(--bts-rotation));
    transition: transform 260ms ease, filter 260ms ease;
}

.sunspots-bts:hover {
    z-index: 20;
    filter: brightness(1.06);
    transform: translateY(-6px) rotate(var(--bts-rotation));
}

@media (prefers-reduced-motion: reduce) {
    .sunspots-bts {
        transition: none;
    }

    .sunspots-bts:hover {
        transform: rotate(var(--bts-rotation));
    }
}

.sunspots-bts img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sunspots-bts-1 {
    --bts-rotation: -2deg;
    top: 4%;
    left: 1%;
    z-index: 4;
    width: 52%;
    height: 55%;
}

.sunspots-bts-2 {
    --bts-rotation: 2.2deg;
    top: 0;
    right: 1%;
    z-index: 6;
    width: 42%;
    height: 48%;
}

.sunspots-bts-3 {
    --bts-rotation: 1deg;
    top: 30%;
    left: 29%;
    z-index: 8;
    width: 43%;
    height: 37%;
}

.sunspots-bts-4 {
    --bts-rotation: -1.5deg;
    top: 43%;
    right: 0;
    z-index: 9;
    width: 43%;
    height: 36%;
}

.sunspots-bts-5 {
    --bts-rotation: 1.7deg;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 39%;
    height: 45%;
}

.sunspots-bts-6 {
    --bts-rotation: -2.4deg;
    right: 22%;
    bottom: 0;
    z-index: 10;
    width: 40%;
    height: 44%;
}

.sunspots-reflection {
    display: grid;
    grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 6rem);
    margin-top: clamp(4rem, 7vw, 7rem);
    padding-top: clamp(2rem, 4vw, 3.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.sunspots-reflection h4 {
    margin: 0;
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.sunspots-reflection-copy {
    columns: 2;
    column-gap: clamp(2rem, 4vw, 4rem);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    font-size: 0.92rem;
    line-height: 1.78;
}

.sunspots-reflection-copy p {
    break-inside: avoid;
    margin: 0 0 1.25rem;
    text-align: left;
}

@media (max-width: 1000px) {
    .sunspots-media-grid {
        grid-template-columns: 1fr;
    }

    .sunspots-bts-collage {
        width: min(100%, 720px);
        min-height: 620px;
        justify-self: center;
    }
}

@media (max-width: 700px) {
    .sunspots-project-header h3 {
        font-size: clamp(2.1rem, 10vw, 3.1rem);
    }

    .sunspots-bts-collage {
        min-height: 480px;
    }

    .sunspots-reflection {
        grid-template-columns: 1fr;
    }

    .sunspots-reflection-copy {
        columns: 1;
    }
}

@media (max-width: 480px) {
    .sunspots-bts-collage {
        min-height: 410px;
    }

    .sunspots-reflection-copy {
        font-size: 0.86rem;
    }
}

.film-images-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.film-images-scroll::-webkit-scrollbar {
    height: 8px;
}

.film-images-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}

.film-images-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.38);
    border-radius: 4px;
}

.film-images-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.56);
}

.film-image {
    flex-shrink: 0;
    width: 240px;
    height: 135px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.film-image:hover {
    transform: scale(1.05);
}

.film-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 影视板块Exegesis样式 */
.film-exegesis {
    margin-top: 30px;
    color: #e0e0e0;
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.film-exegesis .exegesis-title {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.film-exegesis .exegesis-content p {
    margin-bottom: 15px;
    text-align: justify;
}



/* 视频区域样式 */
.video-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 400px;
    padding-top: 2rem;
}

.artwork-video {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    margin-bottom: 1.5rem;
}

.video-info {
    text-align: center;
    margin-bottom: 1rem;
}

.video-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #FF6B6B;
    margin-bottom: 0.5rem;
}

/* 第一个板块视频标题使用白色 */
.animation-block:nth-child(1) .video-title {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.video-technique {
    font-size: 1rem;
    color: #666;
    font-style: italic;
}

/* 第一个板块技术信息使用白色 */
#animation-page .animation-block:nth-child(1) .video-technique {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* 第一个板块视频标题强制白色 */
#animation-page .animation-block:nth-child(1) .video-title {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* 第一个板块所有文字统一白色 - 使用更强优先级 */
#animation-page .animation-block:nth-child(1) .video-title,
#animation-page .animation-block:nth-child(1) .video-technique,
#animation-page .animation-block:nth-child(1) .statement-title,
#animation-page .animation-block:nth-child(1) .statement-text,
#animation-page .animation-block:nth-child(1) .block-title {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* 艺术家声明样式 */
.artist-statement {
    padding: 1.5rem;
}

.statement-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-align: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.statement-content {
    margin-bottom: 0;
}

.statement-text {
    color: #ffffff;
    line-height: 1.8;
    margin-bottom: 1rem;
    text-align: justify;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}



/* 响应式设计 */
@media (max-width: 1024px) {
    .video-statement-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .artwork-video {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .video-statement-container {
        gap: 1.5rem;
    }
    
    .statement-title {
        font-size: 1.5rem;
    }
    
    .video-title {
        font-size: 1.3rem;
    }
}

.animation-block:last-child {
    margin-bottom: 0;
}

/* 第一个板块：透明背景 */
.animation-block:nth-child(1) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.animation-block:nth-child(1)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 250px 90px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 300px 120px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 350px 150px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 400px 180px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 50px 10px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 120px 15px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 180px 25px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 280px 35px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 380px 45px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 30px 5px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 80px 8px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 150px 12px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 220px 18px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 320px 22px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 420px 28px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 70px 3px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 140px 7px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 210px 11px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 290px 16px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 370px 20px, rgba(255, 255, 255, 1.0), transparent);
    background-repeat: repeat;
    background-size: 500px 300px;
    animation: twinkle 4s ease-in-out infinite;
    z-index: -1;
}

.animation-block:nth-child(1)::after {
    content: '✨';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: #FFB6C1;
    animation: bounce 2s ease-in-out infinite;
    z-index: 1;
}

/* 第二个板块：星空背景 */
.animation-block:nth-child(2) {
    background: transparent;
    border: none;
    color: white;
}

.animation-block:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 250px 90px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 300px 120px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 350px 150px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 400px 180px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 50px 10px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 120px 15px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 180px 25px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 280px 35px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 380px 45px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 30px 5px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 80px 8px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 150px 12px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 220px 18px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 320px 22px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 420px 28px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 70px 3px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 140px 7px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 210px 11px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 290px 16px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 370px 20px, rgba(255, 255, 255, 1.0), transparent);
    background-repeat: repeat;
    background-size: 500px 300px;
    animation: twinkle 4s ease-in-out infinite;
    z-index: -1;
}

/* 第三个板块：星空背景 */
.animation-block:nth-child(3) {
    background: transparent;
    border: none;
}

.animation-block:nth-child(3)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 25px 35px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 45px 75px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 95px 45px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 135px 85px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 165px 35px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 205px 65px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 255px 95px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 305px 125px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 355px 155px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 405px 185px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 55px 15px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 125px 20px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 185px 30px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 285px 40px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 385px 50px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 35px 8px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 85px 13px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 155px 17px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 225px 23px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 325px 27px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 425px 33px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 75px 6px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 145px 10px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 215px 14px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(2px 2px at 295px 19px, rgba(255, 255, 255, 1.0), transparent),
        radial-gradient(1px 1px at 375px 25px, rgba(255, 255, 255, 1.0), transparent);
    background-repeat: repeat;
    background-size: 500px 300px;
    animation: twinkle 4s ease-in-out infinite;
    z-index: -1;
}

.block-title {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
    z-index: 2;
}

/* 第一个板块标题样式 */
.animation-block:nth-child(1) .block-title {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.animation-block:nth-child(1) .block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #FFB6C1, #FF69B4) !important;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(255, 182, 193, 0.5);
}

/* 第二个板块标题样式 */
.animation-block:nth-child(2) .block-title {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.animation-block:nth-child(2) .block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #ffffff, #cccccc);
    border-radius: 2px;
}

/* 第三个板块标题样式 */
.animation-block:nth-child(3) .block-title {
    color: #ffffff;
}

.animation-block:nth-child(3) .block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #6c757d, #495057);
    border-radius: 2px;
}

.work-item {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.work-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.work-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.work-item:hover .work-image img {
    transform: scale(1.1);
}

.work-content {
    padding: 2rem;
}

.work-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.work-description {
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.work-link {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.work-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
}

/* 联系板块样式 */
.contact-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.contact-info h3,
.social-links h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #2c3e50;
}

.contact-info p {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    color: #666;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}



/* 页脚样式 */
.footer {
    background: #000000;
    color: white;
    padding: 2rem 0;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
}

.copyright {
    font-size: 1.1rem;
    font-weight: 500;
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
}

.contact-info {
    opacity: 0.8;
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
}

/* 动画关键帧 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 滚动动画类 */
[data-aos] {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* 页面加载动画 */
.section {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

body.loaded .section {
    opacity: 1;
    transform: translateY(0);
}

/* 增强的悬停效果 */
.work-item {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.work-item:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

/* 导航链接增强动画 */
.nav-link {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-link:hover {
    transform: translateY(-3px) scale(1.05);
}

/* 主视觉区域增强 */
.hero-title, .hero-subtitle {
    animation-fill-mode: both;
}

.hero-title {
    animation-delay: 0.2s;
}

.hero-subtitle {
    animation-delay: 0.4s;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .hero {
        padding: 0 20px;
    }
    
    .hero-image-section {
        flex: 0 0 300px;
        margin-right: 60px;
    }
    
    .hero-image-container {
        width: 250px;
        height: 500px;
    }
}

@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        padding: 20px;
        justify-content: center;
        gap: 2rem;
    }

    .hero-content {
        top: 0;
    }
    
    .hero-content {
        max-width: 100%;
        margin-left: 0;
        order: -1;
    }

    .internship-navigation {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        transform: none;
    }

    .internship-portfolio-heading {
        margin-bottom: 1.4rem;
    }

    .internship-portfolio-title {
        font-size: 2.5rem;
    }

    .internship-portfolio-subtitle {
        font-size: 1rem;
    }
    
    .hero-image-section {
        flex: none;
        margin-right: 0;
    }
    
    .hero-image-container {
        width: 200px;
        height: 400px;
    }
    
    .contact-overlay {
        padding: 1.5rem;
    }

    .about-trigger {
        width: 38px;
    }
    
    .contact-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .intro-text, .intro-text-cn {
        font-size: 0.75rem;
    }
    
    .contact-overlay .social-link {
        padding: 0.6rem 1rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle-cn {
        font-size: 1.3rem;
    }
    
    .hero-name {
        gap: 0.4rem;
    }

    .hero-name-en {
        font-size: 1.75rem;
    }

    .hero-name-cn {
        font-size: 1.3rem;
    }
    
    .hero-education {
        font-size: 1.1rem;
    }
    
    .hero-education-cn {
        font-size: 1rem;
    }

    .hero-education-entry + .hero-education-entry .hero-education {
        font-size: 1.1rem;
        white-space: normal;
    }

    .hero-education-entry + .hero-education-entry .hero-education-cn {
        font-size: 1rem;
    }
    
    .hero-nav-item {
        padding: 0.75rem 2.5rem 0.75rem 0;
    }
    
    .nav-text-en {
        font-size: 1.1rem;
    }
    
    .nav-text-cn {
        font-size: 0.8rem;
    }
    
    .works-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .section {
        padding: 3rem 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .content-area {
        padding-top: 60px;
    }
    
    .back-to-home {
        top: 15px;
        left: 15px;
        padding: 8px 16px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 15px;
        gap: 1.5rem;
    }
    
    .hero-image-container {
        width: 180px;
        height: 360px;
    }
    
    .contact-overlay {
        padding: 1rem;
    }

    .about-trigger {
        width: 34px;
    }
    
    .contact-title {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }
    
    .intro-text, .intro-text-cn {
        font-size: 0.7rem;
        margin-bottom: 0.6rem;
    }
    
    .contact-overlay .social-link {
        padding: 0.5rem 0.8rem;
    }
    
    .social-text {
        font-size: 0.75rem;
    }
    
    .hero-content {
        max-width: 100%;
        margin-left: 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle-cn {
        font-size: 1.1rem;
    }
    
    .hero-name {
        gap: 0.35rem;
    }

    .hero-name-en {
        font-size: 1.55rem;
    }

    .hero-name-cn {
        font-size: 1.15rem;
    }
    
    .hero-education {
        font-size: 1rem;
    }
    
    .hero-education-cn {
        font-size: 0.9rem;
    }

    .hero-education-entry + .hero-education-entry .hero-education {
        font-size: 1rem;
        white-space: normal;
    }

    .hero-education-entry + .hero-education-entry .hero-education-cn {
        font-size: 0.9rem;
    }
    
    .hero-nav-item {
        padding: 0.65rem 2.25rem 0.65rem 0;
    }
    
    .nav-text-en {
        font-size: 1rem;
    }
    
    .nav-text-cn {
        font-size: 0.7rem;
    }
    
    .container {
        padding: 0 15px;
    }
    
    .content-area {
        padding-top: 50px;
    }
    
    .back-to-home {
        top: 10px;
        left: 10px;
        padding: 6px 12px;
        font-size: 11px;
    }
}

/* About Me 全网页右侧抽屉：整张卡片连同底图一起滑入 */
.hero-image-section {
    --about-rail-width: 32px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: block;
    width: 400px;
    height: 100dvh;
    margin: 0;
    transform: translateX(calc(100% - var(--about-rail-width)));
    transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.hero-image-section:hover,
.hero-image-section:focus-within {
    transform: translateX(0);
}

.hero-image-section .hero-image-container {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    transform: none;
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.36);
    animation: none;
}

/* About Me 图片与文字之间的均匀黑色遮罩 */
.hero-image-section .hero-image-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.hero-image-section .hero-image-container:hover {
    transform: none;
    box-shadow: -28px 0 70px rgba(0, 0, 0, 0.44);
}

.hero-image-section .hero-image {
    border-radius: 0;
    animation: none;
    transform: none;
}

.hero-image-section .hero-image-container:hover .hero-image {
    animation: none;
    transform: none;
    filter: brightness(1.04) contrast(1.04);
}

.hero-image-section .contact-overlay {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    background: transparent;
    padding: 1.5rem 1.75rem;
    border-radius: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.hero-image-section .contact-overlay::-webkit-scrollbar {
    display: none;
}

.hero-image-section .about-copy-group {
    grid-row: 2;
    align-self: center;
}

.hero-image-section .about-contact-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-row: 1;
    align-self: start;
    width: 100%;
    margin-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.34);
    border-bottom: 1px solid rgba(255, 255, 255, 0.34);
}

.hero-image-section .about-contact-item {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    align-items: center;
    gap: 0.18rem;
    min-width: 0;
    padding: 0.62rem 0.68rem;
    color: rgba(255, 255, 255, 0.94);
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease;
}

.hero-image-section .about-contact-item + .about-contact-item {
    border-top: 1px solid rgba(255, 255, 255, 0.26);
}

.hero-image-section .about-contact-label {
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.58);
}

.hero-image-section .about-contact-value {
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.025em;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.54);
}

.hero-image-section .about-contact-item:hover,
.hero-image-section .about-contact-item:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    outline: none;
}

.hero-image-section .contact-title {
    transform: none;
    animation: none;
}

.hero-image-section .self-intro {
    margin-bottom: 0;
    transform: none;
    animation: none;
}

.hero-image-section .intro-text-container {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    cursor: auto;
}

.hero-image-section .intro-text {
    transform: none !important;
    font-size: clamp(0.79rem, 1.35vh, 0.9rem);
    line-height: 1.56;
}

.hero-image-section .intro-text-cn {
    margin-top: clamp(0.6rem, 1.3vh, 1rem);
    padding-top: clamp(0.6rem, 1.3vh, 1rem);
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    font-size: clamp(0.77rem, 1.28vh, 0.87rem);
    line-height: 1.62;
    text-align: left;
}

.hero-image-section .social-links {
    grid-row: 3;
    align-self: end;
    margin-top: 0;
    padding-top: 1rem;
}

.hero-image-section .about-trigger {
    width: var(--about-rail-width);
    border-radius: 0;
}

.hero-image-section:hover .about-trigger,
.hero-image-section:focus-within .about-trigger {
    opacity: 0;
    pointer-events: none;
}

.hero-image-section.is-return-reset,
.hero-image-section.is-return-reset:hover,
.hero-image-section.is-return-reset:focus-within {
    transform: translateX(calc(100% - var(--about-rail-width)));
}

.hero-image-section.is-return-reset .about-trigger,
.hero-image-section.is-return-reset:hover .about-trigger,
.hero-image-section.is-return-reset:focus-within .about-trigger {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 768px) {
    .hero-image-section {
        width: min(90vw, 360px);
        height: 100dvh;
        margin: 0;
        transform: translateX(calc(100% - var(--about-rail-width)));
    }

    .hero-image-section .hero-image-container {
        width: 100%;
        height: 100%;
    }

    .hero-image-section .contact-overlay {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-image-section {
        width: min(94vw, 340px);
        height: 100dvh;
        transform: translateX(calc(100% - var(--about-rail-width)));
    }

    .hero-image-section .hero-image-container {
        width: 100%;
        height: 100%;
    }

    .hero-image-section .contact-overlay {
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-image-section {
        transition-duration: 0.01ms;
    }

    .internship-navigation {
        animation: none;
    }
}

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

/* 滚动条样式 */
html {
    scrollbar-color: rgba(0, 0, 0, 0.38) transparent;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.38);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.56);
}

/* 剧本信息区域样式 - 上下布局 */
.script-info-section {
    margin: 40px 0;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.script-info-left,
.script-info-right {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

.script-info-title {
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    font-size: 1.2rem;
    font-weight: bold;
    color: #FAC0CC;
    margin: 0 0 20px 0;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.script-info-text {
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    font-size: 1rem;
    line-height: 1.7;
    color: #ffffff;
    margin: 0 0 15px 0;
    text-align: center;
    text-indent: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.script-info-text:last-child {
    margin-bottom: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .script-info-section {
        gap: 30px;
        margin: 30px 0;
        padding: 0 15px;
    }
    
    .script-info-title {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }
    
    .script-info-text {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .script-info-section {
        gap: 25px;
    }
    
    .script-info-title {
        font-size: 1rem;
    }
    
    .script-info-text {
        font-size: 0.85rem;
        line-height: 1.5;
    }
}

/* ===== Desktop screenplay: physical page-flip reader ===== */
.script-section .download-section {
    margin: 0 auto 0.75rem;
    text-align: center;
}

.script-section .download-link {
    display: inline-block;
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-underline-offset: 0.25em;
    transition: color 180ms ease, opacity 180ms ease;
}

.script-section .download-link:hover,
.script-section .download-link:focus-visible {
    color: #ffffff;
    outline: none;
}

.script-flip-shell {
    position: relative;
    display: grid;
    width: min(1120px, calc(100vw - 7rem));
    min-height: 610px;
    margin: clamp(1rem, 2vw, 2rem) auto 0;
    padding: 1.5rem 2rem;
    place-items: center;
    isolation: isolate;
}

.script-flip-shell::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2.3rem;
    z-index: -1;
    width: min(860px, 76%);
    height: 4.5rem;
    background: radial-gradient(ellipse at center, rgba(8, 4, 7, 0.48), transparent 72%);
    filter: blur(17px);
    opacity: 0.78;
    transform: translateX(-50%);
    pointer-events: none;
}

.script-flipbook {
    margin: 0 auto;
    opacity: 0;
    filter: drop-shadow(0 28px 38px rgba(14, 5, 10, 0.34));
    transform: translateX(0);
    transition: opacity 420ms ease, filter 420ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.script-flip-shell.is-ready .script-flipbook {
    opacity: 1;
}

.script-flip-shell[data-book-position='cover'] .script-flipbook {
    transform: translateX(-25%);
}

.script-flip-shell[data-book-position='back'] .script-flipbook {
    transform: translateX(25%);
}

.script-flip-shell[data-flip-state='user_fold'] .script-flipbook,
.script-flip-shell[data-flip-state='flipping'] .script-flipbook {
    filter: drop-shadow(0 34px 44px rgba(14, 5, 10, 0.42));
}

.script-flipbook .page {
    overflow: hidden;
    border: 0;
    border-radius: 1px;
    background: #f7f5f0;
    box-shadow: none;
    opacity: 1 !important;
    cursor: grab;
    transition: none !important;
}

.script-flipbook .page:active {
    cursor: grabbing;
}

.script-flipbook .page::before,
.script-flipbook .page::after {
    display: none;
}

.script-flipbook .page-content {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: #ffffff;
    box-shadow: none !important;
    opacity: 1 !important;
    overflow: hidden;
    animation: none !important;
    transform: none !important;
}

.script-flipbook .page-content::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(32, 24, 27, 0.055), transparent 5%, transparent 94%, rgba(32, 24, 27, 0.04)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 16%, rgba(28, 20, 22, 0.025));
    mix-blend-mode: multiply;
    pointer-events: none;
}

.script-flipbook .script-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    object-fit: contain;
    background: #ffffff;
    box-shadow: none;
    transform: none;
    user-select: none;
    -webkit-user-drag: none;
}

.script-flip-back-cover {
    display: grid !important;
    place-items: center;
    color: rgba(255, 247, 250, 0.9);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.075), transparent 38%),
        linear-gradient(155deg, #452832 0%, #27161d 58%, #160d11 100%) !important;
}

.script-flip-back-cover::before {
    content: '';
    position: absolute;
    inset: 1.1rem;
    border: 1px solid rgba(255, 230, 238, 0.18);
    pointer-events: none;
}

.script-flip-back-cover__mark {
    display: grid;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    letter-spacing: 0.12em;
}

.script-flip-back-cover__mark span {
    font-size: 1.1rem;
}

.script-flip-back-cover__mark small {
    color: rgba(255, 247, 250, 0.52);
    font-size: 0.66rem;
    letter-spacing: 0.17em;
}

.script-flip-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 20;
    display: flex;
    min-width: 260px;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.9rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.32);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.72);
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
}

.script-flip-loading[hidden] {
    display: none;
}

.script-flip-loading strong {
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 500;
}

.script-flip-hint {
    margin: -0.25rem auto 1.2rem;
    color: rgba(255, 255, 255, 0.54);
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    font-size: 0.67rem;
    letter-spacing: 0.11em;
    text-align: center;
    text-transform: uppercase;
}

.script-flip-controls {
    display: grid;
    grid-template-columns: auto 2.5rem minmax(170px, auto) 2.5rem auto;
    width: min(760px, calc(100vw - 10rem));
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.script-flip-control {
    min-height: 2.5rem;
    padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 0;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(15, 8, 11, 0.18);
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.script-flip-control--arrow {
    padding: 0;
    font-size: 1rem;
}

.script-flip-control:hover,
.script-flip-control:focus-visible {
    border-color: rgba(255, 255, 255, 0.62);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

.script-flip-control:active {
    transform: translateY(1px);
}

.script-flip-control:disabled {
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.25);
    cursor: default;
    transform: none;
}

.script-flip-page-indicator {
    color: rgba(255, 255, 255, 0.78);
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

/* High-resolution PDF page viewer */
.script-flipbook .script-image {
    cursor: zoom-in;
}

/* Screenplay pencil cursor */
.script-pencil-cursor {
    --pencil-x: -100px;
    --pencil-y: -100px;
    --pencil-angle: -38deg;
    --pencil-scale: 1;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9998;
    width: 58px;
    height: 12px;
    opacity: 0;
    filter: drop-shadow(0 4px 5px rgba(15, 6, 9, 0.32));
    pointer-events: none;
    transform: translate3d(var(--pencil-x), var(--pencil-y), 0) rotate(var(--pencil-angle)) scale(var(--pencil-scale)) translateY(-50%);
    transform-origin: 0 50%;
    transition: opacity 120ms ease, filter 120ms ease;
    will-change: transform;
}

.script-pencil-cursor.is-visible {
    opacity: 1;
}

.script-pencil-cursor.is-pressed {
    --pencil-angle: -33deg;
    --pencil-scale: 0.93;
    filter: drop-shadow(0 2px 3px rgba(15, 6, 9, 0.38));
}

.script-pencil-cursor__lead,
.script-pencil-cursor__wood,
.script-pencil-cursor__body,
.script-pencil-cursor__ferrule,
.script-pencil-cursor__eraser {
    position: absolute;
    top: 50%;
    display: block;
    transform: translateY(-50%);
}

.script-pencil-cursor__lead {
    left: -1px;
    z-index: 3;
    width: 7px;
    height: 3px;
    border-radius: 70% 0 0 70%;
    background: #171215;
}

.script-pencil-cursor__wood {
    left: 3px;
    z-index: 2;
    width: 12px;
    height: 10px;
    background: linear-gradient(90deg, #d7b394 0%, #efd7bd 58%, #c49274 100%);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.script-pencil-cursor__body {
    left: 14px;
    width: 31px;
    height: 10px;
    border-top: 1px solid rgba(255, 245, 241, 0.3);
    border-bottom: 1px solid rgba(43, 12, 22, 0.42);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 34%),
        linear-gradient(90deg, #6c2437 0%, #92364d 56%, #5a1c2d 100%);
    box-shadow: inset 0 -2px 3px rgba(35, 9, 17, 0.2);
}

.script-pencil-cursor__ferrule {
    left: 45px;
    width: 7px;
    height: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.52);
    border-right: 1px solid rgba(65, 48, 50, 0.42);
    background: linear-gradient(180deg, #ded8d4 0%, #8f8785 48%, #d7d0cd 100%);
}

.script-pencil-cursor__eraser {
    left: 52px;
    width: 7px;
    height: 10px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #d49aa4 0%, #a95e70 100%);
}

@media (hover: hover) and (pointer: fine) {
    body.script-pencil-cursor-enabled .script-flipbook .page,
    body.script-pencil-cursor-enabled .script-flipbook .script-image {
        cursor: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .script-pencil-cursor {
        display: none;
    }
}

body.script-page-viewer-open {
    overflow: hidden;
}

.script-page-viewer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    grid-template-rows: 3.75rem minmax(0, 1fr);
    color: rgba(255, 255, 255, 0.88);
    background: rgba(7, 5, 6, 0.95);
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease, visibility 240ms ease;
}

.script-page-viewer[hidden] {
    display: none;
}

.script-page-viewer.is-open {
    opacity: 1;
    visibility: visible;
}

.script-page-viewer__bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(14, 10, 12, 0.9);
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.script-page-viewer__close {
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 0;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.06);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.script-page-viewer__close:hover,
.script-page-viewer__close:focus-visible {
    border-color: rgba(255, 255, 255, 0.72);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.script-page-viewer__close:active {
    transform: translateY(1px);
}

.script-page-viewer__stage {
    display: grid;
    min-height: 0;
    padding: 1rem clamp(1rem, 4vw, 4rem) 1.25rem;
    place-items: stretch center;
    overflow: hidden;
}

.script-page-viewer__frame {
    width: min(1120px, 100%);
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    background: #e9e7e4;
    box-shadow: 0 30px 80px rgba(2, 1, 2, 0.46);
    opacity: 0;
    transform: translateY(12px) scale(0.985);
    transition: opacity 280ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.script-page-viewer.is-open .script-page-viewer__frame {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .script-page-viewer,
    .script-page-viewer__frame {
        transition: none;
    }
}

/* JOYY · BIGO 多排全屏短视频画廊 */
#joyy-page {
    overflow: hidden;
    background: #0b0c0c;
}

.section.joyy-section {
    width: 100%;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: #0b0c0c;
}

.joyy-page-shell {
    --joyy-gap: clamp(0.35rem, 0.7vw, 0.65rem);
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background: #0b0c0c;
    cursor: url('./images/bigo-dino-cursor.png') 8 4, auto;
}

.joyy-marquee-stack {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: var(--joyy-gap);
    padding: var(--joyy-gap) 0;
    overflow: hidden;
}

.joyy-marquee-row {
    min-height: 0;
    overflow: hidden;
}

.joyy-marquee-track {
    display: flex;
    width: max-content;
    height: 100%;
    will-change: transform;
    animation: joyy-marquee 48s linear infinite;
}

.joyy-marquee-row-2 .joyy-marquee-track {
    animation-direction: reverse;
    animation-duration: 56s;
}

.joyy-marquee-row-3 .joyy-marquee-track {
    animation-duration: 52s;
}

.joyy-marquee-row:hover .joyy-marquee-track,
.joyy-marquee-row.is-playing .joyy-marquee-track {
    animation-play-state: paused;
}

.joyy-marquee-segment {
    display: flex;
    flex: none;
    height: 100%;
    gap: var(--joyy-gap);
    padding-right: var(--joyy-gap);
}

.joyy-video-card {
    position: relative;
    flex: none;
    height: 100%;
    aspect-ratio: 9 / 16;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: clamp(0.55rem, 0.9vw, 0.9rem);
    background: #171919;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transform: translateZ(0);
    transition: border-color 180ms ease, filter 180ms ease, transform 180ms ease;
}

.joyy-video-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.joyy-video-card video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #171919;
    filter: saturate(0.9) contrast(1.03);
}

.joyy-video-card:hover,
.joyy-video-card:focus-visible,
.joyy-video-card.is-playing {
    z-index: 2;
    border-color: rgba(255, 255, 255, 0.72);
    filter: brightness(1.06);
    transform: scale(0.985);
    outline: none;
}

.joyy-video-card:active {
    transform: scale(0.97);
}

.joyy-page-shell .joyy-video-card {
    cursor: url('./images/bigo-dino-cursor.png') 8 4, pointer;
}

.joyy-brand-lockup,
.joyy-interaction-hint {
    position: absolute;
    z-index: 4;
    margin: 0;
    color: rgba(255, 255, 255, 0.94);
    background: rgba(10, 11, 11, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.24);
    pointer-events: none;
}

.joyy-brand-lockup {
    top: clamp(1rem, 2vw, 1.5rem);
    right: clamp(1rem, 2vw, 1.5rem);
    display: grid;
    gap: 0.2rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    text-align: right;
}

.joyy-brand-logos {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.65rem, 1vw, 0.9rem);
}

.joyy-brand-logo {
    display: block;
    width: auto;
    height: clamp(1.35rem, 2.15vw, 1.85rem);
    object-fit: contain;
    filter: drop-shadow(0 0.3rem 0.55rem rgba(0, 0, 0, 0.24));
    user-select: none;
}

.joyy-brand-logo--joyy {
    height: clamp(1.73rem, 2.76vw, 2.38rem);
}

.joyy-brand-lockup > span {
    text-shadow: 0 0.2rem 0.75rem rgba(0, 0, 0, 0.82);
}

.joyy-brand-lockup span,
.joyy-interaction-hint {
    font-size: clamp(0.68rem, 0.9vw, 0.8rem);
    letter-spacing: 0.04em;
}

.joyy-interaction-hint {
    right: clamp(1rem, 2vw, 1.5rem);
    bottom: clamp(1rem, 2vw, 1.5rem);
    padding: 0.62rem 0.78rem;
    border-radius: 0.6rem;
}

@keyframes joyy-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (max-width: 640px) {
    .joyy-page-shell {
        --joyy-gap: 0.32rem;
    }

    .joyy-brand-lockup {
        top: 4.25rem;
    }

    .joyy-interaction-hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .joyy-marquee-row {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .joyy-marquee-row::-webkit-scrollbar {
        display: none;
    }

    .joyy-marquee-track {
        animation: none;
        will-change: auto;
    }

    .joyy-marquee-segment[aria-hidden='true'] {
        display: none;
    }

    .joyy-video-card {
        transition: none;
    }
}

/* 手机端仅展示首页花朵粒子与桌面端提示 */
.mobile-only-gate {
    display: none;
}

@media (max-width: 767px), (max-width: 900px) and (pointer: coarse) {
    html,
    body {
        width: 100%;
        min-height: 100dvh;
        overflow: hidden;
        background: #070707;
    }

    body > :not(.hero):not(script) {
        display: none !important;
    }

    body > .hero {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        padding: 0;
        display: block !important;
    }

    .hero > :not(.hero-particle-canvas):not(.mobile-only-gate) {
        display: none !important;
    }

    .hero > .hero-particle-canvas {
        display: block !important;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .hero > .mobile-only-gate {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: grid !important;
        width: 100%;
        height: 100%;
        padding: 2rem 1.5rem max(2.5rem, env(safe-area-inset-bottom));
        place-items: center;
        color: rgba(255, 255, 255, 0.94);
        pointer-events: none;
    }

    .mobile-only-gate-content {
        display: grid;
        width: min(100%, 26rem);
        gap: 0.55rem;
        text-align: center;
    }

    .mobile-only-gate-copy {
        width: 100%;
        margin: 0 auto;
        padding: 0.7rem 0.9rem;
        font-family: 'Noto Sans SC', sans-serif;
        font-size: clamp(0.95rem, 4.2vw, 1.1rem);
        font-weight: 500;
        line-height: 1.65;
        letter-spacing: 0.04em;
        text-align: center;
        background: rgba(3, 7, 5, 0.22);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border-radius: 0.7rem;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
    }

    .mobile-only-gate-email {
        justify-self: center;
        color: rgba(255, 255, 255, 0.72);
        font-family: 'Noto Sans SC', sans-serif;
        font-size: 0.78rem;
        line-height: 1.5;
        letter-spacing: 0.025em;
        text-decoration: none;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.76);
        pointer-events: auto;
    }

    .mobile-only-gate-email:active {
        color: rgba(255, 255, 255, 0.96);
    }
}