/* style.css */

/* --- 核心布局与过渡逻辑 --- */
body,
html {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
    /* 关键：添加和遮罩层一样的背景色 */
    background-color: rgb(237,229,215); 
    /* background: linear-gradient(to bottom, #efebec, rgb(237,229,215)); */
	/* background-image: url('https://static.igem.wiki/teams/5858/images/members/introduction-card-bg.webp'); */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.popup-text-content strong {
    font-weight: bold;
    color: #ecbc43;
}

.popup-content p {
    color: #333;
    font-family: 'Arima Madurai', sans-serif; /* 使用你的项目字体 */
    font-size: 1.5rem;
    font-weight: bold;
    /* color: white; */
    text-align: center;
}

.popup-content em{
    font-style: italic;
}

#home-page {
    width: 100%;
    height: 100%;
    display: block;
}

.home_top {
  background-image: url('https://static.igem.wiki/teams/5858/images/home/bg/bg1.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  /* 移除固定高度 */
  height: 0;
  /* 假设图片的宽高比为 16:9，计算方式为 (高度 / 宽度) * 100% */
  padding-top: 62.152%; /* 670 / 1076 * 100% */
  position: relative;
  margin-bottom: 25vw;
}

#home-logo {
    position: absolute;
    top: 12vw;
    left: 50%;
    transform: translateX(-50%);
    width: 22.5vw;
    height: auto;
}

#home-big-title {
    position: absolute;
    top: 33vw;
    left: 50%;
    transform: translateX(-50%);
    width: 78vw;
    height: auto;
}
#home-read1 {
    position: absolute;
    top: 42vw;
    left: 50%;
    transform: translateX(-50%);
    width: 20vw;
    height: auto;
	/* z-index: 1000; */
    animation: pulse-glow 2s infinite ease-in-out;
}
#home-read2 {
    position: absolute;
    top: 43.5vw;
    left: 50%;
    transform: translateX(-50%);
    width: 12vw;
    height: auto;
}
/* 添加滑入动画样式 */

/* --- 全新添加：滚动引导箭头的样式 --- */
.scroll-down-arrow {
    position: absolute; /* 相对于父级 section 定位 */
    bottom: 5vh;        /* 定位在区块底部，留 5% 的视口高度边距 */
    left: 50%;          /* 水平居中 */
    transform: translateX(-50%); /* 精确水平居中 */

    /* 用边框“画”出一个三角形箭头 */
    width: 0;
    height: 0;
    border-left: 15px solid transparent;  /* 左边框透明 */
    border-right: 15px solid transparent; /* 右边框透明 */
    border-top: 15px solid #fdeedf;      /* 上边框为实心，颜色和引导语一致 */

    /* 应用下面定义的动画 */
    animation: bounce-down 2s infinite ease-in-out;
}

/* --- 全新添加：定义一个柔和的上下浮动动画 --- */
@keyframes bounce-down {
    0% {
        opacity: 0.8;
        transform: translateY(-10px) translateX(-50%);
    }
    50% {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
    100% {
        opacity: 0.8;
        transform: translateY(10px) translateX(-50%);
    }
}

/* 页面容器的通用样式 */
.page-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* 隐藏时不可交互，防止点击到下层页面 */
    pointer-events: none; 
    /* 当页面切换时，使用淡入淡出作为备用动画 */
    transition: opacity 0.5s ease-in-out;
    /* 默认隐藏，不占用滚动条 */
    visibility: hidden;
    overflow: hidden; /* 隐藏内部内容 */
    
    /* 使用 max-height 来控制其占用空间，初始为 0 */
    max-height: 0;
	
}
/* #page-home
{
	margin: 0 0 25vw 0;
} */

/* 当前激活(显示)的页面 */
.page-container.active {
    opacity: 1;
    pointer-events: auto; /* 可交互 */
    visibility: visible;
    position: relative; /* 脱离绝对定位，恢复正常的文档流 */
    max-height: 200vh; 
    overflow: hidden;
}

