body {
	scroll-behavior: smooth;
}

body.scroll-lock {
	overflow: hidden;
}

/* === Hero 动画和过渡样式 === */
.hero {
	position: relative;
}

.hero.bg-image-loaded {
	background-image: url("https://repository-images.githubusercontent.com/862251163/0ac90205-ae40-4fc6-af67-1e28d074c76b");
	/* 确保背景图的显示方式与SVG的模拟方式一致 */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* 添加过渡效果 */
	transition: background-image 0.8s ease-in;
}

/* SVG动画的容器 */
#hero-animation-bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	/* 保持flex以便居中 */
	align-items: center;
	justify-content: center;
	transition: opacity 0.8s ease-in;
	overflow: hidden;
}

#hero-animation-bg svg {
	/* SVG将尽可能大地填充容器，同时保持其宽高比，可能会被裁切 */
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 确保SVG在容器内居中，这与 background-position: center 对应 */
	object-position: center;
}

/* Hero's overlay and content */
.hero .hero-overlay,
.hero .hero-content {
	position: relative;
	z-index: 2;
	/* Ensures it's above the SVG animation */
	opacity: 0;
	/* Initially transparent */
	transition: opacity 0.8s ease-in;
	/* Ready for fade-in effect */
}

/* Class to make elements visible after the animation */
.visible-after-intro {
	opacity: 1 !important;
	/* !important ensures it overrides daisyUI's bg-opacity-60 */
}

/* === End: Hero Animation Styles === */


.content-wrapper {
	/* Adjust padding to accommodate the footer and theme selector */
	padding-bottom: 200px;
}

/* Animation for feature sections */
.feature-section {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition-delay: 0.2s;
}

.feature-section.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Theme Preview Styles */
.theme-preview-card {
	overflow: hidden;
	border-radius: 0.5rem;
	transition: transform 0.2s;
	min-height: 70px;
}

.theme-preview-card:hover {
	transform: scale(1.05);
}

.selected-theme {
	outline: 4px solid;
	outline-color: oklch(var(--p));
	/* Use oklch for better compatibility with daisyUI */
	outline-offset: 2px;
}

.auto-theme-container {
	overflow: hidden;
	position: relative;
}

.auto-theme-half {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.auto-theme-dark {
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.auto-theme-light {
	clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* Data Showcase Section */
.rotating-text-container {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	text-align: left;
	transition: width 0.3s ease-in-out;
	height: 1.2em;
	/* Match line-height to prevent jump */
}

.rotating-text-container>span {
	position: absolute;
	white-space: nowrap;
	top: 0;
	left: 0;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.rotating-text-container>span.active {
	opacity: 1;
	transform: translateY(0);
}

.rotating-text-container>span.exiting {
	opacity: 0;
	transform: translateY(-100%);
}

#data-showcase .stat-value {
	transition: all 0.5s ease-out;
}