/* ══════════════════════════════════════════════════════════════════════
   Zoojoy — Skeleton loader system (shimmer placeholders, theme-aware)

   Purpose: replace spinners / full-page refreshes with shimmer skeletons
   that hold layout while real content loads, then get swapped in.

   ── HTMX usage ────────────────────────────────────────────────────────
   htmx toggles the `.htmx-request` class on both the requesting element
   AND every element matched by its `hx-indicator` selector while a request
   is in flight. Wrap a skeleton in an element carrying `.htmx-indicator`,
   point `hx-indicator` at it, and it stays collapsed (0-height, opacity 0)
   until the request starts — then it reveals, and collapses again once the
   real markup swaps into the target.

     <div id="grid" hx-get="/animals/?page=2"
          hx-target="#grid" hx-swap="innerHTML"
          hx-indicator="#grid-skel">
       {# real cards #}
     </div>
     <div id="grid-skel" class="htmx-indicator">
       {% include 'components/skeletons.html' with kind='grid' count=8 %}
     </div>

   For "replace in place" (skeleton lives inside the target), give the
   OUTGOING content `hx-indicator` on itself and swap the skeleton in with
   `hx-swap="innerHTML"` — or simply pre-render the skeleton as the initial
   target contents so it shows on first paint before the GET resolves.
   ══════════════════════════════════════════════════════════════════════ */

/* ── HTMX indicator: collapsed until htmx flags `.htmx-request` ── */
.htmx-indicator{
  opacity:0;
  max-height:0;
  overflow:hidden;
  pointer-events:none;
  transition:opacity .25s ease;
}
.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator{
  opacity:1;
  max-height:none;
  overflow:visible;
  pointer-events:auto;
}

/* ── Base shimmer block ──
   Muted fill from the theme's hairline token, with a soft light sweep
   travelling across it. `--border` is a warm light-gray in light, deep
   plum in dark and sand in read mode — a natural placeholder tone in all. */
.skeleton{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background-color:rgb(var(--border));
  background-image:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size:220% 100%;
  background-repeat:no-repeat;
  background-position:-120% 0;
  animation:skel-shimmer 1.5s ease-in-out infinite;
}

@keyframes skel-shimmer{
  0%{background-position:-120% 0}
  100%{background-position:120% 0}
}

/* Dark mode: a white sweep would blow out — use a coral-tinted lighter
   pulse over the deep placeholder instead. */
[data-theme="dark"] .skeleton{
  background-color:rgb(var(--bg2));
  background-image:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,140,97,.10) 45%,
    rgba(255,255,255,.14) 50%,
    rgba(255,140,97,.10) 55%,
    rgba(255,255,255,0) 100%
  );
}

/* Read mode: warmer, gentler sweep on the parchment surface. */
[data-theme="read"] .skeleton{
  background-image:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,251,240,.7) 50%,
    rgba(255,255,255,0) 100%
  );
}

/* ── Reduced motion: freeze to a flat muted block ── */
@media (prefers-reduced-motion: reduce){
  .skeleton{
    animation:none;
    background-image:none;
    background-color:rgb(var(--border));
  }
  [data-theme="dark"] .skeleton{background-color:rgb(var(--bg2));}
  .htmx-indicator{transition:none;}
}

/* ── Semantic primitives ── */
.skel-line{
  height:.72em;
  border-radius:9999px;
  margin:.5em 0;
}
.skel-line.sm{height:.6em;}
.skel-line.lg{height:.9em;}

.skel-title{
  height:1.15em;
  border-radius:8px;
  margin:.35em 0 .7em;
}

.skel-avatar{
  width:2.75rem;
  height:2.75rem;
  border-radius:9999px;
  flex:0 0 auto;
}
.skel-avatar.lg{width:4rem;height:4rem;}
.skel-avatar.sm{width:2rem;height:2rem;}

.skel-chip{
  height:1.6rem;
  width:4.5rem;
  border-radius:9999px;
}

.skel-btn{
  height:2.75rem;
  width:100%;
  border-radius:.9rem;
}

.skel-thumb{
  width:100%;
  aspect-ratio:4 / 3;
  border-radius:14px;
}
.skel-thumb.square{aspect-ratio:1 / 1;}
.skel-thumb.wide{aspect-ratio:16 / 9;}

/* Width helpers for staggered, natural-looking text runs */
.skel-w-30{width:30%;}
.skel-w-40{width:40%;}
.skel-w-50{width:50%;}
.skel-w-60{width:60%;}
.skel-w-70{width:70%;}
.skel-w-80{width:80%;}
.skel-w-90{width:90%;}
.skel-w-full{width:100%;}

/* ── Liquid-glass card shell that holds the primitives ──
   Translucent surface + hairline rim + soft layered shadow, matching the
   real animal cards so the swap is seamless. Solid fallback for browsers
   without backdrop-filter. */
.skel-card{
  border-radius:var(--radius,1rem);
  padding:.85rem;
  background:rgb(var(--card));
  border:1px solid rgba(var(--border),.9);
  box-shadow:0 6px 22px rgba(0,0,0,.05);
  overflow:hidden;
}
@supports (backdrop-filter:blur(8px)){
  .skel-card{
    background:rgba(var(--card),.72);
    backdrop-filter:blur(14px) saturate(1.1);
    -webkit-backdrop-filter:blur(14px) saturate(1.1);
    border-color:rgba(255,255,255,.35);
  }
  [data-theme="dark"] .skel-card{
    background:rgba(var(--card),.6);
    border-color:rgba(255,255,255,.06);
  }
}

.skel-card-body{padding:.65rem .35rem .25rem;}

/* ── Grid + list layout wrappers ── */
.skel-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
@media (min-width:768px){
  .skel-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;}
}
@media (min-width:1024px){
  .skel-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}

.skel-list{display:flex;flex-direction:column;gap:.35rem;}

.skel-row{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.75rem .9rem;
  border-radius:1rem;
  background:rgb(var(--card));
  border:1px solid rgba(var(--border),.8);
}
@supports (backdrop-filter:blur(8px)){
  .skel-row{
    background:rgba(var(--card),.7);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
}
.skel-row-lines{flex:1 1 auto;min-width:0;}

/* ── Detail-page scaffold ── */
.skel-detail{
  max-width:72rem;
  margin:0 auto;
  padding:1.25rem;
  display:grid;
  gap:1.75rem;
}
@media (min-width:1024px){
  .skel-detail{grid-template-columns:1.6fr 1fr;align-items:start;}
}
.skel-detail-media .skel-thumb{aspect-ratio:16 / 10;border-radius:20px;}
.skel-detail-side{
  border-radius:var(--radius,1rem);
  padding:1.25rem;
  background:rgb(var(--card));
  border:1px solid rgba(var(--border),.8);
  box-shadow:0 8px 28px rgba(0,0,0,.06);
}
@supports (backdrop-filter:blur(8px)){
  .skel-detail-side{
    background:rgba(var(--card),.72);
    backdrop-filter:blur(16px) saturate(1.1);
    -webkit-backdrop-filter:blur(16px) saturate(1.1);
    border-color:rgba(255,255,255,.32);
  }
  [data-theme="dark"] .skel-detail-side{border-color:rgba(255,255,255,.06);}
}
.skel-thumb-row{display:flex;gap:.6rem;margin-top:.75rem;}
.skel-thumb-row .skeleton{width:4.5rem;height:4.5rem;border-radius:12px;flex:0 0 auto;}