/*
 * /see-your-ad/, the live ad preview page (page-see-your-ad.php, js/see-your-ad.js). Loaded after css/home_minimal.css
 * and css/start.css: the finder, the video card and the steps are /start/'s; this file adds the phone mockup (an ad in
 * the feed and in Shorts, crossfading) and moves the mockup into the right column from 900 px.
 * Mobile first: at 375 x 812 the headline, the mockup, the box and its button sit on the first screen.
 */

.sya .st-title {
	max-width: 9.4em;
}

.sya .st-sub {
	margin-bottom: 14px;
}

/* the mockup is the preview here, so the finder card keeps its title, verdict and button only */
.sya .st-card .hm-preview__frame {
	display: none;
}

/* ---- the stage: one phone, two scenes ---- */

.sya-stage {
	margin: 0 0 16px;
}

.sya-phone {
	position: relative;
	height: 244px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--hm-white);
	box-shadow: 0 1px 0 var(--hm-rule), 0 10px 30px rgba(0, 0, 0, 0.12);
	isolation: isolate;
}

.sya-scene {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 450ms var(--hm-ease);
}

.sya-stage[data-mode="feed"] .sya-scene--feed,
.sya-stage[data-mode="short"] .sya-scene--short {
	opacity: 1;
}

.sya-avatar {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--hm-accent);
	color: var(--hm-white);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.sya-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.35);
}

.sya-bar i {
	display: block;
	width: 0;
	height: 100%;
	background: #ff0033;
}

.sya-stage[data-mode="feed"] .sya-scene--feed .sya-bar i,
.sya-stage[data-mode="short"] .sya-scene--short .sya-bar i {
	animation: sya-run 3.8s linear forwards;
}

@keyframes sya-run {
	to {
		width: 100%;
	}
}

/* the feed scene: the ad card as it sits in the YouTube home feed */

.sya-top,
.sya-skel {
	display: none; /* desktop only, inside the phone frame */
}

.sya-feed {
	position: relative;
}

.sya-feed__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #0f0f0f;
}

.sya-feed__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 40%;
}

.sya-stage[data-mode="feed"] .sya-feed__thumb img {
	animation: sya-zoom 3.8s ease-out forwards;
}

.sya-feed__meta {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 8px 76px 0 10px;
}

.sya-feed__text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.sya-feed__title {
	font-size: 14px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--hm-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sya-feed__sub {
	font-size: 12px;
	line-height: 1.3;
	color: var(--hm-meta);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sya-feed__cta {
	position: absolute;
	right: 10px;
	bottom: 2px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--hm-accent);
	color: var(--hm-white);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

/* the Shorts scene: a vertical frame with the channel, title and Sponsored line over it */

.sya-scene--short {
	background: linear-gradient(180deg, #1c1c1c, #0b0b0b);
}

.sya-short {
	position: relative;
	height: 100%;
	aspect-ratio: 9 / 16;
	margin: 0 auto;
	overflow: hidden;
	background: #000;
}

.sya-short img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 60% 45%;
}

/* a Short in the feed scene: its vertical frame, letterboxed in the 16:9 card */
.sya-stage[data-own="short"] .sya-feed__thumb img {
	object-fit: contain;
}

/* a regular (16:9) video shows letterboxed in the Shorts feed, as it would run */
.sya-stage[data-own="video"] .sya-short img {
	object-fit: contain;
}

.sya-stage[data-mode="short"] .sya-short img {
	animation: sya-zoom 3.8s ease-out forwards;
}

.sya-stage[data-own="video"][data-mode="short"] .sya-short img {
	animation: none;
}

@keyframes sya-zoom {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.06);
	}
}

.sya-short::after {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72));
	pointer-events: none;
}

.sya-short__rail {
	position: absolute;
	z-index: 1;
	right: 6px;
	bottom: 52px;
	display: grid;
	gap: 10px;
}

.sya-short__rail svg {
	width: 16px;
	height: 16px;
	opacity: 0.9;
}

.sya-short__meta {
	position: absolute;
	z-index: 1;
	left: 7px;
	right: 26px;
	bottom: 10px;
	display: grid;
	gap: 3px;
	color: var(--hm-white);
	font-size: 10px;
	line-height: 1.25;
}

.sya-short__ch {
	display: flex;
	gap: 5px;
	align-items: center;
	font-weight: 600;
	min-width: 0;
}

.sya-short__ch .sya-avatar {
	width: 16px;
	height: 16px;
	font-size: 8px;
}

