/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Line clamp utilities for text truncation */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Shimmer Effect for Skeleton Loading */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.shimmer-wrapper {
  position: relative;
  overflow: hidden;
  background: #f3f4f6;
}

.shimmer-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
}

/* Button Scaling Feedback */
.scale-active:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

.card-scale-active:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* Carousel Transitions */
.translate-y-2 {
  transform: translateY(8px);
}

[data-carousel-target="title"], [data-carousel-target="text"] {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}