/* style.css - 修正标题对齐版本 + 彩虹舞蹈效果 */

/* ———————————– */
/* — GLOBAL AND BODY STYLES — */
/* ———————————– */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
color: #334155;
line-height: 1.6;


/* --- 现代科技公司风格背景 --- */
/* 方案1: 纯净渐变（类似 Apple） */
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

/* 方案2: 深色优雅（取消注释使用） */
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */

/* 方案3: 科技蓝（类似 OpenAI，取消注释使用） */
/* background: linear-gradient(to bottom right, #e0eafc, #cfdef3); */

background-attachment: fixed;
position: relative;

/* 确保页面至少占满整个视口高度 */
min-height: 100vh;
display: flex;
flex-direction: column;


}

/* 添加微妙的噪点纹理，增加质感 */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}

.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
position: relative;
z-index: 1;
}
main .container{
    padding-bottom: 20px;
}


/* ———————————– */
/* — Header & Navigation Styling — */
/* ———————————– */
header {
background-color: rgba(255, 255, 255, 0.95); /* 半透明白色，更现代 */
backdrop-filter: blur(10px); /* 毛玻璃效果 */
-webkit-backdrop-filter: blur(10px); /* Safari 支持 */
color: #004080;
padding: 10px 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 更微妙的阴影 */
border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 细微边框 */
}

header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 5px;
flex-wrap: wrap;
overflow-x: hidden;
}

/* ———————————– */
/* — Logo (TIANLAN) 彩虹舞蹈效果 — */
/* ———————————– */
#logo {
margin: 0;
}

#logo a {
font-size: 1.5em;
font-weight: bold;
margin: 0;
text-decoration: none;
display: flex;
flex-direction: row;
align-items: center;
flex-shrink: 0;
line-height: 1.2;
padding-left: 0;
}

/* 每个字母的样式 */
.rainbow-text {
display: inline-block;
animation: dance 3s ease-in-out infinite;
transition: transform 0.3s ease;
}

/* 彩虹色 + 旋转角度 */
.rainbow-text:nth-child(1) {
color: #FF0000; /* 红色 - T */
transform: rotate(-5deg);
animation-delay: 0s;
}

.rainbow-text:nth-child(2) {
color: #FF7F00; /* 橙色 - I */
transform: rotate(3deg);
animation-delay: 0.1s;
}

.rainbow-text:nth-child(3) {
color: #FFFF00; /* 黄色 - A */
transform: rotate(-4deg);
animation-delay: 0.2s;
}

.rainbow-text:nth-child(4) {
color: #00FF00; /* 绿色 - N */
transform: rotate(5deg);
animation-delay: 0.3s;
}

.rainbow-text:nth-child(5) {
color: #0000FF; /* 蓝色 - L */
transform: rotate(-3deg);
animation-delay: 0.4s;
}

.rainbow-text:nth-child(6) {
color: #4B0082; /* 靛色 - A */
transform: rotate(4deg);
animation-delay: 0.5s;
}

.rainbow-text:nth-child(7) {
color: #9400D3; /* 紫色 - N */
transform: rotate(-5deg);
animation-delay: 0.6s;
}

/* 舞蹈动画 */
@keyframes dance {
0%, 100% {
transform: translateY(0) rotate(var(--initial-rotation, 0deg));
}
25% {
transform: translateY(-8px) rotate(calc(var(--initial-rotation, 0deg) + 5deg));
}
50% {
transform: translateY(0) rotate(var(--initial-rotation, 0deg));
}
75% {
transform: translateY(-5px) rotate(calc(var(--initial-rotation, 0deg) - 5deg));
}
}

/* 鼠标悬停效果 */
.rainbow-text:hover {
transform: scale(1.3) rotate(0deg) !important;
animation-play-state: paused;
}

/* 为每个字母设置初始旋转角度变量 */
.rainbow-text:nth-child(1) { --initial-rotation: -5deg; }
.rainbow-text:nth-child(2) { --initial-rotation: 3deg; }
.rainbow-text:nth-child(3) { --initial-rotation: -4deg; }
.rainbow-text:nth-child(4) { --initial-rotation: 5deg; }
.rainbow-text:nth-child(5) { --initial-rotation: -3deg; }
.rainbow-text:nth-child(6) { --initial-rotation: 4deg; }
.rainbow-text:nth-child(7) { --initial-rotation: -5deg; }

