/* Hover Type "Depth of Field": beim Drueberfahren stellt das Bild kurz scharf,
   als muesste die Kamera erst fokussieren. Gilt fuer normale Bilder und das
   Spatial-Canvas. */

.fusion-imageframe.hover-type-dof img,
.fusion-imageframe.hover-type-dof .spatial-canvas {
  /* Ruhezustand: scharf */
  filter: none;
}

/* Die Klasse wird per JS gesetzt (Bounding-Box), damit der Fokus-Effekt auch
   durch eine ueber dem Bild liegende Flaeche hindurch ausgeloest wird. */
.fusion-imageframe.hover-type-dof.awb-dof-focusing img,
.fusion-imageframe.hover-type-dof.awb-dof-focusing .spatial-canvas {
  animation: awb-dof-focus 0.75s ease-out;
}

@keyframes awb-dof-focus {
  0%   { filter: blur(var(--awb-dof-blur, 12px)); }
  65%  { filter: blur(0); }                                          /* erst scharf ... */
  80%  { filter: blur(calc(var(--awb-dof-blur, 12px) * 0.2)); }      /* ... kurzes Nachfokussieren ... */
  100% { filter: blur(0); }                                          /* ... dann endgueltig scharf */
}