/* Circular focus effect with beige fog surrounding */
.blur-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0; /* Removed border radius completely */
  background-color: transparent; /* Changed to transparent */
}

/* Base image - will be fully visible in center */
.focus-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Beige fog overlay with sharp circular cutout in center */
.beige-fog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    transparent 22%,  /* Clear center - increased significantly to show more image */
    rgba(252, 248, 240, 0.4) 26%, /* Start of transition - beige color with transparency */
    rgba(252, 248, 240, 0.7) 30%, /* More opaque beige */
    rgba(252, 248, 240, 0.9) 34%, /* Almost fully opaque */
    rgba(252, 248, 240, 1) 38% /* Fully opaque beige outside - fog effect still compact */
  );
  z-index: 2;
}