:root {
	--paper: #eceae4;
	--paper-2: #e3e0d8;
	--ink: #15120f;
	--ink-soft: #6f6a61;
	--line: #c8c3b8;
	--red: #e23413;
	--red-deep: #b8280d;
	--card: #100d0b;
	--ind: 64px;
	/* indicator length (desktop) */
	--ease: cubic-bezier(.7, 0, .18, 1);
}

.container {
	width: 100%;
	max-width: 1450px;
	margin: 0 auto;
	padding: 0 20px;
	color: #000;
}

@keyframes bounceInUp {
	0% {
		opacity: 0;
		transform: translateY(60px) scale(0.8);
	}

	50% {
		opacity: 1;
		transform: translateY(-8px) scale(1.02);
	}

	70% {
		transform: translateY(4px) scale(0.99);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes zoomInBounce {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}

	60% {
		opacity: 1;
		transform: scale(1.08);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.anim {
	transition: none;
	/* No transition for reset, animation handles the "in" */
}

/* -- UP -- */
.anim-up {
	opacity: 0;
	transform: translateY(50px);
}

.anim-up.visible {
	animation: bounceInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* -- SCALE -- */
.anim-scale {
	opacity: 0;
	transform: scale(0.6);
}

.anim-scale.visible {
	animation: zoomInBounce 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Delays */
.d1 {
	animation-delay: 0.1s !important;
}

.d2 {
	animation-delay: 0.2s !important;
}

.d3 {
	animation-delay: 0.3s !important;
}

.d4 {
	animation-delay: 0.4s !important;
}

.d5 {
	animation-delay: 0.5s !important;
}

.d6 {
	animation-delay: 0.6s !important;
}

.d7 {
	animation-delay: 0.7s !important;
}

.section-title h2 {
	font-size: 26px;
	color: #fff;
	font-weight: 500;
	line-height: 1.2;
}

.section-title h2 span {
	color: #1a8d48;
}

.section-title p {
	margin-top: 15px;
	color: rgba(255, 255, 255, .85);
	font-size: 16px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

img {
	width: 100%;
	object-fit: cover;
}

.hero-wrapper {
	position: relative;
	height: 250vh;
}

/* 粘性容器：吸顶显示 */
.sticky-container {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 背景图片层 */
.bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	transition: transform 0.5s ease-out;
	/* 可选：给图片一点微动效 */
}

/* 遮罩层 (默认透明) */
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	/* 黑色半透明遮罩 */
	z-index: 2;
	opacity: 0.3;
	backdrop-filter: blur(40px);
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.hero-title {
	position: absolute;
	z-index: 3;
	text-align: center;
	width: 60%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 2rem;
	opacity: 1;
	/* 初始隐藏 */
	/* transform: translateY(40px); */
	transition: all 0.5s ease;
	font-size: 46px;
	font-weight: 300;
}

/* 文字内容层 */
.text-content {
	position: absolute;
	z-index: 3;
	text-align: center;
	width: 60%;
	left: 50%;
	top: 70%;
	transform: translate(-50%, -50%);
	opacity: 0;
	/* 初始隐藏 */
	/* transform: translateY(40px); */
	transition: all 0.5s ease;
	font-size: 16px;
	font-weight: 300;
}

.img-content {
	position: absolute;
	z-index: 3;
	text-align: center;
	width: 60%;
	left: 50%;
	top: 70%;
	transform: translate(-50%, -50%);
	padding: 2rem;
	opacity: 0;
	/* 初始隐藏 */
	/* transform: translateY(40px); */
	transition: all 0.5s ease;
	font-size: 24px;
	font-weight: 400;
}

.level-wrapper {
	position: relative;
	height: 400vh;
	color: #000;
	padding-top: 30px;
}

.level-section-title {
	margin-bottom: 0px;
	color: #000;
}

.level-div {
	position: sticky;
	top: 0px;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 粘性容器：吸顶显示 */
.level-sticky-container {
	position: absolute;
	top: 0px;
	left: 0;
	height: 100vh;
	width: 100%;
	margin: auto;
	overflow: hidden;
	transition: opacity 0.5s ease;
}

.big-bg {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 30px;
	justify-content: center;
	transition: opacity 0.5s ease;
}

.big-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.big-bg-1 {
	width: 100%;
	height: 33vh;
	display: flex;
	justify-content: space-between;
	gap: 30px;
	overflow: hidden;
}
.big-bg-1 div {
	width: 50%;
}
.big-bg-2 {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: space-between;
	gap: 30px;
	flex-shrink: 0;
	transition: opacity 0.5s ease;
	overflow: hidden;
}
#level-bg-1 {
	width: 100%;
}
#level-bg-2 {
	width: 100%;
}
#level-bg-3 {
	width: 100%;
}
/* .big-bg-cont {
	width: 100%;
	height: 100vh;
	flex-shrink: 0;
} */
.big-bg-3 {
	width: 100%;
	height: 33vh;
	display: flex;
	justify-content: space-between;
	gap: 30px;
	overflow: hidden;
}
.big-bg-3 div {
	width: 25%;
}

/* 遮罩层 (默认透明) */
.level-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	/* 黑色半透明遮罩 */
	z-index: 2;
	opacity: 0;
	/* backdrop-filter: blur(40px); */
	transition: opacity 0.5s ease;
	pointer-events: none;
}

/* 文字内容层 */
.level-text {
	position: absolute;
	z-index: 3;
	text-align: center;
	width: 60%;
	left: 50%;
	top: 70%;
	transform: translate(-50%, -50%);
	padding: 2rem;
	opacity: 0;
	transition: all 0.5s ease;
	font-size: 24px;
	font-weight: 300;
	color: #fff;
}


/* 激活状态下的文字样式 */
.active {
	opacity: 1;
	top: 50%;
}

.hidd {
	opacity: 0;
	top: 70%;
}

.hidd-img {
	display: none;
}

.text-content h1 {
	font-size: 3rem;
	margin-bottom: 1rem;
	letter-spacing: 2px;
}

.img-content img {
	width: 270px;
	margin: auto;
}

/* --- 下方正常内容区域 --- */
.next-section {
	min-height: 100vh;
	background: #111;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
	color: #444;
}

/* 简单的滚动提示动画 */
.scroll-hint {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	animation: bounce 2s infinite;
	opacity: 0.7;
	font-size: 0.9rem;
	letter-spacing: 1px;
}

@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateX(-50%) translateY(0);
	}

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

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

.section-padding {
	padding: 6rem 5%;
}

.padd-detail {
	padding: 10rem 5% 12rem;
}

.section-subtitle {
	margin-bottom: .8rem;
	padding: 0px 10%;
}

.about-title {
	margin-bottom: 15px;
}

.alt-text h3 {
	font-size: 1.3rem;
}

.train-cont {
	width: 100%;
	max-width: 1450px;
	padding: 0 20px;
	margin: auto;
}

.class-list {
	width: 100%;
	margin-top: 30px;
	padding: 0px 15px;
	display: flex;
	justify-content: space-between;
}

.class-name {
	opacity: .5;
	color: #000;
	text-align: center;
	font-size: 14px;
	cursor: pointer;
}

.footy-class-name {
	opacity: .7;
	text-align: center;
	font-size: 14px;
	cursor: pointer;
}

.age {
	font-size: 18px;
	font-weight: 700;
}

.now {
	opacity: 1;
}

.foot-detail {
	width: 100%;
	color: #fff;
	position: relative;
}

.train-class {
	width: 100%;
	margin: 30px auto 0px;
	display: flex;
	justify-content: space-between;
}

.train-class-list {
	text-align: center;
	position: relative;
}

.train-class-list p {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	text-align: center;
	white-space: nowrap;
	font-size: 14px;
}

.icon-img {
	width: 190px;
	margin: 0px auto 10px;
}

.footy-title {
	width: 50%;
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 18px;
	z-index: 3;
	text-align: center;
}

.footy-desc {
	width: 50%;
	position: absolute;
	top: 90px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
	z-index: 3;
	text-align: center;
	opacity: .9;
}

.footy-class-list {
	width: 70%;
	position: absolute;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: space-between;
	z-index: 3;
}

.footy-mb {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	background-color: rgba(0, 0, 0, .35);
}

.programs {
	background: #000;
	padding: 100px 0;
}

.programs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	gap: 30px;
	margin-top: 30px;
}

.program-card {
	overflow: hidden;
	position: relative;
	display: flex;
	gap: 5px;
	align-items: center;
}

.program-icon-wrap {
	width: 60px;
}

.program-left {
	width: 30%;
	height: 100%;
	padding: 15px 15px;
	position: relative;
	background-color: #fff;
}

.program-right {
	width: 70%;
	overflow: hidden;
}

.program-right img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s;
}

