/* ========== Sticky ========== */
.tele-sticky-top {
  position: sticky;
  top: 10px;
  z-index: 100;
}

.tele-sticky-bottom {
  position: sticky;
  bottom: 10px;
  z-index: 100;
}

@media (min-width: 1025px) {
  .tele-sticky-top {
    position: sticky;
    top: 10px;
  }
}

/* ===== TeleEffect Trigger Classes ===== */
.tele-animation {
  animation: fadeInOnScroll linear;
  animation-timeline: view();
  animation-range: entry 20% cover 30%;
}

.tele-animate-active {
  opacity: 1;
  animation-fill-mode: both;
  animation-duration: 0.8s;
  animation-delay: 0.2s;
}

/* ===== ANIMATION KEYFRAMES ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeOutDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(100%); } }
@keyframes fadeOutUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-100%); } }
@keyframes fadeOutLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-100%); } }
@keyframes fadeOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
@keyframes slideInDown { from { transform: translateY(-100%); visibility: visible; } to { transform: translateY(0); } }
@keyframes slideInUp { from { transform: translateY(100%); visibility: visible; } to { transform: translateY(0); } }
@keyframes slideInLeft { from { transform: translateX(-100%); visibility: visible; } to { transform: translateX(0); } }
@keyframes slideInRight { from { transform: translateX(100%); visibility: visible; } to { transform: translateX(0); } }
@keyframes slideOutDown { from { transform: translateY(0); } to { transform: translateY(100%); visibility: hidden; } }
@keyframes slideOutUp { from { transform: translateY(0); } to { transform: translateY(-100%); visibility: hidden; } }
@keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); visibility: hidden; } }
@keyframes slideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); visibility: hidden; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes zoomOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.3); } }
@keyframes rotateIn { from { transform-origin: center; transform: rotate(-200deg); opacity: 0; } to { transform-origin: center; transform: rotate(0); opacity: 1; } }
@keyframes flipInX { from { transform: perspective(400px) rotateX(90deg); opacity: 0; } to { transform: perspective(400px) rotateX(0); opacity: 1; } }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% { opacity: 0; transform: scale(0.3); }
  20% { transform: scale(1.1); }
  40% { transform: scale(0.9); }
  60% { opacity: 1; transform: scale(1.03); }
  80% { transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== HELPER CLASSES ===== */
.fade-in { animation-name: fadeIn; }
.fade-in-down { animation-name: fadeInDown; }
.fade-in-up { animation-name: fadeInUp; }
.fade-in-left { animation-name: fadeInLeft; }
.fade-in-right { animation-name: fadeInRight; }
.fade-out { animation-name: fadeOut; }
.fade-out-down { animation-name: fadeOutDown; }
.fade-out-up { animation-name: fadeOutUp; }
.fade-out-left { animation-name: fadeOutLeft; }
.fade-out-right { animation-name: fadeOutRight; }
.slide-in-down { animation-name: slideInDown; }
.slide-in-up { animation-name: slideInUp; }
.slide-in-left { animation-name: slideInLeft; }
.slide-in-right { animation-name: slideInRight; }
.slide-out-down { animation-name: slideOutDown; }
.slide-out-up { animation-name: slideOutUp; }
.slide-out-left { animation-name: slideOutLeft; }
.slide-out-right { animation-name: slideOutRight; }
.zoom-in { animation-name: zoomIn; }
.zoom-out { animation-name: zoomOut; }
.rotate-in { animation-name: rotateIn; }
.flip-in-x { animation-name: flipInX; }
.bounce { animation-name: bounce; }
.bounce-in { animation-name: bounceIn; }
/* ===== ANIMATION DELAY CLASSES ===== */