/* ============================================================================
   assets/css/skeleton-presets.css — 2.27 Skeleton loading pattern presets (storefront + admin).
   Settings & Design ▸ Front End ▸ UI Components ▸ Skeleton Loading   → <html data-skel="…"> on the shop
   Settings & Design ▸ Back End ▸ Skeleton Loading                    → <html data-skel="…"> in the admin
   No data-skel (= "Theme default") keeps each page's own loader. [data-skel-speed] slow | fast.
   Every placeholder the site already draws follows the preset: images while they load (img.lz-loading),
   product-card skeletons, block skeletons (.lz-skel), drawer / panel skeletons (.skx) and the admin module skeletons.
   Colours: --sk-base (block), --sk-hi (highlight), --sk-line (outline), --sk-acc1..3 (gradient / cascade).
   ============================================================================ */
:root{
  --sk-base:#ebe6df; --sk-hi:rgba(255,255,255,.75); --sk-line:#d7cfc4;
  --sk-acc1:#ece4f8; --sk-acc2:#f8e5ec; --sk-acc3:#e2eef9; --sk-dur:1.5s;
}
[data-skel-speed="slow"]{ --sk-dur:2.4s; } [data-skel-speed="fast"]{ --sk-dur:.95s; }
[data-skel-scope="admin"]{ --sk-base:#e8edf1; --sk-line:#d3dbe2; --sk-acc1:#e3eefb; --sk-acc2:#e6f6f2; --sk-acc3:#efe8fb; }
html[data-skel-scope="admin"][data-theme-mode="dark"], html[data-theme-mode="dark"] [data-skel-scope="admin"]{ --sk-base:#2a3442; --sk-hi:rgba(255,255,255,.10); --sk-line:#3b4757; --sk-acc1:#2f3a52; --sk-acc2:#3a2f45; --sk-acc3:#28414a; }

/* generic placeholder pieces (drawer skeleton, previews) */
.skx{ display:block; background:var(--sk-base); border-radius:8px; }
.skx-line{ height:10px; border-radius:6px; margin:9px 0; }
.skx-line.w40{ width:40%; } .skx-line.w55{ width:55%; } .skx-line.w70{ width:70%; } .skx-line.w85{ width:85%; }
.skx-dot{ width:36px; height:36px; border-radius:50%; flex:none; }
.skx-blk{ height:84px; border-radius:10px; margin:10px 0; }
.skx-row{ display:flex; gap:10px; align-items:center; margin:10px 0; } .skx-row .skx-col{ flex:1; min-width:0; }
.skx-drawer{ padding:22px 24px; max-width:760px; }
.skx-drawer .skx-head{ height:20px; width:45%; border-radius:7px; margin-bottom:18px; }
.skx-drawer .skx-field{ height:38px; border-radius:9px; margin:8px 0 16px; }
.skx-drawer .skx-g2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.skx-drawer .skx-btn{ height:38px; width:130px; border-radius:9px; margin-top:8px; }

/* one list of every placeholder the site draws */
[data-skel] :is(.skx, .lz-skel, .lz-skel-line, .product-card-skeleton .skeleton-img, .product-card-skeleton .skeleton-line, img.lz-loading, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel){
  background-color:var(--sk-base); background-image:none; animation:none; box-shadow:none;
}
[data-skel] .lz-skel::after{ display:none; }
[data-skel] .product-card-skeleton{ animation:none; background:transparent; }
[data-skel] .product-img-wrap{ background:var(--sk-base); }

/* ---- 1. Shimmer: gradient sweep left → right ---- */
[data-skel="shimmer"] :is(.skx, .lz-skel, .lz-skel-line, .product-card-skeleton .skeleton-img, .product-card-skeleton .skeleton-line, img.lz-loading, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel){
  background-image:linear-gradient(90deg, transparent 0, var(--sk-hi) 45%, transparent 90%); background-size:220% 100%; background-repeat:no-repeat;
  animation:skShimmer var(--sk-dur) linear infinite;
}
@keyframes skShimmer{ 0%{ background-position:170% 0; } 100%{ background-position:-70% 0; } }

/* ---- 2. Gradient: multi-colour gradient shift ---- */
[data-skel="gradient"] :is(.skx, .lz-skel, .lz-skel-line, .product-card-skeleton .skeleton-img, .product-card-skeleton .skeleton-line, img.lz-loading, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel){
  background-image:linear-gradient(115deg, var(--sk-acc1), var(--sk-acc2), var(--sk-acc3), var(--sk-acc1)); background-size:300% 300%;
  animation:skGrad calc(var(--sk-dur) * 2.2) ease-in-out infinite;
}
@keyframes skGrad{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }

/* ---- 3. Staggered: sequential reveal top → down ---- */
[data-skel="staggered"] :is(.skx, .lz-skel, .lz-skel-line, .product-card-skeleton .skeleton-img, .product-card-skeleton .skeleton-line, img.lz-loading, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel){
  animation:skStag calc(var(--sk-dur) * 1.4) ease-in-out infinite both;
}
@keyframes skStag{ 0%{ opacity:.2; transform:translateY(5px); } 30%,72%{ opacity:1; transform:none; } 100%{ opacity:.2; transform:none; } }

/* ---- 4. Typewriter: character-by-character fill ---- */
[data-skel="typewriter"] :is(.skx, .lz-skel, .lz-skel-line, .product-card-skeleton .skeleton-img, .product-card-skeleton .skeleton-line, img.lz-loading, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel){
  animation:skType calc(var(--sk-dur) * 1.7) steps(16, end) infinite;
}
@keyframes skType{ 0%{ clip-path:inset(0 100% 0 0); } 72%,100%{ clip-path:inset(0 0 0 0); } }

/* ---- 5. Layered: depth layers fade in ---- */
[data-skel="layered"] :is(.skx, .lz-skel, .lz-skel-line, .product-card-skeleton .skeleton-img, .product-card-skeleton .skeleton-line, img.lz-loading, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel){
  box-shadow:0 1px 0 rgba(0,0,0,.035), 0 4px 10px -6px rgba(0,0,0,.12);
  animation:skLayer calc(var(--sk-dur) * 1.6) cubic-bezier(.4,0,.2,1) infinite both;
}
@keyframes skLayer{ 0%{ opacity:0; transform:translateY(8px) scale(.97); } 35%,78%{ opacity:1; transform:none; } 100%{ opacity:0; transform:translateY(-2px); } }

/* ---- 6. Elastic: spring-in bounce reveal ---- */
[data-skel="elastic"] :is(.skx, .lz-skel, .lz-skel-line, .product-card-skeleton .skeleton-img, .product-card-skeleton .skeleton-line, img.lz-loading, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel){
  transform-origin:left center; animation:skElastic calc(var(--sk-dur) * 1.4) cubic-bezier(.34,1.56,.64,1) infinite both;
}
@keyframes skElastic{ 0%{ transform:scale(.6, .85); opacity:.35; } 38%{ transform:scale(1.04, 1.02); opacity:1; } 52%{ transform:scale(.985, 1); } 64%,100%{ transform:none; opacity:1; } }

/* ---- 7. Pulse: opacity fade in / out ---- */
[data-skel="pulse"] :is(.skx, .lz-skel, .lz-skel-line, .product-card-skeleton .skeleton-img, .product-card-skeleton .skeleton-line, img.lz-loading, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel){
  animation:skPulse var(--sk-dur) ease-in-out infinite;
}
@keyframes skPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.38; } }

