/* ---------- 3D curved reel carousel ---------- */
.reel-section{
	position: relative;
	padding: 90px 0 80px;
	background: #fff;
	overflow: hidden;
}
.reel-section .section-title{ text-align: center; margin-bottom: 30px; }

.reel-stage{
	position: relative;
	width: 100%;
	height: 560px;
	perspective: 1700px;
	perspective-origin: 50% 45%;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	outline: none;
}
.reel-stage.dragging{ cursor: grabbing; }
.reel-track{ position: absolute; inset: 0; transform-style: preserve-3d; }

.reel-card{
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--w, 215px);
	height: calc(var(--w, 215px) * 16 / 9);
	margin: calc(var(--w, 215px) * -8 / 9) 0 0 calc(var(--w, 215px) / -2);
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(160deg, #1d3d08, #0c1a02);
	backface-visibility: hidden;
	will-change: transform, opacity;
	box-shadow: 0 calc(8px + 26px * var(--g, 0)) calc(18px + 36px * var(--g, 0)) rgba(22, 51, 0, calc(.10 + .22 * var(--g, 0)));
	visibility: hidden;
}
.reel-card video{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	background: #0c1a02;
}
.reel-card:after{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
	pointer-events: none;
}

/* controls */
.reel-controls{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 26px;
	padding: 0 16px;
	flex-wrap: wrap;
}
.reel-btn{
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--secondary-color);
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	cursor: pointer;
	transition: background .25s ease, transform .25s ease;
}
.reel-btn:hover{ background: var(--accent-color); transform: translateY(-2px); }
.reel-sep{ width: 1px; height: 26px; background: rgba(0,0,0,.14); margin: 0 4px; }
.reel-progress{ display: flex; align-items: center; gap: 14px; min-width: 190px; }
.reel-count{ font-size: 15px; color: var(--primary-color); white-space: nowrap; }
.reel-count b{ font-size: 18px; }
.reel-bar{ flex: 1; height: 4px; border-radius: 4px; background: rgba(0,0,0,.1); overflow: hidden; min-width: 90px; }
.reel-bar i{ display: block; height: 100%; width: 0; background: var(--accent-color); border-radius: 4px; transition: width .35s ease; }

@media (max-width: 991px){
	.reel-section{ padding: 60px 0 60px; }
	.reel-stage{ perspective: 1200px; }
}
@media (max-width: 575px){
	.reel-section{ padding: 50px 0 50px; }
	.reel-card{ border-radius: 14px; }
	.reel-btn{ width: 42px; height: 42px; }
	.reel-progress{ min-width: 150px; }
	.reel-sep{ display: none; }
}