/* ARETÉ · neutral loading states for CMS-driven public content */

/* Landing: never expose hard-coded fallback content while Supabase is resolving. */
html[data-cms="loading"] .resident-grid,
html[data-cms="loading"] .sleeves,
html[data-cms="loading"] .album-grid{
  position:relative;
}
html[data-cms="loading"] .resident-grid > *,
html[data-cms="loading"] .sleeves > *,
html[data-cms="loading"] .album-grid > *{
  visibility:hidden!important;
  pointer-events:none!important;
}
html[data-cms="loading"] .resident-grid::before,
html[data-cms="loading"] .sleeves::before,
html[data-cms="loading"] .album-grid::before{
  content:"";
  display:block;
  width:100%;
  min-height:180px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(110deg,rgba(255,255,255,.025) 20%,rgba(184,91,231,.06) 38%,rgba(255,255,255,.025) 56%) #080609;
  background-size:220% 100%;
  animation:areteCmsPulse 1.15s ease-in-out infinite;
}
html[data-cms="loading"] .resident-grid::before{min-height:390px}
html[data-cms="loading"] .album-grid::before{min-height:300px}
html[data-cms="ready"] .resident-grid,
html[data-cms="ready"] .sleeves,
html[data-cms="ready"] .album-grid{animation:areteCmsReveal .22s ease both}

/* On failure, keep the valid resident fallbacks and replace stale albums with a clear retry state. */
html[data-cms="error"] .resident-grid,
html[data-cms="error"] .sleeves,
html[data-cms="error"] .album-grid{animation:areteCmsReveal .22s ease both}
.arete-cms-error{
  display:grid;
  justify-items:center;
  gap:9px;
  padding:34px 22px!important;
}
.arete-cms-error strong{
  color:#f3edf5;
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.35rem;
  font-weight:400;
}
.arete-cms-error span{
  max-width:520px;
  color:#9f96a3;
  font-size:.72rem;
  line-height:1.5;
}
.arete-cms-retry{
  min-height:42px;
  margin-top:7px;
  padding:0 18px;
  border:1px solid rgba(226,164,71,.55);
  border-radius:12px;
  background:rgba(226,164,71,.1);
  color:#e2a447;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.13em;
  cursor:pointer;
}

/* Artist profile: keep the old/local portrait and old identity invisible until current CMS data + image are ready. */
html:not([data-profile="ready"]) .hero .copy,
html:not([data-profile="ready"]) .artist-content{
  visibility:hidden!important;
}
html:not([data-profile="ready"]) .portrait{
  background:linear-gradient(110deg,#080609 22%,#130d17 42%,#080609 60%)!important;
  background-size:220% 100%!important;
  animation:areteCmsPulse 1.15s ease-in-out infinite;
}
html:not([data-profile="ready"]) .portrait::before,
html:not([data-profile="ready"]) .portrait::after,
html:not([data-profile="ready"]) .portrait img{
  opacity:0!important;
}
html[data-profile="ready"] .portrait img{animation:areteCmsReveal .24s ease both}
html[data-profile="ready"] .hero .copy,
html[data-profile="ready"] .artist-content{animation:areteCmsReveal .2s ease both}

/* Gallery detail: do not flash the generic old gallery cover before the selected album loads. */
html:not([data-album="ready"]) .album-cover{
  background:linear-gradient(110deg,#080609 22%,#130d17 42%,#080609 60%)!important;
  background-size:220% 100%!important;
  animation:areteCmsPulse 1.15s ease-in-out infinite;
}
html:not([data-album="ready"]) .album-copy,
html:not([data-album="ready"]) .album-content{
  visibility:hidden!important;
}
html[data-album="ready"] .album-cover,
html[data-album="ready"] .album-copy,
html[data-album="ready"] .album-content{animation:areteCmsReveal .22s ease both}

@keyframes areteCmsPulse{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes areteCmsReveal{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  html[data-cms="loading"] .resident-grid::before,
  html[data-cms="loading"] .sleeves::before,
  html[data-cms="loading"] .album-grid::before,
  html:not([data-profile="ready"]) .portrait,
  html:not([data-album="ready"]) .album-cover{animation:none!important}
  html[data-cms="ready"] .resident-grid,
  html[data-cms="ready"] .sleeves,
  html[data-cms="ready"] .album-grid,
  html[data-cms="error"] .resident-grid,
  html[data-cms="error"] .sleeves,
  html[data-cms="error"] .album-grid,
  html[data-profile="ready"] .portrait img,
  html[data-profile="ready"] .hero .copy,
  html[data-profile="ready"] .artist-content,
  html[data-album="ready"] .album-cover,
  html[data-album="ready"] .album-copy,
  html[data-album="ready"] .album-content{animation:none!important}
}