/* Animation styles */
@keyframes subtle-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.animate-random-bounce {
  animation: subtle-bounce 2s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--animation-delay, 0) * 1s);
}

/* Add subtle pulse effect on hover */
.animate-random-bounce:hover {
  animation-play-state: paused;
}

/* Host profile animations */
@keyframes bounce-once {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  70% {
    transform: translateY(-10px);
  }
  85% {
    transform: translateY(-5px);
  }
}

@keyframes subtle-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(1deg);
  }
  75% {
    transform: translateY(5px) rotate(-1deg);
  }
}

.animate-bounce-once {
  animation: bounce-once 1.5s ease-out forwards;
}

.animate-subtle-float {
  animation: subtle-float 6s ease-in-out infinite;
}

/* Teacher grid tiles */
.floating-bubble {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  transform-origin: center;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
}

.floating-bubble:hover {
  z-index: 50 !important;
  transform: scale(1.05) !important;
}

.floating-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Float classes - no longer animated */
.float-1, .float-2, .float-3, .float-4, .float-5, .float-6 { }

/* All tiles same size */
.bubble-size {
  width: 100%;
  aspect-ratio: 1;
}

.bubble-size img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Animation keyframes for vertical floating */
@keyframes float1 {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -10px, 0); }
}

@keyframes float2 {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -5px, 0); }
}

@keyframes float3 {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -15px, 0); }
}

/* Container for the teacher grid */
.bubble-container {
  position: relative;
  width: 100vw; /* Full viewport width */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}

.bubble-rows {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1px;
}

.bubble-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12 columns for larger images */
  align-items: stretch;
  gap: 1px;
  width: 100%;
  padding: 0;
}

/* Overlay for hover effect */
.floating-bubble .bubble-overlay {
  position: absolute;
  inset: 0;
  background: rgba(193, 153, 98, 0.8);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #F5F7FA;
  text-align: center;
  padding: 10px;
}

.floating-bubble:hover .bubble-overlay {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .bubble-container {
    min-height: 300px;
  }
  
  .bubble-size-4, .bubble-size-5 {
    width: 100px;
    height: 100px;
  }
}