/* Shared loading screen. Theme classes are intentionally data-driven so admin previews match the storefront. */
.site-loading-screen { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; overflow: hidden; background: var(--background); color: var(--font); opacity: 1; visibility: visible; transition: opacity .42s ease, visibility .42s ease; }
.site-loading-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.site-loading-glow { position: absolute; inset: -20%; pointer-events: none; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--main) 16%, transparent), transparent 26%), radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--sub) 9%, transparent), transparent 32%); filter: blur(4px); }
.site-loading-content { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; min-width: 230px; text-align: center; }
.site-loading-brand { max-width: min(80vw, 360px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 700; letter-spacing: .03em; }
.site-loading-message { color: var(--muted); font-size: 11px; }
.site-loading-progress { display: block; width: 118px; height: 3px; overflow: hidden; margin-top: 3px; border-radius: 99px; background: color-mix(in srgb, var(--font) 11%, transparent); }
.site-loading-progress i { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--main); box-shadow: 0 0 16px color-mix(in srgb, var(--main) 65%, transparent); animation: loading-progress 2.2s ease-in-out infinite; }
.loading-art { position: relative; display: grid; place-items: center; width: 92px; height: 92px; color: var(--main); }
@keyframes loading-progress { 0% { transform: translateX(-120%); } 100% { transform: translateX(300%); } }
@keyframes loading-orbit-tilt { 0%,100% { transform: rotate(-25deg) skewX(-18deg) scale(.95); } 50% { transform: rotate(25deg) skewX(-18deg) scale(1.04); } }
.loading-art--custom { width: clamp(96px, 18vw, 154px); height: clamp(96px, 18vw, 154px); }
.loading-custom-image-frame { display: grid; place-items: center; width: 100%; height: 100%; }
.loading-custom-image-frame img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 18px; filter: drop-shadow(0 14px 24px color-mix(in srgb, var(--main) 22%, transparent)); }
.loading-art--empty span { width: 18px; height: 18px; border-radius: 50%; background: var(--main); box-shadow: 0 0 0 9px color-mix(in srgb, var(--main) 12%, transparent); opacity: .65; }
.loading-animation-none .loading-custom-image-frame { animation: none; }
.loading-animation-breathe .loading-custom-image-frame { animation: loading-custom-breathe 2.8s ease-in-out infinite; }
.loading-animation-float .loading-custom-image-frame { animation: loading-custom-float 2.8s ease-in-out infinite; }
.loading-animation-spin .loading-custom-image-frame { animation: loading-custom-spin 5.5s linear infinite; }
.loading-animation-pulse .loading-custom-image-frame { animation: loading-custom-pulse 1.8s ease-in-out infinite; }
.loading-animation-slide .loading-custom-image-frame { animation: loading-custom-slide 2.8s ease-in-out infinite; }
@keyframes loading-custom-breathe { 0%,100% { transform: scale(.92); opacity: .82; } 50% { transform: scale(1); opacity: 1; } }
@keyframes loading-custom-float { 0%,100% { transform: translate3d(0, 6px, 0) rotate(-2deg); } 50% { transform: translate3d(0, -8px, 0) rotate(2deg); } }
@keyframes loading-custom-spin { to { transform: rotate(360deg); } }
@keyframes loading-custom-pulse { 0%,100% { transform: scale(.84); opacity: .6; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes loading-custom-slide { 0%,100% { transform: translate3d(-12px, 0, 0); opacity: .55; } 50% { transform: translate3d(12px, 0, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .site-loading-progress i { animation: none; width: 100%; } .loading-art * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }