/**
 * 宠物网站样式表
 * 这是一个响应式宠物展示网站的完整CSS样式文件
 * 包含了导航栏、轮播图、宠物卡片、特色功能、滚动画廊等组件的样式
 * 采用现代CSS技术，包括渐变、动画、毛玻璃效果等
 * 支持移动端响应式布局
 */

/* ==================== 重置和基础样式 ==================== */
/* 全局重置所有元素的默认边距和内边距，使用边框盒模型 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* 防止页面出现水平滚动条 */
body, html {
	overflow-x: hidden;
}

/* 页面主体样式：设置字体、行高、颜色和渐变背景 */
body {
	font-family: 'Microsoft YaHei', Arial, sans-serif;
	line-height: 1.6;
	color: #333;
	background: linear-gradient(135deg, #e8f4f8 0%, #c9e5eb 50%, #b9dee8 100%);
	min-height: 100vh;
}

/* 容器类：限制最大宽度并居中显示 */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ==================== 固定功能按钮 ==================== */
/* 音乐控制按钮：固定在左下角 */
.music-control {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 1000;
}

/* 返回顶部按钮：固定在右下角，默认隐藏 */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    transition: all 0.3s ease;
}

/* 圆形发光按钮样式：用于音乐和返回顶部按钮 */
.btn-circle-glow {
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #f88888, #a0e9ff);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 按钮悬停效果：变色和放大 */
.btn-circle-glow:hover {
    background: linear-gradient(45deg, #f88888, #6ec6ff);
    transform: scale(1.1);
}

/* ==================== 提示框样式 ==================== */
/* 自定义Toast提示框位置 */
.custom-toast {
    top: 70px !important;
    right: 0px !important;
}

/* ==================== Banner轮播图 ==================== */
/* 轮播图容器：全屏高度，考虑导航栏高度 */
.banner {
	position: relative;
	height: 90vh;
	overflow: hidden;
	margin-top: 70px;
}

/* 轮播图内部容器 */
.banner-container {
	position: relative;
	width: 100%;
	height: 100%;
}

/* 单个幻灯片样式：默认隐藏 */
.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
	z-index: 0;
}

/* 激活状态的幻灯片：显示 */
.slide.active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

/* 幻灯片图片：全覆盖 */
.slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 幻灯片文字内容：居中显示 */
.slide-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: white;
	z-index: 2;
}

/* 幻灯片标题：大字体，带阴影和动画 */
.slide-content h1 {
	font-size: 3rem;
	margin-bottom: 1rem;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
	animation: slideInUp 1s ease-out;
}

/* 幻灯片描述文字 */
.slide-content p {
	font-size: 1.2rem;
	margin-bottom: 2rem;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
	animation: slideInUp 1s ease-out 0.3s both;
}

/* 行动按钮：渐变背景，悬停效果 */
.cta-btn {
	background: linear-gradient(45deg, #f88888, #ff8e8e);
	color: white;
	border: none;
	padding: 12px 30px;
	font-size: 1.1rem;
	border-radius: 25px;
	cursor: pointer;
	transition: all 0.3s ease;
	animation: slideInUp 1s ease-out 0.6s both;
}

/* 行动按钮悬停效果 */
.cta-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(255, 107, 107, 0.4);
}

/* 轮播图导航箭头：左右两侧 */
.banner-nav {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
	z-index: 10;
}

/* 导航箭头样式：圆形，半透明背景 */
.banner-nav span {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.3);
	color: rgb(0, 0, 0);
	cursor: pointer;
	border-radius: 50%;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	font-size: 24px;
}

/* 导航箭头悬停效果 */
.banner-nav span:hover {
	background: rgba(255, 255, 255, 0.5);
	transform: scale(1.1);
}

/* 轮播图指示点容器：底部居中 */
.banner-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10;
}

/* 单个指示点样式 */
.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: all 0.3s ease;
}

/* 激活和悬停状态的指示点 */
.dot.active,
.dot:hover {
	background: white;
	transform: scale(1.2);
}

/* 浮动时间显示：顶部居中 */
.floating-time {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.85);
	padding: 8px 20px;
	border-radius: 999px;
	font-size: 1.05rem;
	font-weight: 500;
	color: #f88888;
	display: flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	z-index: 10;
	backdrop-filter: blur(8px);
}

/* 时间图标样式 */
.floating-time i {
	color: #f88888;
	font-size: 1.1rem;
}

/* ==================== 主要内容区域 ==================== */
/* 主内容区：白色背景，位于轮播图之上 */
.main-content {
	background: white;
	position: relative;
	z-index: 1;
}

/* 章节标题通用样式：居中，带下划线装饰 */
.section-title {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 3rem;
	color: #333;
	position: relative;
}

/* 章节标题下划线装饰 */
.section-title::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 4px;
	background: linear-gradient(45deg, #f88888, #a0e9ff);
	border-radius: 2px;
}

