/* 楼层索引样式 */

.floor-index {

  margin: 20px 0;

  padding: 0 16px;

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",

    "Helvetica Neue", sans-serif;

}



.floor-index h3 {

  padding: 10px 0;

  font-size: 25px;

  font-weight: 600;

  color: #1d1d1f;

  position: relative;

  margin-bottom: 15px;

  opacity: 0;

  animation: categoryHeadingAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)

    forwards;

  animation-delay: 0.3s;

}



.floor-index h3::after {

  content: "";

  position: absolute;

  bottom: 5px;

  left: 0;

  width: 0;

  height: 3px;

  background: linear-gradient(90deg, #fdcc1e, rgba(253, 204, 30, 0.3));

  border-radius: 3px;

  animation: lineGrow 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;

  animation-delay: 0.8s;

}



.floor-group {

  margin-bottom: 20px;

}



.floor-title {

  font-size: 20px;

  font-weight: 600;

  color: #1d1d1f;

  margin-bottom: 10px;

  opacity: 0;

  animation: floorTitleAppear 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;

  animation-delay: 0.5s;

}



@keyframes floorTitleAppear {

  0% {

    opacity: 0;

    transform: translateY(-10px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}



.room-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



.room-item {

  background-color: #f2f2f2;

  border-radius: 10px;

  padding: 8px 12px;

  font-size: 15px;

  color: #1d1d1f;

  cursor: pointer;

  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

  opacity: 0;

  animation: roomItemAppear 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;

  animation-delay: calc(var(--item-index, 0) * 0.05s + 0.6s);

}



@keyframes roomItemAppear {

  0% {

    opacity: 0;

    transform: translateY(10px) scale(0.9);

  }

  100% {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



.room-item:hover {

  background-color: rgba(253, 204, 30, 0.1);

  transform: translateY(-3px) scale(1.05);

  box-shadow: 0 4px 8px rgba(253, 204, 30, 0.15);

}



.room-item:hover::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  width: 120%;

  height: 120%;

  background: radial-gradient(

    circle,

    rgba(253, 204, 30, 0.1) 0%,

    rgba(255, 255, 255, 0) 70%

  );

  transform: translate(-50%, -50%) scale(0);

  border-radius: 50%;

  opacity: 0;

  animation: rippleEffect 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;

}



/* 为每个房间项添加不同的延迟，创造交错动画效果 */

.room-item:nth-child(1) {

  --item-index: 1;

}

.room-item:nth-child(2) {

  --item-index: 2;

}

.room-item:nth-child(3) {

  --item-index: 3;

}

.room-item:nth-child(4) {

  --item-index: 4;

}

.room-item:nth-child(5) {

  --item-index: 5;

}

.room-item:nth-child(6) {

  --item-index: 6;

}

.room-item:nth-child(7) {

  --item-index: 7;

}

.room-item:nth-child(8) {

  --item-index: 8;

}

.room-item:nth-child(9) {

  --item-index: 9;

}

.room-item:nth-child(10) {

  --item-index: 10;

}



/* 移动端响应式设计 */

@media (max-width: 768px) {

  .floor-index {

    padding: 0 12px;

  }



  .room-grid {

    gap: 8px;

  }



  .room-item {

    padding: 6px 10px;

    font-size: 14px;

    animation-duration: 0.4s;

    animation-delay: calc(var(--item-index, 0) * 0.03s + 0.5s);

  }



  .room-item:hover {

    transform: translateY(-2px) scale(1.03);

  }

}