/* ═══════════════════════════════════════════════════════════════════
   App detail page — shared styles
   Used by: /apps/{id}/ and /apps/ index
   ═══════════════════════════════════════════════════════════════════ */

/* Entrance animation — fade & lift */
.reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* ───────────────────────────────────────────────
   Auto-scrolling marquee (gallery + reviews)
   ─────────────────────────────────────────────── */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.gallery-marquee .marquee-track,
.reviews-marquee .marquee-track {
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
}

.reviews-marquee .marquee-track {
  animation-duration: 50s;
}

/* Pause on hover */
.gallery-marquee:hover .marquee-track,
.reviews-marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* Slower scroll on small screens for readability */
@media (max-width: 640px) {
  .gallery-marquee .marquee-track { animation-duration: 80s; }
  .reviews-marquee .marquee-track  { animation-duration: 70s; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .gallery-marquee .marquee-track,
  .reviews-marquee .marquee-track {
    animation: none;
  }
  .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ───────────────────────────────────────────────
   Multi-line text truncation utilities
   ─────────────────────────────────────────────── */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.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;
}
.line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ───────────────────────────────────────────────
   Helpers used by /apps/ index filter bar
   ─────────────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.filter-btn {
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.filter-btn:focus-visible {
  outline: 2px solid rgba(30, 58, 138, 0.4);
  outline-offset: 2px;
}

/* Instant filter switch — no flicker, no transition */
.app-card-wrapper {
  transition: none;
}

/* ───────────────────────────────────────────────
   /apps/ hero specifics
   ─────────────────────────────────────────────── */
@keyframes pulse-slow {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 0.4;  transform: scale(1.05); }
}
.animate-pulse-slow {
  animation: pulse-slow 6s ease-in-out infinite;
}

@keyframes icon-pop-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.trust-icon {
  opacity: 0;
  animation: icon-pop-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes star-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.18); opacity: 1; }
}
.star-pulse {
  animation: star-pulse 2.4s ease-in-out infinite;
}