/* ===== CARTOON ANIMAL DECORATIONS FOR COURSES PAGE ===== */

/* Course Overview Section */
.course-overview {
  background: var(--surface-secondary);
  position: relative;
  overflow: hidden;
}

.course-overview-decorations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Owl */
.deco-owl {
  position: absolute;
  top: 8%;
  right: 6%;
  width: 90px;
  height: 90px;
  fill: var(--primary);
  opacity: 0.08;
  animation: gentleFloat 9s ease-in-out infinite;
}

/* Rabbit */
.deco-rabbit {
  position: absolute;
  bottom: 10%;
  left: 4%;
  width: 70px;
  height: 70px;
  fill: #FFB6C1;
  opacity: 0.08;
  animation: gentleFloat 8s ease-in-out infinite 2s;
}

/* Elephant */
.deco-elephant {
  position: absolute;
  top: 12%;
  left: 3%;
  width: 100px;
  height: 100px;
  fill: #81D4FA;
  opacity: 0.07;
  animation: gentleFloat 10s ease-in-out infinite 1s;
}

/* Bear */
.deco-bear {
  position: absolute;
  bottom: 8%;
  right: 5%;
  width: 85px;
  height: 85px;
  fill: #BCAAA4;
  opacity: 0.08;
  animation: gentleFloat 9s ease-in-out infinite 3s;
}

/* Bird */
.deco-bird {
  position: absolute;
  top: 10%;
  right: 8%;
  width: 65px;
  height: 65px;
  fill: var(--secondary-light);
  opacity: 0.08;
  animation: gentleFloat 11s ease-in-out infinite 1.5s;
}

/* Cat */
.deco-cat {
  position: absolute;
  bottom: 6%;
  left: 7%;
  width: 75px;
  height: 75px;
  fill: #FFCC80;
  opacity: 0.08;
  animation: gentleFloat 10s ease-in-out infinite 2.5s;
}

/* Turtle */
.deco-turtle {
  position: absolute;
  bottom: 12%;
  right: 10%;
  width: 80px;
  height: 80px;
  fill: #8BC34A;
  opacity: 0.08;
  animation: gentleFloat 12s ease-in-out infinite 4s;
}

/* Butterfly 1 */
.deco-butterfly--1 {
  position: absolute;
  top: 28%;
  right: 12%;
  width: 45px;
  height: 45px;
  fill: var(--accent-pink);
  opacity: 0.1;
  animation: flyAround 15s ease-in-out infinite;
}

/* Butterfly 2 */
.deco-butterfly--2 {
  position: absolute;
  bottom: 22%;
  left: 18%;
  width: 40px;
  height: 40px;
  fill: var(--accent-warm);
  opacity: 0.1;
  animation: flyAround 16s ease-in-out infinite 7s;
}

/* Flower 1 */
.deco-flower--1 {
  position: absolute;
  bottom: 8%;
  left: 10%;
  width: 35px;
  height: 35px;
  opacity: 0.12;
  animation: gentleSway 5s ease-in-out infinite;
}

/* Flower 2 */
.deco-flower--2 {
  position: absolute;
  top: 18%;
  right: 18%;
  width: 35px;
  height: 35px;
  opacity: 0.12;
  animation: gentleSway 5s ease-in-out infinite 2.5s;
}

/* Animations */
@keyframes gentleFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(3deg);
  }
}

@keyframes flyAround {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(15px, -12px) scale(1.05);
  }
  50% {
    transform: translate(25px, -5px) scale(0.95);
  }
  75% {
    transform: translate(8px, 8px) scale(1.02);
  }
}

@keyframes gentleSway {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

/* Responsive - Reduce opacity and size on smaller screens */
@media (max-width: 1024px) {
  .deco-owl,
  .deco-rabbit,
  .deco-elephant,
  .deco-bear,
  .deco-bird,
  .deco-cat,
  .deco-turtle {
    width: 60px;
    height: 60px;
    opacity: 0.06;
  }
  
  .deco-butterfly--1,
  .deco-butterfly--2 {
    width: 35px;
    height: 35px;
  }
  
  .deco-flower--1,
  .deco-flower--2 {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 768px) {
  .course-overview-decorations {
    opacity: 0.5;
  }
  
  .deco-owl,
  .deco-rabbit,
  .deco-elephant,
  .deco-bear,
  .deco-bird,
  .deco-cat,
  .deco-turtle {
    width: 45px;
    height: 45px;
    opacity: 0.05;
  }
}

@media (max-width: 480px) {
  .course-overview-decorations {
    display: none;
  }
}