.sya-short__ch .sya-ch {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sya-short__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sya-short__ad .hm-ad {
	font-size: 8px;
	padding: 2px 3px 1px;
}

.sya-bar--short {
	z-index: 2;
	height: 2px;
}

/* the two chips: which placement is showing (tap to pick one) */

.sya-tabs {
	position: absolute;
	z-index: 3;
	top: 8px;
	left: 8px;
	display: flex;
	gap: 6px;
}

.sya-stage {
	position: relative;
}

.sya-tab {
	padding: 6px 10px;
	border: 0;
	border-radius: 999px;
	background: rgba(15, 15, 15, 0.62);
	color: var(--hm-white);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.sya-tab.is-on {
	background: var(--hm-white);
	color: var(--hm-ink);
}

.sya-tab:focus-visible {
	outline: none;
	box-shadow: var(--hm-focus);
}

.sya-cap {
	display: none; /* the headline says it on a phone; the caption shows beside the bigger phone on desktop */
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--hm-meta);
	text-align: center;
}

/* the site chat launcher steps aside while it would cover a primary button (js/see-your-ad.js checkLauncher) */
html.sya-cta-on .spc-launch {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.sya-scene {
		transition: none;
	}
	.sya-stage .sya-bar i,
	.sya-stage .sya-feed__thumb img,
	.sya-stage .sya-short img {
		animation: none !important;
	}
}

/* ---- Desktop: the copy and the box left, the phone right ---- */

@media (min-width: 900px) {
	.sya .st-lead {
		grid-template-columns: minmax(0, 1fr) 320px;
		grid-template-areas:
			"title  stage"
			"sub    stage"
			"finder stage"
			"result stage"
			"proof  stage";
		grid-template-rows: auto auto auto auto 1fr;
		column-gap: 72px;
	}

	.sya .st-result {
		grid-area: result;
		margin-top: 12px;
	}

	/* the box column at /start/'s width, so the field is not 728 px long beside the phone */
	.sya .st-finder,
	.sya .st-result,
	.sya .st-proof {
		max-width: 536px;
	}

	.sya .st-result:empty {
		display: none;
	}

	.sya .st-proof {
		align-self: start;
		justify-content: flex-start;
	}

	.sya-stage {
		grid-area: stage;
		margin: 0;
		position: relative;
	}

	.sya-phone {
		width: 300px;
		height: 610px;
		margin: 0 auto;
		border: 10px solid #111;
		border-radius: 46px;
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
	}

	.sya-top {
		display: flex;
		gap: 8px;
		align-items: center;
		height: 44px;
		padding: 14px 14px 0;
	}

	.sya-top svg {
		width: 26px;
		height: 26px;
	}

	.sya-top__bar {
		flex: 1;
		height: 10px;
		border-radius: 5px;
		background: #ececec;
	}

	.sya-top__dot {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: #ececec;
	}

	.sya-feed {
		margin-top: 10px;
	}

	.sya-feed__meta {
		padding: 10px 12px 0;
	}

	.sya-feed__title {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.sya-feed__cta {
		position: static;
		display: block;
		margin: 12px 12px 0;
		padding: 10px 12px;
		text-align: center;
		font-size: 13px;
	}

	.sya-skel {
		display: grid;
		gap: 12px;
		padding: 18px 12px 0;
	}

	.sya-skel span {
		display: block;
		height: 118px;
		border-radius: 10px;
		background: #f0f0f0;
	}

	.sya-skel span + span {
		height: 14px;
		width: 70%;
		border-radius: 7px;
	}

	.sya-skel span + span + span {
		width: 45%;
	}

	.sya-short {
		height: 100%;
		width: 100%;
		aspect-ratio: auto;
	}

	.sya-short__meta {
		left: 14px;
		right: 46px;
		bottom: 20px;
		gap: 6px;
		font-size: 13px;
	}

	.sya-short__ch .sya-avatar {
		width: 24px;
		height: 24px;
		font-size: 11px;
	}

	.sya-short__ad .hm-ad {
		font-size: 10px;
		padding: 3px 4px 2px;
	}

	.sya-short__rail {
		right: 12px;
		bottom: 90px;
		gap: 18px;
	}

	.sya-short__rail svg {
		width: 26px;
		height: 26px;
	}

	.sya-bar--short {
		height: 3px;
	}

	.sya-tabs {
		position: static;
		justify-content: center;
		margin-top: 16px;
	}

	.sya-tab {
		padding: 9px 14px;
		font-size: 14px;
		background: var(--hm-white);
		color: var(--hm-ink);
		border: 1px solid var(--hm-rule);
	}

	.sya-tab.is-on {
		background: var(--hm-ink);
		color: var(--hm-white);
		border-color: var(--hm-ink);
	}

	.sya-cap {
		display: block;
	}
}