/* ==================== 宠物介绍区域 ==================== */
/* 宠物介绍部分：渐变背景 */
.pets-intro {
	padding: 80px 0;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 宠物卡片网格布局：响应式 */
.pets-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	gap: 40px;
	margin-top: 50px;
}

/* 单个宠物卡片：白色背景，圆角，阴影效果 */
.pet-card {
	background: white;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	position: relative;
}

/* 宠物卡片悬停效果：上浮和加深阴影 */
.pet-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* 宠物图片容器 */
.pet-image {
	position: relative;
	height: 300px;
	overflow: hidden;
}

/* 宠物图片：全覆盖，悬停时缩放 */
.pet-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

/* 悬停时图片放大效果 */
.pet-card:hover .pet-image img {
	transform: scale(1.1);
}

/* 宠物图片遮罩层：悬停时显示 */
.pet-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* 悬停时显示遮罩层 */
.pet-card:hover .pet-overlay {
	opacity: 1;
}

/* 查看按钮：遮罩层中的按钮 */
.view-btn {
	background: linear-gradient(45deg, #f88888, #ff8e8e);
	color: white;
	text-decoration: none;
	padding: 12px 25px;
	border-radius: 25px;
	transition: all 0.3s ease;
}

/* 查看按钮悬停效果 */
.view-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

/* 宠物信息区域 */
.pet-info {
	padding: 30px;
}

/* 宠物名字 */
.pet-info h3 {
	font-size: 1.8rem;
	margin-bottom: 5px;
	color: #333;
}

/* 宠物品种 */
.pet-breed {
	font-weight: 500;
	margin-bottom: 15px;
	color: #333;
}

/* 宠物描述 */
.pet-info p {
	margin-bottom: 20px;
	color: #666;
	line-height: 1.6;
}

/* 宠物统计信息：年龄、性别等 */
.pet-stats {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

/* 单个统计项 */
.pet-stats span {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #888;
	font-size: 0.9rem;
}

/* 统计图标 */
.pet-stats i {
	color: #f88888;
}

/* ==================== 网站功能区域 ==================== */
/* 特色功能部分：白色背景 */
.features {
	padding: 80px 0;
	background: white;
}

/* 功能项网格布局 */
.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
	margin-top: 50px;
}

/* 单个功能项：渐变背景，居中布局 */
.feature-item {
	text-align: center;
	padding: 40px 20px;
	border-radius: 15px;
	background: linear-gradient(45deg, #f88888, #a0e9ff);
	color: white;
	transition: all 0.3s ease;
}

/* 功能项悬停效果 */
.feature-item:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(102, 126, 234, 0.3);
}

/* 功能图标容器：圆形背景 */
.feature-icon {
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	font-size: 2rem;
	transition: all 0.3s ease;
}

/* 功能图标悬停效果：3D旋转 */
.feature-item:hover .feature-icon {
	transform: rotateY(360deg);
}

/* 功能标题 */
.feature-item h3 {
	font-size: 1.5rem;
	margin-bottom: 15px;
}

/* 功能描述 */
.feature-item p {
	line-height: 1.6;
	opacity: 0.9;
}

/* ==================== 滚动图片展示区域 ==================== */
/* 滚动画廊：渐变背景，隐藏溢出 */
.scroll-gallery {
	padding: 80px 0;
	background: linear-gradient(135deg, #e8f4f8 0%, #c9e5eb 50%, #b9dee8 100%);
	overflow: hidden;
}

/* 滚动画廊标题颜色 */
.scroll-gallery .section-title {
	color: rgb(0, 0, 0);
}

/* 滚动容器：固定高度，隐藏横向滚动条 */
.scroll-container {
	margin-top: 50px;
	overflow-x: hidden;
	overflow-y: visible;
	position: relative;
	height: 240px;
}

/* 滚动内容：水平排列，无限滚动动画 */
.scroll-content {
	display: flex;
	gap: 20px;
	width: calc((300px + 20px) * 12);
	animation: scroll 20s linear infinite;
}

/* 滚动图片：固定尺寸，悬停放大 */
.scroll-content img {
	width: 300px;
	height: 200px;
	margin-top: 10px;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: none;
	transition: transform 0.3s ease;
	position: relative;
	z-index: 1;
}

/* 滚动图片悬停效果：放大并提升层级 */
.scroll-content img:hover {
	transform: scale(1.1);
	z-index: 10;
}

/* 滚动动画：从右到左无限循环 */
@keyframes scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(calc(-50% - 10px));
	}
}

/* ==================== 页脚区域 ==================== */
/* 页脚主体：白色背景 */
.footer {
	background: #ffffff;
	color: #222222;
	padding: 60px 0 20px;
}

/* 页脚内容网格布局 */
.footer-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 40px;
	margin-bottom: 40px;
}

