/**
 * TJAZZMUSIC Advanced Animation & Motion System
 * Fully Hardware-Accelerated & Accessibility Conscious
 */

/* Reveal Transitions */
.tj-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tj-fade-down {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tj-fade-left {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tj-fade-right {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tj-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tj-animated {
  opacity: 1 !important;
  transform: translate(0) scale(1) !important;
}

/* Hover Lift */
.tj-hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.tj-hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.2);
}

/* Gold Pulse Glow */
.tj-glow {
  animation: tjGoldGlow 3s infinite alternate ease-in-out;
}

@keyframes tjGoldGlow {
  0% {
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.2);
  }
  100% {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.6), 0 0 40px rgba(97, 13, 33, 0.4);
  }
}

/* Infinite Marquee */
.tj-marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 30px;
}

.tj-marquee-inner {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: 30px;
  animation: tjScroll 25s linear infinite;
}

@keyframes tjScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 30px));
  }
}

/* Accessibility: Respect Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .tj-fade-up,
  .tj-fade-down,
  .tj-fade-left,
  .tj-fade-right,
  .tj-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .tj-glow,
  .tj-marquee-inner {
    animation: none !important;
  }
  .tj-hover-lift:hover {
    transform: none !important;
  }
}