/* Animated branded video thumbnails (.mt-th), generated by scripts/site-thumbs.mjs. Navy #021F56, primary #0360E0, accent #6BA6FF, Inter. */
.mt-th { position: absolute; inset: 0; display: block; overflow: hidden; color: #fff; font-family: Inter, system-ui, sans-serif; --g1: #021F56; --g2: #0360E0; background: linear-gradient(135deg, var(--g1), var(--g2)); container-type: inline-size; }
.mt-th[data-v="1"] { --g1: #021F56; --g2: #2b6fe8; } .mt-th[data-v="2"] { --g1: #05296f; --g2: #0360E0; } .mt-th[data-v="3"] { --g1: #021F56; --g2: #3b86f0; } .mt-th[data-v="4"] { --g1: #0a2f7a; --g2: #0360E0; }
.mt-th::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; inset-inline-end: -18%; inset-block-start: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(107,166,255,.55), rgba(107,166,255,0) 65%); animation: mt-glow 7s ease-in-out infinite alternate; }
.mt-b { position: absolute; inset-inline-start: 56%; inset-block-end: 12%; width: 26%; height: 11%; border-radius: 10px 10px 10px 3px; background: rgba(255,255,255,.2); opacity: 0; animation: mt-rise 4.8s ease-in-out infinite; }
.mt-b.b2 { inset-inline-start: 66%; width: 22%; background: rgba(107,166,255,.38); animation-delay: 1.6s; }
.mt-b.b3 { inset-inline-start: 50%; width: 18%; animation-delay: 3.2s; }
.mt-lg { position: absolute; inset-block-start: 8%; inset-inline-start: 5%; display: grid; place-items: center; width: 8.5cqw; min-width: 26px; height: 8.5cqw; min-height: 26px; }
.mt-lg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mt-ic { position: absolute; inset-block-start: 8%; inset-inline-end: 6%; display: grid; place-items: center; width: 17cqw; min-width: 44px; aspect-ratio: 1; border-radius: 50%; color: #d6e6ff; background: rgba(255,255,255,.16); border: 1.5px solid rgba(160,200,255,.8); animation: mt-pulse 3.2s ease-in-out infinite; }
.mt-ic svg { width: 55%; height: 55%; }
.mt-tx { position: absolute; inset-inline: 5% 22%; inset-block-end: 8%; display: flex; flex-direction: column; gap: 3px; text-align: start; }
.mt-tx small { font: 700 clamp(9px, 3.1cqw, 12px)/1.2 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6BA6FF; }
.mt-tx b { font: 800 clamp(13px, 5.6cqw, 22px)/1.18 Inter, system-ui, sans-serif; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
@keyframes mt-glow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-12%, 14%) scale(1.15); } }
@keyframes mt-rise { 0% { opacity: 0; transform: translateY(18px); } 20%, 55% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes mt-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(107,166,255,.4); } 50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(107,166,255,0); } }
@media (prefers-reduced-motion: reduce) { .mt-th::before, .mt-b, .mt-ic { animation: none; } .mt-b { opacity: .5; } }
.kb-thumb .mt-th, .r-hvThumb .mt-th { z-index: 0; }
.kb-thumb::after { display: none; }
.kb-thumb .kb-play { inset-inline-start: auto; inset-inline-end: 12px; z-index: 2; }
.r-hvThumb .r-hvPlay { z-index: 2; }
.r-hvThumb .mt-th:not(.mt-vid) .mt-tx b { display: none; }
.mt-vid { background: #021F56; }
.mt-vid::before { display: none; }
.mt-vid img, .mt-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-vid video { z-index: 1; }
.r-hvThumb .r-hvDur { z-index: 2; }
.mt-b { inset-block-end: 34%; }
.mt-tx { inset-inline-end: 22%; }