*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:"Noto Sans SC";
background:#070b14;
color:#fff;
overflow-x:hidden;
}

/* 🎬 intro */
#intro{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background:radial-gradient(circle,#1b2a4a,#05070d);
text-align:center;
}

.title{
font-size:3rem;
animation:fade 2s ease;
}

.subtitle{
opacity:0.7;
margin-top:10px;
}

.scroll{
position:absolute;
bottom:20px;
opacity:0.5;
}

/* 📜 quotes */
.quote-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
padding:40px;
}

.quote{
background:rgba(255,255,255,0.05);
padding:20px;
border-radius:12px;
}

/* ⏳ timeline */
.timeline{
margin:80px;
border-left:2px solid #444;
padding-left:30px;
}

.timeline-item{
opacity:0;
transform:translateY(40px);
transition:0.6s;
margin-bottom:40px;
}

.timeline-item.show{
opacity:1;
transform:translateY(0);
}

.dot{
width:10px;
height:10px;
background:#7aa2ff;
border-radius:50%;
position:absolute;
left:-6px;
}

/* 👨‍🏫 teacher */



.teacher-card{
    perspective: 1200px;
    width: 100%;
    max-width: 260px;
}

/* ⭐ 关键：让比例统一 */
.inner{
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;  /* 👈 核心比例修复 */
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
}



.teacher-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;

    padding: 40px;
    justify-items: center;
}


/* 翻转 */
.teacher-card:hover .inner{
    transform: rotateY(180deg);
}

/* 正反面 */
.front, .back{
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:15px;
    background: rgba(255,255,255,0.06);
}

/* 背面 */
.back{
    transform: rotateY(180deg);
    justify-content:center;
}

/* ⭐ 图片比例关键 */
.img-box{
    width:100%;
    height:60%;
    overflow:hidden;
    border-radius:10px;
    margin-bottom:10px;
}

.img-box img{
    width:100%;
    height:100%;
    object-fit:cover; /* ⭐ 防拉伸核心 */
}


/* 📸 gallery */
.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:10px;
padding:40px;
}

.photo{
width:100%;
border-radius:10px;
transition:0.3s;
}

.photo:hover{
transform:scale(1.08);
}
/* =========================
   🔥 灯箱系统
========================= */

#lightbox{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999;
}

#lightbox img{
    max-width:80%;
    max-height:80%;
    border-radius:10px;
    box-shadow:0 0 40px rgba(255,255,255,0.2);
}

/* =========================
   🌌 视差基础层
========================= */



/* 背景漂浮光感 */
body::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: radial-gradient(circle at 20% 20%, rgba(122,162,255,0.08), transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05), transparent 40%);
    z-index:-1;
    animation: floatbg 10s infinite alternate ease-in-out;
}

@keyframes floatbg{
    from{transform:translateY(0px);}
    to{transform:translateY(-20px);}
}



/* 黑色电影遮罩 */
.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:radial-gradient(circle at center,
        rgba(0,0,0,0.2),
        rgba(0,0,0,0.85));
    z-index:0;
}



.typewriter{
    overflow:hidden;
    white-space:nowrap;
    border-right:2px solid rgba(255,255,255,0.7);
    width:0;
    animation:
        typing 2.8s steps(18, end) forwards,
        blink 0.8s infinite;
}

/* 打字效果 */
@keyframes typing{
    from{width:0;}
    to{width:18ch;}
}

/* 光标闪烁 */
@keyframes blink{
    50%{border-color:transparent;}
}

.fadein{
    opacity:0;
    transform:translateY(10px);
    animation:fadeUp 2s ease forwards;
    animation-delay:2.5s;
}

@keyframes fadeUp{
    to{
        opacity:0.8;
        transform:translateY(0);
    }
}

.scroll{
    position:absolute;
    bottom:30px;
    opacity:0.5;
    animation:bounce 2s infinite;
}

@keyframes bounce{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(8px);}
}

/* =========================
🧠 记忆卡片系统
========================= */

.memory-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
padding:40px;
}

.memory-card{
background:rgba(255,255,255,0.05);
padding:20px;
border-radius:12px;
cursor:pointer;
transition:0.3s;
}

