/* ========== AB Loaders — STOREFRONT copy: top-bar animations (1-10) only ==========
   Extracted from admin/assets/loaders.css so customer pages never download the
   full 62-animation admin stylesheet (43KB → 5KB). Keep the bar sections (1-10)
   in sync with the admin file; the storefront loads the full admin file only
   when an overlay animation (11+) is selected in Themes → gear.                 */

/* The bar itself — width = live progress (driven by ab-progress.js) */
.topbar {
   position: fixed;
   top: 0;
   left: 0;
   height: 3px;
   width: 0;
   z-index: 9999;
   opacity: 0;
   border-radius: 0 3px 3px 0;
   transition: width .2s ease, opacity .25s ease;
}

/* Color tokens: the default palette, swapped to the admin accent when
   data-accent="theme" is set (Settings -> Customize UI -> Colors). */
.topbar,
.abloader {
   --abl-g1: #2bd39a;
   --abl-g2: #0b6e4f;
   --abl-g3: #16a075;
   --abl-b1: #2563eb;
   --abl-b2: #22d3ee;
   --abl-b3: #38bdf8;
   --abl-b4: #7cc4ff;
}

.topbar[data-accent="theme"],
.abloader[data-accent="theme"] {
   --abl-g1: var(--accent);
   --abl-g2: var(--accent);
   --abl-g3: var(--accent);
   --abl-b1: var(--accent);
   --abl-b2: var(--accent);
   --abl-b3: var(--accent);
   --abl-b4: var(--accent);
}

/* Backdrop option for full-screen loaders: data-bg="blur" swaps the colored
   splash for a frosted glass over the page. */
.abloader.fs[data-bg="blur"] {
   background: rgba(15, 19, 24, .38);
   backdrop-filter: blur(9px);
}

/* ---------------- Top-bar styles (1-10) ---------------- */
/* 1 - Neon sky (default) */
.topbar[data-anim="1"],
.topbar:not([data-anim]) {
   background: linear-gradient(90deg, var(--abl-b1), var(--abl-b2) 60%, var(--abl-b3));
   box-shadow: 0 0 10px rgba(34, 211, 238, .8), 0 0 4px rgba(37, 99, 235, .6);
}

/* 2 - Brand green */
.topbar[data-anim="2"] {
   background: linear-gradient(90deg, var(--abl-g2), var(--abl-g1));
   box-shadow: 0 0 10px rgba(43, 211, 154, .75);
}

/* 3 - Barber pole: diagonal stripes marching forward */
.topbar[data-anim="3"] {
   height: 4px;
   background: repeating-linear-gradient(115deg, var(--abl-g2) 0 10px, var(--abl-g1) 10px 20px);
   background-size: 28px 100%;
   animation: abLoadStripes .5s linear infinite;
   box-shadow: 0 0 8px rgba(43, 211, 154, .5);
}

@keyframes abLoadStripes {
   to { background-position: 28px 0; }
}

/* 4 - Shimmer sweep: a sheen passes along the filled part */
.topbar[data-anim="4"] {
   background: var(--abl-g3);
   overflow: hidden;
}

.topbar[data-anim="4"]::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .85) 50%, transparent 80%);
   animation: abLoadShimmer 1.1s ease-in-out infinite;
}

@keyframes abLoadShimmer {
   from { transform: translateX(-100%); }
   to { transform: translateX(100%); }
}

/* 5 - Rainbow flow: hues slide through the filled part */
.topbar[data-anim="5"] {
   background: linear-gradient(90deg, #ff5d5d, #ffb03a, #ffe83a, #4ade80, var(--abl-b3), #a78bfa, #ff5d5d);
   background-size: 220% 100%;
   animation: abLoadRainbow 1.6s linear infinite;
   box-shadow: 0 1px 8px rgba(0, 0, 0, .18);
}

@keyframes abLoadRainbow {
   to { background-position: -220% 0; }
}

/* 6 - Comet head: bright glowing tip on the leading edge */
.topbar[data-anim="6"] {
   background: linear-gradient(90deg, rgba(37, 99, 235, .25), var(--abl-b1) 85%);
}

.topbar[data-anim="6"]::after {
   content: '';
   position: absolute;
   right: -2px;
   top: 50%;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   transform: translateY(-50%);
   background: var(--abl-b4);
   box-shadow: 0 0 12px 3px rgba(56, 189, 248, .95);
   animation: abLoadComet .9s ease-in-out infinite alternate;
}

@keyframes abLoadComet {
   from { box-shadow: 0 0 8px 2px rgba(56, 189, 248, .8); }
   to { box-shadow: 0 0 16px 5px rgba(56, 189, 248, 1); }
}

/* 7 - Electric pulse: the filled bar breathes */
.topbar[data-anim="7"] {
   height: 4px;
   background: linear-gradient(90deg, #7c3aed, #c084fc);
   animation: abLoadPulse 1s ease-in-out infinite;
}

@keyframes abLoadPulse {
   0%, 100% { box-shadow: 0 0 6px rgba(168, 85, 247, .55); filter: brightness(1); }
   50% { box-shadow: 0 0 16px rgba(168, 85, 247, .95); filter: brightness(1.35); }
}

/* 8 - Segmented ticks: progress fills as little blocks */
.topbar[data-anim="8"] {
   height: 5px;
   background: repeating-linear-gradient(90deg, var(--abl-g3) 0 14px, transparent 14px 18px);
   border-radius: 0;
}

/* 9 - Gold luxe */
.topbar[data-anim="9"] {
   background: linear-gradient(90deg, #b8860b, #ffd700, #f5c542);
   background-size: 180% 100%;
   animation: abLoadGold 1.4s ease-in-out infinite alternate;
   box-shadow: 0 0 10px rgba(255, 215, 0, .65);
}

@keyframes abLoadGold {
   to { background-position: 100% 0; }
}

/* 10 - Aurora drift: soft northern-lights colors flowing */
.topbar[data-anim="10"] {
   height: 4px;
   background: linear-gradient(90deg, #34d399, var(--abl-b2), #818cf8, #34d399);
   background-size: 300% 100%;
   animation: abLoadAurora 2.4s linear infinite;
   box-shadow: 0 0 12px rgba(94, 234, 212, .55);
   filter: saturate(1.2);
}

@keyframes abLoadAurora {
   to { background-position: -300% 0; }
}

/* Overlay loaders (11-62) live in /admin/assets/loaders.css — the storefront
   only pulls that file when an overlay animation is actually selected.
   This guard keeps the (unstyled) overlay markup invisible either way. */
.abloader { display: none; }