/* Certificates in wood picture frames on an endless loop */
.kmv-cert{
	--kmv-wood-1:#6e4326;   /* base  */
	--kmv-wood-2:#8a5a36;   /* light grain */
	--kmv-wood-3:#3e2413;   /* dark grain */
	--kmv-lip:#c9a45c;      /* thin gilded inner lip */
	position:relative; overflow:hidden;
	padding:26px 0 44px; margin:0 -15px;
	-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
	        mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.kmv-cert-oak{ --kmv-wood-1:#a8743f; --kmv-wood-2:#c99a62; --kmv-wood-3:#7a4f26; --kmv-lip:#e2c98f; }
.kmv-cert-ebony{ --kmv-wood-1:#2a211c; --kmv-wood-2:#43362e; --kmv-wood-3:#120d0a; --kmv-lip:#b8995a; }

.kmv-cert-track{
	display:flex; width:max-content; margin:0; padding:0; list-style:none;
	animation:kmv-cert-loop var(--kmv-cert-dur,40s) linear infinite;
	will-change:transform;
}
.kmv-cert:hover .kmv-cert-track,
.kmv-cert:focus-within .kmv-cert-track{ animation-play-state:paused; }
@keyframes kmv-cert-loop{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

.kmv-cert-item{ flex:0 0 auto; margin:0; padding:0 22px; list-style:none; }

/* ---- Wooden frame ---- */
.kmv-cert-frame{
	position:relative; display:block; width:var(--kmv-cert-w,240px);
	padding:16px;                                   /* moulding width */
	border-radius:3px;
	background-color:var(--kmv-wood-1);
	background-image:
		/* fibre noise */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.09  0 0 0 0 0.04  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
		/* growth rings */
		repeating-linear-gradient(90deg, transparent 0 5px, rgba(0,0,0,.07) 5px 6px, transparent 6px 11px, rgba(255,255,255,.05) 11px 12px),
		/* light falls from the top-left */
		linear-gradient(135deg, var(--kmv-wood-2) 0%, var(--kmv-wood-1) 45%, var(--kmv-wood-3) 100%);
	box-shadow:
		inset 2px 2px 0 rgba(255,255,255,.22),          /* bevel highlight */
		inset -2px -2px 0 rgba(0,0,0,.45),              /* bevel shade */
		inset 0 0 0 1px rgba(0,0,0,.35),
		0 2px 3px rgba(0,0,0,.25),                      /* contact shadow */
		0 18px 28px -6px rgba(40,22,8,.45),             /* wall shadow */
		0 40px 60px -20px rgba(40,22,8,.35);
	transition:transform .35s ease, box-shadow .35s ease;
	text-decoration:none;
}
/* rounded moulding profile */
.kmv-cert-frame::before{
	content:""; position:absolute; inset:5px; border-radius:2px; pointer-events:none;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.08),
		inset 3px 3px 5px rgba(255,255,255,.12),
		inset -3px -3px 6px rgba(0,0,0,.35);
}
/* mitred corner joints */
.kmv-cert-frame::after{
	content:""; position:absolute; inset:0; pointer-events:none; border-radius:3px;
	background:
		linear-gradient(45deg,  transparent calc(50% - .6px), rgba(0,0,0,.35) 50%, transparent calc(50% + .6px)) top left / 16px 16px no-repeat,
		linear-gradient(-45deg, transparent calc(50% - .6px), rgba(0,0,0,.35) 50%, transparent calc(50% + .6px)) top right / 16px 16px no-repeat,
		linear-gradient(-45deg, transparent calc(50% - .6px), rgba(0,0,0,.35) 50%, transparent calc(50% + .6px)) bottom left / 16px 16px no-repeat,
		linear-gradient(45deg,  transparent calc(50% - .6px), rgba(0,0,0,.35) 50%, transparent calc(50% + .6px)) bottom right / 16px 16px no-repeat;
}
.kmv-cert-frame:hover{
	transform:translateY(-6px) rotate(-.4deg);
	box-shadow:
		inset 2px 2px 0 rgba(255,255,255,.22),
		inset -2px -2px 0 rgba(0,0,0,.45),
		inset 0 0 0 1px rgba(0,0,0,.35),
		0 4px 6px rgba(0,0,0,.25),
		0 28px 40px -8px rgba(40,22,8,.5),
		0 60px 80px -24px rgba(40,22,8,.35);
}

/* gilded lip + cream passe-partout */
.kmv-cert-mat{
	display:block; padding:12px;
	background:#f6f0e2;
	border:3px solid var(--kmv-lip);
	box-shadow:
		0 0 0 1px rgba(0,0,0,.4),
		inset 0 1px 0 rgba(255,255,255,.6),
		inset 3px 3px 7px rgba(60,40,15,.28);         /* moulding casts a shadow on the mat */
}

/* the certificate behind glass */
.kmv-cert-glass{
	position:relative; display:block; overflow:hidden;
	aspect-ratio:1440 / 2035; background:#fff;
	box-shadow:0 0 0 1px rgba(0,0,0,.12), inset 0 0 6px rgba(0,0,0,.12);
}
.kmv-cert-glass::after{
	content:""; position:absolute; inset:0; pointer-events:none;
	background:
		linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 28%, rgba(255,255,255,0) 42%),
		linear-gradient(115deg, rgba(255,255,255,0) 70%, rgba(255,255,255,.12) 78%, rgba(255,255,255,0) 86%);
	transition:opacity .35s ease;
}
.kmv-cert-frame:hover .kmv-cert-glass::after{ opacity:.55; }
.kmv-cert-img{
	display:block; width:100% !important; height:100% !important; max-width:none;
	object-fit:cover; margin:0 !important;
}

@media (max-width:849px){
	.kmv-cert{ --kmv-cert-w:200px; padding:18px 0 34px; }
	.kmv-cert-item{ padding:0 14px; }
	.kmv-cert-frame{ padding:12px; }
	.kmv-cert-mat{ padding:9px; }
}
@media (max-width:549px){
	.kmv-cert{ --kmv-cert-w:170px; }
}

@media (prefers-reduced-motion:reduce){
	.kmv-cert{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
	.kmv-cert-track{ animation:none; }
}