/* 过渡动画遮罩层 */
#transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #2c3e50; /* 动画颜色，可自定义 */
    z-index: 9999;
    
    /* 关键: 默认是一个在屏幕中心的、半径为0的圆 */
    clip-path: circle(0% at var(--origin-x, 50%) var(--origin-y, 50%));
    
    /* 让 clip-path 的变化产生动画效果 */
    transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1);
    
    /* 默认不响应点击事件 */
    pointer-events: none;
}

/* final.css */

/* ... 你其他的CSS样式保持不变 ... */

/* 用下面的样式替换掉你之前 #transition-overlay 的样式 */
#mask-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #2c3e50; /* 遮罩层颜色 */
    z-index: 9999;
    
    /* 核心：基于透明度进行过渡 */
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* 动画时长0.5秒 */
    
    /* 默认状态下不可见，也不响应点击 */
    pointer-events: none;
}

/* 当遮罩层需要显示时，我们会给它加上这个 class */
#mask-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* 返回首页按钮样式 */

/* 新增: 用于隐藏/显示返回按钮的类 */
.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.8);
}

.back-home-button {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 80px;
    height: 80px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 999;
    transition: opacity 0.3s, transform 0.2s ease;
}
.back-home-button:hover {
    transform: scale(1.1);
}
.back-home-button img {
    width: 50%;
}
.back-home-button span {
    font-size: 12px;
    margin-top: 4px;
    color: #333;
}


/* --- Header 部分 (未修改) --- */
.top-section {
	display: flex;
	width: 100%;
	height: 400px;
	background-color: #483D8B;
	color: white;
    position: relative; 
    z-index: 100;
}
.iris-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40px;
	box-sizing: border-box;
}
.iris-info h1 {
	font-size: 6rem;
	margin: 0;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
}
.iris-info p {
	font-size: 1.2rem;
	margin-top: 2vw;
}
.iris-image {
	flex: 1;
}
.iris-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* --- 主要内容区域 (page_content) --- */
.home_content {
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	/* vh -> px: 为顶部和底部的元素提供足够的固定空间 */
	padding-top: 20vw; 
	padding-bottom: 20vw;
}

/* --- 以下为核心修改区域 --- */

/* 中间圆圈布局的核心容器 */
.circle-layout-container {
	position: relative; 
    /* 28vw -> px (基于1920px屏幕) */
	width: 30vw; 
	height: 30vw; 
}

/* 中心圆 */
.center-circle {
	position: relative;
	width: 100%;
	height: 100%;
}

/* 2. 设置星星图片的样式和动画 */
.center-circle .floating-star {
	/* 使用绝对定位，让星星脱离文档流并覆盖在父容器上 */
	position: absolute;
	top: 4vw;
	left: 3vw;

    aspect-ratio: 1201 / 798;
    width: 23vw;
    
	z-index: 5;

	animation: floatAnimation 3s ease-in-out infinite;
}

/* 3. 定义“上下浮动”的动画效果 (keyframes) */
@keyframes floatAnimation {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-15px); 
	}
	100% {
		transform: translateY(0);
	}
}

/* 其他圆圈和元素的基类 */
.circle-item {
	position: absolute; 
    /* 24vw -> px */
	width: 22vw; 
	height: 25vw;
	z-index: 10;
}

.click-overlay { 
    position: absolute;
    z-index: 9;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: none; 
}

.circle-item:hover .click-overlay {
    opacity: 1;
}

#shadow1 {
	width: 100%!important;
    height: 100%!important;
    top: -1.5vw;
	right: 0vw;
}
#shadow2 {
	width: 97.5%!important;
    height: 97.5%!important;
    top: -0.5vw;
	right: 0vw;
}

/* 左上角的圆 */
.left-top-circle {
    /* vh/vw -> px: 调整为固定的像素偏移 */
	top: -10vw;
	left: -22vw;
}

@keyframes pulse-light {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.5;
        transform: scale(1);
    }
}
#home-light {
    position: absolute;
    width: 34vw;
    height: 34vw;
    bottom: -15.5vw;
    right: -28.5vw;
    z-index: 1;
    /* 添加动画效果 */
    animation: pulse-light 2s ease-in-out infinite;
    /* 添加过渡效果使变化更平滑 */
    transition: opacity 0.3s ease;
}
/* 右下角的圆 */
.right-bottom-circle {
    /* vh/vw -> px: 调整为固定的像素偏移 */
	bottom: -12vw;
	right: -22vw;
}

