/* ==========================================================================
   Whimsy Design System – Home Page Styles

   Extracted from Home.razor <style> block.
   Uses tokens from tokens.css.
   ========================================================================== */

/* ----- Home Gallery Cards ------------------------------------------------ */

.home-gallery .card {
  transition: transform var(--w-transition-fast);
}

.home-gallery .card:hover {
  transform: translateY(-2px);
}

/* ----- Home Cover Image -------------------------------------------------- */

.home-cover {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: inherit;
  display: block;
}

/* ----- Image Overlay (shared with home gallery) -------------------------- */

.img-overlay {
  height: auto;
}

/* ----- Home Placeholder Skeleton ----------------------------------------- */

.home-placeholder-card {
  border-radius: var(--w-radius-md);
  overflow: hidden;
}

.home-placeholder-image {
  width: 100%;
  aspect-ratio: 800 / 550;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .08) 25%,
    rgba(255, 255, 255, .16) 37%,
    rgba(255, 255, 255, .08) 63%
  );
  background-size: 400% 100%;
  animation: home-placeholder-shimmer 1.4s ease infinite;
  border-radius: var(--w-radius-md);
}

.home-placeholder-line {
  display: block;
  height: 1rem;
  border-radius: var(--w-radius-sm);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .08) 25%,
    rgba(255, 255, 255, .16) 37%,
    rgba(255, 255, 255, .08) 63%
  );
  background-size: 400% 100%;
  animation: home-placeholder-shimmer 1.4s ease infinite;
}

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