.x-intro-1 {
  color: white;
  animation: intro 1s ease;
}

@keyframes intro {
  from {
    transform: translateX(-10%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.x-intro-2 {
  color: white;
  animation: x-intro-2-anim 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes x-intro-2-anim {
  from {
    transform: translateX(-10%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.x-intro-3 {
  color: white;
  animation: intro 3s ease;
}

@keyframes intro {
  from {
    transform: translateX(-10%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.y-intro-1 {
  color: white;
  animation: y-intro-1-anim 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes y-intro-1-anim {
  from {
    transform: translateX(10%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.y-intro-2 {
  color: white;
  animation: y-intro-2-anim 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.y-intro-3 {
  color: white;
  animation: y-intro-3-anim 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes y-intro-3-anim {
  from {
    transform: translateX(10%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.y-intro-4 {
  color: white;
  animation: y-intro-4-anim 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes y-intro-4-anim {
  from {
    transform: translateX(10%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.y-intro-5 {
  color: white;
  animation: y-intro-5-anim 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes y-intro-5-anim {
  from {
    transform: translateX(10%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}



@keyframes y-intro-2-anim {
  from {
    transform: translateX(10%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}


.y-intro-6 {
  color: white;
  animation: y-intro-6-anim 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes y-intro-6-anim {
  from {
    transform: translateX(10%);
    opacity: 0;

    to {
      transform: translateX(0%);
      opacity: 1;
    }
  }
}

.o-intro-1 {
  color: white;
  animation: o-intro-1-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes o-intro-1-anim {
  from {
    transform: translateX(5%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.o-intro-2 {
  color: white;
  animation: o-intro-2-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 0.01s;
}

@keyframes o-intro-2-anim {
  from {
    transform: translateX(5%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.o-intro-3 {
  color: white;
  animation: o-intro-3-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes o-intro-3-anim {
  from {
    transform: translateX(5%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.o-intro-4 {
  color: white;
  animation: o-intro-4-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 0.02s;
}

@keyframes o-intro-4-anim {
  from {
    transform: translateX(5%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.o-intro-5 {
  color: white;
  animation: o-intro-5-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 0.04s;
}

@keyframes o-intro-5-anim {
  from {
    transform: translateX(5%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.o-intro-6 {
  color: white;
  animation: o-intro-6-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 0.06s;
}

@keyframes o-intro-6-anim {
  from {
    transform: translateX(5%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.o-intro-7 {
  color: white;
  animation: o-intro-7-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 0.08s;
}

@keyframes o-intro-7-anim {
  from {
    transform: translateX(5%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.o-intro-8 {
  color: white;
  animation: o-intro-8-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 0.1s;
}

@keyframes o-intro-8-anim {
  from {
    transform: translateX(5%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.o-intro-9 {
  color: white;
  animation: o-intro-9-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 0.12s;
}

@keyframes o-intro-9-anim {
  from {
    transform: translateX(5%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

.o-intro-10 {
  color: white;
  animation: o-intro-10-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 0.14s;
}


@keyframes o-intro-10-anim {
  from {
    transform: translateX(5%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}


.u-intro-1 {
  color: white;
  animation: u-intro-1-anim 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.u-intro-2 {
  color: white;
  animation: u-intro-2-anim 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.u-intro-3 {
  color: white;
  animation: u-intro-3-anim 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.u-intro-4 {
  color: white;
  animation: u-intro-4-anim 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.u-intro-5 {
  color: white;
  animation: u-intro-5-anim 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes u-intro-1-anim {
  from {
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes u-intro-2-anim {
  from {
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes u-intro-3-anim {
  from {
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes u-intro-4-anim {
  from {
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes u-intro-5-anim {
  from {
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

/* Only apply animation styles to dataTable, not loginAuditTable */
#dataTable tbody {
  background-color: white;
}

#dataTable tbody td {
  padding: 8px;
  text-align: left;
  background-color: white;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Disable animation for tables with data-no-animate attribute - must come before hover rule */
#dataTable[data-no-animate] tbody td {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: none !important;
}

/* Ensure hover effects work on table rows */
#dataTable tbody tr:hover td {
  background-color: #f8f9fa !important;
  transition: background-color 0.2s ease;
}

/* Override hover transition for no-animate tables */
#dataTable[data-no-animate] tbody tr:hover td {
  transition: background-color 0.2s ease !important;
}

/* Login audit table animation styles */
#loginAuditTable tbody {
  background-color: white;
}

#loginAuditTable tbody td {
  padding: 8px;
  text-align: left;
  background-color: white;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Ensure hover effects work on login audit table rows */
#loginAuditTable tbody tr:hover td {
  background-color: #f8f9fa !important;
  transition: background-color 0.2s ease;
}

/* Prevent Alpine.js elements from flashing before initialization */
[x-cloak] {
  display: none !important;
}

/* Smooth spinner transition */
.spinner-container {
  transition: opacity 0.2s ease-in-out;
}

.spinner-container.hidden {
  opacity: 0;
  pointer-events: none;
}