/* =========================================
   Skeleton loading — warm shimmer (not dull)
   ========================================= */

:root {
  --sk-base: rgba(255, 255, 255, 0.06);
  --sk-shine: rgba(255, 220, 180, 0.22);
  --sk-shine-strong: rgba(240, 163, 94, 0.28);
  --sk-radius: 10px;
}

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

@keyframes sk-pulse {
  0%, 100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes sk-ring {
  0% {
    filter: brightness(0.85);
  }
  50% {
    filter: brightness(1.15);
  }
  100% {
    filter: brightness(0.85);
  }
}

/* Shared bone / bar */
/* Only while .is-loading — never leave text transparent after load */
.skeleton-text.is-loading,
.sk-line,
.sk-chip,
.sk-avatar,
.sk-stat {
  background: linear-gradient(
    105deg,
    var(--sk-base) 0%,
    var(--sk-base) 35%,
    var(--sk-shine) 50%,
    var(--sk-shine-strong) 55%,
    var(--sk-base) 70%,
    var(--sk-base) 100%
  );
  background-size: 220% 100%;
  animation: sk-shimmer 1.35s ease-in-out infinite;
  border: 1px solid rgba(240, 163, 94, 0.12);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

/* After profile loads — force real text colors */
.hero-profile.is-ready .username,
.hero-profile.is-ready .bio,
.hero-profile:not(.is-loading) .username,
.hero-profile:not(.is-loading) .bio {
  color: inherit;
  background: none !important;
  animation: none !important;
  border: none !important;
}

.hero-profile.is-ready .username,
.hero-profile:not(.is-loading) .username {
  color: var(--text, #faf8f5) !important;
}

.hero-profile.is-ready .bio,
.hero-profile:not(.is-loading) .bio {
  color: var(--text-muted, #c4bfb6) !important;
}

.hero-profile.is-ready .bio.is-error,
.hero-profile:not(.is-loading) .bio.is-error {
  color: var(--danger, #ff7b7b) !important;
}

.skeleton-text.is-loading {
  display: inline-block;
  border-radius: var(--sk-radius);
  min-height: 1.15em;
  vertical-align: middle;
}

.username.skeleton-text.is-loading {
  width: 55%;
  max-width: 180px;
  height: 1.4em;
  margin-left: auto;
  margin-right: auto;
}

.bio.skeleton-text.is-loading {
  display: block;
  width: 88%;
  max-width: 260px;
  height: 2.6em;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
}

/* Profile card loading — overlay only (never hide real img forever) */
.hero-profile.is-loading .avatar-ring {
  animation: sk-ring 1.6s ease-in-out infinite;
}

.hero-profile.is-loading .profile-pic {
  opacity: 0.35;
  filter: saturate(0.4);
}

/* Ready state: force visible text/image even if classes lag */
.hero-profile.is-ready .profile-pic {
  opacity: 1 !important;
  filter: none !important;
}

.hero-profile.is-ready .username,
.hero-profile.is-ready .bio {
  color: inherit !important;
  background: none !important;
  animation: none !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  border: none !important;
}

.hero-profile.is-loading .hero-social {
  opacity: 0.55;
}

.hero-profile.is-loading .live-pill {
  background: rgba(240, 163, 94, 0.12);
  border-color: rgba(240, 163, 94, 0.25);
  color: var(--accent);
}

.hero-profile.is-loading .live-dot {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  animation: sk-pulse 1s ease-in-out infinite;
}

/* Stats skeleton while hidden until data arrives */
.profile-stats.sk-stats {
  display: flex !important;
}

.profile-stats.sk-stats .stat-number {
  width: 2.4em;
  height: 1.1em;
  border-radius: 6px;
  margin: 0 auto 4px;
  background: linear-gradient(
    105deg,
    var(--sk-base) 0%,
    var(--sk-shine) 50%,
    var(--sk-base) 100%
  );
  background-size: 220% 100%;
  animation: sk-shimmer 1.35s ease-in-out infinite;
  color: transparent;
}

.profile-stats.sk-stats .stat-label {
  opacity: 0.45;
}

/* Page content soft entrance after load */
.page-ready main {
  animation: page-in 0.45s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes page-in {
  from {
    opacity: 0.65;
    filter: saturate(0.7);
  }
  to {
    opacity: 1;
    filter: none;
  }
}

/* Optional block skeletons for future use */
.sk-line {
  display: block;
  height: 0.9em;
  border-radius: var(--sk-radius);
  margin: 0.35em 0;
}

.sk-line.w-40 { width: 40%; }
.sk-line.w-60 { width: 60%; }
.sk-line.w-80 { width: 80%; }
.sk-line.w-100 { width: 100%; }

.sk-chip {
  display: inline-block;
  width: 64px;
  height: 32px;
  border-radius: 999px;
}

.sk-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .sk,
  .skeleton-text.is-loading,
  .sk-line,
  .sk-chip,
  .sk-avatar,
  .profile-stats.sk-stats .stat-number,
  .hero-profile.is-loading .avatar-ring,
  .hero-profile.is-loading .avatar-ring::before,
  .hero-profile.is-loading .live-dot {
    animation: none !important;
  }

  .page-ready main {
    animation: none !important;
  }
}