/* =============================================================================
   ANIMATIONS — keyframes and animation utility classes
   Applied: site-wide wherever animation classes are added dynamically
   Key selectors: .cs-zoom-in | .cs-fade-in-left-to-right | .cs-fade-in-right-to-left
                  .est-live-student-learning | #cs-bundle-sidebar
   ============================================================================= */

/* ---- Fade in (bundle sidebar) ---- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#cs-bundle-sidebar.tw-fixed {
  animation: fadeIn 1s ease-in-out;
}

/* ---- Live student pulse ---- */
@keyframes liveBip {
  0% {
    width: 10px;
    height: 10px;
    opacity: 1;
  }
  100% {
    width: 20px;
    height: 20px;
    opacity: 0;
  }
}
.est-live-student-learning {
  display: flex;
  align-items: center;
}
.est-live-student-learning .live-icon {
  position: relative;
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
}
.est-live-student-learning .live-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border: 2px solid #22c55e;
  border-radius: 50%;
  animation: liveBip 1.5s ease-out infinite;
}
.est-live-student-learning .live-count {
  transition: opacity 0.3s ease-in-out;
}

/* ---- Zoom-in (mobile nav icon) ---- */
@keyframes zoomIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.cs-zoom-in {
  animation: zoomIn 0.3s ease-out forwards;
}
.cs-icon-position {
  position: absolute;
  right: 0;
  top: 20px;
  z-index: 100;
  opacity: 1;
}

/* ---- Mobile nav slide-in from left ---- */
@keyframes fadeInLeftToRight {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.cs-fade-in-left-to-right {
  animation: fadeInLeftToRight 0.3s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}

/* ---- Mobile nav slide-in from right ---- */
@keyframes fadeInRightToLeft {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.cs-fade-in-right-to-left {
  animation: fadeInRightToLeft 0.3s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}

/* ---- Ticker / autoplay (trust bar mobile) ---- */
@keyframes autoplay2 {
  0% {
    top: 100%;
  }
  5% {
    top: 0%;
  }
  28.33% {
    top: -100%;
  }
  100% {
    top: -100%;
  }
}

/* ---- Video pulse ring ---- */
@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* ---- Line / price line-through decorator ---- */
.cs-line-style::before {
  position: absolute;
  content: "";
  opacity: 1;
  left: 0;
  top: 50%;
  right: 0;
  border-top: 2px solid;
  border-color: #f00;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: rotate(-10deg);
}