.program-right:hover {
	img {
		transform: scale(1.1);
	}
}

.program-content {
	position: absolute;
	left: 18px;
	bottom: 20px;
}

.program-content h3 {
	font-size: 20px;
	margin-bottom: 10px;
	color: #1a1a2e;
	font-weight: 700;
}

.program-content p {
	color: #6c757d;
	font-size: 14px;
	line-height: 1.6;
}

.frame {
	position: relative;
	z-index: 1;
	max-width: 1340px;
	margin: 0 auto;
	/* 			padding: clamp(18px, 3vw, 40px) clamp(18px, 3.4vw, 46px) clamp(22px, 3vw, 40px); */
	/* min-height: 100%; */
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}

/* ---------- top meta bar ---------- */
.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: "Space Mono", monospace;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-soft);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

.topbar .dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--red);
	margin-right: 8px;
	vertical-align: middle;
	box-shadow: 0 0 0 0 rgba(226, 52, 19, .5);
	animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(226, 52, 19, .45)
	}

	70% {
		box-shadow: 0 0 0 9px rgba(226, 52, 19, 0)
	}

	100% {
		box-shadow: 0 0 0 0 rgba(226, 52, 19, 0)
	}
}

.topbar .r {
	display: flex;
	gap: 22px
}

.topbar .r span:last-child {
	color: var(--ink)
}