.memory-card:hover{
transform:scale(1.05);
background:rgba(255,255,255,0.08);
}

/* 弹窗 */
#memoryBox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
display:none;
justify-content:center;
align-items:center;
}

.memory-content{
background:#111;
padding:30px;
border-radius:12px;
max-width:400px;
}

/* =========================
📖 编年史卡片
========================= */

.history-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
padding:40px;
}

.history-card{
background:rgba(255,255,255,0.05);
padding:20px;
border-radius:12px;
transition:0.3s;
}

.history-card:hover{
transform:scale(1.05);
background:rgba(255,255,255,0.08);
}

/* =========================
👥 同学群像
========================= */

.student-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
padding:40px;
}

.student-card{
background:rgba(255,255,255,0.04);
padding:20px;
border-radius:12px;
transition:0.3s;
}

.student-card:hover{
transform:translateY(-5px);
background:rgba(255,255,255,0.07);
}

/* =========================
💬 倒计时区
========================= */

.countdown{
text-align:center;
padding:60px 20px;
}

.count-box{
background:rgba(255,255,255,0.05);
padding:40px;
border-radius:15px;
display:inline-block;
}

.memory-stream{
    position:fixed;
    bottom:20%;
    left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,0.6);
    padding:15px 25px;
    border-radius:10px;
    color:white;
    font-size:14px;
    opacity:0;
    animation:fadeUp 4s ease forwards;
    z-index:9999;
}

@keyframes fadeUp{
    0%{
        opacity:0;
        transform:translate(-50%,20px);
    }
    20%{
        opacity:1;
    }
    80%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:translate(-50%,-20px);
    }
}

#profileModal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.profile-box{
    background:#111;
    padding:30px;
    border-radius:15px;
    max-width:400px;
    text-align:center;
}

#music-control{
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:9999;
}

#music-control button{
    background:rgba(255,255,255,0.08);
    border:none;
    color:white;
    padding:10px 15px;
    border-radius:10px;
    cursor:pointer;
    backdrop-filter:blur(10px);
    transition:0.3s;
}

#music-control button:hover{
    background:rgba(255,255,255,0.2);
}


section{
    padding:80px 20px;
    margin:0;
}

.section-title{
    margin-bottom:40px;
    text-align:center;
}


.quote-grid,
.timeline,
.teacher-grid,
.gallery,
.memory-grid,
.history-grid,
.student-grid{
    margin-top:20px;
}


.timeline{
    margin:80px auto;
    max-width:800px;
}


/* =========================
🌌 动态背景系统（稳定版）
========================= */

body{
    background: #0b0f17;
    color: white;
    overflow-x: hidden;
}

/* 主渐变流动背景 */
/* .bg{
    position: fixed;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    z-index: -2;

    background: radial-gradient(circle at 20% 20%, #4f7cff33, transparent 40%),
                radial-gradient(circle at 80% 30%, #ff6b9a22, transparent 40%),
                radial-gradient(circle at 50% 80%, #5cf2c233, transparent 40%);

    animation: floatBg 12s ease-in-out infinite alternate;
} */

/* 微噪点层（高级感关键） */
/* .bg-noise{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
    pointer-events:none;

    background-image: url("https://www.transparenttextures.com/patterns/noise.png");
    opacity:0.05;
} */

/* 背景缓慢漂移 */
/* @keyframes floatBg{
    0%{
        transform: translate(0px,0px) scale(1);
    }
    100%{
        transform: translate(20px,-20px) scale(1.05);
    }
} */


