/* ════════════════════════════════════════════════════════════
   LOADER — page loader, skeleton loading states
   ════════════════════════════════════════════════════════════ */

/* ── Page loader (full-screen) ─────────────────────────────── */

.clashe-loading,
.clashe-loading body {
  overflow: hidden;
}

.clashe-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, visibility 280ms ease;
  visibility: hidden;
}

.clashe-loading .clashe-loader,
.clashe-loader-exit .clashe-loader {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.clashe-loader-exit .clashe-loader {
  opacity: 0;
}

.clashe-loader__stack {
  display: grid;
  justify-items: center;
  gap: 16px;
  transform: translateY(0);
  transition: transform 280ms ease, opacity 280ms ease;
}

.clashe-loader-exit .clashe-loader__stack {
  transform: translateY(-10px);
  opacity: 0;
}

.clashe-loader__mark {
  width: 96px;
  height: 96px;
  background-image: url("../assets/Lightmode_logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: clashe-loader-pulse 1.2s ease-in-out infinite;
}

:root[data-theme="dark"] .clashe-loader__mark {
  background-image: url("../assets/Darkmode_logo.svg");
}

.clashe-loader__wordmark {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(6px);
  animation: clashe-loader-wordmark 560ms ease forwards 140ms;
}

.clashe-loader__line {
  position: relative;
  width: 120px;
  height: 2px;
  overflow: hidden;
  background: var(--color-border);
  border-radius: 999px;
}

.clashe-loader__line::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--color-text);
  border-radius: inherit;
  animation: clashe-loader-line 1.1s ease-in-out infinite;
}

@keyframes clashe-loader-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.8; }
  50% { transform: scale(1); opacity: 1; }
}

@keyframes clashe-loader-wordmark {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes clashe-loader-line {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(350%); }
}

/* ════════════════════════════════════════════════════════════
   SKELETON LOADERS — social-app-style content placeholders
   ════════════════════════════════════════════════════════════ */

/* ── Skeleton shimmer animation ────────────────────────────── */

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

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-surface-soft) 25%,
    var(--color-surface-strong) 50%,
    var(--color-surface-soft) 75%
  );
  /* Use vw-based size so sweep looks correct at any viewport width */
  background-size: 400vw 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
  border-radius: var(--radius-1);
}

:root[data-theme="dark"] .skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-surface-soft) 25%,
    var(--color-surface-strong) 50%,
    var(--color-surface-soft) 75%
  );
  background-size: 400vw 100%;
}

/* ── Take / feed item skeleton ─────────────────────────────── */

.skeleton-take {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding: 14px 16px;
  border-bottom: var(--line);
}

.skeleton-take__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-take__body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.skeleton-take__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skeleton-take__username {
  height: 12px;
  width: 120px;
  border-radius: var(--radius-1);
}

.skeleton-take__time {
  height: 10px;
  width: 60px;
  border-radius: var(--radius-1);
}

.skeleton-take__line {
  height: 14px;
  border-radius: var(--radius-1);
}

.skeleton-take__line--short {
  width: 72%;
}

.skeleton-take__line--medium {
  width: 88%;
}

.skeleton-take__line--full {
  width: 100%;
}

.skeleton-take__actions {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}

.skeleton-take__action {
  height: 12px;
  width: 40px;
  border-radius: var(--radius-1);
}

/* ── Notification skeleton ─────────────────────────────────── */

.skeleton-notification {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  padding: 14px var(--space-4);
  border-bottom: var(--line);
}

.skeleton-notification__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-notification__body {
  display: grid;
  gap: 8px;
  align-content: center;
}

/* ── Profile skeleton ──────────────────────────────────────── */

.skeleton-profile-head {
  padding: var(--space-4);
  border-bottom: var(--line);
  display: grid;
  gap: var(--space-4);
}

.skeleton-profile-hero {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}

.skeleton-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.skeleton-profile-info {
  display: grid;
  gap: 10px;
}

.skeleton-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.skeleton-profile-stat {
  height: 54px;
  border-radius: var(--radius-2);
}

/* ── Search result skeleton ────────────────────────────────── */

