soliq-design-system 1.0.2

package/dist/SoliqLoader/SoliqLoader.styles.js

@@ -0,0 +1,347 @@
+export const styles = `
+.soliq-loader {
+  --bg: #F8FAFC;
+  --primary: #0B4F8A;
+  --gold: #D8C1AA;
+  --ring: rgba(11, 79, 138, 0.22);
+  --text: #0B4F8A;
+  --sub: rgba(11, 79, 138, 0.45);
+  --divider: rgba(11, 79, 138, 0.12);
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 420px;
+  width: 100%;
+  overflow: hidden;
+  background: var(--bg);
+  transition: background 0.4s;
+  font-family: Outfit, Inter, system-ui, sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: opacity var(--loader-fade-duration, 380ms) ease, visibility 0s linear 0s;
+}
+
+.soliq-loader--fullscreen {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  min-height: 100vh;
+  z-index: 9999;
+  border: none;
+  border-radius: 0;
+}
+
+.soliq-loader--hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity var(--loader-fade-duration, 380ms) ease, visibility 0s linear var(--loader-fade-duration, 380ms);
+}
+
+.soliq-loader[data-mode="dark"] {
+  --bg: #020F25;
+  --primary: #5B7FBF;
+  --gold: #D8C1AA;
+  --ring: rgba(216, 193, 170, 0.25);
+  --text: #CBD5E1;
+  --sub: rgba(203, 213, 225, 0.45);
+  --divider: rgba(216, 193, 170, 0.18);
+}
+
+@media (prefers-color-scheme: dark) {
+  .soliq-loader[data-mode="auto"] {
+    --bg: #020F25;
+    --primary: #5B7FBF;
+    --gold: #D8C1AA;
+    --ring: rgba(216, 193, 170, 0.25);
+    --text: #CBD5E1;
+    --sub: rgba(203, 213, 225, 0.45);
+    --divider: rgba(216, 193, 170, 0.18);
+  }
+}
+
+.soliq-loader__glow {
+  position: absolute;
+  width: 460px;
+  height: 460px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(11, 79, 138, 0.12) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.soliq-loader[data-mode="dark"] .soliq-loader__glow {
+  background: radial-gradient(circle, rgba(11, 79, 138, 0.16) 0%, transparent 70%);
+}
+
+@media (prefers-color-scheme: dark) {
+  .soliq-loader[data-mode="auto"] .soliq-loader__glow {
+    background: radial-gradient(circle, rgba(11, 79, 138, 0.16) 0%, transparent 70%);
+  }
+}
+
+.soliq-loader__pulse-wrap {
+  position: absolute;
+  width: 180px;
+  height: 180px;
+  top: 50%;
+  left: 50%;
+  margin-top: -90px;
+  margin-left: -90px;
+  pointer-events: none;
+}
+
+.soliq-loader__pulse {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 1px solid var(--ring);
+  animation: pulse 2.8s ease-out infinite;
+  opacity: 0;
+}
+
+.soliq-loader__pulse--1 { animation-delay: 0.8s; }
+.soliq-loader__pulse--2 { animation-delay: 1.6s; }
+.soliq-loader__pulse--3 { animation-delay: 2.4s; }
+
+.soliq-loader__rings {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  animation: fade-in 0.8s 0.4s both;
+}
+
+.soliq-loader__ring-inner {
+  animation: spin-ccw 18s linear infinite;
+  transform-origin: 98px 98px;
+}
+
+.soliq-loader__ring-outer {
+  animation: spin-cw 28s linear infinite;
+  transform-origin: 98px 98px;
+}
+
+.soliq-loader__card {
+  position: relative;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: card-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;
+}
+
+.soliq-loader__logo-wrap {
+  width: 96px;
+  height: 84px;
+  position: relative;
+  overflow: hidden;
+  animation: logo-scale 0.7s 0.15s cubic-bezier(0.25, 0.1, 0.25, 1) both;
+}
+
+.soliq-loader__mark {
+  width: 96px;
+  height: 84px;
+  display: block;
+}
+
+.soliq-loader__logo-clip {
+  animation: reveal-down 1.1s 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+.soliq-loader__divider {
+  width: 1px;
+  height: 20px;
+  background: var(--divider);
+  margin: 15px 0;
+  animation: divider-in 0.5s 1.4s both;
+  transform-origin: top;
+}
+
+.soliq-loader__title {
+  margin: 0 0 5px;
+  color: var(--text);
+  font-family: Outfit, sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  animation: text-in 0.6s 1.5s ease-out both;
+}
+
+.soliq-loader__subtitle {
+  color: var(--sub);
+  font-family: Inter, sans-serif;
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-top: 6px;
+  animation: text-in 0.6s 1.85s ease-out both;
+}
+
+.soliq-loader__dots {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-top: 24px;
+}
+
+.soliq-loader__dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--ring);
+  animation: dot-pulse 1.4s ease-in-out infinite both;
+}
+
+.soliq-loader__dot:nth-child(1) { animation-delay: 2s; }
+.soliq-loader__dot:nth-child(2) { animation-delay: 2.18s; }
+.soliq-loader__dot:nth-child(3) { animation-delay: 2.36s; }
+
+.soliq-loader__progress-track {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.soliq-loader[data-mode="dark"] .soliq-loader__progress-track {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+@media (prefers-color-scheme: dark) {
+  .soliq-loader[data-mode="auto"] .soliq-loader__progress-track {
+    background: rgba(255, 255, 255, 0.04);
+  }
+}
+
+.soliq-loader__progress-fill {
+  height: 100%;
+  width: 0;
+  background: linear-gradient(90deg, transparent, var(--gold), var(--primary));
+  animation: progress-fill 3.5s 0.1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+}
+
+@keyframes card-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes logo-scale {
+  from {
+    opacity: 0;
+    transform: scale(0.88);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes reveal-down {
+  from { clip-path: inset(0 0 100% 0); }
+  to { clip-path: inset(0 0 0 0); }
+}
+
+@keyframes divider-in {
+  from {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes text-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes dot-pulse {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(0.7);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.6);
+    opacity: 0.85;
+  }
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes spin-cw {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes spin-ccw {
+  to { transform: rotate(-360deg); }
+}
+
+@keyframes progress-fill {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .soliq-loader__pulse,
+  .soliq-loader__ring-inner,
+  .soliq-loader__ring-outer,
+  .soliq-loader__card,
+  .soliq-loader__logo-wrap,
+  .soliq-loader__logo-clip,
+  .soliq-loader__divider,
+  .soliq-loader__title,
+  .soliq-loader__subtitle,
+  .soliq-loader__dot,
+  .soliq-loader__progress-fill {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .soliq-loader__logo-clip,
+  .soliq-loader__title,
+  .soliq-loader__subtitle,
+  .soliq-loader__divider,
+  .soliq-loader__card,
+  .soliq-loader__logo-wrap {
+    opacity: 1;
+  }
+}
+`;