/* ---------- masthead ---------- */
.masthead {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	padding: clamp(20px, 3.4vw, 42px) 0 clamp(16px, 2.4vw, 28px);
}

.eyebrow {
	font-family: "Space Mono", monospace;
	font-size: 11px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--red)
}

.masthead h1 {
	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-size: clamp(40px, 8.4vw, 108px);
	line-height: .86;
	letter-spacing: .005em;
	text-transform: uppercase;
}

.masthead h1 em {
	font-style: normal;
	color: var(--red);
	-webkit-text-stroke: 0
}

.masthead .lead {
	max-width: 300px;
	text-align: right;
	color: var(--ink-soft);
	font-size: 13.5px;
	line-height: 1.6;
}

.masthead .lead b {
	display: block;
	color: var(--ink);
	font-family: "Space Mono", monospace;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	margin-bottom: 8px
}

/* ---------- board ---------- */
.board {
	display: flex;
	gap: clamp(18px, 2.6vw, 40px);
	align-items: stretch;
	flex: 1;
	height: 80vh;
}

/* stage / image card */
.stage {
	position: relative;
	flex: 1;
	min-width: 0;
	aspect-ratio: 16/10;
	background: var(--card);
	overflow: hidden;
	box-shadow: 0 30px 60px -34px rgba(21, 18, 15, .55);
}

/* fallback court texture (shown if image fails) */
.stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px),
		radial-gradient(120% 90% at 70% 20%, #221b16, #0c0a08 70%);
}

.stage::after {
	/* court line hint */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: .5;
	background:
		linear-gradient(90deg, transparent 49.7%, rgba(255, 255, 255, .06) 49.7% 50.3%, transparent 50.3%),
		radial-gradient(circle at 50% 50%, transparent 13%, rgba(255, 255, 255, .06) 13.2% 13.6%, transparent 13.8%);
}

.slides {
	position: absolute;
	inset: 0;
	z-index: 1
}

.slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.07);
	transition: opacity .95s var(--ease), transform 7s linear;
	will-change: opacity, transform;
}

.slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(1.02) contrast(1.02)
}

.slide.is-active {
	opacity: 1;
	transform: scale(1)
}

.slide.failed img {
	display: none
}

/* ---------- vertical path nav ---------- */
.pathnav {
	position: relative;
	flex: 0 0 auto;
	width: clamp(78px, 8vw, 118px);
	padding-left: 30px;
	user-select: none;
}

.track {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--line)
}

.track .tick {
	position: absolute;
	left: -3px;
	width: 8px;
	height: 1px;
	background: var(--line)
}

.indicator {
	position: absolute;
	left: -1.5px;
	width: 5px;
	height: var(--ind);
	background: var(--ink);
	border-radius: 3px;
	transition: top .55s var(--ease), left .55s var(--ease), background .3s;
}

.hit {
	position: absolute;
	left: -12px;
	top: 0;
	bottom: 0;
	width: 26px;
	cursor: grab;
	touch-action: none
}

