/* _animations.css */
/* Used for slider */
@keyframes thumb-click {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Used for CTA buttons */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

@keyframes dissolveIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dissolveOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes cascadeIn {
  from {
    opacity: 0;
	visibility: hidden;
  }
  1% {
	visibility: visible;
	opacity: 0;
  }
  to {
	opacity: 1;
	visibility: visible;
  }
}

@keyframes cascadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Initial page load fade-in */
.header,
.header-scroll,
.sessions-container, {
  opacity: 0;
}

/* When the page is loaded, these containers dissolve in */
html.js-loaded .header,
html.js-loaded .header-scroll,
html.js-loaded .sessions-container {
  animation-name: dissolveIn;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

html.js-loaded .loader-overlay {
	opacity: 0;
	visibility: hidden; /* Hides the element from accessibility trees once it's invisible */
}

/* Dissolve */
.dissolve-in {
  animation-name: dissolveIn;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

.dissolve-out {
  animation-name: dissolveOut;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  pointer-events: none;
}

/* Cascade */
.cascade-in {
  animation-name: cascadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1.2); /* A nice bouncy effect */
  /* This is a crucial property for staggered animations */
}

.cascade-out {
  animation-name: cascadeOut;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  pointer-events: none;
}

/* ------------------------------------- */
/* Shake Animation (for button) */
/* ------------------------------------- */
.shake {
  animation: shake 1s ease-in-out;
}

/* Prevent scrollbar during slide-up animations */
.session-card.slide-up {
  overflow: hidden;
}

/* ------------------------------------- */
/* Utility Classes */
/* ------------------------------------- */

.cancel-animation {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
  position: static !important;
  z-index: auto !important;
}

/* Additional rule for immediate removal if animation is interrupted */
.session-card.dissolve-out[style*="opacity: 0"][style*="display: none"] {
    /* This rule is more for confirmation. The JS directly sets these properties and removes. */
    /* It's less about CSS rules and more about the JS forcing the state */
}