/* Contact Map */
.cm-host{position:relative;overflow:hidden;}
.cm-inner{position:relative;z-index:1;}
.cm-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.cm-bg svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;}
/* kaart: eerst vaag, met AF scherp */
.cm-land{opacity:0;filter:blur(6px);transition:filter 1s ease,opacity 1s ease;}
.cm-land path{fill:none;stroke:#C4C4C4;stroke-width:.7px;stroke-linejoin:round;stroke-linecap:round;}
.cm-bg.cm-ready .cm-land{opacity:.7;}
.cm-bg.cm-on .cm-land{opacity:1;filter:blur(0);}
/* route, stippen, labels: alleen scherp */
.cm-top>*{opacity:0;transition:opacity .5s ease;}
.cm-bg.cm-on .cm-top>*{opacity:1;}
.cm-bg.cm-on .cm-top text{transition-delay:.8s;}
.cm-route{fill:none;stroke-linecap:round;}
.cm-route-main{stroke:#1A1A1A;stroke-width:1.4px;}
.cm-route-next{stroke:#A3A3A3;stroke-width:1px;}
.cm-route-main.cm-drawn{stroke-dasharray:5 6;}
.cm-route-next.cm-drawn{stroke-dasharray:2 6;}
.cm-dot-home{fill:#1A1A1A;}
.cm-dot-main{fill:#F0CB35;stroke:#1A1A1A;stroke-width:1.2px;}
.cm-dot-next{fill:#A3A3A3;}
.cm-pulse{fill:none;stroke:#1A1A1A;stroke-width:1px;transform-box:fill-box;transform-origin:center;}
.cm-bg.cm-on .cm-pulse{animation:cm-pulse 2.4s ease-out infinite;}
@keyframes cm-pulse{0%{transform:scale(.8);opacity:.8}100%{transform:scale(2.6);opacity:0}}
.cm-label{font-family:"VHS",monospace;font-size:11px;letter-spacing:.5px;fill:#1A1A1A;paint-order:stroke;stroke:#FFFFFF;stroke-width:4px;stroke-linejoin:round;}
.cm-label-next{fill:#8A8A8A;}
.cm-label-home{fill:rgba(26,26,26,.6);}
/* AF-knop + status */
.cm-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;}
.cm-row .cm-af,.cm-row .cm-af:hover,.cm-row .cm-af:focus{box-shadow:none;text-decoration:none;}
.cm-row .cm-af{display:inline-flex;align-items:center;gap:10px;margin:0 0 0 -12px;padding:10px 14px 9px 12px;border:1px solid transparent;border-radius:0;background:transparent;color:#1A1A1A;font-family:"VHS",monospace;font-weight:500;font-size:12px;letter-spacing:1px;line-height:1;text-transform:uppercase;cursor:pointer;transition:background-color .2s,border-color .2s;}
.cm-row .cm-af:hover,.cm-row .cm-af:focus-visible{background:#F0CB35;border-color:#F0CB35;color:#1A1A1A;outline:none;}
.cm-row .cm-af:focus{outline:none;}
.cm-br{position:relative;display:block;width:24px;height:18px;flex:none;}
.cm-br i{position:absolute;width:7px;height:7px;border:0 solid #1A1A1A;transition:transform .35s ease;}
.cm-br i:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px;}
.cm-br i:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0;}
.cm-br i:nth-child(3){left:0;bottom:0;border-width:0 0 1.5px 1.5px;}
.cm-br i:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0;}
.cm-af-on .cm-br i:nth-child(1){transform:translate(3px,2px);}
.cm-af-on .cm-br i:nth-child(2){transform:translate(-3px,2px);}
.cm-af-on .cm-br i:nth-child(3){transform:translate(3px,-2px);}
.cm-af-on .cm-br i:nth-child(4){transform:translate(-3px,-2px);}
.cm-blink .cm-br{animation:cm-blink .17s steps(1) 4 .3s;}
@keyframes cm-blink{50%{opacity:0}}
.cm-lock{color:#F0CB35;-webkit-text-stroke:.6px #1A1A1A;}
.cm-row .cm-af:hover .cm-lock{-webkit-text-stroke:0;color:#1A1A1A;}
.cm-status,.cm-note{margin:0;font-family:"VHS",monospace;font-weight:500;font-size:12px;letter-spacing:1px;line-height:1.4;text-transform:uppercase;color:rgba(26,26,26,.55);}
.cm-note{flex-basis:100%;}
/* foto: vaag -> AF-hoekjes -> scherp */
.cm-photo{position:relative;overflow:hidden;}
.cm-photo img{transition:filter 1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1);}
.cm-photo.cm-blurred img{filter:blur(12px);transform:scale(1.04);}
.cm-photo.cm-blurred.cm-focused img{filter:none;transform:none;}
.cm-photo-br{position:absolute;inset:4%;pointer-events:none;opacity:0;transition:inset .6s cubic-bezier(.3,.8,.3,1),opacity .3s ease;}
.cm-photo-br i{position:absolute;width:26px;height:26px;border:0 solid #FFFFFF;}
.cm-photo-br i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px;}
.cm-photo-br i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0;}
.cm-photo-br i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px;}
.cm-photo-br i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0;}
.cm-photo.cm-focusing .cm-photo-br{opacity:1;inset:12%;}
.cm-photo.cm-focused .cm-photo-br{animation:cm-blink .17s steps(1) 4;}
.cm-photo.cm-photo-done .cm-photo-br{opacity:0;}
/* telefoon: foto schuift sneller omhoog, wordt vaag en loopt weg in het wit */
.cm-photo.cm-fade{will-change:transform,opacity;}
.cm-photo:not(.cm-fade) .cm-fade-blur{display:none;}
.cm-fade-blur{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;filter:blur(14px);transform:scale(1.08);opacity:0;pointer-events:none;will-change:opacity;}
@keyframes cm-blur-in{from{opacity:0}to{opacity:1}}
@keyframes cm-photo-out{0%{opacity:1;transform:translate3d(0,0,0)}35%{opacity:1}100%{opacity:0;transform:translate3d(0,-40%,0)}}
@supports (animation-timeline: scroll()){
	.cm-fade.cm-sda .cm-fade-blur{animation:cm-blur-in linear both;animation-timeline:scroll(root);animation-range:0px calc(var(--cm-end,400px) * .6);}
	.cm-fade.cm-sda{animation:cm-photo-out linear both;animation-timeline:scroll(root);animation-range:0px var(--cm-end,400px);}
}
/* ruimte waar de route in valt */
.cm-zone{height:300px;pointer-events:none;}
@media (max-width:767px){
	.cm-zone{height:230px;}
	.cm-label{font-size:10px;}
}
@media (prefers-reduced-motion:reduce){
	.cm-bg *,.cm-row *{transition:none !important;animation:none !important;}
}