/* krismerc.tv touches: dip to black, hover play, dim, peek frame, image fade. v2 */
html{background:#000}
@keyframes k2in{from{opacity:0}to{opacity:1}}
body{animation:k2in .15s linear backwards;transition:opacity .12s linear}
html.k2-out body{opacity:0!important}
.km-card-image{position:relative!important}
video.k2-tv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .25s ease;pointer-events:none;background:transparent}
video.k2-tv.is-on{opacity:1}
img.k2-f,iframe.k2-f{opacity:0;transition:opacity .5s ease}
img.k2-f.k2-ld,iframe.k2-f.k2-ld{opacity:1}
.k2-peek{position:fixed;left:0;top:0;width:min(13vw,160px);aspect-ratio:16/9;z-index:9999;pointer-events:none;opacity:0;transition:opacity .18s ease;will-change:transform;background:#000;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.65)}
.k2-peek.is-on{opacity:1}
.k2-peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0;padding:0}
a.k2-copied{color:#ffe500!important}
@media (hover:hover) and (pointer:fine){
.km-card,.k2-ix li,.k2-cats a{transition:opacity .35s ease,background-color .12s ease}
.km-work-page:has(.km-card:hover) .km-card:not(:hover){opacity:.6}
.km-index-page:has(.k2-ix li:hover) .k2-ix li:not(:hover){opacity:.6}
.k2-cats:has(a:hover) a:not(:hover){opacity:.6}
}
@media (prefers-reduced-motion:reduce){
body{animation:none;transition:none}
html.k2-out body{opacity:1!important}
video.k2-tv,.k2-peek{display:none!important}
img.k2-f,iframe.k2-f{opacity:1;transition:none}
}