/* ---- 8. Cascade: per-element highlight wave ---- */
[data-skel="cascade"] :is(.skx, .lz-skel, .lz-skel-line, .product-card-skeleton .skeleton-img, .product-card-skeleton .skeleton-line, img.lz-loading, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel){
  animation:skCasc calc(var(--sk-dur) * 1.3) ease-in-out infinite both;
}
@keyframes skCasc{ 0%,55%,100%{ background-color:var(--sk-base); } 25%{ background-color:var(--sk-acc1); filter:brightness(1.02); } }

/* ---- 9. Outline: wireframe → fill reveal ---- */
[data-skel="outline"] :is(.skx, .lz-skel, .lz-skel-line, .product-card-skeleton .skeleton-img, .product-card-skeleton .skeleton-line, img.lz-loading, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel){
  background-color:transparent; box-shadow:inset 0 0 0 1.5px var(--sk-line);
  animation:skOutline calc(var(--sk-dur) * 1.7) ease-in-out infinite both;
}
@keyframes skOutline{ 0%{ background-color:transparent; } 45%,80%{ background-color:var(--sk-base); box-shadow:inset 0 0 0 1.5px transparent; } 100%{ background-color:transparent; } }

/* sequence: siblings start one after another (staggered, layered, elastic, cascade) */
:is([data-skel="staggered"], [data-skel="layered"], [data-skel="elastic"], [data-skel="cascade"], [data-skel="typewriter"]) :is(.skx, .lz-skel, .lz-skel-line, .skeleton-line, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel):nth-child(2){ animation-delay:.12s; }
:is([data-skel="staggered"], [data-skel="layered"], [data-skel="elastic"], [data-skel="cascade"], [data-skel="typewriter"]) :is(.skx, .lz-skel, .lz-skel-line, .skeleton-line, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel):nth-child(3){ animation-delay:.24s; }
:is([data-skel="staggered"], [data-skel="layered"], [data-skel="elastic"], [data-skel="cascade"], [data-skel="typewriter"]) :is(.skx, .lz-skel, .lz-skel-line, .skeleton-line, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel):nth-child(4){ animation-delay:.36s; }
:is([data-skel="staggered"], [data-skel="layered"], [data-skel="elastic"], [data-skel="cascade"], [data-skel="typewriter"]) :is(.skx, .lz-skel, .lz-skel-line, .skeleton-line, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel):nth-child(5){ animation-delay:.48s; }
:is([data-skel="staggered"], [data-skel="layered"], [data-skel="elastic"], [data-skel="cascade"], [data-skel="typewriter"]) :is(.skx, .lz-skel, .lz-skel-line, .skeleton-line, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel):nth-child(6){ animation-delay:.6s; }
:is([data-skel="staggered"], [data-skel="layered"], [data-skel="elastic"], [data-skel="cascade"], [data-skel="typewriter"]) :is(.skx, .lz-skel, .lz-skel-line, .skeleton-line, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel):nth-child(n+7){ animation-delay:.72s; }
/* whole rows / cards in a list or grid follow the same wave */
:is([data-skel="staggered"], [data-skel="layered"], [data-skel="cascade"]) :is(.skx-row, .product-card-skeleton):nth-child(2) :is(.skx, .skeleton-img, .skeleton-line){ animation-delay:.18s; }
:is([data-skel="staggered"], [data-skel="layered"], [data-skel="cascade"]) :is(.skx-row, .product-card-skeleton):nth-child(3) :is(.skx, .skeleton-img, .skeleton-line){ animation-delay:.36s; }
:is([data-skel="staggered"], [data-skel="layered"], [data-skel="cascade"]) :is(.skx-row, .product-card-skeleton):nth-child(4) :is(.skx, .skeleton-img, .skeleton-line){ animation-delay:.54s; }
:is([data-skel="staggered"], [data-skel="layered"], [data-skel="cascade"]) :is(.skx-row, .product-card-skeleton):nth-child(n+5) :is(.skx, .skeleton-img, .skeleton-line){ animation-delay:.72s; }

@media (prefers-reduced-motion: reduce){
  [data-skel] :is(.skx, .lz-skel, .lz-skel-line, .product-card-skeleton .skeleton-img, .product-card-skeleton .skeleton-line, img.lz-loading, .om-skel, .ibs-skel, .mi-skel, .tsc-skel, .pos-skel-bar, .acct-skel){
    animation:none !important; clip-path:none !important; transform:none !important; opacity:1 !important;
  }
}

/* storefront dark schemes (Studio themes) */
html[data-skel-scope="shop"][data-scheme="dark"], html[data-skel-scope="shop"] body.te-dark{ --sk-base:#2a2f36; --sk-hi:rgba(255,255,255,.10); --sk-line:#3c434d; --sk-acc1:#30364a; --sk-acc2:#3a3040; --sk-acc3:#283d44; }