/**
 * Nova Lista — "Sponsor strip" display template (ad-slot-strip.php).
 *
 * Adds the turn-taking border light, the green "관련: …" tag and the hover
 * arrow. The card itself (size, border, photo, name and meta line) is left
 * to the theme's styling of .nova-lista-ad__* so the template drops into an
 * already-styled sponsor band. Loaded only on pages that render the template.
 */

.nova-lista-ads--tpl-strip {
	--nova-lista-strip-accent: #0b6e64;
	--nova-lista-strip-accent-ink: #ffffff;
	--nova-lista-strip-glow: #3cc2ae;
	--nova-lista-strip-blue: #2563eb;
	--nova-lista-strip-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--nova-lista-strip-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@property --nova-lista-strip-a {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.nova-lista-ads--tpl-strip .nova-lista-ad--strip { position: relative; }
.nova-lista-ads--tpl-strip .nova-lista-ad--strip::after {
	content: "";
	position: absolute;
	inset: -1px;
	padding: 2px;
	border-radius: inherit;
	background: conic-gradient(from var(--nova-lista-strip-a), transparent 0 68%, var(--nova-lista-strip-glow) 82%, var(--nova-lista-strip-blue) 93%, transparent);
	opacity: 0;
	pointer-events: none;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.nova-lista-ads--tpl-strip .nova-lista-ad--strip.is-lit::after { animation: nova-lista-strip-trace 1.9s var(--nova-lista-strip-ease-in-out) both; }
.nova-lista-ads--tpl-strip .nova-lista-ad--strip.is-lit { animation: nova-lista-strip-glow 1.9s ease; }
.nova-lista-ads--tpl-strip .nova-lista-ad--strip.is-match {
	box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--nova-lista-strip-accent) 45%, transparent);
	transform: translateY(-2px);
}

@keyframes nova-lista-strip-trace {
	0% { --nova-lista-strip-a: 0deg; opacity: 0; }
	14% { opacity: 1; }
	84% { opacity: 1; }
	100% { --nova-lista-strip-a: 360deg; opacity: 0; }
}
/* Only the midpoint is set, so the glow returns to the card's own (is-match) shadow. */
@keyframes nova-lista-strip-glow {
	50% { box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--nova-lista-strip-blue) 55%, transparent); }
}

.nova-lista-ads--tpl-strip .nova-lista-ad-strip__match {
	position: absolute;
	top: -9px;
	right: 10px;
	z-index: 1;
	height: 20px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--nova-lista-strip-accent);
	color: var(--nova-lista-strip-accent-ink);
	font-size: 11.5px;
	font-weight: 800;
	line-height: 20px;
	white-space: nowrap;
	transform-origin: 100% 100%;
}
.nova-lista-ads--tpl-strip .nova-lista-ad-strip__match[hidden] { display: none; }

/* Overrides the markup's [hidden], which only covers the moment before this file loads. */
.nova-lista-ads--tpl-strip .nova-lista-ad-strip__go {
	position: absolute;
	top: -7px;
	right: -7px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--nova-lista-strip-blue);
	color: #fff;
	opacity: 0;
	transform: scale(.5);
	transition: opacity .18s ease, transform .25s var(--nova-lista-strip-ease-out);
	pointer-events: none;
}
.nova-lista-ads--tpl-strip .nova-lista-ad-strip__go svg { width: 11px; height: 11px; }
.nova-lista-ads--tpl-strip .is-match .nova-lista-ad-strip__go { display: none; }

@media (hover: hover) and (pointer: fine) {
	.nova-lista-ads--tpl-strip .nova-lista-ad--strip:hover .nova-lista-ad-strip__go { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.nova-lista-ads--tpl-strip .nova-lista-ad--strip.is-lit,
	.nova-lista-ads--tpl-strip .nova-lista-ad--strip.is-lit::after,
	.nova-lista-ads--tpl-strip .nova-lista-ad-strip__go { animation: none; transition: none; }
}