.skeleton-search-result {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 16px var(--space-4);
  border-bottom: var(--line);
}

.skeleton-search-result__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.skeleton-search-result__body {
  display: grid;
  gap: 8px;
}

.skeleton-search-result__btn {
  width: 72px;
  height: 34px;
  border-radius: var(--radius-pill);
}

/* ── Skeleton helpers ──────────────────────────────────────── */

.skeleton-line {
  height: 13px;
  border-radius: var(--radius-1);
}

.skeleton-line--sm {
  height: 11px;
}

.skeleton-line--lg {
  height: 16px;
}

.skeleton-block {
  border-radius: var(--radius-2);
}

/* ── Skeleton feed list (preset count) ─────────────────────── */

.skeleton-feed {
  display: block;
}

/* ── Follow-list skeleton ───────────────────────────────────── */

.skeleton-follow-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: var(--space-4);
  border-bottom: var(--line);
}

.skeleton-follow-item__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-follow-item__body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.skeleton-follow-item__btn {
  width: 80px;
  height: 34px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

/* ── Explore categories skeleton ────────────────────────────── */

.skeleton-explore-card {
  padding: 18px var(--space-4) 20px;
  border-bottom: var(--line);
  display: grid;
  gap: 14px;
}

.skeleton-explore-card__header {
  display: grid;
  gap: 10px;
}

.skeleton-explore-card__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.skeleton-chip {
  width: 72px;
  height: 32px;
  border-radius: var(--radius-pill);
}

/* ── Trending list skeleton ─────────────────────────────────── */

.skeleton-trend-item {
  display: block;
  padding: 14px var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: transparent;
}

/* ── Comment item skeleton ─────────────────────────────────── */

.skeleton-comment {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: var(--line);
}

.skeleton-comment__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-comment__body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.skeleton-comment__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skeleton-comment__user {
  height: 12px;
  width: 100px;
  border-radius: var(--radius-1);
}

.skeleton-comment__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-border-strong, var(--color-border));
}

.skeleton-comment__time {
  height: 10px;
  width: 45px;
  border-radius: var(--radius-1);
}

.skeleton-comment__line {
  height: 13px;
  border-radius: var(--radius-1);
}

.skeleton-comment__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.skeleton-comment__action {
  height: 14px;
  width: 42px;
  border-radius: var(--radius-1);
}

.skeleton-comment--reply {
  padding-left: 28px;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
}

.skeleton-comment--reply .skeleton-comment__avatar {
  width: 32px;
  height: 32px;
}

/* ── Profile head skeleton helpers ──────────────────────────── */

.profile-head--skeleton .profile-avatar.skeleton-shimmer {
  color: transparent !important;
}

.skeleton-text-block {
  display: block;
  height: 22px;
  width: 140px;
  max-width: 60%;
  color: transparent !important;
  pointer-events: none;
}

.skeleton-bio-block {
  height: 14px;
  width: 100%;
  max-width: 320px;
  color: transparent !important;
  pointer-events: none;
  border-radius: var(--radius-1);
}

.skeleton-stat-block {
  display: block;
  min-height: 36px;
  border-radius: var(--radius-1);
  color: transparent !important;
  pointer-events: none;
}

.profile-head__actions--skeleton {
  opacity: 0.3;
  pointer-events: none;
}

/* Mobile adjustments for skeleton items */
@media (max-width: 640px) {
  .skeleton-follow-item {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    padding: var(--space-3);
  }

  .skeleton-follow-item__avatar {
    width: 40px;
    height: 40px;
  }

  .skeleton-follow-item__btn {
    width: 68px;
    height: 32px;
  }

  .skeleton-explore-card {
    padding: 14px var(--space-3) 16px;
  }

  .skeleton-trend-item {
    padding: 12px var(--space-3);
  }
}

/* ── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .clashe-loader__mark,
  .clashe-loader__line::after,
  .clashe-loader__wordmark {
    animation: none;
  }

  .clashe-loader__wordmark {
    opacity: 1;
    transform: none;
  }

  .skeleton-shimmer {
    animation: none;
    background: var(--color-surface-soft);
  }
}