/* ==========================================================================
   Skeleton loading state — Haya Beauty Lounge
   Use .skeleton on any placeholder element while real content loads.
   Add .loaded to the container to fade out all skeleton children.
   ========================================================================== */

.skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--champagne) 25%,
    var(--soft-pink) 50%,
    var(--champagne) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 4px;
  color: transparent !important;
}

@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Reduced-motion: static placeholder instead of animation */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--champagne);
  }
}

/* Fade out skeletons once content is loaded */
.loaded .skeleton {
  animation: none;
  background: transparent;
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* Common size helpers */
.skeleton--text  { height: 1em;    width: 100%; }
.skeleton--title { height: 1.5em;  width: 60%; }
.skeleton--card  { height: 200px;  width: 100%; }
.skeleton--thumb { height: 120px;  width: 120px; }
.skeleton--avatar { height: 48px; width: 48px; border-radius: 50%; }