/* =========================================================
   CAMERABEELD — nachtzicht (pure CSS, no JS)
   Root .cf · classes cf-* · keyframes cf-* · animates transform + opacity only
   Base styles are the still frame; all motion sits in the
   prefers-reduced-motion: no-preference block at the bottom.
   Loop 12s · walk cycle 0.923s. Gegenereerd bestand (camerabeeld met wandelende persoon).
   ========================================================= */
.cf {
  --cf-navy: #14213D;
  --cf-navy-dark: #0d1628;
  --cf-navy-light: #1c2d4f;
  --cf-sage: #668F80;
  --cf-sage-light: #9cc2b4;
  --cf-text: #cfd8e6;
  --cf-text-2: #b9c6d8;
  --cf-rec: #e05a47;
  --cf-loop: 12s;
  --cf-step: 0.923s;
  position: relative;
  box-sizing: border-box;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  overflow: clip;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--cf-navy-dark);
  color: var(--cf-text);
  font-family: inherit;
  line-height: 1.2;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
.cf *, .cf *::before, .cf *::after { box-sizing: border-box; }
.cf-view { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }

/* ---------- scene layers ---------- */
.cf-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.cf-winlit { opacity: 0; }
.cf-zone {
  fill: rgba(156,194,180,.08);
  stroke: var(--cf-sage-light);
  stroke-width: 1.2px;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
.cf-zonel { opacity: .95; }
.cf-lampon { opacity: 1; }
.cf-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.cf-glow-lamp {
  left: 56.07%; top: 45.72%;
  width: 22cqw; height: 22cqw; margin: -11cqw 0 0 -11cqw;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0, rgba(207,216,230,.22) 9%, rgba(207,216,230,.07) 30%, rgba(207,216,230,0) 62%);
}
.cf-glow-bell {
  left: 55.44%; top: 53.12%;
  width: 3.4cqw; height: 3.4cqw; margin: -1.7cqw 0 0 -1.7cqw;
  background: radial-gradient(circle, #fff 0, rgba(255,255,255,.9) 12%, rgba(156,194,180,.45) 24%, rgba(156,194,180,0) 64%);
  opacity: 0;
}
.cf-glow-win {
  left: 29.1%; top: 52.69%;
  width: 34cqw; height: 22cqw; margin: -11cqw 0 0 -17cqw;
  background: radial-gradient(ellipse, rgba(207,216,230,.14) 0, rgba(207,216,230,.045) 45%, rgba(207,216,230,0) 70%);
  opacity: 0;
}

/* ---------- subject: person + detection box move as one ---------- */
.cf-subj {
  position: absolute;
  left: -7.021cqw;
  top: -23.404cqw;
  width: 14.043cqw;
  height: 23.404cqw;
  transform-origin: 50% 100%;
  transform: translate(44.468cqw, 47.673cqw) scale(0.758);
  will-change: transform;
}
.cf-fig { position: absolute; inset: 0; }
.cf-walker, .cf-stander { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 98%; }
.cf-stander { opacity: 0; }
.cf-shadow { fill: #0a1222; opacity: .55; }
.cf-walker g, .cf-stander g { transform-box: view-box; }
.cf-bob { transform: translateY(3.31px); }
.cf-legs { transform-origin: 60px 104px; transform: skewY(-11.31deg); }
.cf-leg { transform-origin: 60px 104px; }
.cf-shin { transform-origin: 60px 148px; }
.cf-foot { transform-origin: 60px 189px; }
.cf-arm { transform-origin: 59.5px 51px; }
.cf-fore { transform-origin: 59.5px 80px; }
.cf-ring { transform-origin: 77.4px 53px; }
.cf-ring2 { transform-origin: 79.4px 81px; }
/* still pose: mid-stride */
.cf-leg.cf-near { transform: rotate(-26.3deg); }
.cf-near .cf-shin { transform: rotate(15.5deg); }
.cf-near .cf-foot { transform: rotate(7.1deg); }
.cf-leg.cf-far { transform: rotate(12.6deg); }
.cf-far .cf-shin { transform: rotate(26deg); }
.cf-far .cf-foot { transform: rotate(-11.7deg); }
.cf-arm.cf-near { transform: rotate(19.9deg); }
.cf-near .cf-fore { transform: rotate(-13.1deg); }
.cf-arm.cf-far { transform: rotate(-15.9deg); }
.cf-far .cf-fore { transform: rotate(-25.9deg); }

/* detection box: corner brackets + faint outline */
.cf-box {
  position: absolute;
  left: 10%; right: 10%; top: 3.5000000000000004%; bottom: -3.5%;
  --cf-b: max(1.5px, .34cqw);
  --cf-l: 26%;
  --cf-c: var(--cf-sage-light);
  background:
    linear-gradient(var(--cf-c), var(--cf-c)) left top / var(--cf-l) var(--cf-b) no-repeat,
    linear-gradient(var(--cf-c), var(--cf-c)) left top / var(--cf-b) 13% no-repeat,
    linear-gradient(var(--cf-c), var(--cf-c)) right top / var(--cf-l) var(--cf-b) no-repeat,
    linear-gradient(var(--cf-c), var(--cf-c)) right top / var(--cf-b) 13% no-repeat,
    linear-gradient(var(--cf-c), var(--cf-c)) left bottom / var(--cf-l) var(--cf-b) no-repeat,
    linear-gradient(var(--cf-c), var(--cf-c)) left bottom / var(--cf-b) 13% no-repeat,
    linear-gradient(var(--cf-c), var(--cf-c)) right bottom / var(--cf-l) var(--cf-b) no-repeat,
    linear-gradient(var(--cf-c), var(--cf-c)) right bottom / var(--cf-b) 13% no-repeat,
    rgba(156,194,180,.07);
  outline: 1px solid rgba(156,194,180,.24);
  outline-offset: -1px;
  transform-origin: 50% 50%;
}

/* label rides on a box corner; never scaled, so it stays legible */
.cf-tag {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform: translate(40.211cqw, 30.554cqw);
  will-change: transform;
}
.cf-tag-in {
  position: absolute; left: 0; bottom: .4cqw;
  display: inline-flex; align-items: baseline; gap: .38em;
  padding: .26em .5em .28em;
  border-radius: 3px;
  background: var(--cf-sage-light);
  color: var(--cf-navy-dark);
  font-size: clamp(9px, 1.75cqw, 11.5px);
  line-height: 1.15;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 1px 6px rgba(13,22,40,.45);
}
.cf-tag-in b { font-weight: 700; }
.cf-conf { font-weight: 600; opacity: .72; }

/* ---------- camera image character (plain alpha overlays, no blend modes) ---------- */
.cf-ir, .cf-scan, .cf-grain, .cf-roll, .cf-vig { position: absolute; pointer-events: none; }
.cf-ir {
  inset: 0;
  background: radial-gradient(ellipse 46% 52% at 47% 70%, rgba(185,198,216,.13), rgba(185,198,216,.04) 55%, rgba(185,198,216,0) 78%);
}
.cf-scan {
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(13,22,40,0) 0 2px, rgba(13,22,40,.3) 2px 3px);
  opacity: .5;
}
.cf-grain {
  inset: -25%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cpath d='M0 50h1M34 48h1M76 84h1M18 4h1M4 102h1M19 71h1M63 13h1M20 75h1M1 2h1M19 25h1M32 7h1M98 101h1M68 74h1M35 123h1M31 13h1M93 36h1M100 18h1M26 126h1M114 34h1M124 12h1M94 121h1M21 33h1M122 27h1M114 83h1M104 39h1M38 55h1M91 105h1M9 63h1M58 88h1M93 23h1M91 65h1M70 122h1M122 61h1M102 34h1M107 28h1M64 19h1M106 94h1M75 50h1M105 19h1M36 39h1M61 48h1M6 8h1M77 113h1M26 22h1M127 85h1M89 117h1M6 69h1M98 68h1M30 67h1M103 31h1M78 51h1M110 68h1M59 91h1M52 12h1M77 63h1M110 31h1M84 86h1M111 67h1M61 81h1M18 50h1M34 105h1M1 31h1M10 16h1M104 92h1M69 121h1M84 122h1M57 5h1M20 20h1M63 56h1M97 68h1M98 110h1M85 56h1M121 28h1M54 88h1M96 59h1M50 113h1M48 76h1M122 113h1M48 122h1M110 52h1M95 54h1M21 78h1M10 90h1M35 54h1M107 29h1M50 84h1M35 62h1M27 12h1M97 51h1M44 46h1M6 45h1M54 101h1M122 82h1M4 93h1M96 74h1M52 66h1M102 57h1M34 49h1M109 114h1M40 60h1M8 13h1M123 110h1M70 111h1M78 69h1M39 30h1M93 80h1M40 24h1M77 18h1M51 15h1M28 7h1M84 73h1M49 25h1M17 59h1M0 5h1M76 95h1M76 85h1M80 53h1M44 123h1M82 43h1M121 69h1' stroke='%23cfd8e6' stroke-opacity='.3'/%3E%3Cpath d='M82 40h1M51 53h1M12 81h1M127 58h1M114 108h1M0 0h1M40 23h1M122 32h1M6 5h1M78 65h1M16 62h1M36 31h1M37 113h1M82 82h1M31 21h1M109 107h1M21 103h1M9 109h1M42 45h1M34 108h1M74 4h1M73 121h1M93 58h1M52 24h1M102 67h1M62 60h1M123 98h1M89 39h1M84 115h1M11 49h1M11 33h1M1 115h1M21 101h1M87 122h1M12 45h1M36 74h1M84 97h1M126 13h1M54 62h1M58 74h1M56 85h1M27 121h1M51 74h1M119 97h1M70 37h1M99 14h1M22 43h1M54 20h1M107 30h1M13 97h1M1 3h1M69 23h1M20 106h1M48 105h1M123 48h1M70 125h1M26 104h1M122 57h1M1 4h1M80 72h1M62 5h1M105 118h1M81 96h1M102 116h1M94 68h1M10 47h1M57 8h1M61 15h1M15 39h1M95 32h1' stroke='%23cfd8e6' stroke-opacity='.55'/%3E%3Cpath d='M124 11h1M107 33h1M65 1h1M62 30h1M62 90h1M44 30h1M39 2h1M96 71h1M25 80h1M21 82h1M20 112h1M125 16h1M78 107h1M57 14h1M7 119h1M3 39h1M72 41h1M84 21h1M27 61h1M21 114h1M19 55h1M47 71h1M43 57h1M109 64h1M11 93h1M5 127h1M22 122h1M80 0h1M72 11h1M16 60h1M93 27h1M4 77h1M13 47h1M117 72h1' stroke='%23cfd8e6' stroke-opacity='.9'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: .2;
}
.cf-roll {
  left: 0; right: 0; top: 0; height: 22%;
  background: linear-gradient(to bottom, rgba(207,216,230,0), rgba(207,216,230,.04) 55%, rgba(207,216,230,0));
  opacity: 0;
}
.cf-vig {
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(13,22,40,.55), rgba(13,22,40,.12) 20%, rgba(13,22,40,0) 36%),
    linear-gradient(to top, rgba(13,22,40,.6), rgba(13,22,40,0) 22%),
    radial-gradient(ellipse 74% 80% at 50% 56%, rgba(13,22,40,0) 50%, rgba(13,22,40,.5) 84%, rgba(13,22,40,.85) 100%);
}