/* 箭头图片的基类 */
.circle-layout-container .arrow {
	position: absolute; 
    /* 4vw -> px */
	width: 3vw; 
	height: auto;
	z-index: 20; 
}

/* 指向左上角的箭头 */
.arrow-top-left {
    /* vh/vw -> px */
	top: 6vw;
	left:-0.5vw;
    transform: rotate(-5deg);
}

/* 指向右下角的箭头 */
.arrow-bottom-right {
    /* vh/vw -> px */
	bottom: 5vw;
	right: -0.5vw;
    transform: rotate(-5deg);
}

/* 引用文字容器 */
.quote-container {
	position: absolute;
    /* vh -> px */
	top: -13vw; 
	left: 17vw;
	/* transform: translateX(-50%); */
	width: 40vw;
	color: #555;
	font-size: 1.1rem;
	line-height: 1.6;
	/* text-align: center; */
}
.quote-author {
	margin-top: 15px;
	text-align: right;
	font-style: italic;
}

/* 通用图片样式 */
.circle-layout-container img {
	width: 100%;
	height: auto;
	display: block;
}

/* ==============================================
=== 新增：自定义圆形扩展动画 (CSS部分) ===
==============================================
*/
#transition-effect-layer {
	position: fixed;
	/* 初始时看不见 */
	opacity: 0; 
	
	/* 圆形 + 暗蓝色 */
	border-radius: 50%;
	background-color: #2c3e50; /* 一个不错的暗蓝色 */

	/* 初始transform状态，位于中心点，缩放为0 */
	transform: scale(0);

	/* transition属性，让transform的变化产生动画效果 */
	transition: transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);

	/* 确保在最顶层 */
	z-index: 9998;

	/* 防止它挡住鼠标点击 */
	pointer-events: none;
}

#transition-effect-layer.animate {
	/* 激活状态：放大到一个巨大的尺寸，足以覆盖任何屏幕 */
	transform: scale(50);
	opacity: 1;
    transition: transform 5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 
.page-content-wrapper {
	animation: content-fade-in 1.2s ease-out forwards;
} */

.garden-path{
    aspect-ratio: 5334 / 10000;
    width: 100%;
	/* margin: 0 auto; */
	background: url(https://static.igem.wiki/teams/5858/images/home/bg/bg3.webp) no-repeat;
	background-color: #f0ead6; /* 例如 #f0ead6，替换为你的背景主色调 */
    background-repeat: no-repeat;
	background-size: 100% auto;
	position: relative;
}

/* 新增：当背景加载完成后，通过这个类来应用背景图 */
.garden-path.background-loaded {
    background-image: url(https://static.igem.wiki/teams/5858/images/home/target-bg-plus1.webp);
}

/* .mascot{
	position: absolute;
	width: 20vw;
	height: auto;
	top: 115vw;
	left: 38vw;
	z-index: 2;
} */
.footprints{
	position: absolute;
	z-index: 2;
}

#step1{
	top: 38vw;
	left: 38%;
	width: 3%;
	transform: rotate(10deg);
}
#step2{
	top: 45vw;
	left: 43%;
	width: 3%;
	transform: rotate(10deg);
}

#step3{
	top: 52vw;
	left: 40%;
	width: 3%;
	transform: rotate(0deg);
}
#step4{
	top: 57vw;
	left: 46%;
	width: 3%;
	transform: rotate(0deg);
}

#step5{     
	top: 69.5vw;
	left: 53%;
	width: 4%;
	transform: rotate(0deg);
}
#step6{
	top: 77.5vw;
	left: 50vw;
	width: 3.5%;
	transform: rotate(0deg);
}

#step7{
	top: 84vw;
	left: 56.5%;
	width: 4%;
	transform: rotate(25deg);
}
#step8{
	top: 92vw;
	left: 51%;
	width: 3.5%;
	transform: rotate(30deg);
}

