/* Easter Eggs */
/* ---------- melding ---------- */
.ee-toast{position:fixed;left:50%;bottom:28px;z-index:100001;transform:translate(-50%,10px);padding:9px 14px 8px;background:#1A1A1A;color:#F0CB35;font-family:"VHS",monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;line-height:1;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;}
.ee-toast.ee-toast-on{opacity:1;transform:translate(-50%,0);}

/* ---------- REC ---------- */
.ee-rec{position:fixed;inset:0;z-index:100000;pointer-events:none;opacity:0;transition:opacity .3s ease;}
.ee-rec.ee-rec-on{opacity:1;}
.ee-rec-frame{position:absolute;left:22px;right:22px;top:var(--ee-top,22px);bottom:22px;color:#FFFFFF;filter:drop-shadow(0 0 1px rgba(0,0,0,.75)) drop-shadow(0 1px 2px rgba(0,0,0,.35));font-family:"VHS",monospace;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;line-height:1;}
.ee-rec-c{position:absolute;width:26px;height:26px;border:0 solid currentColor;}
.ee-rec-c.ee-rec-tl{left:0;top:0;border-width:2px 0 0 2px;}
.ee-rec-c.ee-rec-tr{right:0;top:0;border-width:2px 2px 0 0;}
.ee-rec-c.ee-rec-bl{left:0;bottom:0;border-width:0 0 2px 2px;}
.ee-rec-c.ee-rec-br{right:0;bottom:0;border-width:0 2px 2px 0;}
div.ee-rec-tl,div.ee-rec-tr,div.ee-rec-bl,div.ee-rec-br{position:absolute;display:flex;align-items:center;gap:10px;}
div.ee-rec-tl{left:38px;top:18px;}
div.ee-rec-tr{right:38px;top:18px;}
div.ee-rec-bl{left:38px;bottom:18px;}
div.ee-rec-br{right:38px;bottom:18px;}
.ee-rec-dot{width:12px;height:12px;border-radius:50%;background:#E1261C;animation:ee-blink 1s steps(1) infinite;}
.ee-rec-tc{margin-left:6px;}
.ee-rec-bat{position:relative;display:block;width:30px;height:14px;border:2px solid currentColor;}
.ee-rec-bat::before{content:"";position:absolute;left:2px;top:2px;bottom:2px;width:60%;background:currentColor;}
.ee-rec-bat::after{content:"";position:absolute;right:-6px;top:3px;width:3px;height:4px;background:currentColor;}
@keyframes ee-blink{50%{opacity:0}}
.ee-flash{position:fixed;inset:0;z-index:100002;pointer-events:none;background:#E1261C;animation:ee-flash .6s ease-out forwards;}
@keyframes ee-flash{0%{opacity:.35}100%{opacity:0}}
@media (max-width:767px){
	.ee-rec-frame{left:12px;right:12px;bottom:12px;font-size:12px;}
	div.ee-rec-tl,div.ee-rec-tr{top:14px;}
	div.ee-rec-tl,div.ee-rec-bl{left:30px;}
	div.ee-rec-tr,div.ee-rec-br{right:30px;}
	div.ee-rec-bl,div.ee-rec-br{bottom:14px;}
}

/* naam in de header: geen menu bij lang indrukken op de telefoon */
.ee-name{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}

/* ---------- ISO 6400 ---------- */
.ee-grain{position:fixed;inset:-50%;z-index:99999;pointer-events:none;background-size:180px 180px;animation:ee-grain .5s steps(1) infinite;}
.ee-grain.ee-grain-still{animation:none;}
@keyframes ee-grain{
	0%{transform:translate(0,0)}10%{transform:translate(-37px,21px)}20%{transform:translate(53px,-12px)}30%{transform:translate(-11px,64px)}40%{transform:translate(28px,33px)}
	50%{transform:translate(-61px,-44px)}60%{transform:translate(17px,-71px)}70%{transform:translate(-46px,8px)}80%{transform:translate(71px,49px)}90%{transform:translate(-23px,-27px)}
}

/* ---------- 404: overbelicht ---------- */
.ee-over{position:relative;overflow:hidden;cursor:pointer;}
.ee-over img{filter:contrast(.3) brightness(4) saturate(0);transition:filter 1.6s ease;}
.ee-over.ee-over-in img{filter:contrast(.5) brightness(2.6) saturate(.25);}
.ee-over.ee-over-in:hover img,.ee-over.ee-over-in.ee-fixed img{filter:none;transition-duration:.9s;}
.ee-over-cap{margin:10px 0 0;font-family:"VHS",monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(26,26,26,.45);}

/* ---------- /map/: paspoort ---------- */
.travel-map .ee-pass{display:block;margin:18px 0 0 auto;padding:0;border:0;background:none;font-family:"VHS",monospace;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.5);opacity:0;pointer-events:none;cursor:default;transition:opacity .5s ease,color .3s ease;}
.travel-map .ee-pass.ee-pass-show{opacity:1;}
.travel-map .ee-pass.ee-pass-done{color:#F0CB35;pointer-events:auto;cursor:pointer;}
.travel-map .ee-pass.ee-pass-done:hover,.travel-map .ee-pass.ee-pass-done:focus-visible{text-decoration:underline;outline:none;}
.travel-map .ee-pass.ee-pass-bump{animation:ee-bump .6s ease;}
@keyframes ee-bump{0%{color:#F0CB35;transform:scale(1.08)}100%{transform:none}}
.ee-stamp{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:rgba(26,26,26,.8);cursor:pointer;animation:ee-fade .3s ease;}
.ee-stamp.ee-stamp-out{opacity:0;transition:opacity .35s ease;}
.ee-stamp-ink{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 30px 16px;border:4px double #F0CB35;outline:2px solid #F0CB35;outline-offset:6px;color:#F0CB35;text-align:center;text-transform:uppercase;transform:rotate(-9deg);animation:ee-thump .45s cubic-bezier(.2,1.4,.4,1) both;-webkit-mask-size:140px 140px;mask-size:140px 140px;}
.ee-stamp-top,.ee-stamp-mid,.ee-stamp-date{font-family:"VHS",monospace;font-size:13px;letter-spacing:2px;}
.ee-stamp-big{font-family:"DIN1451",sans-serif;font-size:clamp(44px,7vw,84px);line-height:.9;}
.ee-stamp-close{font-family:"VHS",monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:28px;}
@keyframes ee-thump{0%{transform:rotate(-9deg) scale(2.6);opacity:0}60%{opacity:1}100%{transform:rotate(-9deg) scale(1);opacity:1}}
@keyframes ee-fade{from{opacity:0}to{opacity:1}}
.travel-map.ee-shake .tm-stage{animation:ee-shake .4s ease .3s;}
@keyframes ee-shake{0%,100%{transform:none}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-2px,1px)}80%{transform:translate(2px,0)}}
@media (max-width:767px){
	.ee-stamp-ink{padding:12px 18px 10px;}
	.ee-stamp-top,.ee-stamp-mid,.ee-stamp-date{font-size:10px;}
	.travel-map .ee-pass{margin-right:20px;font-size:11px;}
}

@media (prefers-reduced-motion:reduce){
	.ee-rec-dot,.ee-stamp-ink,.travel-map.ee-shake .tm-stage{animation:none !important;}
}