/* 页脚主标题 */
.footer-section h3 {
	font-size: 1.5rem;
	margin-bottom: 20px;
	color: #f88888;
}

/* 页脚副标题 */
.footer-section h4 {
	font-size: 1.2rem;
	margin-bottom: 15px;
	color: #222222;
}

/* 页脚段落文字 */
.footer-section p {
	line-height: 1.6;
	margin-bottom: 15px;
	opacity: 0.9;
}

/* 社交媒体链接容器 */
.social-links {
	display: flex;
	gap: 15px;
	margin-top: 20px;
}

/* 单个社交媒体链接：圆形按钮 */
.social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(0, 0, 0, 0.1);
	color: #222222;
	border-radius: 50%;
	text-decoration: none;
	transition: all 0.3s ease;
}

/* 社交媒体链接悬停效果 */
.social-links a:hover {
	background: #f88888;
	transform: translateY(-3px);
}

/* 页脚列表样式 */
.footer-section ul {
	list-style: none;
}

.footer-section ul li {
	margin-bottom: 10px;
}

/* 页脚链接样式 */
.footer-section ul li a {
	color: rgba(0, 0, 0, 0.8);
	text-decoration: none;
	transition: color 0.3s ease;
}

/* 页脚链接悬停效果 */
.footer-section ul li a:hover {
	color: #f88888;
}

/* 联系信息样式：图标和文字对齐 */
.contact-info p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

/* 联系信息图标 */
.contact-info i {
	color: #f88888;
	width: 20px;
}

/* 页脚底部：版权信息 */
.footer-bottom {
	text-align: center;
	padding-top: 30px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* 页脚底部文字 */
.footer-bottom p {
	margin-bottom: 5px;
	opacity: 0.7;
	font-size: 0.9rem;
}

/* 页脚底部链接 */
.footer-bottom a {
	text-decoration: none;
	color: inherit;
	transition: color 0.3s ease, transform 0.3s ease;
}

/* 页脚底部链接悬停效果 */
.footer-bottom a:hover {
	color: #f88888;
	transform: scale(1.05);
}

/* ==================== 动画效果定义 ==================== */
/* 从下方滑入动画：用于文字出现效果 */
@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 淡入动画：透明度变化 */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* 弹跳动画：上下弹跳效果 */
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-10px);
	}

	60% {
		transform: translateY(-5px);
	}
}

/* ==================== 响应式设计 ==================== */
/* 平板和手机端适配：768px以下 */
@media (max-width: 768px) {
	/* 显示汉堡菜单按钮 */
	.hamburger {
		display: flex;
	}

	/* 移动端导航菜单：从左侧滑入 */
	.nav-menu {
		position: fixed;
		left: -100%;
		top: 70px;
		flex-direction: column;
		background-color: rgba(255, 255, 255, 0.95);
		width: 100%;
		text-align: center;
		transition: 0.3s;
		backdrop-filter: blur(10px);
		padding: 20px 0;
	}

	/* 激活状态的移动端菜单 */
	.nav-menu.active {
		left: 0;
	}

	/* 移动端轮播图文字大小调整 */
	.slide-content h1 {
		font-size: 2rem;
	}

	.slide-content p {
		font-size: 1rem;
	}

	/* 移动端宠物网格：单列布局 */
	.pets-grid {
		grid-template-columns: 1fr;
	}

	/* 移动端功能网格：单列布局 */
	.features-grid {
		grid-template-columns: 1fr;
	}

	/* 移动端页脚：单列布局，居中对齐 */
	.footer-content {
		grid-template-columns: 1fr;
		text-align: center;
	}

	/* 移动端滚动图片尺寸调整 */
	.scroll-content img {
		width: 250px;
		height: 150px;
	}
}

/* 小屏手机端适配：480px以下 */
@media (max-width: 480px) {
	/* 导航栏内边距调整 */
	.nav-container {
		padding: 1rem;
	}

	/* 小屏幕轮播图标题进一步缩小 */
	.slide-content h1 {
		font-size: 1.5rem;
	}

	/* 小屏幕章节标题缩小 */
	.section-title {
		font-size: 2rem;
	}

	/* 小屏幕宠物卡片内边距调整 */
	.pet-info {
		padding: 20px;
	}

	/* 小屏幕宠物统计信息居中 */
	.pet-stats {
		justify-content: center;
	}
}

/* ==================== 伪元素和伪类效果 ==================== */
/* 宠物卡片渐变遮罩效果：悬停时显示 */
.pet-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, transparent, rgba(255, 107, 107, 0.1), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

/* 悬停时显示宠物卡片遮罩 */
.pet-card:hover::before {
	opacity: 1;
}

/* 功能项边框光晕效果：悬停时显示 */
.feature-item::after {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg, #f88888, #b8dce6, #f88888);
	border-radius: 17px;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* 悬停时显示功能项光晕 */
.feature-item:hover::after {
	opacity: 1;
}