/* Floating shapes background */
.shapes-container {
  position: fixed;  /* not absolute */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: auto;  /* must allow interaction */
  z-index: 0;  /* lowest level */
  user-select: none;
}

/* Base shape styling */
.shape {
  opacity: 0.25;
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: center center;
  transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.3s ease;
  will-change: transform, opacity;
}

.shape::before {
  content: '';
  position: relative;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 15px rgba(74, 142, 209, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.shape:hover::before {
  opacity: 1;
}

/* Different shape types */
.circle {
  border-radius: 50%;
  background: linear-gradient(135deg, #4a8b9e, #0f4e63);
  width: 140px;
  height: 100px;
}

.triangle {
  background: linear-gradient(135deg, #45b7da, #195c7e);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: 120px;
  height: 110px;
}

.square {
  background: linear-gradient(135deg, #6c59d3, #282e6c);
  width: 110px;
  height: 110px;
}

.hexagon {
  background: linear-gradient(135deg, #53cba1, #235e4c);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  width: 110px;
  height: 100px;
}

.pentagon {
  background: linear-gradient(135deg, #3aafa9, #2b7a78);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  width: 110px;
  height: 110px;
}

.parallelogram {
  background: linear-gradient(135deg, #537fa1, #253344);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  width: 110px;
  height: 110px;
}