/* ---------- HUD ---------- */
.cf-hud {
  --cf-fs: clamp(9px, 2.05cqw, 12.5px);
  --cf-lh: calc(var(--cf-fs) * 1.25);
  --cf-pad-y: max(8px, 2.6cqw);
  --cf-pad-x: max(9px, 3cqw);
  position: absolute; inset: 0;
  padding: var(--cf-pad-y) var(--cf-pad-x);
  font-size: var(--cf-fs);
  letter-spacing: .08em;
  text-shadow: 0 1px 2px rgba(13,22,40,.85);
}
/* whole-pixel digit rows, so the ticking strips never land between pixels */
@supports (width: round(1px, 1px)) {
  .cf-hud { --cf-lh: round(up, calc(var(--cf-fs) * 1.25), 1px); }
}
.cf-top { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.cf-rec, .cf-time {
  display: inline-flex; align-items: center;
  padding: .22em .62em;
  border-radius: 4px;
  background: rgba(13,22,40,.66);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  color: #fff;
  font-weight: 700;
  line-height: var(--cf-lh);
  white-space: nowrap;
}
.cf-dot {
  width: .62em; height: .62em; margin-right: .5em; border-radius: 50%;
  background: var(--cf-rec);
  box-shadow: 0 0 0 .2em rgba(224,90,71,.22);
}
.cf-div { width: 1px; height: .95em; margin: 0 .6em; background: rgba(207,216,230,.35); }
.cf-time { font-weight: 600; color: var(--cf-text); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.cf-dg { display: inline-block; height: var(--cf-lh); overflow: hidden; vertical-align: top; }
.cf-strip { display: block; text-align: center; line-height: var(--cf-lh); }
/* still: 22:47:37 */
.cf-m10 { transform: translateY(calc(var(--cf-lh) * -4)); }
.cf-m1 { transform: translateY(calc(var(--cf-lh) * -7)); }
.cf-s10 { transform: translateY(calc(var(--cf-lh) * -3)); }
.cf-s1 { transform: translateY(calc(var(--cf-lh) * -7)); }

.cf-toast {
  position: absolute;
  right: var(--cf-pad-x);
  top: calc(var(--cf-pad-y) + var(--cf-lh) + .44em + max(6px, 1.4cqw));
  display: flex; align-items: center; gap: .62em;
  padding: .5em .85em .5em .5em;
  border-radius: 7px;
  background: rgba(13,22,40,.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 14px rgba(13,22,40,.45);
  letter-spacing: .02em;
  text-shadow: none;
}
.cf-ticon { flex: none; display: grid; place-items: center; width: 2.05em; height: 2.05em; border-radius: 50%; background: var(--cf-sage-light); }
.cf-ticon svg { width: 1.2em; height: 1.2em; fill: var(--cf-navy-dark); }
.cf-ttxt { display: flex; flex-direction: column; gap: .18em; line-height: 1.12; }
.cf-ttxt b { color: #fff; font-weight: 700; white-space: nowrap; }
.cf-ttxt small { font-size: max(9px, .92em); font-weight: 600; color: var(--cf-text-2); white-space: nowrap; }

.cf-bot {
  position: absolute; left: var(--cf-pad-x); right: var(--cf-pad-x); bottom: max(7px, 2.3cqw);
}
.cf-tl {
  position: relative;
  height: clamp(2px, .56cqw, 4px);
  margin-bottom: max(6px, 1.5cqw);
  border-radius: 2px;
  background: rgba(207,216,230,.08);
}
.cf-tl-strip {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 150%;
  background: repeating-linear-gradient(to right, rgba(207,216,230,.22) 0 1px, rgba(207,216,230,0) 1px 8.333%);
  transform: translateX(-10.41%);
}
.cf-tl { overflow: hidden; }
.cf-ev { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--cf-sage-light); opacity: .78; }
.cf-ev:nth-child(1) { left: 2.778%; width: 25.058%; }
.cf-ev:nth-child(2) { left: 36.111%; width: 25.058%; }
.cf-ev:nth-child(3) { left: 69.444%; width: 25.058%; }
.cf-now { position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: #fff; }
.cf-meta {
  display: flex; justify-content: space-between; gap: 1em;
  color: var(--cf-text-2); font-weight: 600; white-space: nowrap; line-height: 1.15;
}

/* ---------- small feeds (phones) ---------- */
@container (max-width: 420px) {
  .cf-tl, .cf-ttxt small { display: none; }
  .cf-toast { padding: .4em .7em .4em .4em; gap: .5em; }
  .cf-ticon { width: 1.75em; height: 1.75em; }
  .cf-ticon svg { width: 1.05em; height: 1.05em; }
  .cf-top { gap: .5em; }
}

/* =================== motion =================== */
@media (prefers-reduced-motion: no-preference) {
  .cf-subj    { animation: cf-path var(--cf-loop) linear infinite; }
  .cf-tag     { animation: cf-tagpath var(--cf-loop) linear infinite; }
  .cf-walker  { animation: cf-walkvis var(--cf-loop) linear infinite; }
  .cf-stander { animation: cf-standvis var(--cf-loop) linear infinite; }
  .cf-legs    { animation: cf-skew var(--cf-loop) step-end infinite; }
  .cf-box     { animation: cf-lock var(--cf-loop) linear infinite; }
  .cf-tag-in  { animation: cf-tagvis var(--cf-loop) linear infinite; }
  .cf-bob     { animation: cf-bob var(--cf-step) linear infinite; }
  .cf-leg     { animation: cf-thigh var(--cf-step) linear infinite; }
  .cf-shin    { animation: cf-knee var(--cf-step) linear infinite; }
  .cf-foot    { animation: cf-ankle var(--cf-step) linear infinite; }
  .cf-arm     { animation: cf-shoulder var(--cf-step) linear infinite; }
  .cf-fore    { animation: cf-elbow var(--cf-step) linear infinite; }
  .cf-leg.cf-far, .cf-far .cf-shin, .cf-far .cf-foot,
  .cf-arm.cf-far, .cf-far .cf-fore { animation-delay: calc(var(--cf-step) / -2); }
  .cf-ring    { animation: cf-ring var(--cf-loop) ease-in-out infinite; }
  .cf-ring2   { animation: cf-ring2 var(--cf-loop) ease-in-out infinite; }
  .cf-lampon, .cf-glow-lamp { animation: cf-lamp var(--cf-loop) linear infinite; }
  .cf-winlit, .cf-glow-win  { animation: cf-window var(--cf-loop) linear infinite; }
  .cf-zonel   { animation: cf-zone var(--cf-loop) linear infinite; }
  .cf-glow-bell { animation: cf-bell var(--cf-loop) linear infinite; }
  .cf-toast   { animation: cf-toast var(--cf-loop) linear infinite; }
  .cf-tl-strip { animation: cf-tl var(--cf-loop) linear infinite; }
  .cf-dot     { animation: cf-blink 1.2s step-end infinite; }
  .cf-m10     { animation: cf-d6 3600s steps(6) infinite; animation-delay: -2857.5s; }
  .cf-m1      { animation: cf-d10 600s steps(10) infinite; animation-delay: -457.5s; }
  .cf-s10     { animation: cf-d6 60s steps(6) infinite; animation-delay: -37.5s; }
  .cf-s1      { animation: cf-d10 10s steps(10) infinite; animation-delay: -7.5s; }
  .cf-grain   { animation: cf-grain .6s step-end infinite; }
  .cf-roll    { animation: cf-roll 7s linear infinite; }

  @keyframes cf-path {
  0% { transform: translate(-7.63cqw, 58.207cqw) scale(1); }
  2.155% { transform: translate(-7.63cqw, 58.207cqw) scale(1); }
  4.238% { transform: translate(-3.401cqw, 57.352cqw) scale(0.981); }
  6.322% { transform: translate(0.747cqw, 56.514cqw) scale(0.962); }
  8.405% { transform: translate(4.814cqw, 55.691cqw) scale(0.943); }
  10.488% { transform: translate(8.802cqw, 54.885cqw) scale(0.924); }
  12.572% { transform: translate(12.711cqw, 54.095cqw) scale(0.906); }
  14.655% { transform: translate(16.545cqw, 53.319cqw) scale(0.889); }
  16.738% { transform: translate(20.303cqw, 52.56cqw) scale(0.871); }
  18.822% { transform: translate(23.987cqw, 51.815cqw) scale(0.854); }
  20.905% { transform: translate(27.598cqw, 51.084cqw) scale(0.837); }
  22.988% { transform: translate(31.138cqw, 50.368cqw) scale(0.821); }
  25.072% { transform: translate(34.608cqw, 49.667cqw) scale(0.804); }
  27.155% { transform: translate(38.01cqw, 48.979cqw) scale(0.788); }
  29.238% { transform: translate(41.343cqw, 48.305cqw) scale(0.773); }
  31.322% { transform: translate(44.611cqw, 47.644cqw) scale(0.757); }
  33.405% { transform: translate(47.813cqw, 46.996cqw) scale(0.742); }
  35.488% { transform: translate(50.951cqw, 46.362cqw) scale(0.727); }
  36.538% { transform: translate(52.506cqw, 46.047cqw) scale(0.72); }
  51.923% { transform: translate(52.506cqw, 46.047cqw) scale(0.72); }
  54.007% { transform: translate(55.603cqw, 46.472cqw) scale(0.73); }
  56.09% { transform: translate(58.742cqw, 46.902cqw) scale(0.74); }
  58.173% { transform: translate(61.924cqw, 47.338cqw) scale(0.75); }
  60.257% { transform: translate(65.15cqw, 47.78cqw) scale(0.76); }
  62.34% { transform: translate(68.421cqw, 48.228cqw) scale(0.771); }
  64.423% { transform: translate(71.736cqw, 48.683cqw) scale(0.781); }
  66.507% { transform: translate(75.097cqw, 49.143cqw) scale(0.792); }
  68.59% { transform: translate(78.504cqw, 49.61cqw) scale(0.803); }
  70.673% { transform: translate(81.957cqw, 50.083cqw) scale(0.814); }
  72.757% { transform: translate(85.458cqw, 50.563cqw) scale(0.825); }
  74.84% { transform: translate(89.006cqw, 51.049cqw) scale(0.836); }
  76.923% { transform: translate(92.602cqw, 51.542cqw) scale(0.848); }
  79.007% { transform: translate(96.247cqw, 52.042cqw) scale(0.859); }
  81.09% { transform: translate(99.942cqw, 52.548cqw) scale(0.871); }
  83.173% { transform: translate(103.687cqw, 53.061cqw) scale(0.883); }
  84.89% { transform: translate(106.809cqw, 53.489cqw) scale(0.892); }
  100% { transform: translate(106.809cqw, 53.489cqw) scale(0.892); }
  }
  @keyframes cf-tagpath {
  0% { transform: translate(-13.247cqw, 35.622cqw); }
  2.155% { transform: translate(-13.247cqw, 35.622cqw); }
  4.238% { transform: translate(-8.909cqw, 35.205cqw); }
  6.322% { transform: translate(-4.654cqw, 34.796cqw); }
  8.405% { transform: translate(-0.482cqw, 34.397cqw); }
  10.488% { transform: translate(3.609cqw, 34.006cqw); }
  12.572% { transform: translate(7.62cqw, 33.624cqw); }
  14.655% { transform: translate(11.553cqw, 33.25cqw); }
  16.738% { transform: translate(15.409cqw, 32.885cqw); }
  18.822% { transform: translate(19.19cqw, 32.527cqw); }
  20.905% { transform: translate(22.896cqw, 32.178cqw); }
  22.988% { transform: translate(26.529cqw, 31.835cqw); }
  25.072% { transform: translate(30.091cqw, 31.501cqw); }
  27.155% { transform: translate(33.581cqw, 31.174cqw); }
  29.238% { transform: translate(37.003cqw, 30.853cqw); }
  31.322% { transform: translate(40.357cqw, 30.54cqw); }
  33.405% { transform: translate(43.644cqw, 30.234cqw); }
  35.488% { transform: translate(46.866cqw, 29.934cqw); }
  36.538% { transform: translate(48.462cqw, 29.786cqw); }
  51.923% { transform: translate(48.462cqw, 29.786cqw); }
  53.59% { transform: translate(50.895cqw, 29.946cqw); }
  54.007% { transform: translate(52.186cqw, 29.986cqw); }
  54.423% { transform: translate(53.49cqw, 30.027cqw); }
  55.257% { transform: translate(56.109cqw, 30.108cqw); }
  56.09% { transform: translate(58.742cqw, 30.189cqw); }
  56.923% { transform: translate(61.408cqw, 30.272cqw); }
  57.757% { transform: translate(64.09cqw, 30.354cqw); }
  58.173% { transform: translate(65.436cqw, 30.396cqw); }
  58.59% { transform: translate(66.795cqw, 30.437cqw); }
  60.257% { transform: translate(69.422cqw, 30.605cqw); }
  61.923% { transform: translate(72.085cqw, 30.775cqw); }
  62.34% { transform: translate(72.751cqw, 30.817cqw); }
  63.59% { transform: translate(74.776cqw, 30.947cqw); }
  64.423% { transform: translate(76.126cqw, 31.033cqw); }
  65.257% { transform: translate(77.494cqw, 31.12cqw); }
  66.507% { transform: translate(79.547cqw, 31.252cqw); }
  66.923% { transform: translate(80.24cqw, 31.296cqw); }
  68.59% { transform: translate(83.014cqw, 31.474cqw); }
  70.257% { transform: translate(85.826cqw, 31.654cqw); }
  70.673% { transform: translate(86.529cqw, 31.7cqw); }
  71.923% { transform: translate(88.667cqw, 31.837cqw); }
  72.757% { transform: translate(90.092cqw, 31.928cqw); }
  73.59% { transform: translate(91.537cqw, 32.021cqw); }
  74.84% { transform: translate(93.703cqw, 32.161cqw); }
  75.257% { transform: translate(94.435cqw, 32.208cqw); }
  76.923% { transform: translate(97.364cqw, 32.397cqw); }
  78.59% { transform: translate(99.125cqw, 32.588cqw); }
  79.007% { transform: translate(99.125cqw, 32.636cqw); }
  80.257% { transform: translate(99.125cqw, 32.782cqw); }
  81.09% { transform: translate(99.125cqw, 32.879cqw); }
  81.923% { transform: translate(99.125cqw, 32.978cqw); }
  83.173% { transform: translate(99.125cqw, 33.126cqw); }
  83.59% { transform: translate(99.125cqw, 33.176cqw); }
  84.89% { transform: translate(99.125cqw, 33.332cqw); }
  100% { transform: translate(101.796cqw, 33.332cqw); }
  }
  /* turning: a short crossfade with a squash, instead of a hard cut */
  @keyframes cf-walkvis {
    0%, 35.205% { opacity: 1; transform: scaleX(1); }
    37.038%, 50.923% { opacity: 0; transform: scaleX(.62); }
    52.756%, 100% { opacity: 1; transform: scaleX(1); }
  }
  @keyframes cf-standvis {
    0%, 35.705% { opacity: 0; transform: scaleX(.7); }
    37.538%, 50.423% { opacity: 1; transform: scaleX(1); }
    52.256%, 100% { opacity: 0; transform: scaleX(.7); }
  }
  @keyframes cf-skew {
    0% { transform: skewY(-11.31deg); }
    44.231% { transform: skewY(7.72deg); }
    92.445% { transform: skewY(-11.31deg); }
  }
  @keyframes cf-lock {
    0%, 8.333% { opacity: 0; transform: scale(1.3); }
    9.333% { opacity: 1; transform: scale(1.12); }
    11.25%, 81.423% { opacity: 1; transform: scale(1); }
    83.506% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.3); }
  }
  @keyframes cf-tagvis {
    0%, 11.667% { opacity: 0; transform: translate(0, 30%); }
    13.333%, 53.59% { opacity: 1; transform: translate(0, 0); }
    58.59%, 81.423% { opacity: 1; transform: translate(-100%, 0); }
    83.09% { opacity: 0; transform: translate(-100%, 0); }
    100% { opacity: 0; transform: translate(0, 30%); }
  }
  @keyframes cf-thigh {0%{transform:rotate(-25.3deg)}4.17%{transform:rotate(-28deg)}8.33%{transform:rotate(-25.5deg)}12.5%{transform:rotate(-21.8deg)}16.67%{transform:rotate(-16.7deg)}20.83%{transform:rotate(-12.9deg)}25%{transform:rotate(-9.3deg)}29.17%{transform:rotate(-5.4deg)}33.33%{transform:rotate(-1.4deg)}37.5%{transform:rotate(2.5deg)}41.67%{transform:rotate(6.8deg)}45.83%{transform:rotate(10deg)}50%{transform:rotate(5.9deg)}54.17%{transform:rotate(9.6deg)}58.33%{transform:rotate(17.8deg)}62.5%{transform:rotate(16.5deg)}66.67%{transform:rotate(4.1deg)}70.83%{transform:rotate(-8.8deg)}75%{transform:rotate(-21.6deg)}79.17%{transform:rotate(-32.5deg)}83.33%{transform:rotate(-39.8deg)}87.5%{transform:rotate(-42.3deg)}91.67%{transform:rotate(-39.6deg)}95.83%{transform:rotate(-27.5deg)}100%{transform:rotate(-25.3deg)}}
  @keyframes cf-knee {0%{transform:rotate(3.9deg)}4.17%{transform:rotate(16.1deg)}8.33%{transform:rotate(17.9deg)}12.5%{transform:rotate(18.4deg)}16.67%{transform:rotate(16deg)}20.83%{transform:rotate(16deg)}25%{transform:rotate(16.6deg)}29.17%{transform:rotate(16.3deg)}33.33%{transform:rotate(16deg)}37.5%{transform:rotate(16deg)}41.67%{transform:rotate(15deg)}45.83%{transform:rotate(15.5deg)}50%{transform:rotate(31.5deg)}54.17%{transform:rotate(29.7deg)}58.33%{transform:rotate(18.6deg)}62.5%{transform:rotate(23.6deg)}66.67%{transform:rotate(43.8deg)}70.83%{transform:rotate(58.8deg)}75%{transform:rotate(67.8deg)}79.17%{transform:rotate(69.7deg)}83.33%{transform:rotate(64.5deg)}87.5%{transform:rotate(53.5deg)}91.67%{transform:rotate(37.5deg)}95.83%{transform:rotate(8.7deg)}100%{transform:rotate(3.9deg)}}
  @keyframes cf-ankle {0%{transform:rotate(7.4deg)}4.17%{transform:rotate(4.1deg)}8.33%{transform:rotate(7.4deg)}12.5%{transform:rotate(3.5deg)}16.67%{transform:rotate(0.8deg)}20.83%{transform:rotate(-3.1deg)}25%{transform:rotate(-7.2deg)}29.17%{transform:rotate(-10.9deg)}33.33%{transform:rotate(-14.6deg)}37.5%{transform:rotate(-18.4deg)}41.67%{transform:rotate(-21.2deg)}45.83%{transform:rotate(-19.3deg)}50%{transform:rotate(-22.4deg)}54.17%{transform:rotate(-15.5deg)}58.33%{transform:rotate(-7deg)}62.5%{transform:rotate(-11.5deg)}66.67%{transform:rotate(-25.4deg)}70.83%{transform:rotate(-33.9deg)}75%{transform:rotate(-32.5deg)}79.17%{transform:rotate(-28.2deg)}83.33%{transform:rotate(-23.2deg)}87.5%{transform:rotate(-14.8deg)}91.67%{transform:rotate(-3.5deg)}95.83%{transform:rotate(8deg)}100%{transform:rotate(7.4deg)}}
  @keyframes cf-bob {0%{transform:translateY(3.95px)}4.17%{transform:translateY(3.67px)}8.33%{transform:translateY(3.04px)}12.5%{transform:translateY(1.63px)}16.67%{transform:translateY(0.27px)}20.83%{transform:translateY(-0.43px)}25%{transform:translateY(-0.69px)}29.17%{transform:translateY(-0.67px)}33.33%{transform:translateY(-0.27px)}37.5%{transform:translateY(0.54px)}41.67%{transform:translateY(1.5px)}45.83%{transform:translateY(1.69px)}50%{transform:translateY(3.95px)}54.17%{transform:translateY(3.67px)}58.33%{transform:translateY(3.04px)}62.5%{transform:translateY(1.63px)}66.67%{transform:translateY(0.27px)}70.83%{transform:translateY(-0.43px)}75%{transform:translateY(-0.69px)}79.17%{transform:translateY(-0.67px)}83.33%{transform:translateY(-0.27px)}87.5%{transform:translateY(0.54px)}91.67%{transform:translateY(1.5px)}95.83%{transform:translateY(1.69px)}100%{transform:translateY(3.95px)}}
  @keyframes cf-shoulder {0%{transform:rotate(19.4deg)}4.17%{transform:rotate(20deg)}8.33%{transform:rotate(19.3deg)}12.5%{transform:rotate(17.5deg)}16.67%{transform:rotate(14.6deg)}20.83%{transform:rotate(10.8deg)}25%{transform:rotate(6.5deg)}29.17%{transform:rotate(1.8deg)}33.33%{transform:rotate(-2.8deg)}37.5%{transform:rotate(-7.2deg)}41.67%{transform:rotate(-10.9deg)}45.83%{transform:rotate(-13.7deg)}50%{transform:rotate(-15.4deg)}54.17%{transform:rotate(-16deg)}58.33%{transform:rotate(-15.3deg)}62.5%{transform:rotate(-13.5deg)}66.67%{transform:rotate(-10.6deg)}70.83%{transform:rotate(-6.8deg)}75%{transform:rotate(-2.5deg)}79.17%{transform:rotate(2.2deg)}83.33%{transform:rotate(6.8deg)}87.5%{transform:rotate(11.2deg)}91.67%{transform:rotate(14.9deg)}95.83%{transform:rotate(17.7deg)}100%{transform:rotate(19.4deg)}}
  @keyframes cf-elbow {0%{transform:rotate(-13.2deg)}4.17%{transform:rotate(-13deg)}8.33%{transform:rotate(-13.2deg)}12.5%{transform:rotate(-13.9deg)}16.67%{transform:rotate(-15deg)}20.83%{transform:rotate(-16.3deg)}25%{transform:rotate(-17.9deg)}29.17%{transform:rotate(-19.6deg)}33.33%{transform:rotate(-21.2deg)}37.5%{transform:rotate(-22.8deg)}41.67%{transform:rotate(-24.1deg)}45.83%{transform:rotate(-25.2deg)}50%{transform:rotate(-25.8deg)}54.17%{transform:rotate(-26deg)}58.33%{transform:rotate(-25.8deg)}62.5%{transform:rotate(-25.1deg)}66.67%{transform:rotate(-24deg)}70.83%{transform:rotate(-22.7deg)}75%{transform:rotate(-21.1deg)}79.17%{transform:rotate(-19.4deg)}83.33%{transform:rotate(-17.8deg)}87.5%{transform:rotate(-16.2deg)}91.67%{transform:rotate(-14.9deg)}95.83%{transform:rotate(-13.8deg)}100%{transform:rotate(-13.2deg)}}
  @keyframes cf-ring {
    0%, 38.622% { transform: rotate(0deg); }
    41.122%, 44.038% { transform: rotate(-34deg); }
    46.538%, 100% { transform: rotate(0deg); }
  }
  @keyframes cf-ring2 {
    0%, 38.622% { transform: rotate(0deg); }
    41.122%, 44.038% { transform: rotate(-78deg); }
    46.538%, 100% { transform: rotate(0deg); }
  }
  /* porch light: on when he steps into the zone, times out after he has gone */
  @keyframes cf-lamp {
    0%, 28.5% { opacity: 0; }
    29.167% { opacity: .7; }
    29.833% { opacity: .35; }
    31%, 88.64% { opacity: 1; }
    93.64%, 100% { opacity: 0; }
  }
  /* doorbell button lights while he presses it */
  @keyframes cf-bell {
    0%, 40.705% { opacity: 0; }
    41.372%, 44.455% { opacity: 1; }
    49.038%, 100% { opacity: 0; }
  }
  @keyframes cf-window {
    0%, 43.622% { opacity: 0; }
    46.538%, 90.723% { opacity: 1; }
    96.973%, 100% { opacity: 0; }
  }
  @keyframes cf-zone {
    0%, 27.667% { opacity: .32; }
    29.333%, 60.256% { opacity: .95; }
    62.756%, 100% { opacity: .32; }
  }
  @keyframes cf-toast {
    0%, 28.917% { opacity: 0; transform: translateX(115%); }
    32.25% { opacity: 1; transform: translateX(-2%); }
    33.5%, 64.423% { opacity: 1; transform: translateX(0); }
    67.756%, 100% { opacity: 0; transform: translateX(115%); }
  }
  @keyframes cf-tl { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
  @keyframes cf-blink { 0% { opacity: 1; } 55% { opacity: .15; } 100% { opacity: 1; } }
  @keyframes cf-d10 { from { transform: translateY(0); } to { transform: translateY(calc(var(--cf-lh) * -10)); } }
  @keyframes cf-d6 { from { transform: translateY(0); } to { transform: translateY(calc(var(--cf-lh) * -6)); } }
  @keyframes cf-grain {
    0% { transform: translate(0, 0); }
    17% { transform: translate(-4%, 3%); }
    33% { transform: translate(3%, -5%); }
    50% { transform: translate(-6%, -2%); }
    67% { transform: translate(5%, 4%); }
    83% { transform: translate(-2%, 6%); }
    100% { transform: translate(0, 0); }
  }
  @keyframes cf-roll { 0% { opacity: 1; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(460%); } }
}

/* Heel smal (gsm ≤ 340px): melding weg zodat ze het label niet bedekt */
@container (max-width: 240px) {
  .cf-toast { display: none; }
}