.title{
    font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 42px;
    text-align: center;

    background: linear-gradient(90deg, #ffffff, #a8c7ff);

    /* ✅ 兼容写法 */
    background-clip: text;
    -webkit-background-clip: text;

    /* 必须 */
    color: transparent;
    -webkit-text-fill-color: transparent;

    text-shadow: 0 0 30px rgba(120,160,255,0.25);
}

/* =========================
🌌 高级动态毕业背景系统
========================= */

body{
    margin:0;
    background:#070A12;
    overflow-x:hidden;
}

/* 主动态光层 */
.bg-layer{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-10;
    overflow:hidden;

    background:
        radial-gradient(circle at 20% 20%, rgba(120,160,255,0.25), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(255,120,180,0.18), transparent 45%),
        radial-gradient(circle at 50% 80%, rgba(120,255,210,0.15), transparent 40%);

    animation: bgMove 12s ease-in-out infinite alternate;
}

/* 光点粒子层 */
.bg-layer::before{
    content:"";
    position:absolute;
    width:200%;
    height:200%;
    top:-50%;
    left:-50%;

    background-image: radial-gradient(#ffffff22 1px, transparent 1px);
    background-size: 40px 40px;

    animation: floatDots 20s linear infinite;
    opacity:0.4;
}

/* 轻微噪点层 */
.bg-layer::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;

    background-image:url("https://www.transparenttextures.com/patterns/noise.png");
    opacity:0.05;
}

/* 背景漂移动画 */
@keyframes bgMove{
    0%{
        transform: translate(0px,0px) scale(1);
    }
    100%{
        transform: translate(30px,-20px) scale(1.05);
    }
}

/* 粒子缓慢漂移 */
@keyframes floatDots{
    from{
        transform: translateY(0px);
    }
    to{
        transform: translateY(100px);
    }
}


body::before{
    content:"903 CLASS MEMORY";
    position:fixed;
    bottom:20px;
    left:20px;
    font-size:12px;
    letter-spacing:3px;
    color:rgba(255,255,255,0.08);
    z-index:-9;
}


/* =========================
🎬 电影片头系统
========================= */

.cinema-intro{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;

    background:#070A12;
}

/* 背景光层（轻微漂移） */
.cinema-layer{
    position:absolute;
    width:120%;
    height:120%;
    top:-10%;
    left:-10%;

    background:
        radial-gradient(circle at 30% 30%, rgba(120,160,255,0.25), transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(255,120,180,0.18), transparent 45%);

    animation: cinematicMove 10s ease-in-out infinite alternate;
    z-index:0;
}

/* 内容层 */
.cinema-content{
    position:relative;
    z-index:2;
    text-align:center;
    transform: translateY(20px);
    animation: fadeInUp 2s ease forwards;
}

/* 主标题 */
.cinema-title{
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:44px;
    font-weight:600;
    letter-spacing:1px;

    background: linear-gradient(90deg,#fff,#9bbcff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    opacity:0;
    animation: titleFade 2.2s ease forwards;
}

/* 副标题 */
.cinema-subtitle{
    margin-top:15px;
    font-size:14px;
    opacity:0;
    color:rgba(255,255,255,0.7);
    animation: subtitleFade 2.8s ease forwards;
}

/* 滚动提示 */
.cinema-scroll{
    margin-top:40px;
    font-size:12px;
    opacity:0.4;
    animation: blink 2s infinite;
}

/* 动画 */
@keyframes cinematicMove{
    0%{
        transform:scale(1) translate(0,0);
    }
    100%{
        transform:scale(1.05) translate(20px,-20px);
    }
}

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

@keyframes subtitleFade{
    0%{opacity:0;}
    40%{opacity:0;}
    100%{opacity:0.7;}
}

@keyframes fadeInUp{
    from{transform:translateY(30px);}
    to{transform:translateY(0);}
}

@keyframes blink{
    50%{opacity:0.1;}
}



/* =========================
🎧 开场音乐引导UI
========================= */

#music-intro{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.92);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.music-box{
    text-align:center;
    color:white;
    animation: fadeIn 1.2s ease;
}

.music-title{
    font-size:26px;
    margin-bottom:20px;
    letter-spacing:2px;
}

.music-box button{
    padding:15px 28px;
    font-size:16px;
    border:none;
    border-radius:12px;
    cursor:pointer;

    background:linear-gradient(90deg,#6ea8ff,#b58cff);
    color:white;

    transition:0.3s;
}

.music-box button:hover{
    transform:scale(1.05);
}

.music-box p{
    margin-top:15px;
    font-size:12px;
    opacity:0.6;
}

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