#step10{
	top: 110vw;
	left: 42%;
	width: 5%;
	transform: rotate(28deg);
}
#step9{
	top: 105vw;
	left: 48%;
	width: 5.7%;
	transform: rotate(23deg);
}


.blank{
	height: 1000px;
}

/* .fixed-container {
	position: fixed;
	top: 5vw;
	right: 5vw;
	width: 17vw;
	max-width: 250px;
	z-index: 1;
} */

.fixed-container {
    position: fixed;
    top: 5vw;
    left: calc(100vw - 17vw - 5vw); /* 改为使用 left 定位 */
    width: 17vw;
    max-width: 250px;
    z-index: 99; /* 确保 z-index 足够高，让它浮在内容之上 */
    display: none;
}

#basket-img {
	width: 100%;
	height: auto;
	display: block;
	z-index: 2;
	/* position: absolute;
	left: 10%; */
}

#backshadow {
	position: absolute;
	top: 0;
	width: 150%;
	height: auto;
	z-index: 1;
	left: -20%;
	top: -17%;
	animation: pulse-light 2s ease-in-out infinite;
    /* 添加过渡效果使变化更平滑 */
    transition: opacity 0.3s ease;
	display: none;
}
.target-progress {
	width: 100% ;
	height: auto ;
	display: block ;
	margin-top: 20px ; /* 这个值控制两者之间的间距 */
}

.home-flowers
{
	position:absolute;
    /* position: relative;  */
	width: 4vw;
	height: auto;
    z-index: 10;
    cursor: pointer;
}

#fl1{
	top: 60vw;
	left:70vw;
	transform: rotate(0deg);
}

#fl2{
	top: 96vw;
	left: 69vw;
	transform: rotate(0);
}

#fl3{
	top: 50vw;
	left: 23vw;
	width: 4vw;
	transform: rotate(0);
}

#fl4{
	top: 80vw;
	left: 23vw;
	width: 3.5vw;
	transform: rotate(0);
}

#fl5{
	top: 95vw;
	left: 32vw;
	width: 2.5vw;
	transform: rotate(190deg);
}

#fl6{
	top: 118vw;
	left: 36vw;
	width: 2.5vw;
	transform: rotate(250deg);
}

#fl7{
	top: 77vw;
	left: 77vw;
	width: 2.5vw;
	transform: rotate(0deg);
}

#fl8{
	top: 127vw;
	left: 70vw;
	width: 2.3vw;
	transform: rotate(0deg);
}

#fl9{
	top: 68vw;
	left: 13vw;
	width: 2.3vw;
	transform: rotate(250deg);
}

#fl10{
	top: 102vw;
	left: 16vw;
	width: 2.5vw;
	transform: rotate(250deg);
}

.popup-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
	z-index: 1000;
}

.popup-overlay.show {
	display: block;
}

.popup-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url('https://static.igem.wiki/teams/5858/images/home/letter.webp') no-repeat center center;
	background-size: contain;
	width: 70%;
	height: 60%;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
}

.popup-text {
	color: #333;
	font-size: 18px;
	line-height: 1.6;
	padding-bottom: 5rem;  
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;  
    
}
		
#pop-close {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 40%;
	height: auto;
	font-size: 24px;
	cursor: pointer;
	color: #333;
	top: 65%;
}

.popup-text-content {
	color: #333;
	font-size: 16px;
	line-height: 1.3;
	margin-top: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	display: none;
    overflow-wrap: break-word;
}


