
/* ===== GrowCart Ecom "Orbit" loader =====
   Copy the .gc-loader HTML + this CSS + the script into your site.
   Light theme is the default. Dark theme: add class "gc-dark" to <body>.  Transparent: add "gc-transparent" (cards + logo only).
   Hide when ready: GrowCartLoader.hide() (1.8s minimum). Uncomment the load line in the script to auto-hide. */
.gc-loader { --bg1:#f4f8ff; --bg2:#e3edff; --tx:rgba(15,39,66,.6); --track:rgba(15,39,66,.1); --ring:rgba(47,147,230,.34); --blob1:#a9d0ff; --blob2:#E7F0FE; --blob3:#bdeeff; --dot:#4aa3ff; --sh:rgba(30,80,150,.34); --glow:rgba(80,160,255,.38); }
body.gc-dark .gc-loader { --bg1:#040a1c; --bg2:#0a1a3d; --tx:rgba(214,230,255,.7); --track:rgba(255,255,255,.12); --ring:rgba(120,190,255,.28); --blob1:#1d5fe0; --blob2:#0077FC; --blob3:#08b6e8; --dot:#fff; --sh:rgba(0,10,40,.55); --glow:rgba(80,160,255,.5); }
.gc-loader, .gc-loader * { box-sizing:border-box; margin:0; }

.gc-loader { background:radial-gradient(ellipse at 50% 35%,var(--bg2),var(--bg1) 70%); font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif; }
body.gc-transparent .gc-loader { background:transparent; }

.gc-loader { position:fixed; inset:0; display:grid; place-items:center; overflow:hidden; perspective:1400px; transition:opacity .25s ease, visibility .25s, transform .25s; }
.gc-loader.is-hidden { opacity:0; visibility:hidden; transform:scale(1.06); }

.gc-bg { position:absolute; inset:0; pointer-events:none; }
.gc-bg b { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; animation:gc-aurora 18s ease-in-out infinite; }
.gc-bg b:nth-child(1) { width:44vmax; height:44vmax; background:var(--blob1); left:-12vmax; top:-16vmax; }
.gc-bg b:nth-child(2) { width:38vmax; height:38vmax; background:var(--blob2); right:-12vmax; bottom:-16vmax; animation-delay:-9s; }
.gc-bg b:nth-child(3) { width:26vmax; height:26vmax; background:var(--blob3); left:38%; top:46%; opacity:.28; animation-delay:-5s; }
.gc-bg::before { content:""; position:absolute; left:50%; top:0; width:70vmax; height:70vmax; translate:-50% -40%; background:conic-gradient(from 160deg at 50% 40%,transparent 0 25deg,rgba(120,190,255,.16) 40deg,transparent 60deg 360deg); filter:blur(18px); }
.gc-bg i { position:absolute; width:var(--sz); height:var(--sz); border-radius:50%; background:var(--dot); box-shadow:0 0 .8em .1em rgba(90,165,255,.55); opacity:0; animation:gc-twinkle var(--pd) ease-in-out var(--pl) infinite; font-size:14px; }
body.gc-transparent .gc-bg { display:none; }

.gc-stage { --gc-tilt-x:0deg; --gc-tilt-y:0deg; font-size:max(min(calc(92vw / 44), 15px), 6.4px); position:relative; width:44em; height:33em; flex:none;
  transform:rotateX(var(--gc-tilt-x)) rotateY(var(--gc-tilt-y)); transition:transform .9s cubic-bezier(.2,.8,.2,1); }

.gc-tracks { position:absolute; inset:0; width:100%; height:100%; overflow:visible; opacity:0; animation:gc-fade 1.6s ease .3s forwards; }
.gc-tracks ellipse { fill:none; stroke:var(--ring); stroke-width:.07em; }
.gc-tracks ellipse:first-child { stroke-dasharray:.35em .7em; animation:gc-flow 30s linear infinite; }
.gc-floor { position:absolute; left:22em; top:27.5em; width:34em; height:6em; translate:-50% 0; border-radius:50%; background:radial-gradient(closest-side,rgba(70,150,255,.3),transparent); filter:blur(.8em); opacity:0; animation:gc-fade 1.6s ease .5s forwards; }
body.gc-dark .gc-floor { background:radial-gradient(closest-side,rgba(70,150,255,.5),transparent); }

/* center plate with a travelling light rim */
.gc-core { position:absolute; left:22em; top:14.5em; z-index:5; width:16.8em; translate:-50% -50%; opacity:0; animation:gc-core-in 1.2s cubic-bezier(.2,.9,.2,1) .2s forwards; }
.gc-core .glow, .gc-core .rim { position:absolute; overflow:hidden; border-radius:2em; }
.gc-core .glow { inset:-.5em; border-radius:2.4em; filter:blur(1.3em); opacity:.7; animation:gc-glow 4.5s ease-in-out infinite; }
.gc-core .rim { inset:0; }
.gc-core .glow::before, .gc-core .rim::before { content:""; position:absolute; left:50%; top:50%; width:220%; aspect-ratio:1; translate:-50% -50%;
  background:conic-gradient(from 0deg,transparent 0 40%,#2f93e6 55%,#7cf0ff 68%,#0077FC 80%,transparent 92%); animation:gc-spin 5.5s linear infinite; }
.gc-core .plate { position:relative; margin:.14em; padding:.95em 1.2em; border-radius:1.9em; line-height:0;
  background:linear-gradient(160deg,#fff,#eef5ff); box-shadow:inset 0 -.8em 1.4em -.8em rgba(90,150,255,.35), inset 0 1px 0 #fff; }
.gc-core img { width:100%; display:block; user-select:none; animation:gc-breathe 4.8s ease-in-out infinite; }

/* orbiting glass badges (positioned by the script) */
.gc-item { position:absolute; left:0; top:0; opacity:0; will-change:transform,opacity,filter; }
.gc-card { position:relative; overflow:hidden; padding:.95em 1.25em; border-radius:1.3em; line-height:0;
  background:linear-gradient(145deg,#fff,rgba(246,250,255,.9));
  box-shadow:0 0 2.4em -.4em var(--glow), 0 1.4em 2.2em -1em var(--sh), inset 0 1px 0 #fff, inset 0 -.5em .9em -.5em rgba(120,170,255,.3); }
.gc-card::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(145deg,#fff,rgba(255,255,255,.2) 45%,rgba(110,175,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.gc-card::after { content:""; position:absolute; top:-30%; bottom:-30%; left:-60%; width:45%; transform:skewX(-20deg); pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(120,190,255,.45),transparent); animation:gc-sheen 6s ease-in-out var(--sd) infinite; }
.gc-card img { position:relative; display:block; user-select:none; pointer-events:none; }

.gc-meter { position:absolute; left:22em; top:30.4em; translate:-50% 0; width:10em; text-align:center; opacity:0; animation:gc-fade .8s ease 1.3s forwards; }
.gc-bar { height:.24em; border-radius:1em; background:var(--track); overflow:hidden; }
.gc-bar::after { content:""; display:block; height:100%; width:38%; border-radius:1em; background:linear-gradient(90deg,transparent,#2f93e6,#7cf0ff,transparent); animation:gc-run 1.7s cubic-bezier(.5,0,.3,1) infinite; }
.gc-meter span { display:block; margin-top:.85em; font-size:.95em; letter-spacing:.02em; color:var(--tx); }

@keyframes gc-core-in { from { opacity:0; transform:scale(.8); filter:blur(8px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes gc-spin { to { transform:rotate(360deg); } }
@keyframes gc-glow { 0%,100% { opacity:.5; } 50% { opacity:.85; } }
@keyframes gc-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.03); } }
@keyframes gc-sheen { 0%,60% { left:-60%; } 88%,100% { left:130%; } }
@keyframes gc-fade { to { opacity:1; } }
@keyframes gc-flow { to { stroke-dashoffset:-28; } }
@keyframes gc-run { from { transform:translateX(-110%); } to { transform:translateX(280%); } }
@keyframes gc-aurora { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(5vmax,3vmax) scale(1.12); } }
@keyframes gc-twinkle { 0%,100% { opacity:0; transform:scale(.6); } 50% { opacity:.9; transform:scale(1.1); } }
@media (prefers-reduced-motion:reduce) {
  .gc-bg b,.gc-bg i,.gc-card::after,.gc-core .glow,.gc-core .glow::before,.gc-core .rim::before,.gc-core img,.gc-tracks ellipse { animation:none !important; }
  .gc-core,.gc-meter,.gc-tracks,.gc-floor { animation:gc-fade .6s ease forwards !important; }
}

/* Integration scoped to the overlay only. Do not modify the site body. */
.gc-loader { z-index:2147483000; isolation:isolate; pointer-events:none; }
.gc-loader.is-hidden { pointer-events:none; }
.gc-loader img { max-width:none; height:auto; border:0; }
@media (prefers-reduced-motion:reduce) { .gc-loader .gc-item { filter:none !important; } }
