:root {
  --blob-size-red: clamp(200px, 24vw, 600px);                  /* base */
  --blob-size-green: clamp(123px, 14.83vw, 370.5px);           /*  φ */
  --blob-size-blue: clamp(76px, 9.13vw, 228px);                /*  φ² */

}

.blob {
  position: absolute;
  width: var(--blob-size);
  height: var(--blob-size);
  background-color: var(--blob-color);
  border-radius: 50%;
  bottom: 0;
  aspect-ratio: 1;
}

.blob-green {
  top: 10%;
  left: -8%;
  opacity: 0.15;
  /* filter: blur(20px); */
}

.blob-red {
  top: 20%;
  left: 4%;
  opacity: 0.15;
  /* filter: blur(20px); */
}

.blob-blue {
  top: 70%;
  left: 1%;
  opacity: 0.15;
  /* filter: blur(20px); */
}

/* portraits blobs */
@media (min-width: 700px) {
  

  /* the containers for the blobs */
  .blob-frame {
    position: absolute;
    width: var(--blob-size);

    height: calc(var(--blob-size) * 1.25);
    overflow: hidden;
    border-radius: 0 0 999rem 999rem;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 0;

    user-select: none;
    -webkit-user-drag: none;
    transform: translateY(200%);
    opacity: 0;
    transition: transform 1.4s ease-out, opacity 1.4s ease-out;

  }

  .blob-frame.animate-start {
    transform: translateY(0);
    opacity: 1;
  }
  
  /* Portrait inside */
  .blob-image {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(0%) scale(1.15);
    width: 110%;
    height: auto;
    object-fit: cover;
    z-index: 2;

  }

  /* Positioning for each blob */
  .blob-blue-portrait {
    top: 7%;
    right: 18%;
  }

  .blob-red-portrait {
    top: 21%;
    right: 22%;
  }

  .blob-green-portrait {
    top: 24%;
    right: 4%;
  }
}

/* Animation for the portrait blobs */
@media (min-width: 700px) and (prefers-reduced-motion: no-preference) {

  @keyframes blobRiseIn {
    0% {
      transform: translateY(200%);
      opacity: 0;
    }
    60% {
      transform: translateY(-10px);
      opacity: 1;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes blobImageFloatIn {
    0% {
      transform: translateX(-50%) translateY(50%) scale(0.9);
    }
    60% {
      
      transform: translateX(-50%) translateY(-5%) scale(1.15);
    }
    100% {
      transform: translateX(-50%) translateY(0%) scale(1.15);
    }
  }
  
   /* bounce effect on click */
   .blob-image.bounce {
    animation: bounceImage 0.6s ease-out;
  }

  .animate-start {
    animation: blobRiseIn 1.4s ease-out forwards; /* Trigger animation */
  }
  
  .blob-image.animate-start {
    animation: blobImageFloatIn 1.4s ease-out forwards;
  }

  @keyframes bounceImage {
    0%   { transform: translateX(-50%) translateY(0) scale(1.15); }
    25%  { transform: translateX(-50%) translateY(-4%) scale(1.18); }
    50%  { transform: translateX(-50%) translateY(-1%) scale(1.15); }
    75%  { transform: translateX(-50%) translateY(-6%) scale(1.16); }
    100% { transform: translateX(-50%) translateY(0%) scale(1.15); }
  }

  .float-blue {
    animation: floatBlue 8s ease-in-out 3;   /* stop floating after 2 cycles */
  }

  .float-green {
    animation: floatGreen 11s ease-in-out 3;
  }

  .float-red {
    animation: floatRed 10s ease-in-out 3;
  }

  @keyframes floatBlue {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-3px, -3px); }
    40%  { transform: translate(2px, 2px); }
    60%  { transform: translate(1px, -3px); }
    80%  { transform: translate(-2px, 1px); }
    100% { transform: translate(0, 0); }
  }
  
  @keyframes floatGreen {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-2px, 3px); }
    45%  { transform: translate(3px, -1px); }
    65%  { transform: translate(-1px, 2px); }
    85%  { transform: translate(2px, -3px); }
    100% { transform: translate(0, 0); }
  }
  
  @keyframes floatRed {
    0%   { transform: translate(0, 0); }
    15%  { transform: translate(-5px, -3px); }
    35%  { transform: translate(2px, 5px); }
    55%  { transform: translate(-1px, -2px); }
    75%  { transform: translate(5px, 1px); }
    100% { transform: translate(0, 0); }
  }
}

/* Decorative blobs for the background */
@media (prefers-reduced-motion: no-preference) {
    
  @keyframes floatAndFade {
    0%   { transform: translate(0, 0); opacity: 0.15; }
    25%  { transform: translate(3px, -5px);}
    50%  { transform: translate(-5px, 4px);}
    75%  { transform: translate(1px, -2px); opacity: 0.05; }
    100% { transform: translate(0, 0);}
  }

  .blob.decorative {
    animation: floatAndFade 12s ease-in-out infinite;
    will-change: transform, opacity;
  }

  .blob.decorative:nth-of-type(2) {
    animation-duration: 14s;
    animation-delay: 1s;
  }

  .blob.decorative:nth-of-type(3) {
    animation-duration: 16s;
    animation-delay: 2s;
  }
}

@media (max-width: 700px) { 
  .blob-frame {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
}