/* Phased loading.
     html.no-js - no skeleton at all, content visible instantly
     html.js.phase-0 - skeleton overlay visible, content transparent
     html.js.phase-1 - content faded in, skeleton fading out
     html.js.phase-2 - decorative extras allowed (WebGL background)
    */

/* Hide skeleton when no JS. */
html.no-js .skeleton-screen { display: none !important; }

/* Overlay */
.skeleton-screen {
  display: none;
  position: absolute;
  inset: 0;
  z-index: var(--z-skeleton);
  pointer-events: none;
  padding: var(--space-9) var(--space-5);
  max-width: var(--wrap-max);
  margin-inline: auto;
}

html.js.phase-0 .skeleton-screen { display: block; }

html.js.phase-0 .skeleton-host > *:not(.skeleton-screen) {
  opacity: 0;
}

.skeleton-host { position: relative; }

.skeleton-host > *:not(.skeleton-screen) {
  opacity: 1;
  transition: opacity 0.45s var(--ease);
}

html.js.phase-1 .skeleton-screen {
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

/* Shimmer blocks */
.sk {
  display: block;
  background: var(--skeleton-bg);
  border-radius: var(--skeleton-radius);
  position: relative;
  overflow: hidden;
}

.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
              transparent 0%, var(--skeleton-shine) 50%, transparent 100%);
  animation: sk-shimmer var(--skeleton-speed) infinite;
}

[dir="rtl"] .sk::after { animation-name: sk-shimmer-rtl; }

@keyframes sk-shimmer      { 100% { transform: translateX(100%);  } }
@keyframes sk-shimmer-rtl  { 100% { transform: translateX(-200%); } }

/* Reduced motion - static tint */
@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; background: var(--skeleton-shine); opacity: 0.5; }
}

/* Block shapes */
.sk-line      { height: 0.85rem; margin-bottom: 0.75rem; }
.sk-line.w-90 { width: 90%; }
.sk-line.w-75 { width: 75%; }
.sk-line.w-60 { width: 60%; }
.sk-line.w-40 { width: 40%; }
.sk-line.w-25 { width: 25%; }

.sk-label  { height: 0.6rem;  width: 8rem;  margin-bottom: var(--space-4); }
.sk-title  { height: 2.6rem;  width: 65%;   margin-bottom: var(--space-4); }
.sk-hero   { height: 4.5rem;  width: 80%;   margin: 0 auto var(--space-5); }
.sk-btn    { height: 2.9rem;  width: 11rem; border-radius: var(--radius-sm); }
.sk-card   { height: 11rem;   border-radius: var(--radius); }
.sk-card.tall { height: 15rem; }

.sk-row       { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.sk-row.center{ justify-content: center; }

.sk-grid    { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.sk-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.sk-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.sk-grid.c4 { grid-template-columns: repeat(4, 1fr); }

.sk-center { text-align: center; }
.sk-center .sk-title,
.sk-center .sk-label,
.sk-center .sk-line { margin-inline: auto; }

@media (max-width: 960px) {
  .sk-grid.c3, .sk-grid.c4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .skeleton-screen { padding: var(--space-8) var(--space-3); }
  .sk-grid.c2, .sk-grid.c3, .sk-grid.c4 { grid-template-columns: 1fr; }
}

/* Inline "loading" state for lazily-swapped text (i18n) */
[data-i18n].i18n-pending { opacity: 0.35; }