/**
 * Home — Video reel: inline YouTube (matches .reel-content-wrap frame)
 * + scroll-grow reveal layout support.
 *
 * Change --reel-bg to any color you want:
 */
:root {
	--reel-bg: #f5f3ff;
}

.section.reel {
	min-height: 100vh;
	display:    flex;
	align-items: center;
	background: var( --reel-bg );
	padding-top: 0;
	padding-bottom: 0;
	/* Contain the scaled-down wrap inside the section background */
	overflow: hidden;
}

.section.reel .w-container {
	width: 100%;
}

.reel-content-wrap {
	transform-origin : center center;
	will-change      : transform, opacity, border-radius;
}

.wr-reel-stage {
	position:      relative;
	border-radius: 40px; /* matches .reel-content-wrap --_base---r40; explicit so GSAP never overrides it to 0 */
	overflow:      hidden;
}

.wr-reel-player-shell {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: #000;
	border-radius: inherit;
	overflow: hidden;
}

.wr-reel-stage.wr-reel-is-playing .wr-reel-player-shell {
	z-index: 3;
}

.wr-reel-youtube-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.wr-reel-poster-layer {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.wr-reel-poster-layer .reel-banner {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wr-reel-poster-layer .reel-btn-inner {
	position: absolute;
	inset: 0;
}

.wr-reel-stage.wr-reel-is-playing .wr-reel-poster-layer {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Button play control inherits .reel-btn look from page-effects */
button.reel-btn {
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

button.reel-btn:focus-visible {
	outline: 2px solid var(--_color---5e43fe, #5e43fe);
	outline-offset: 4px;
}