function MainComponent() { const [showMessage, setShowMessage] = useState(false); const [showLeaderboard, setShowLeaderboard] = useState(true); const [timeLeft, setTimeLeft] = useState(""); useEffect(()=>{ const calculateTimeLeft = ()=>{ const now = new Date(); const targetTime = new Date("2025-05-13T17:00:00"); // May 13, 2025 at 5 PM const difference = targetTime - now; // If the target date has passed, return "00:00:00" if (difference < 0) { return "00:00:00"; } const days = Math.floor(difference / (1000 * 60 * 60 * 24)); const hours = Math.floor(difference % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)); const minutes = Math.floor(difference % (1000 * 60 * 60) / (1000 * 60)); const seconds = Math.floor(difference % (1000 * 60) / 1000); return `${days}d ${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`; }; const timer = setInterval(()=>{ setTimeLeft(calculateTimeLeft()); }, 1000); return ()=>clearInterval(timer); }, []); const leaderboardData = [ { rank: 1, player: "947Ks", score: "$2,547" }, { rank: 2, player: "12zPn", score: "$2,391" }, { rank: 3, player: "581Rt", score: "$2,284" }, { rank: 4, player: "364rZ", score: "$2,156" }, { rank: 5, player: "8d2Jx", score: "$1,987" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen relative overflow-hidden flex flex-col", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-0", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://s14.gifyu.com/images/bssiD.gif", alt: "Bubble Background", className: "w-full h-full object-cover blur-lg opacity-60", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-1 overflow-hidden", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "floating-ball-diagonal absolute w-[40rem] h-[40rem] bg-purple-500/10 rounded-full -top-20 -left-20 blur-xl", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "floating-ball-zigzag absolute w-[40rem] h-[40rem] bg-pink-500/10 rounded-full -bottom-20 -right-20 blur-xl", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "floating-ball-slow absolute w-[50rem] h-[50rem] bg-indigo-500/10 rounded-full -top-40 -right-40 blur-xl", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "floating-ball-reverse absolute w-[45rem] h-[45rem] bg-blue-500/10 rounded-full -bottom-40 -left-40 blur-xl", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "floating-ball absolute w-[55rem] h-[55rem] bg-purple-500/10 rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 blur-xl", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "floating-ball-delayed absolute w-[40rem] h-[40rem] bg-pink-500/10 rounded-full top-1/4 left-1/3 blur-xl", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "floating-ball-circle absolute w-[35rem] h-[35rem] bg-indigo-500/10 rounded-full bottom-1/3 right-1/4 blur-xl", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "floating-ball-lava absolute w-[38rem] h-[38rem] bg-blue-500/10 rounded-full top-2/3 right-1/3 blur-xl", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 flex-1 flex flex-col", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-1/2 -translate-x-1/2 z-50", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl text-white font-mono", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "ca: 6MaQkVdM8LWWHwUAUy5QhfqLhKaAKeRkos6b8SZNpump")), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4 z-50 flex items-center gap-2 md:gap-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://t.me/cellstario", target: "_blank", rel: "noopener noreferrer", className: "hover:opacity-80 transition-opacity cursor-pointer", onClick: (e)=>{ e.preventDefault(); window.open("https://t.me/cellstario", "_blank"); }, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/f39d2fb2-4fe5-403e-8675-802a06a419b2/-/format/auto/", alt: "Telegram", className: "w-8 h-8 md:w-12 md:h-12", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://dexscreener.com/solana/8Y5AhB8emmRAN96G17WxDCbvt21ghJPT217ZpK7qBo2s", target: "_blank", rel: "noopener noreferrer", className: "hover:opacity-80 transition-opacity cursor-pointer", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/2aa1089f-0557-4552-8b57-2ed9a0fc2637/-/format/auto/", alt: "DexScreener", className: "w-8 h-8 md:w-12 md:h-12", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://x.com/CELLSTARIO", target: "_blank", rel: "noopener noreferrer", className: "hover:opacity-80 transition-opacity", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/3792ae04-90d6-475e-8a2d-01d85b40812f/-/format/auto/", alt: "X", className: "w-8 h-8 md:w-12 md:h-12", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 z-20", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-transparent hover:bg-white/5 text-white font-bold py-2 md:py-3 px-4 md:px-6 rounded-full transition-all duration-300 flex items-center gap-2 backdrop-blur-sm border-4 border-white/10 text-sm md:text-base", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/3481fb40-dd29-4c1a-93fc-52a030e20d01/-/format/auto/", alt: "Wallet", className: "w-4 h-4 md:w-5 md:h-5", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }), "Connect Wallet")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col md:flex-row items-center justify-between px-4 md:px-16 gap-8 md:gap-16 pt-40 md:pt-40", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 transform hover:scale-105 transition-transform duration-300", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-80 h-80 flex items-center justify-center mx-auto", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/4b7c76d8-358c-4612-93bf-a7a52589199a/-/format/auto/", alt: "Cellstar Logo", className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-6 transform hover:scale-105 transition-all duration-300 text-center", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/2f94a7a6-b220-4f5d-a015-04ca3593442d/-/format/auto/", alt: "Cellstar.io", className: "w-full max-w-[300px] md:max-w-[400px] mx-auto", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gradient-to-r from-pink-400/90 via-purple-400/90 to-blue-400/90 text-white text-xl md:text-2xl font-bold py-3 md:py-4 px-8 md:px-12 rounded-full shadow-xl hover:shadow-2xl hover:from-pink-500/90 hover:via-purple-500/90 hover:to-blue-500/90 transform transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-400/50 w-full flex items-center justify-center gap-3", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }, "PLAY NOW"), /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z", __source: { fileName: "", lineNumber: 153, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl text-white/80 font-mono text-center", __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, timeLeft)), showMessage && /*#__PURE__*/ React.createElement("div", { className: "mt-4 backdrop-blur-md bg-white/10 p-4 rounded-xl shadow-xl border border-white/20 animate-fade-in", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl text-white font-semibold text-center", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, "Coming Soon!"))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "backdrop-blur-md bg-white/10 rounded-2xl p-4 md:p-6 border-4 border-white/20", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl font-bold text-white mb-4 md:mb-6", __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }, "Top Players"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 md:space-y-3", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, leaderboardData.map((player)=>/*#__PURE__*/ React.createElement("div", { key: player.rank, className: "flex items-center justify-between bg-white/5 rounded-lg p-2 md:p-3 hover:bg-white/10 transition-colors", __source: { fileName: "", lineNumber: 183, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 md:gap-4", __source: { fileName: "", lineNumber: 187, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-base md:text-lg font-bold text-white/80", __source: { fileName: "", lineNumber: 188, columnNumber: 23 }, __self: this }, "#", player.rank), /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 191, columnNumber: 23 }, __self: this }, player.player)), /*#__PURE__*/ React.createElement("span", { className: "text-emerald-400 font-mono", __source: { fileName: "", lineNumber: 193, columnNumber: 21 }, __self: this }, player.score))))))), /*#__PURE__*/ React.createElement("footer", { className: "relative z-10 px-4 md:px-16 py-8 mt-16", __source: { fileName: "", lineNumber: 203, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "backdrop-blur-sm bg-white/5 rounded-3xl p-6 md:p-8 border border-white/10", __source: { fileName: "", lineNumber: 204, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 205, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 206, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white font-semibold mb-4", __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this }, "Company"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://988e80ef-2274-454b-addb-215ad91d4127.createdusercontent.com/contact", className: "text-white/70 hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 210, columnNumber: 21 }, __self: this }, "About Us")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 217, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://988e80ef-2274-454b-addb-215ad91d4127.createdusercontent.com/contact", className: "text-white/70 hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 218, columnNumber: 21 }, __self: this }, "Careers")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://988e80ef-2274-454b-addb-215ad91d4127.createdusercontent.com/contact", className: "text-white/70 hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 226, columnNumber: 21 }, __self: this }, "Partnership")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 236, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white font-semibold mb-4", __source: { fileName: "", lineNumber: 237, columnNumber: 17 }, __self: this }, "Support"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 238, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 239, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://t.me/cellstario", target: "_blank", rel: "noopener noreferrer", className: "text-white/70 hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 240, columnNumber: 21 }, __self: this }, "Help Center")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 249, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://t.me/cellstario", target: "_blank", rel: "noopener noreferrer", className: "text-white/70 hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 250, columnNumber: 21 }, __self: this }, "Contact Us")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 259, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://t.me/cellstario", target: "_blank", rel: "noopener noreferrer", className: "text-white/70 hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 260, columnNumber: 21 }, __self: this }, "FAQ")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white font-semibold mb-4", __source: { fileName: "", lineNumber: 273, columnNumber: 17 }, __self: this }, "Legal"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 274, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 275, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white/70 hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 276, columnNumber: 21 }, __self: this }, "Terms of Service")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 283, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white/70 hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 284, columnNumber: 21 }, __self: this }, "Privacy Policy")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 291, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://responsiblegambling.org", target: "_blank", rel: "noopener noreferrer", className: "text-white/70 hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 292, columnNumber: 21 }, __self: this }, "Gamble Responsibly")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 304, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white font-semibold mb-4", __source: { fileName: "", lineNumber: 305, columnNumber: 17 }, __self: this }, "Connect"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 306, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 307, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://x.com/CELLSTARIO", target: "_blank", rel: "noopener noreferrer", className: "text-white/70 hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 308, columnNumber: 21 }, __self: this }, "X.com")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 317, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://t.me/cellstario", target: "_blank", rel: "noopener noreferrer", className: "text-white/70 hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 318, columnNumber: 21 }, __self: this }, "Telegram")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 327, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://dexscreener.com/solana/8Y5AhB8emmRAN96G17WxDCbvt21ghJPT217ZpK7qBo2s", target: "_blank", rel: "noopener noreferrer", className: "text-white/70 hover:text-white text-sm transition-colors", __source: { fileName: "", lineNumber: 328, columnNumber: 21 }, __self: this }, "Dexscreener"))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 pt-6 border-t border-white/10 text-center", __source: { fileName: "", lineNumber: 341, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white/50 text-sm", __source: { fileName: "", lineNumber: 342, columnNumber: 15 }, __self: this }, "© 2025 Cellstar.io. All rights reserved."))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 350, columnNumber: 7 }, __self: this }, ` @keyframes float { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 25% { transform: translate(150px, -100px) scale(1.2) rotate(90deg); } 50% { transform: translate(200px, 100px) scale(0.9) rotate(180deg); } 75% { transform: translate(-100px, 200px) scale(1.3) rotate(270deg); } 100% { transform: translate(0, 0) scale(1) rotate(360deg); } } @keyframes diagonal { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(200px, 200px) scale(1.4) rotate(120deg); } 66% { transform: translate(-150px, 250px) scale(0.8) rotate(240deg); } 100% { transform: translate(0, 0) scale(1) rotate(360deg); } } @keyframes zigzag { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(200px, -200px) scale(1.3); } 50% { transform: translate(400px, 0) scale(0.8); } 75% { transform: translate(200px, 200px) scale(1.2); } 100% { transform: translate(0, 0) scale(1); } } @keyframes lava { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 33% { transform: translate(-150px, 150px) scale(1.5) rotate(120deg); } 66% { transform: translate(150px, -180px) scale(0.7) rotate(240deg); } 100% { transform: translate(0, 0) scale(1) rotate(360deg); } } .floating-ball { animation: float 20s ease-in-out infinite; transition: all 0.5s ease-in-out; } .floating-ball-delayed { animation: float 25s ease-in-out infinite; animation-delay: -7s; } .floating-ball-slow { animation: float 30s ease-in-out infinite; animation-delay: -15s; } .floating-ball-reverse { animation: float 28s ease-in-out infinite reverse; animation-delay: -20s; } .floating-ball-diagonal { animation: diagonal 35s ease-in-out infinite; } .floating-ball-zigzag { animation: zigzag 40s ease-in-out infinite; } .floating-ball-circle { animation: lava 45s linear infinite; } .floating-ball-lava { animation: lava 50s ease-in-out infinite; animation-delay: -25s; } `)); }