/* ============================================================
   SKELETON SCREENS — Modern Loading States (Facebook-style)
   Shimmer animations for all content types
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. BASE SKELETON STYLES
   ══════════════════════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(79, 142, 247, 0.10) 50%,
    rgba(255, 255, 255, 0.03) 75%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 400% 100%;
  animation: shimmer-premium 2s ease-in-out infinite;
  border-radius: var(--r-md, 14px);
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

@keyframes shimmer-premium {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Alternative shimmer with blue accent */
.skeleton-blue {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(79, 142, 247, 0.12) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 400% 100%;
  animation: shimmer-premium 2s ease-in-out infinite;
}

/* Gold shimmer for premium content */
.skeleton-gold {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(240, 180, 41, 0.12) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 400% 100%;
  animation: shimmer-premium 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════
   2. MOVIE POSTER CARD SKELETON
   ══════════════════════════════════════════════════════════ */

.poster-card.skeleton {
  min-height: 320px;
  animation: skeleton-fade 1.5s ease-in-out infinite;
}

.poster-card.skeleton .poster-img-wrap {
  aspect-ratio: 2/3;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(79, 142, 247, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 400% 100%;
  animation: shimmer-premium 2s ease-in-out infinite;
  border-radius: var(--r-lg, 20px);
}

.poster-card.skeleton .p-info {
  padding: 0.75rem 0;
}

.skeleton-title {
  height: 16px;
  width: 80%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  margin-bottom: 8px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-subtitle {
  height: 12px;
  width: 55%;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
}

@keyframes skeleton-fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ══════════════════════════════════════════════════════════
   3. PACKAGE CARD SKELETON
   ══════════════════════════════════════════════════════════ */

.pkg-card-skeleton {
  height: 200px;
  border-radius: var(--r-lg, 20px);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(79, 142, 247, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 400% 100%;
  animation: shimmer-premium 2s ease-in-out infinite;
  border: 2px solid rgba(255, 255, 255, 0.06);
}

/* ══════════════════════════════════════════════════════════
   4. TRANSACTION ROW SKELETON
   ══════════════════════════════════════════════════════════ */

.transaction-skeleton {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tx-skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.tx-skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tx-skeleton-line {
  height: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.tx-skeleton-line.wide {
  width: 70%;
}

.tx-skeleton-line.short {
  width: 40%;
}

.tx-skeleton-amount {
  width: 80px;
  height: 24px;
  background: rgba(6, 214, 160, 0.10);
  border-radius: 8px;
  flex-shrink: 0;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════
   5. HERO BANNER SKELETON
   ══════════════════════════════════════════════════════════ */

.hero-skeleton {
  min-height: 400px;
  background: linear-gradient(
    135deg,
    rgba(79, 142, 247, 0.08) 0%,
    rgba(139, 92, 246, 0.06) 50%,
    rgba(240, 180, 41, 0.04) 100%
  );
  border-radius: var(--r-xl, 26px);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

.hero-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  animation: shimmer-slide 2s ease-in-out infinite;
}

@keyframes shimmer-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.hero-skeleton-title {
  height: 32px;
  width: 60%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin-bottom: 1rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.hero-skeleton-desc {
  height: 16px;
  width: 80%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
}

.hero-skeleton-btn {
  width: 140px;
  height: 44px;
  background: rgba(79, 142, 247, 0.15);
  border-radius: 999px;
  margin-top: 1rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.2s;
}

/* ══════════════════════════════════════════════════════════
   6. TABLE SKELETON
   ══════════════════════════════════════════════════════════ */

.table-skeleton {
  width: 100%;
  border-collapse: collapse;
}

.table-skeleton-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.table-skeleton-cell {
  padding: 1rem;
}

.table-skeleton-content {
  height: 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.table-skeleton-content.thin {
  height: 12px;
}

.table-skeleton-content.wide {
  width: 100%;
}

.table-skeleton-content.narrow {
  width: 60%;
}

/* ══════════════════════════════════════════════════════════
   7. STAT CARD SKELETON
   ══════════════════════════════════════════════════════════ */

.stat-card-skeleton {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 26px);
  padding: 1.5rem;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stat-skeleton-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md, 14px);
  background: rgba(79, 142, 247, 0.10);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.stat-skeleton-label {
  height: 14px;
  width: 70%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
}

.stat-skeleton-value {
  height: 36px;
  width: 50%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.2s;
}

/* ══════════════════════════════════════════════════════════
   8. LIST ITEM SKELETON
   ══════════════════════════════════════════════════════════ */

.list-skeleton-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.list-skeleton-thumb {
  width: 60px;
  height: 80px;
  border-radius: var(--r-sm, 10px);
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.list-skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ══════════════════════════════════════════════════════════
   9. FORM INPUT SKELETON
   ══════════════════════════════════════════════════════════ */

.form-skeleton {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-skeleton-label {
  height: 14px;
  width: 30%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  margin-bottom: 0.5rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.form-skeleton-input {
  height: 48px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-md, 14px);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
}

.form-skeleton-btn {
  height: 50px;
  background: rgba(79, 142, 247, 0.12);
  border-radius: 999px;
  margin-top: 1rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.2s;
}

/* ══════════════════════════════════════════════════════════
   10. MODAL SKELETON
   ══════════════════════════════════════════════════════════ */

.modal-skeleton {
  background: var(--bg-modal);
  border-radius: var(--r-xl, 26px);
  padding: 2rem;
  max-width: 480px;
  width: 100%;
}

.modal-skeleton-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.modal-skeleton-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(240, 180, 41, 0.12);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.modal-skeleton-title {
  flex: 1;
}

.modal-skeleton-title .skeleton-line {
  height: 20px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 8px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.modal-skeleton-title .skeleton-line.subtitle {
  height: 14px;
  width: 70%;
}

/* ══════════════════════════════════════════════════════════
   11. GRID SKELETON (Movie grid)
   ══════════════════════════════════════════════════════════ */

.grid-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.25rem;
}

.grid-skeleton-item {
  aspect-ratio: 2/3;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(79, 142, 247, 0.06) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border-radius: var(--r-lg, 20px);
  animation: skeleton-fade 1.5s ease-in-out infinite;
}

.grid-skeleton-item:nth-child(2) {
  animation-delay: 0.1s;
}

.grid-skeleton-item:nth-child(3) {
  animation-delay: 0.2s;
}

.grid-skeleton-item:nth-child(4) {
  animation-delay: 0.3s;
}

/* ══════════════════════════════════════════════════════════
   12. HORIZONTAL SCROLL SKELETON
   ══════════════════════════════════════════════════════════ */

.h-scroll-skeleton {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: none;
}

.h-scroll-skeleton::-webkit-scrollbar {
  display: none;
}

.h-scroll-skeleton-item {
  min-width: 160px;
  aspect-ratio: 2/3;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(79, 142, 247, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 400% 100%;
  animation: shimmer-premium 2s ease-in-out infinite;
  border-radius: var(--r-lg, 20px);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   13. TEXT SKELETON (Multiple lines)
   ══════════════════════════════════════════════════════════ */

.text-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.text-skeleton-line {
  height: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.text-skeleton-line:nth-child(1) {
  width: 100%;
}

.text-skeleton-line:nth-child(2) {
  width: 95%;
  animation-delay: 0.1s;
}

.text-skeleton-line:nth-child(3) {
  width: 80%;
  animation-delay: 0.2s;
}

.text-skeleton-line:nth-child(4) {
  width: 60%;
  animation-delay: 0.3s;
}

/* ══════════════════════════════════════════════════════════
   14. PROFILE SKELETON
   ══════════════════════════════════════════════════════════ */

.profile-skeleton {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
}

.profile-skeleton-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.profile-skeleton-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-skeleton-name {
  height: 20px;
  width: 60%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.profile-skeleton-bio {
  height: 14px;
  width: 80%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
}

/* ══════════════════════════════════════════════════════════
   15. MOBILE RESPONSIVENESS
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .grid-skeleton {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
  }

  .hero-skeleton {
    min-height: 300px;
    padding: 1.5rem;
  }

  .profile-skeleton-avatar {
    width: 60px;
    height: 60px;
  }
}

/* ══════════════════════════════════════════════════════════
   16. PERFORMANCE OPTIMIZATIONS
   ══════════════════════════════════════════════════════════ */

.skeleton,
.skeleton * {
  will-change: background-position, opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* ══════════════════════════════════════════════════════════
   17. ACCESSIBILITY
   ══════════════════════════════════════════════════════════ */

.skeleton {
  aria-hidden: true;
}

/* Screen reader text */
.sr-loading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════
   18. REDUCED MOTION
   ══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .skeleton *,
  [class*="skeleton"] {
    animation: none !important;
  }

  .skeleton {
    background: rgba(255, 255, 255, 0.06) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   USAGE EXAMPLES
   ══════════════════════════════════════════════════════════

HTML USAGE:
===========

MOVIE CARDS:
<div class="poster-card skeleton">
  <div class="poster-img-wrap"></div>
  <div class="p-info">
    <div class="skeleton-title"></div>
    <div class="skeleton-subtitle"></div>
  </div>
</div>

HERO BANNER:
<div class="hero-skeleton">
  <div class="hero-skeleton-title"></div>
  <div class="hero-skeleton-desc"></div>
  <div class="hero-skeleton-desc" style="width:70%"></div>
  <div class="hero-skeleton-btn"></div>
</div>

TRANSACTION LIST:
<div class="transaction-skeleton">
  <div class="tx-skeleton-avatar"></div>
  <div class="tx-skeleton-content">
    <div class="tx-skeleton-line wide"></div>
    <div class="tx-skeleton-line short"></div>
  </div>
  <div class="tx-skeleton-amount"></div>
</div>

   ══════════════════════════════════════════════════════════ */