/* Subtitle (Your Scientific Solution Provider) Styling */
#logo .subtitle {
font-size: 0.4em;
font-weight: normal;
color: #004080;
white-space: nowrap;
margin-left: 10px;
}

nav {
margin-left: auto;
}

nav ul {
font-size: 1.3em;
margin: 0;
padding: 0;
list-style: none;
white-space: normal;
display: flex;
align-items: center;
}

nav ul li {
display: inline-block;
margin-left: 20px; /* 统一所有链接的左间距 */
}

/* ✅ 关键修复：移除 Home 链接的特殊大间距，让所有链接对齐 */
nav ul li:first-child {
margin-left: 20px; /* 与其他链接保持一致 */
}

nav a {
color: #5a67d8;
text-decoration: none;
font-weight: bold;
padding: 5px 0;
transition: color 0.3s ease;
white-space: nowrap; /* 防止链接文字换行 */
}



/* homebutton颜色问题 */

/* 默认链接颜色 */
nav a:link,
nav a:visited {
    color: #5a67d8; 
}

/* 悬停效果 */
nav a:hover {
    color: #764ba2;
}

/* 激活状态（点击后保持紫色） */
nav a.active {
    color: #764ba2;
    font-weight: bold;
}

/* 点击瞬间 */
nav a:active {
    color: #764ba2;
}






/* ———————————– */
/* — Main Content Sections — */
/* ———————————– */
main {
padding-top: 40px;
padding-bottom: 20px;
flex: 1; /* 让主内容区域占据剩余空间，将 footer 推到底部 */
}



/* ———————————– */
/* — Home Page Continuous Scrolling Text — */
/* 放置位置：style.css 首页标题样式之后 */
/* ———————————– */
/* ———————————– */
/* — Home Page Title Letter Bounce — */
/* ———————————– */
.home-bounce {
  display: inline-block;
  animation: letterDance 1.8s ease forwards; /* 播放一次后静止 */
  animation-delay: calc(var(--i) * 0.05s); /* 每个字母错开 */
}

/* 关键帧 */
@keyframes letterDance {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  20% {
    transform: translateY(-8px) rotate(5deg);
  }
  40% {
    transform: translateY(0) rotate(0deg);
  }
  60% {
    transform: translateY(-5px) rotate(-5deg);
  }
  80% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* 为每个字母设置动画延迟 */
#home-welcome .home-bounce:nth-child(1) { --i: 0; }
#home-welcome .home-bounce:nth-child(2) { --i: 1; }
#home-welcome .home-bounce:nth-child(3) { --i: 2; }
/* ...依次类推，每个字母递增 --i */










.content-box {
background-color: transparent; /* 几乎纯白但保留微透明 */
padding: 40px 0;
border-radius: 0; /* 更圆润的圆角 */
box-shadow: none; /* 更柔和的阴影 */
border: none; /* 细微边框 */
text-align: justify;
}

/* 调整 Services 标题与方框之间的距离 */
.content-box h2 {
    margin-bottom: 6px;  /* 减小标题与方框之间的间距 */
    margin-top: 0;       /* 去掉标题上方的空隙 */
    padding-bottom: 0;
} 
/* 插入这段是为了services标题与内容框距离小点 */


/* H2 Heading Style */
h2 {
color: #334155; /* 和正文相同的蓝灰色 */
    background: none; /* 去掉彩虹背景 */
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    border-bottom: none; /* 如果不想保留彩虹底部线 */
    padding-bottom: 0;
    margin-top: 0;
    text-align: left; /* 或 center，看你需要 */
    font-weight: bold; /* 保留加粗 */
}

/* ———————————– */
/* — About Me Section Styling — */
/* ———————————– */
.about-me {
    display: flex;
    flex-direction: column; /* 改为纵向排列 */
    align-items: center;    /* 居中对齐图片和文字 */
    gap: 20px;              /* 图片和文字之间的间距 */
}

.about-photo img {
    width: 200px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    object-fit: cover;
}

.about-text {
    text-align: center; /* 文字居中 */
    max-width: 600px;   /* 可选，控制文字宽度 */
}



@media (max-width: 768px) {
    .about-me {
        flex-direction: column;
        align-items: center;
    }

    .about-photo img {
        width: 150px;
        margin-bottom: 15px;
    }

    .about-text {
        text-align: center;
    }
}




/* — Services Section Styling — */
/* ———————————– */
/* ———————————– */
/* — Services Section Styling — */
/* ———————————– */

#services {
    margin-top: 0px;
    margin-bottom: 5px;
}

