/*
 * Motion Kit: Card Carousel, "Drum" layout (the client's technology.html).
 * A flat, looping row of flip cards, one theme facing the visitor at a time. Everything is scoped to .mkd.
 * --mkd-cw / card sizes are read by assets/js/card-drum.js, so keep them on .mkd-orbit as CSS lengths.
 */
.mk.mkd {
	--mkd-card: rgba(120, 150, 176, 0.9);
	--mkd-edge: rgba(214, 228, 240, 0.5);
	--mkd-gold: #c9a15a;
	--mkd-icon-gold: #f2d08e;
	--mkd-num: #bc2026;
	--mkd-ink: #fff;
	--mkd-lab: #eef4f9;
	--mkd-back: #fff;
	--mkd-back-ink: #4d6b80;
	--mkd-back-title: #253f52;
	--mkd-tab: #a3b5c3;
	--mkd-tab-on: #fff;
	--mkd-sky: #8da3b2;
	--mkd-line: rgba(37, 63, 82, 0.26);
	--hold: 5000ms;
	position: relative;
}

/* ---- theme buttons (one bar fills while a theme is held) ---- */
.mkd-themes { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px clamp(18px, 4vw, 56px); margin-bottom: 22px; counter-reset: mkd-t; }
.mk.mkd .mkd-themes button {
	position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 0;
	border-bottom: 2px solid transparent;
	font: 500 12.5px var(--mk-mono); letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--mkd-tab); transition: color 0.35s, border-color 0.35s;
}
@media (hover: hover) { .mk.mkd .mkd-themes button:hover { color: #dce6ee; } }
.mk.mkd .mkd-themes button.is-on { color: var(--mkd-tab-on); border-bottom-color: rgba(220, 230, 238, 0.2); }
.mkd-themes button::before { counter-increment: mkd-t; content: counter(mkd-t, decimal-leading-zero); color: var(--mkd-num); letter-spacing: 0.08em; }
.mkd-themes button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--mkd-sky); transform: scaleX(0); transform-origin: left; }
.mkd-themes button.run::after { animation: mkd-fill var(--hold, 5000ms) linear forwards; }
.mkd.paused .mkd-themes button.run::after { animation-play-state: paused; }
.mkd.no-auto .mkd-themes button.is-on::after { transform: scaleX(1); }
@keyframes mkd-fill { to { transform: scaleX(1); } }
.mkd-dots { display: none; } /* phones only: one bar per stop */