package/dist/SoliqLoader/index.d.ts

@@ -0,0 +1 @@
+export * from "./SoliqLoader";

package/dist/SoliqLoader/index.js

@@ -0,0 +1 @@
+export * from "./SoliqLoader";

package/dist/SoliqLoader.d.ts

@@ -0,0 +1 @@
+export * from "./SoliqLoader/index";

package/dist/SoliqLoader.js

@@ -0,0 +1 @@
+export * from "./SoliqLoader/index";

package/dist/ThemeToggleTransition/ThemeToggleTransition.d.ts

@@ -0,0 +1,9 @@
+type ThemeMode = "light" | "dark";
+type InitialTheme = ThemeMode | "auto";
+export interface ThemeToggleTransitionProps {
+    initialTheme?: InitialTheme;
+    className?: string;
+    onThemeChange?: (theme: ThemeMode) => void;
+}
+export declare function ThemeToggleTransition({ initialTheme, className, onThemeChange }: ThemeToggleTransitionProps): import("react").JSX.Element;
+export {};

package/dist/ThemeToggleTransition/ThemeToggleTransition.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import moonIconUrl from "../assets/images/moon.svg";
+import sunIconUrl from "../assets/images/sun.svg";
+import { styles } from "./ThemeToggleTransition.styles";
+export function ThemeToggleTransition({ initialTheme = "auto", className, onThemeChange }) {
+    const reduceMotion = useMemo(() => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, []);
+    const [theme, setTheme] = useState("light");
+    const [targetTheme, setTargetTheme] = useState("light");
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const [isClosing, setIsClosing] = useState(false);
+    const timersRef = useRef([]);
+    const sparkleSeeds = useMemo(() => [
+        { x: "16%", y: "32%", delay: "110ms" },
+        { x: "24%", y: "68%", delay: "220ms" },
+        { x: "38%", y: "24%", delay: "320ms" },
+        { x: "50%", y: "78%", delay: "470ms" },
+        { x: "62%", y: "22%", delay: "560ms" },
+        { x: "74%", y: "66%", delay: "710ms" },
+        { x: "84%", y: "38%", delay: "840ms" }
+    ], []);
+    const userClass = className ? ` ${className}` : "";
+    useEffect(() => {
+        const root = document.documentElement;
+        const resolvedTheme = initialTheme === "auto"
+            ? window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+            : initialTheme;
+        setTheme(resolvedTheme);
+        setTargetTheme(resolvedTheme);
+        root.setAttribute("data-soliq-theme", resolvedTheme);
+    }, [initialTheme]);
+    useEffect(() => {
+        return () => {
+            timersRef.current.forEach((timerId) => window.clearTimeout(timerId));
+            timersRef.current = [];
+        };
+    }, []);
+    const applyTheme = (nextTheme) => {
+        document.documentElement.setAttribute("data-soliq-theme", nextTheme);
+    };
+    const clearTimers = () => {
+        timersRef.current.forEach((timerId) => window.clearTimeout(timerId));
+        timersRef.current = [];
+    };
+    const handleToggle = () => {
+        if (isTransitioning) {
+            return;
+        }
+        const nextTheme = theme === "dark" ? "light" : "dark";
+        if (reduceMotion) {
+            setTheme(nextTheme);
+            setTargetTheme(nextTheme);
+            applyTheme(nextTheme);
+            onThemeChange?.(nextTheme);
+            return;
+        }
+        clearTimers();
+        setTargetTheme(nextTheme);
+        setIsTransitioning(true);
+        setIsClosing(false);
+        timersRef.current.push(window.setTimeout(() => {
+            applyTheme(nextTheme);
+        }, 420));
+        timersRef.current.push(window.setTimeout(() => {
+            setIsClosing(true);
+        }, 1520));
+        timersRef.current.push(window.setTimeout(() => {
+            setTheme(nextTheme);
+            setIsTransitioning(false);
+            setIsClosing(false);
+            onThemeChange?.(nextTheme);
+        }, 1940));
+    };
+    const buttonTheme = isTransitioning ? targetTheme : theme;
+    const nextThemeLabel = theme === "dark" ? "Light" : "Dark";
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: styles }), _jsx("button", { className: `soliq-theme-toggle${userClass}`, "data-theme": buttonTheme, type: "button", onClick: handleToggle, "aria-label": `${nextThemeLabel} theme yoqish`, children: _jsx("span", { className: "soliq-theme-toggle__icon-wrap", "aria-hidden": "true", children: _jsx("img", { className: "soliq-theme-toggle__icon", src: buttonTheme === "dark" ? moonIconUrl : sunIconUrl, alt: "" }) }) }), isTransitioning && (_jsxs("div", { className: `soliq-theme-transition-overlay${isClosing ? " soliq-theme-transition-overlay--closing" : ""}`, "data-target": targetTheme, "aria-hidden": "true", children: [_jsx("div", { className: "soliq-theme-transition-overlay__veil" }), _jsx("div", { className: "soliq-theme-transition-overlay__wave soliq-theme-transition-overlay__wave--1" }), _jsx("div", { className: "soliq-theme-transition-overlay__wave soliq-theme-transition-overlay__wave--2" }), _jsx("div", { className: "soliq-theme-transition-overlay__wave soliq-theme-transition-overlay__wave--3" }), _jsx("div", { className: "soliq-theme-transition-overlay__flare" }), _jsxs("div", { className: "soliq-theme-transition-overlay__icon-shell", "data-target": targetTheme, children: [_jsx("span", { className: "soliq-theme-transition-overlay__orbit soliq-theme-transition-overlay__orbit--a" }), _jsx("span", { className: "soliq-theme-transition-overlay__orbit soliq-theme-transition-overlay__orbit--b" }), _jsx("img", { className: "soliq-theme-transition-overlay__icon", src: targetTheme === "dark" ? moonIconUrl : sunIconUrl, alt: "" })] }), _jsx("p", { className: "soliq-theme-transition-overlay__status", children: targetTheme === "dark" ? "NIGHT MODE" : "DAY MODE" }), _jsx("div", { className: "soliq-theme-transition-overlay__sparkles", children: sparkleSeeds.map((seed) => {
+                            const sparkleStyle = {
+                                "--spark-x": seed.x,
+                                "--spark-y": seed.y,
+                                "--spark-delay": seed.delay
+                            };
+                            return _jsx("span", { className: "soliq-theme-transition-overlay__sparkle", style: sparkleStyle }, `${seed.x}-${seed.y}`);
+                        }) })] }))] }));
+}