.services-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    justify-content: start;
    padding:  0;
}

#services h2 {
    margin-left: 0;
}

.service-card {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: #334155;
    border-top: 4px solid transparent;
}

.service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-image: linear-gradient(90deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #9400D3) 1;
    border-top: 4px solid transparent;
}

.service-icon {
    font-size: 2.5em;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.2);
}

.service-card h3 {
    font-weight: bold;
    margin-bottom: 10px;
    color: #334155;
}

.service-card p {
    font-size: 0.95em;
    line-height: 1.6;
}

/* 8个内容框下面的长方形 */

/* 新增：下方长方形框 */
.services-extra {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 25px 20px;
    margin: 20px 0 40px 0; /* 上下间距 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    color: #334155;
    max-width: calc(4*280px + 3*25px); /* 左右与4列卡片对齐 */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.work-icon {
    display: inline-block;
    width: 28px;       /* 固定宽度，和序号对齐 */
    text-align: center;
    margin-right: 10px; /* 图标与文字间距 */
    font-size: 1.2em;   /* 图标大小 */
    vertical-align: middle;
    color: #334155;     /* 深蓝灰色，和正文一致 */
    animation: iconFloat 3s ease-in-out infinite; /* 上下浮动动画 */
}

/* 浮动动画 */
@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-5px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-3px); }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .work-icon {
        width: 24px;
        font-size: 1em;
        margin-right: 8px;
    }
}






/* 响应式布局（平板） */
@media (max-width: 992px) {
    .services-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 响应式布局（手机） */
@media (max-width: 768px) {
    .services-container {
        grid-template-columns: 1fr;
    }
}

  /* 这是为了services内容的更改的code */


/* — Footer — */
footer {
text-align: center;
padding: 4px 20px; /* 减小上下内边距 */
font-size: 0.85em; /* 稍微缩小字体 */
color: #6c757d; /* 使用更柔和的灰色 */
font-weight: normal; /* 改为正常字重，不加粗 */
background-color: rgba(247, 247, 247, 0.95); /* 与 header 一致的浅色背景 */
border-top: 1px solid #e9ecef; /* 添加顶部边框分隔 */
margin-top: auto; /* 确保 footer 始终在底部 */
width: 100%; /* 确保全宽 */
}

/* ———————————– */
/* — 媒体查询：解决窄屏幕布局优化 — */
/* ———————————– */
@media (max-width: 992px) {
#logo a {
font-size: 1.3em;
}

#logo .subtitle {
    font-size: 0.7em;
    margin-left: 5px;
}

nav ul {
    font-size: 1.1em;
}

nav ul li {
    margin-left: 15px; 
}

nav ul li:first-child {
    margin-left: 15px; /* 保持一致 */
}

/* 在中等屏幕上减弱动画效果 */
.rainbow-text {
    animation-duration: 4s;
}
}

@media (max-width: 768px) {
header .container {
flex-direction: column;
align-items: center;
}

#logo a {
    font-size: 1.8em; 
    flex-direction: column;
    text-align: center;
    flex-shrink: 1;
}

#logo .subtitle {
    font-size: 0.8em;
    margin-left: 0;
    margin-top: 5px;
    white-space: normal;
}

nav {
    margin-top: 10px; 
    width: 100%; 
    text-align: center; 
    margin-left: 0;
}

nav ul {
    justify-content: center; /* 在小屏幕上居中导航链接 */
    flex-wrap: wrap; /* 允许换行 */
}

nav ul li {
    margin: 5px 10px;
}

nav ul li:first-child {
    margin-left: 10px; 
}

/* 在小屏幕上进一步减弱动画 */
.rainbow-text {
    animation-duration: 5s;
}

/* 小屏幕上减小悬停放大效果 */
.rainbow-text:hover {
    transform: scale(1.15) rotate(0deg) !important;
}