/* 背景渐变 */
.bg1-section{
    background: linear-gradient(to bottom, #f0e7d8, #839cdb, #849ddc);
}
.bg2-section{
    background: linear-gradient(to bottom, #849ddc, #6b8cdb, #849fd6);
}
/* --- Stage 2: Transition Section --- */

.bg3-section{
    background: linear-gradient(to bottom, #6a8cdc, #839ed5, #86a0d4);
    height: 10vh;
    padding-bottom: 10vh;
}

.transition-section {

    /* 确保该区域有足够的高度来展示过渡效果 */
    padding: 20vh 0;
    
    /* 使用 flex 布局让内容垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Crimson Text', normal;
    /* 确保文字颜色在深色背景下可见 */
    color: #fdeedf;
}

.guide-container {
    width: 80%;
    max-width: 900px;
    text-align: center;
}

.guide-text {
    /* 字体样式 */
    font-size: 2.0rem; /* 使用 vw 单位以适应不同屏幕宽度 */
    font-weight: 300;
    line-height: 1.8;
    margin: 1.5rem 0;
    
    /* 动画初始状态：完全透明，且在 Y 轴上向下偏移 30px */
    opacity: 0;
    transform: translateY(30px);
    
    /* 定义过渡动画效果 */
    transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 当 JS 添加 .visible 类时，元素会优雅地进入视野 */
.guide-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 为每个句子添加一点延迟，实现交错出现的效果 */
.guide-text:nth-child(2) { transition-delay: 0.3s; } /* 增加延迟 */
.guide-text:nth-child(3) { transition-delay: 1s; } /* 增加延迟 */
.guide-text:nth-child(4) { transition-delay: 1.9s; } /* 增加延迟 */
.guide-text:nth-child(5) { transition-delay: 2.8s; } /* 增加延迟 */

/* 响应式调整：在小屏幕上调整字体大小 */
@media (max-width: 768px) {
    .guide-text {
        font-size: 1.5rem; /* 在小屏幕上使用更固定的字体大小 */
    }
}

/* stage 3 */

/* 这条规则的优先级更高，且只对 stage-three 生效 */
#stage-three.page-container.active {
    overflow: visible;
    max-height: none; /* 允许内容自由撑开高度 */
}

/* 默认状态：完全透明，不可见，且稍微向上移动一点，为动画做准备 */
#footer {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* 当JS添加 .visible 类之后的状态 */
#footer.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- 第四阶段样式 --- */


/* home.css */

/* 2. 将“舞台”用绝对定位放到画卷的末尾区域 */
.garden-end-zone {
    position: absolute; /* 改为 absolute */
    bottom: 5vw;        /* 定位在画卷底部偏上一点的位置 */
    left: 0;
    width: 100%;
    height: 50vw;       /* 给它一个高度 */
    z-index: 1;         /* 确保它在背景图之上 */
}

/* 3. 吉祥物和最终画作的定位 (相对于 .garden-end-zone) */
.mascot{
    position: absolute;
    width: 20vw;
    height: auto;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
#final-painting {
    position: absolute;
    width: 20vw;
    height: auto;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    /* 关键：默认必须隐藏 */
    display: none;
    cursor: pointer; /* 让它看起来可点击 */
}

/* 4. 灯泡的定位 (相对于 .garden-end-zone) */
#idea-bulb {
    position: absolute;
    width: 8vw;
    top: 35%; 
    left: 35%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    animation: pulse-glow 2s infinite ease-in-out;
    z-index: 5;
}

/* 确保 #stage-four-elements 不干扰布局 */
#stage-four-elements {
    display: none;
    position: static;
}

@keyframes pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 255, 150, 0.7)); }
    50% { filter: drop-shadow(0 0 25px rgba(255, 255, 0, 1)); }
}


