/* SparkAI - "See it in action" YouTube section.
 *
 * The same section spark-pay and viral-cat carry: a still with a brand play
 * button that swaps itself for the iframe on click, so nothing is requested
 * from YouTube until somebody asks for it.
 *
 * Those two use a 16:9 frame because their cut is a landscape tutorial. This
 * one is a Short, so it keeps the 9:16 frame main-demo.css already uses -- a
 * landscape shell around a portrait video is mostly black bars.
 */

.video-tutorial {
	padding: 0 24px 72px;
	position: relative;
	z-index: 1;
}

.video-tutorial-inner {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.video-tutorial h2 {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fafafa;
	text-align: center;
}

.video-tutorial p {
	margin-top: 8px;
	font-size: 14px;
	color: var(--color-text-muted, #9ca3af);
	text-align: center;
	max-width: 440px;
}

.video-tutorial-frame {
	position: relative;
	margin-top: 28px;
	width: 280px;
	aspect-ratio: 9 / 16;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: #000;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.video-tutorial-frame iframe,
.video-tutorial-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.video-tutorial-thumb {
	object-fit: cover;
}

.video-tutorial-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: transparent;
}

/* The glow, the ring and the disc: the three layers the other sites animate on
   hover, done here with a group-hover equivalent rather than Tailwind. */
.video-tutorial-play .glow,
.video-tutorial-play .ring {
	position: absolute;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	transition:
		transform 0.7s ease-out,
		opacity 1s ease-out;
}

.video-tutorial-play .glow {
	background: var(--color-primary, #818cf8);
	opacity: 0.3;
	filter: blur(20px);
	transform: scale(1.5);
}

.video-tutorial-play:hover .glow {
	transform: scale(2.2);
}

.video-tutorial-play .ring {
	border: 2px solid var(--color-primary, #818cf8);
	opacity: 0;
	transform: scale(1.5);
}

.video-tutorial-play:hover .ring {
	opacity: 0.2;
	transform: scale(2.5);
}

.video-tutorial-play .disc {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-primary, #818cf8);
	color: #fff;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease,
		filter 0.3s ease;
}

.video-tutorial-play:hover .disc {
	transform: scale(1.1);
	filter: brightness(1.1);
	box-shadow: 0 0 50px rgba(129, 140, 248, 0.5);
}

.video-tutorial-play .disc svg {
	margin-left: 3px;
	transition: transform 0.3s ease;
}

.video-tutorial-play:hover .disc svg {
	transform: scale(1.25);
}

@media (min-width: 640px) {
	.video-tutorial-frame {
		width: 320px;
	}

	.video-tutorial h2 {
		font-size: 30px;
	}
}