/* =============================================================
   Orion DS — Image Placeholder System
   Shimmer, icon, initials, aspect ratios, blur-up
   ============================================================= */

/* --- Base Image Component --- */

.img {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-subtle);
}

.img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img--contain img {
  object-fit: contain;
}

.img--fill img {
  object-fit: fill;
}

.img__caption {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* --- Aspect Ratios via data attribute --- */

[data-ratio="square"]   { aspect-ratio: 1/1; }
[data-ratio="video"]    { aspect-ratio: 16/9; }
[data-ratio="photo"]    { aspect-ratio: 4/3; }
[data-ratio="cinema"]   { aspect-ratio: 21/9; }
[data-ratio="portrait"] { aspect-ratio: 3/4; }
[data-ratio="story"]    { aspect-ratio: 9/16; }

/* --- Shimmer Placeholder --- */

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

[data-placeholder="shimmer"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    var(--surface-subtle) 25%,
    var(--surface-raised) 50%,
    var(--surface-subtle) 75%
  );
  background-size: 200% 100%;
  animation: placeholder-shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}

/* Hide shimmer when image loads */
[data-placeholder="shimmer"].is-loaded::before {
  display: none;
}

/* --- Icon Placeholder --- */

[data-placeholder="icon"] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

[data-placeholder="icon"]::before {
  content: "";
  width: 3rem;
  height: 3rem;
  background-color: var(--text-muted);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Hide icon when image loads */
[data-placeholder="icon"].is-loaded::before {
  display: none;
}

/* --- Blur-up Placeholder --- */

[data-placeholder="blur"] img {
  transition: filter var(--duration-slow) var(--easing-out);
}

[data-placeholder="blur"]:not(.is-loaded) img {
  filter: blur(20px);
  transform: scale(1.05);
}

[data-placeholder="blur"].is-loaded img {
  filter: blur(0);
  transform: scale(1);
}

/* --- Avatar Placeholder (initials) --- */

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--surface-raised);
  border: 2px solid var(--border-subtle);
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--xs { width: 1.5rem; height: 1.5rem; }
.avatar--sm { width: 2rem; height: 2rem; }
.avatar--md { width: 2.5rem; height: 2.5rem; }
.avatar--lg { width: 3rem; height: 3rem; }
.avatar--xl { width: 4rem; height: 4rem; }
.avatar--2xl { width: 5rem; height: 5rem; }

.avatar__initials {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  color: var(--text-accent);
  text-transform: uppercase;
  line-height: 1;
}

.avatar--xs .avatar__initials { font-size: var(--font-size-xs); }
.avatar--sm .avatar__initials { font-size: var(--font-size-xs); }
.avatar--md .avatar__initials { font-size: var(--font-size-sm); }
.avatar--lg .avatar__initials { font-size: var(--font-size-base); }
.avatar--xl .avatar__initials { font-size: var(--font-size-lg); }
.avatar--2xl .avatar__initials { font-size: var(--font-size-xl); }

/* Avatar border accent */
.avatar--accent {
  border-color: var(--border-accent);
}

/* Avatar group (overlapping) */
.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  margin-left: -0.5rem;
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  [data-placeholder="shimmer"]::before {
    animation: none;
  }

  [data-placeholder="blur"]:not(.is-loaded) img {
    filter: none;
    transform: none;
  }
}