@keyframes pulse-glow-mascot {
    0%, 100% { filter: drop-shadow(0 0 8px #eac669); }
    50% { filter: drop-shadow(0 0 25px #ecbc43); }
}

/* 想法框 和 关闭按钮 */
#idea-box {
    display: none; /* JS控制显示 */
    z-index: 100;
}

/* 1. 统一弹窗内容框 (.popup-content) 的基础样式 */
.popup-content.idea-box-content,
.popup-content.final-painting-content {
    /* 使用你原有的信纸图片作为背景 */
    background: url('https://static.igem.wiki/teams/5858/images/home/letter.webp') no-repeat center center;
    background-size: contain; /* 确保信纸图片完整显示 */
    
    /* 移除所有不透明的背景色和边框 */
    background-color: transparent;
    border: none;
    box-shadow: none;

    /* 统一尺寸 */
    height: 75%;      /* 宽度为屏幕宽度的70% */
    width: auto;
    aspect-ratio: 4156 / 2668; /* 保持信纸的宽高比 (请根据你的信纸图片微调) */
    
    position: relative; /* 为关闭按钮和内容提供定位上下文 */
    padding: 20px;   /* 在信纸内部留出边距，百分比可以微调 */
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. 统一的内容容器样式 */
.letter-content {
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: auto; /* 如果内容过多，允许滚动 */
}

.letter-content h2 {
    color: #333;
    font-family: 'Crimson Text', normal;
    line-height: 1.5;
    margin-bottom: 20px;
    font-size: 1.5rem;
    text-align: center;
}

/* 3. 想法框内的思维导图图片样式 */
.mind-map-image {
    width: 100%;
    max-height: 95%; /* 限制图片最大高度 */
    object-fit: contain;
    z-index: 100;
}

/* 关闭按钮 '×' 的新样式 */
#close-idea-box {
    position: absolute;
    top: 10%;
    right: 12%;
    
    /* 外观样式 */
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%; /* 圆形 */
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    
    /* 字体和对齐 */
    font-size: 24px;
    font-weight: bold;
    line-height: 35px; /* 垂直居中 '×' */
    text-align: center;
    
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 1000;
}

#close-idea-box:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/* 最终画作 (替换吉祥物) 和 导航网格 */
/* 覆盖 popup-overlay 的默认设置，让 final-reveal-box 默认隐藏 */
#final-reveal-box {
    display: none; /* 默认隐藏 */
    background-color: rgba(0, 0, 0, 0.7); /* 半透明背景 */
    z-index: 1000; /* 确保它在最顶层 */
}

/* 关闭按钮 '×' 的样式 (与想法框的关闭按钮类似) */
#close-final-reveal-box {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 24px;
    font-weight: bold;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 500; 
}
#close-final-reveal-box:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/* 最终画作背景容器 */
#final-painting-backdrop {
    position: relative;
    width: 100%;
    height: 90%; 
    background-image: url('https://static.igem.wiki/teams/5858/images/home/jump/full.webp'); /* 你的六瓣花背景图 */
    background-size: contain; /* 包含整个容器，可能留白 */
    background-repeat: no-repeat;
    background-position: center;
    display: flex; /* 用于定位花瓣文字 */
    justify-content: center;
    align-items: center;
    z-index: 100;
}

/* 花瓣导航按钮 */
.petal-nav {
    position: absolute; /* 绝对定位到花瓣上 */

    width: 150px; /* 每个花瓣的点击区域大小 */
    height: 60px; /* 调整高度 */

    background-color: transparent;
    border: none;

    font-family: 'Arima Madurai', sans-serif; /* 使用你的项目字体 */
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.7);

    text-align: center;
    text-decoration: none; /* 去掉下划线 */
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 5; /* 确保在背景图之上 */

    /* 关键：让元素的中心点成为其定位点，方便对称定位 */
    transform: translate(-50%, -50%); 
}

/* 2. 悬浮变色效果 */
.petal-nav:hover {
    color: #EDCC3E; 
    transform: translate(-50%, -50%) scale(1.1); /* 在中心点放大的同时保持位置 */
}

/* 3. 六个标题的中心对称定位 */
/* 你可以微调这些百分比值，来让文字完美地对齐到你的花瓣背景上 */

/* 顶部花瓣 */
.petal-1 { 
    top: 20%; 
    left: 50%; 
}

/* 右上花瓣 */
.petal-2 { 
    top: 35%; 
    left: 65%; 
}

/* 右下花瓣 */
.petal-3 { 
    top: 65%; 
    left: 65%; 
}

/* 底部花瓣 */
.petal-4 { 
    top: 80%; 
    left: 50%; 
}

/* 左下花瓣 */
.petal-5 { 
    top: 65%; 
    left: 35%; 
}

/* 左上花瓣 */
.petal-6 { 
    top: 35%; 
    left: 35%; 
}

/* 新增：用于锁定页面滚动的样式 */
body.no-scroll {
    overflow: hidden;
}

.bg1-section img.xiaoren {
    position: absolute;
    bottom: -5vh;
    left: -30vw;
}