.hit:active {
	cursor: grabbing
}

.tabs {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 6px 0;
}

.tab {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	writing-mode: vertical-rl;
	display: flex;
	flex-direction: column;
	gap: .45em;
	align-items: center;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--ink-soft);
	padding: 6px 4px;
	border-radius: 4px;
	transition: color .35s var(--ease), transform .35s var(--ease);
	position: relative;
}

.tab .w {
	display: block
}

.tab .w:last-child {
	font-family: "Space Mono", monospace;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .8
}

.tab::before {
	/* active marker */
	content: "";
	position: absolute;
	right: 100%;
	top: 50%;
	width: 0;
	height: 0;
	background: var(--red);
	transform: translateY(-50%);
	transition: width .35s var(--ease), height .35s var(--ease);
}

.tab:hover {
	color: var(--ink);
	transform: translateX(-2px)
}

.tab[aria-selected="true"] {
	color: var(--ink);
	font-weight: 700
}

.tab[aria-selected="true"] .w:first-child {
	color: var(--red)
}

.tab:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 3px
}

#swiper2 {
	height: 92vh;
}

#swiper2 img {
	width: 100%;
	height: auto;
}

.footy-mb {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	background-color: rgba(0, 0, 0, .45);
}

/* ---------- responsive ---------- */
@media (max-width:900px) {
	.board {
		flex-direction: column
	}

	.stage {
		aspect-ratio: 4/3
	}

	.pathnav {
		width: 100%;
		padding-left: 0;
		padding-top: 26px
	}

	.track {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 2px
	}

	.track .tick {
		left: auto;
		top: -3px;
		width: 1px;
		height: 8px
	}

	.indicator {
		top: -1.5px;
		left: 0;
		width: var(--ind);
		height: 5px;
		transition: left .55s var(--ease)
	}

	.hit {
		left: 0;
		right: 0;
		top: -12px;
		bottom: auto;
		width: auto;
		height: 26px;
		cursor: grab
	}

	.tabs {
		flex-direction: row;
		height: auto;
		padding: 0
	}

	.tab {
		writing-mode: horizontal-tb;
		flex-direction: column;
		gap: .15em;
		flex: 1;
		text-align: center;
		font-size: 12px
	}

	.tab:hover {
		transform: translateY(-2px)
	}

	.tab::before {
		right: auto;
		left: 50%;
		top: auto;
		bottom: 100%;
		transform: translateX(-50%)
	}

	.hint {
		text-align: left
	}

	:root {
		--ind: 48px
	}
	.section-padding {
		padding: 3rem 5%;
	}
	.padd-detail {
		padding: 5rem 5% 5rem; 
	}
	.train-class {
		flex-wrap: wrap;
	}
	.icon-img {
		width: 135px;
	}
	.train-cont {
		padding: 0px 0px;
	}
	.class-list {
		padding: 0px 0px;
		margin-top: 20px;
	}
	.class-name {
		font-size: 12px;
	}
	.age {
		font-size: 14px;
		font-weight: 500;
	}
	.programs {
		padding: 60px 0;
	}
	.programs-grid {
		grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	}
	.program-card {
		height: 200px;
	}
	.program-left {
		width: 35%;
		padding: 5px 5px;
	}
	.program-right {
		width: 65%;
		height: 100%;
	}
	.program-icon-wrap {
		width: 30px;
	}
	.program-content {
		left: 8px;
		bottom: 10px;
	}
	.program-content h3 {
		font-size: 14px;
	}
	.program-content p {
		font-size: 10px;
	}
	.text-content {
		width: 90%;
		font-size: 12px;
	}
	.img-content {
		width: 90%;
	}
	.img-content img {
		width: 220px;
	}
	#swiper2 img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.footy-title {
		width: 90%;
		font-size: 14px;
	}
	.footy-desc {
		width: 90%;
		font-size: 12px;
	}
	.footy-class-list {
		width: 90%;
	}
	.footy-class-name {
		font-size: 12px;
	}
	.train-class-list p {
		font-size: 12px;
	}
	.big-bg-1 {
		display: none;
	}
	.big-bg-3 {
		display: none;
	}
}

@media (prefers-reduced-motion:reduce) {
	* {
		animation: none !important;
		transition-duration: .01ms !important
	}

	.slide {
		transition: opacity .3s
	}
}