/* ---- the row ---- */
.mkd-orbit {
	--ow: min(calc(100vw - 32px), 1500px); --gap: 20px; --ggap: 72px;
	--cw: min(290px, calc((var(--ow) - 2 * var(--gap) - 80px) / 3)); --ch: 340px;
	position: relative; width: var(--ow); margin-left: calc((100% - var(--ow)) / 2); height: calc(var(--ch) + 60px);
	touch-action: pan-y; user-select: none; -webkit-user-select: none;
	overflow-x: clip; /* cards parked off to the sides never widen the page */
	-webkit-mask: linear-gradient(90deg, transparent, #000 var(--fade, 40px), #000 calc(100% - var(--fade, 40px)), transparent) no-repeat;
	mask: linear-gradient(90deg, transparent, #000 var(--fade, 40px), #000 calc(100% - var(--fade, 40px)), transparent) no-repeat;
}
.mkd-ring { position: absolute; inset: 0; pointer-events: none; }
.mk.mkd .mkd-cap {
	position: absolute; left: 50%; top: 50%; pointer-events: auto;
	width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
	perspective: 1400px; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: left;
}
.mkd-cap:focus-visible { outline: 0; }
.mkd-tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
.mkd-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.mkd-cap.is-flipped .mkd-flip { transform: rotateY(180deg); }
@media (hover: hover) {
	.mkd-cap:not(.is-side):hover .mkd-front i { transform: scale(1.18); }
	.mkd-cap:not(.is-side):hover .mkd-front { filter: brightness(1.07); }
	.mkd-cap.is-side:hover .mkd-face { opacity: calc(var(--o, 1) + 0.14); }
}

/* ---- faces ---- */
.mkd-face {
	position: absolute; inset: 0; display: flex; flex-direction: column; padding: 26px 24px 28px;
	border: 1px solid var(--mkd-edge); background: var(--mkd-card); border-radius: 10px;
	opacity: var(--o, 1); transition: filter 0.35s;
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.mkd-cap:focus-visible .mkd-face { border-color: var(--mkd-sky); }
.mkd-face .mkd-k { display: flex; gap: 10px; font: 500 11px/1.5 var(--mk-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mkd-lab); }
.mkd-front .mkd-k::before { content: attr(data-n); color: #fff; }
.mkd-back .mkd-k { margin-top: auto; padding-top: 14px; color: var(--mk-gray); }

.mkd-front {
	background: repeating-linear-gradient(180deg, transparent 0 21px, rgba(255, 255, 255, 0.07) 21px 22px), var(--mkd-card);
	transition: filter 0.35s, border-color 0.5s, box-shadow 0.5s;
}
.mkd-cap:not(.is-side) .mkd-front {
	border-color: color-mix(in srgb, var(--mkd-gold) 75%, transparent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px color-mix(in srgb, var(--mkd-gold) 18%, transparent), 0 22px 60px -22px color-mix(in srgb, var(--mkd-gold) 45%, transparent);
}
.mkd-front .mkd-ic { margin-top: auto; width: 40px; height: 40px; color: #fff; }
.mkd-front .mkd-ic svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mkd-front .mkd-ic .g { stroke: var(--mkd-icon-gold); }
.mkd-front .mkd-ic--el { display: flex; align-items: center; font-size: 34px; line-height: 1; }
.mkd-front .mkd-ic--el svg { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.mkd-front .mkd-ic--el i { font-size: 34px; line-height: 1; }
.mkd-front .mkd-t { margin-top: auto; font-size: 27px; font-weight: 300; line-height: 1.15; letter-spacing: -0.015em; color: var(--mkd-ink); }
.mkd-front .mkd-ic + .mkd-t { margin-top: 16px; min-height: 2.3em; }
.mkd-front .mkd-cue { display: flex; align-items: center; gap: 10px; margin-top: 18px; font: 500 11px/1 var(--mk-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mkd-lab); }
.mkd-front .mkd-plus { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #fff; opacity: 0.85; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.mkd-front .mkd-plus::before, .mkd-front .mkd-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.2px; background: #fff; transform: translate(-50%, -50%); }
.mkd-front .mkd-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
@media (hover: hover) { .mkd-cap:not(.is-side):hover .mkd-front .mkd-plus { transform: scale(1.18); } }

.mkd-back { transform: rotateY(180deg); background: var(--mkd-back); border-color: var(--mkd-back); color: var(--mkd-back-ink); }
.mkd-back .mkd-t { font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--mkd-back-title); padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--mkd-line); }
.mkd-back .mkd-d { font-size: 15.5px; line-height: 1.6; }

/* ---- tablet ---- */
@media (max-width: 1080px) { .mkd-orbit { --cw: 250px; --ch: 320px; } }

/* ---- phone: one card at a time, the active theme only, one bar per card ---- */
@media (max-width: 760px) {
	.mkd-orbit { --cw: 232px; --ch: 290px; height: calc(var(--ch) + 40px); -webkit-mask-image: none; mask-image: none; }
	.mk.mkd .mkd-themes button { min-height: 44px; }
	.mk.mkd .mkd-themes button:not(.is-on) { display: none; }
	.mkd-front .mkd-t { font-size: 24px; }
	.mkd-back .mkd-t { font-size: 19px; }
	.mkd-back .mkd-d { font-size: 15px; }
	.mkd-dots { display: flex; justify-content: center; }
	.mk.mkd .mkd-dots button { position: relative; width: 30px; height: 44px; }
	.mkd-dots button::before { content: ''; position: absolute; left: 5px; right: 5px; top: 21px; height: 2px; background: rgba(220, 230, 238, 0.28); transition: background-color 0.3s; }
	.mkd-dots button.is-on::before { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
	.mkd-themes button.run::after { animation: none; transform: scaleX(1); }
	.mkd-flip, .mkd-front .mkd-plus { transition: none; }
}