package/dist/ThemeToggleTransition/ThemeToggleTransition.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles = "\n:root {\n  --soliq-theme-bg: #f8fafc;\n  --soliq-theme-surface: #ffffff;\n  --soliq-theme-text: #0f172a;\n  --soliq-theme-subtle: #64748b;\n  --soliq-theme-accent: #d8c1aa;\n  --soliq-theme-glow: rgba(11, 79, 138, 0.24);\n  --soliq-theme-sunrise-1: #ffd7a1;\n  --soliq-theme-sunrise-2: #ffb36b;\n  --soliq-theme-sunrise-3: #ff8f7c;\n  --soliq-theme-sunrise-4: #ffdcb4;\n}\n\n:root[data-soliq-theme=\"dark\"] {\n  --soliq-theme-bg: #020f25;\n  --soliq-theme-surface: #0c1d38;\n  --soliq-theme-text: #d7e5f4;\n  --soliq-theme-subtle: #8ba3c3;\n  --soliq-theme-accent: #d8c1aa;\n  --soliq-theme-glow: rgba(94, 143, 205, 0.26);\n}\n\nbody {\n  background: var(--soliq-theme-bg);\n  color: var(--soliq-theme-text);\n  transition: background-color 900ms cubic-bezier(0.22, 1, 0.36, 1), color 900ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.soliq-theme-toggle {\n  position: relative;\n  z-index: 1;\n  display: inline-block;\n  width: 46px;\n  height: 25px;\n  border: 0;\n  border-radius: 999px;\n  padding: 0;\n  background: #d1d5db;\n  color: #ffffff;\n  cursor: pointer;\n  transition: background-color 260ms ease, transform 160ms ease;\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);\n}\n\n.soliq-theme-toggle[data-theme=\"light\"] {\n  background: #d1d5db;\n}\n\n.soliq-theme-toggle[data-theme=\"dark\"] {\n  background: #bfc4cc;\n}\n\n.soliq-theme-toggle:hover {\n  transform: translateY(-1px);\n}\n\n.soliq-theme-toggle:active {\n  transform: translateY(0);\n}\n\n.soliq-theme-toggle:focus-visible {\n  outline: 2px solid rgba(11, 79, 138, 0.38);\n  outline-offset: 2px;\n}\n\n.soliq-theme-toggle__icon-wrap {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 21px;\n  height: 21px;\n  border-radius: 999px;\n  display: grid;\n  place-items: center;\n  background: #fde68a;\n  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);\n  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), background-color 280ms ease;\n}\n\n.soliq-theme-toggle[data-theme=\"dark\"] .soliq-theme-toggle__icon-wrap {\n  transform: translateX(21px);\n  background: #f8fafc;\n}\n\n.soliq-theme-toggle[data-theme=\"light\"] .soliq-theme-toggle__icon-wrap {\n  transform: translateX(0);\n  background: #fde68a;\n}\n\n.soliq-theme-toggle__icon {\n  width: 12px;\n  height: 12px;\n  display: block;\n  object-fit: contain;\n}\n\n.soliq-theme-transition-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n  display: grid;\n  place-items: center;\n  pointer-events: none;\n  opacity: 0;\n  overflow: hidden;\n  animation: overlay-fade-in 340ms ease forwards;\n}\n\n.soliq-theme-transition-overlay[data-target=\"dark\"] {\n  background:\n    radial-gradient(circle at 50% 46%, rgba(11, 48, 96, 0.28), rgba(2, 15, 37, 0.93) 64%),\n    linear-gradient(145deg, rgba(3, 18, 41, 0.86), rgba(1, 7, 22, 0.96));\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] {\n  background:\n    radial-gradient(circle at 50% 45%, rgba(255, 194, 116, 0.4), rgba(255, 244, 224, 0.92) 58%),\n    linear-gradient(145deg, rgba(255, 249, 236, 0.98), rgba(255, 224, 191, 0.9) 56%, rgba(255, 200, 154, 0.84));\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__veil {\n  background: radial-gradient(circle at 50% 50%, rgba(255, 195, 118, 0.45), transparent 58%);\n}\n\n.soliq-theme-transition-overlay__veil {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.24), transparent 55%);\n  animation: veil-breath 1240ms ease-out 90ms both;\n}\n\n.soliq-theme-transition-overlay__wave {\n  position: absolute;\n  width: 44vmax;\n  height: 44vmax;\n  border-radius: 50%;\n  border: 1px solid rgba(216, 193, 170, 0.5);\n  mix-blend-mode: screen;\n}\n\n.soliq-theme-transition-overlay__wave--1 {\n  animation: overlay-wave-1 1580ms cubic-bezier(0.22, 1, 0.36, 1) 20ms both;\n}\n\n.soliq-theme-transition-overlay__wave--2 {\n  width: 38vmax;\n  height: 38vmax;\n  border-color: rgba(139, 163, 195, 0.5);\n  animation: overlay-wave-2 1480ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;\n}\n\n.soliq-theme-transition-overlay__wave--3 {\n  width: 50vmax;\n  height: 50vmax;\n  border-color: rgba(255, 255, 255, 0.3);\n  animation: overlay-wave-3 1720ms cubic-bezier(0.22, 1, 0.36, 1) 220ms both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__wave--1 {\n  border-color: rgba(255, 171, 86, 0.56);\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__wave--2 {\n  border-color: rgba(255, 147, 124, 0.45);\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__wave--3 {\n  border-color: rgba(255, 220, 177, 0.52);\n}\n\n.soliq-theme-transition-overlay__flare {\n  position: absolute;\n  width: 58vmax;\n  height: 58vmax;\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(216, 193, 170, 0.22), transparent 66%);\n  filter: blur(4px);\n  opacity: 0;\n  animation: flare-pulse 1300ms ease-out 150ms both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__flare {\n  background: radial-gradient(circle, rgba(255, 167, 82, 0.34), transparent 68%);\n}\n\n.soliq-theme-transition-overlay__icon-shell {\n  position: relative;\n  width: 142px;\n  height: 142px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  border: none;\n  box-shadow: none;\n  animation: icon-shell-in 780ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;\n}\n\n.soliq-theme-transition-overlay__icon-shell[data-target=\"dark\"] {\n  border: none;\n}\n\n.soliq-theme-transition-overlay__icon-shell[data-target=\"light\"] {\n  border: none;\n}\n\n.soliq-theme-transition-overlay__orbit {\n  position: absolute;\n  border-radius: 50%;\n  border: 1px dashed rgba(255, 255, 255, 0.28);\n  opacity: 0;\n}\n\n.soliq-theme-transition-overlay__orbit--a {\n  width: 166px;\n  height: 166px;\n  animation: orbit-spin-a 1400ms linear 120ms both;\n}\n\n.soliq-theme-transition-overlay__orbit--b {\n  width: 194px;\n  height: 194px;\n  border-color: rgba(216, 193, 170, 0.3);\n  animation: orbit-spin-b 1600ms linear 160ms both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__orbit--a {\n  border-color: rgba(255, 189, 114, 0.46);\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__orbit--b {\n  border-color: rgba(255, 155, 124, 0.36);\n}\n\n.soliq-theme-transition-overlay__icon {\n  width: 50px;\n  height: 50px;\n  color: #d8c1aa;\n  display: block;\n  object-fit: contain;\n  filter: drop-shadow(0 6px 18px rgba(216, 193, 170, 0.35));\n  animation: icon-pop 860ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;\n}\n\n.soliq-theme-transition-overlay__status {\n  position: absolute;\n  bottom: max(9vh, 74px);\n  margin: 0;\n  font-size: 13px;\n  letter-spacing: 0.28em;\n  text-transform: uppercase;\n  font-weight: 600;\n  color: color-mix(in srgb, var(--soliq-theme-text) 84%, transparent);\n  opacity: 0;\n  animation: status-in 820ms ease 380ms both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__status {\n  color: rgba(131, 74, 36, 0.85);\n}\n\n.soliq-theme-transition-overlay__sparkles {\n  position: absolute;\n  inset: 0;\n}\n\n.soliq-theme-transition-overlay__sparkle {\n  position: absolute;\n  left: var(--spark-x);\n  top: var(--spark-y);\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--soliq-theme-accent) 75%, #ffffff);\n  box-shadow: 0 0 12px color-mix(in srgb, var(--soliq-theme-accent) 75%, transparent);\n  opacity: 0;\n  transform: scale(0.2);\n  animation: sparkle-in 940ms ease-out var(--spark-delay) both;\n}\n\n.soliq-theme-transition-overlay[data-target=\"light\"] .soliq-theme-transition-overlay__sparkle {\n  background: rgba(255, 163, 88, 0.95);\n  box-shadow: 0 0 14px rgba(255, 167, 96, 0.65);\n}\n\n.soliq-theme-transition-overlay--closing {\n  animation: overlay-fade-out 420ms ease forwards;\n}\n\n@keyframes overlay-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes overlay-fade-out {\n  from { opacity: 1; }\n  to { opacity: 0; }\n}\n\n@keyframes veil-breath {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.82;\n  }\n}\n\n@keyframes overlay-wave-1 {\n  from {\n    transform: scale(0.2);\n    opacity: 0.7;\n  }\n  to {\n    transform: scale(1.55);\n    opacity: 0;\n  }\n}\n\n@keyframes overlay-wave-2 {\n  from {\n    transform: scale(0.15);\n    opacity: 0.68;\n  }\n  to {\n    transform: scale(1.62);\n    opacity: 0;\n  }\n}\n\n@keyframes overlay-wave-3 {\n  from {\n    transform: scale(0.1);\n    opacity: 0.62;\n  }\n  to {\n    transform: scale(1.5);\n    opacity: 0;\n  }\n}\n\n@keyframes icon-shell-in {\n  from {\n    opacity: 0;\n    transform: translateY(-16px) scale(0.88);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes icon-pop {\n  from {\n    opacity: 0;\n    transform: scale(0.75) rotate(-16deg);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) rotate(0deg);\n  }\n}\n\n@keyframes flare-pulse {\n  0% {\n    opacity: 0;\n    transform: scale(0.4);\n  }\n  40% {\n    opacity: 0.8;\n  }\n  100% {\n    opacity: 0;\n    transform: scale(1.3);\n  }\n}\n\n@keyframes orbit-spin-a {\n  0% {\n    opacity: 0;\n    transform: scale(0.7) rotate(0deg);\n  }\n  25% {\n    opacity: 0.55;\n  }\n  100% {\n    opacity: 0;\n    transform: scale(1) rotate(180deg);\n  }\n}\n\n@keyframes orbit-spin-b {\n  0% {\n    opacity: 0;\n    transform: scale(0.6) rotate(0deg);\n  }\n  32% {\n    opacity: 0.48;\n  }\n  100% {\n    opacity: 0;\n    transform: scale(1) rotate(-160deg);\n  }\n}\n\n@keyframes status-in {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes sparkle-in {\n  0% {\n    opacity: 0;\n    transform: scale(0.2);\n  }\n  30% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(0.45);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  body,\n  .soliq-theme-toggle,\n  .soliq-theme-transition-overlay,\n  .soliq-theme-transition-overlay__veil,\n  .soliq-theme-transition-overlay__wave,\n  .soliq-theme-transition-overlay__flare,\n  .soliq-theme-transition-overlay__icon-shell,\n  .soliq-theme-transition-overlay__orbit,\n  .soliq-theme-transition-overlay__icon {\n    animation: none !important;\n    transition: none !important;\n  }\n\n  .soliq-theme-transition-overlay__status,\n  .soliq-theme-transition-overlay__sparkle {\n    animation: none !important;\n    opacity: 1;\n    transform: none;\n  }\n}\n";