function MainComponent() { const [gameState, setGameState] = useState("waiting"); // waiting, spinning, result const [selectedPlane, setSelectedPlane] = useState("classic"); const [gameHistory, setGameHistory] = useState([]); const [showGameWindow, setShowGameWindow] = useState(false); const [reels, setReels] = useState([ [ 0, 1, 2 ], [ 0, 1, 2 ], [ 0, 1, 2 ] ]); const [isSpinning, setIsSpinning] = useState(false); const [winningLines, setWinningLines] = useState([]); const [lastWin, setLastWin] = useState(null); const [showWinAnimation, setShowWinAnimation] = useState(false); const planeTypes = { classic: { name: "Classic Fighter", color: "red", volatility: 1.0, image: "https://ucarecdn.com/ee5d0b8f-1993-4bcc-acc3-3e4e3d572da3/-/format/auto/", theme: { primary: "red", secondary: "orange", gradient: "from-red-900 via-red-700 to-red-900", cardBg: "bg-red-900/20", border: "border-red-600", accent: "text-red-400", glow: "shadow-red-500/20", gameBackground: "from-slate-900 via-red-900/30 to-slate-800", skyGradient: "from-red-900/20 via-orange-800/30 to-red-900/40" } }, speedster: { name: "Speed Rocket", color: "pink", volatility: 1.5, image: "https://ucarecdn.com/d9dce188-9ed1-427c-8737-dfb5f41830e5/-/format/auto/", theme: { primary: "pink", secondary: "purple", gradient: "from-pink-900 via-purple-700 to-pink-900", cardBg: "bg-pink-900/20", border: "border-pink-600", accent: "text-pink-400", glow: "shadow-pink-500/20", gameBackground: "from-slate-900 via-pink-900/30 to-purple-800", skyGradient: "from-pink-900/20 via-purple-800/30 to-pink-900/40" } }, lucky: { name: "Golden Vintage", color: "gold", volatility: 3.0, image: "https://ucarecdn.com/31a8c85e-d878-4ee1-a7fb-c23391ee95e8/-/format/auto/", theme: { primary: "yellow", secondary: "amber", gradient: "from-yellow-900 via-amber-700 to-yellow-900", cardBg: "bg-yellow-900/20", border: "border-yellow-600", accent: "text-yellow-400", glow: "shadow-yellow-500/20", gameBackground: "from-slate-900 via-yellow-900/30 to-amber-800", skyGradient: "from-yellow-900/20 via-amber-800/30 to-yellow-900/40" } } }; const currentTheme = planeTypes[selectedPlane].theme; const symbols = [ { id: 0, type: 'aircraft', image: planeTypes[selectedPlane].image, value: 100, name: 'Aircraft' }, { id: 1, type: 'star', emoji: '⭐', value: 50, name: 'Star' }, { id: 2, type: 'coin', emoji: '🪙', value: 25, name: 'Coin' }, { id: 3, type: 'gem', emoji: '💎', value: 75, name: 'Gem' }, { id: 4, type: 'rocket', emoji: '🚀', value: 40, name: 'Rocket' }, { id: 5, type: 'lightning', emoji: '⚡', value: 30, name: 'Lightning' }, { id: 6, type: 'crown', emoji: '👑', value: 60, name: 'Crown' }, { id: 7, type: 'fire', emoji: '🔥', value: 35, name: 'Fire' } ]; const generateRandomReel = ()=>{ return Array.from({ length: 3 }, ()=>Math.floor(Math.random() * symbols.length)); }; const checkWinningLines = (reelResults)=>{ const lines = [ [ [ 0, 0 ], [ 0, 1 ], [ 0, 2 ] ], [ [ 1, 0 ], [ 1, 1 ], [ 1, 2 ] ], [ [ 2, 0 ], [ 2, 1 ], [ 2, 2 ] ], [ [ 0, 0 ], [ 1, 1 ], [ 2, 2 ] ], [ [ 2, 0 ], [ 1, 1 ], [ 0, 2 ] ] // Diagonal bottom-left to top-right ]; const winningLines = []; let totalWin = 0; lines.forEach((line, lineIndex)=>{ const [pos1, pos2, pos3] = line; const symbol1 = reelResults[pos1[0]][pos1[1]]; const symbol2 = reelResults[pos2[0]][pos2[1]]; const symbol3 = reelResults[pos3[0]][pos3[1]]; if (symbol1 === symbol2 && symbol2 === symbol3) { const symbolValue = symbols[symbol1].value; const volatilityMultiplier = planeTypes[selectedPlane].volatility; const winAmount = Math.round(symbolValue * volatilityMultiplier); winningLines.push({ line: lineIndex, positions: line, symbol: symbol1, winAmount: winAmount }); totalWin += winAmount; } }); return { winningLines, totalWin }; }; const startSpin = ()=>{ if (isSpinning) return; setIsSpinning(true); setGameState("spinning"); setWinningLines([]); setLastWin(null); setShowWinAnimation(false); setShowGameWindow(true); // Generate final results const finalReels = [ generateRandomReel(), generateRandomReel(), generateRandomReel() ]; // Animate spinning for 2 seconds const spinDuration = 2000; const spinInterval = 100; let elapsed = 0; const spinAnimation = setInterval(()=>{ setReels([ generateRandomReel(), generateRandomReel(), generateRandomReel() ]); elapsed += spinInterval; if (elapsed >= spinDuration) { clearInterval(spinAnimation); setReels(finalReels); setIsSpinning(false); setGameState("result"); // Check for wins const { winningLines, totalWin } = checkWinningLines(finalReels); setWinningLines(winningLines); if (totalWin > 0) { setLastWin(totalWin); setShowWinAnimation(true); setTimeout(()=>setShowWinAnimation(false), 3000); } // Add to history setGameHistory((prev)=>[ { reels: finalReels, win: totalWin, winningLines: winningLines, aircraft: selectedPlane, timestamp: Date.now() }, ...prev.slice(0, 9) ]); } }, spinInterval); }; const closeGameWindow = ()=>{ setShowGameWindow(false); setGameState("waiting"); setIsSpinning(false); setWinningLines([]); setLastWin(null); setShowWinAnimation(false); }; const isWinningPosition = (row, col)=>{ return winningLines.some((line)=>line.positions.some((pos)=>pos[0] === row && pos[1] === col)); }; // Game Window Modal if (showGameWindow) { return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-50 bg-black/90 backdrop-blur-sm", __source: { fileName: "", lineNumber: 200, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-full bg-gradient-to-br ${currentTheme.gameBackground} relative overflow-hidden`, __source: { fileName: "", lineNumber: 201, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: closeGameWindow, className: "absolute top-4 right-4 z-20 w-10 h-10 bg-red-600 hover:bg-red-700 text-white rounded-full flex items-center justify-center text-xl font-bold transition-colors", __source: { fileName: "", lineNumber: 203, columnNumber: 11 }, __self: this }, "×"), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4 z-20 text-white", __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 mb-2", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: planeTypes[selectedPlane].image, alt: planeTypes[selectedPlane].name, className: "w-8 h-8 object-contain", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, planeTypes[selectedPlane].name, " Slots")), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-75", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, "Volatility: ", planeTypes[selectedPlane].volatility, "x")), /*#__PURE__*/ React.createElement("div", { className: `absolute inset-0 bg-gradient-to-t ${currentTheme.skyGradient}`, __source: { fileName: "", lineNumber: 226, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 opacity-30", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "cloud cloud-1", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "cloud cloud-2", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "cloud cloud-3", __source: { fileName: "", lineNumber: 230, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-stars opacity-40", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-10", __source: { fileName: "", lineNumber: 236, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black/80 backdrop-blur-sm rounded-2xl p-6 border-4 border-yellow-600 shadow-2xl", __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-2 mb-6", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, reels.map((reel, reelIndex)=>reel.map((symbolId, symbolIndex)=>{ const symbol = symbols[symbolId]; const isWinning = !isSpinning && isWinningPosition(reelIndex, symbolIndex); return /*#__PURE__*/ React.createElement("div", { key: `${reelIndex}-${symbolIndex}`, className: `w-20 h-20 sm:w-24 sm:h-24 md:w-28 md:h-28 bg-gradient-to-br from-slate-700 to-slate-800 rounded-lg border-2 flex items-center justify-center transition-all duration-300 ${isWinning ? `border-yellow-400 shadow-lg shadow-yellow-400/50 animate-pulse bg-gradient-to-br from-yellow-900/50 to-yellow-800/50` : 'border-slate-600'} ${isSpinning ? 'animate-spin-fast' : ''}`, __source: { fileName: "", lineNumber: 246, columnNumber: 23 }, __self: this }, symbol.type === 'aircraft' ? /*#__PURE__*/ React.createElement("img", { src: symbol.image, alt: symbol.name, className: "w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 object-contain", style: { filter: isWinning ? 'brightness(1.5) drop-shadow(0 0 10px gold)' : 'brightness(1.1)' }, __source: { fileName: "", lineNumber: 255, columnNumber: 27 }, __self: this }) : /*#__PURE__*/ React.createElement("span", { className: `text-2xl sm:text-3xl md:text-4xl ${isWinning ? 'animate-bounce' : ''}`, style: { filter: isWinning ? 'drop-shadow(0 0 10px gold)' : 'none' }, __source: { fileName: "", lineNumber: 264, columnNumber: 27 }, __self: this }, symbol.emoji)); }))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 280, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startSpin, disabled: isSpinning, className: `px-8 py-4 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 disabled:from-gray-600 disabled:to-gray-700 text-white font-bold rounded-lg text-lg transition-all duration-300 shadow-lg ${!isSpinning ? 'hover:shadow-green-500/30' : ''}`, __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, isSpinning ? '🎰 SPINNING...' : '🎰 SPIN')))), lastWin && showWinAnimation && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-30 pointer-events-none", __source: { fileName: "", lineNumber: 296, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center animate-bounce", __source: { fileName: "", lineNumber: 297, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-yellow-400 text-6xl sm:text-8xl md:text-9xl mb-4", __source: { fileName: "", lineNumber: 298, columnNumber: 17 }, __self: this }, "🎉"), /*#__PURE__*/ React.createElement("div", { className: "text-white text-2xl sm:text-3xl font-bold mb-2", __source: { fileName: "", lineNumber: 301, columnNumber: 17 }, __self: this }, "BIG WIN!"), /*#__PURE__*/ React.createElement("div", { className: "text-yellow-400 text-3xl sm:text-4xl font-bold", __source: { fileName: "", lineNumber: 304, columnNumber: 17 }, __self: this }, lastWin, " COINS"))), winningLines.length > 0 && !showWinAnimation && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-4 right-4 z-20", __source: { fileName: "", lineNumber: 313, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black/80 backdrop-blur-sm rounded-lg p-4 border border-yellow-600", __source: { fileName: "", lineNumber: 314, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-yellow-400 font-bold text-center mb-2", __source: { fileName: "", lineNumber: 315, columnNumber: 17 }, __self: this }, "Winning Lines: ", winningLines.length), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm", __source: { fileName: "", lineNumber: 318, columnNumber: 17 }, __self: this }, winningLines.map((line, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-white text-center", __source: { fileName: "", lineNumber: 320, columnNumber: 21 }, __self: this }, "Line ", line.line + 1, ": ", symbols[line.symbol].name, " - ", line.winAmount, " coins"))))))); } // Main Menu Screen return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen bg-gradient-to-br ${currentTheme.gradient} p-2 sm:p-4 transition-all duration-500`, __source: { fileName: "", lineNumber: 335, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto h-screen flex flex-col", __source: { fileName: "", lineNumber: 336, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl sm:text-2xl md:text-4xl font-bold text-white text-center mb-2 sm:mb-4 md:mb-8 font-orbitron", __source: { fileName: "", lineNumber: 337, columnNumber: 9 }, __self: this }, "🎰 Aircraft Slots"), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col gap-2 sm:gap-3 md:gap-6 min-h-0", __source: { fileName: "", lineNumber: 341, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${currentTheme.cardBg} backdrop-blur-sm rounded-lg sm:rounded-xl p-3 sm:p-4 md:p-6 border ${currentTheme.border} shadow-lg ${currentTheme.glow} transition-all duration-500 order-1`, __source: { fileName: "", lineNumber: 343, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-base sm:text-lg md:text-xl font-bold text-white mb-2 sm:mb-3 md:mb-4 font-orbitron", __source: { fileName: "", lineNumber: 344, columnNumber: 13 }, __self: this }, "Select Aircraft Theme"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3 gap-2 sm:gap-3", __source: { fileName: "", lineNumber: 347, columnNumber: 13 }, __self: this }, Object.entries(planeTypes).map(([key, plane])=>{ const mobileIconSize = Math.round(30 + plane.volatility * 15); const desktopIconSize = Math.round(40 + plane.volatility * 20); return /*#__PURE__*/ React.createElement("button", { key: key, onClick: ()=>setSelectedPlane(key), className: `w-full p-2 sm:p-3 rounded-lg border-2 transition-all text-xs sm:text-sm md:text-base min-h-[60px] sm:min-h-[80px] touch-manipulation ${selectedPlane === key ? `border-${plane.theme.primary}-400 bg-${plane.theme.primary}-900/30 shadow-lg ${plane.theme.glow}` : `border-slate-600 bg-slate-700/30 hover:border-${plane.theme.primary}-500 hover:bg-${plane.theme.primary}-900/10`}`, __source: { fileName: "", lineNumber: 353, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-center sm:justify-between gap-1 sm:gap-2", __source: { fileName: "", lineNumber: 362, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row items-center gap-1 sm:gap-3", __source: { fileName: "", lineNumber: 363, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: plane.image, alt: plane.name, className: "object-contain sm:hidden", style: { width: `${mobileIconSize}px`, height: `${mobileIconSize}px` }, __source: { fileName: "", lineNumber: 364, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: plane.image, alt: plane.name, className: "object-contain hidden sm:block", style: { width: `${desktopIconSize}px`, height: `${desktopIconSize}px` }, __source: { fileName: "", lineNumber: 373, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center sm:text-left", __source: { fileName: "", lineNumber: 382, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-semibold text-xs sm:text-sm", __source: { fileName: "", lineNumber: 383, columnNumber: 27 }, __self: this }, plane.name), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-slate-300", __source: { fileName: "", lineNumber: 386, columnNumber: 27 }, __self: this }, plane.volatility, "x Volatility"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center sm:items-end gap-1", __source: { fileName: "", lineNumber: 391, columnNumber: 23 }, __self: this }, key === "lucky" && /*#__PURE__*/ React.createElement("span", { className: "text-yellow-400 text-xs", __source: { fileName: "", lineNumber: 393, columnNumber: 27 }, __self: this }, "✨ High Risk"), selectedPlane === key && /*#__PURE__*/ React.createElement("span", { className: "text-green-400 text-xs", __source: { fileName: "", lineNumber: 396, columnNumber: 27 }, __self: this }, "✓ Selected")))); }))), /*#__PURE__*/ React.createElement("div", { className: `${currentTheme.cardBg} backdrop-blur-sm rounded-lg sm:rounded-xl p-3 sm:p-4 border ${currentTheme.border} shadow-lg ${currentTheme.glow} transition-all duration-500 order-2`, __source: { fileName: "", lineNumber: 407, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 408, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white mb-3", __source: { fileName: "", lineNumber: 409, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-75 mb-2", __source: { fileName: "", lineNumber: 410, columnNumber: 17 }, __self: this }, "Ready to spin with:"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 justify-center mb-3", __source: { fileName: "", lineNumber: 411, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: planeTypes[selectedPlane].image, alt: planeTypes[selectedPlane].name, className: "w-8 h-8 object-contain", __source: { fileName: "", lineNumber: 412, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-base", __source: { fileName: "", lineNumber: 417, columnNumber: 19 }, __self: this }, planeTypes[selectedPlane].name, " Slots"))), /*#__PURE__*/ React.createElement("button", { onClick: startSpin, className: "w-full px-6 py-4 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-bold rounded-lg text-lg transition-all duration-300 shadow-lg hover:shadow-green-500/30 min-h-[56px] touch-manipulation", __source: { fileName: "", lineNumber: 422, columnNumber: 15 }, __self: this }, "🎰 Start Spinning"))), /*#__PURE__*/ React.createElement("div", { className: `${currentTheme.cardBg} backdrop-blur-sm rounded-lg sm:rounded-xl p-3 sm:p-4 md:p-6 border ${currentTheme.border} shadow-lg ${currentTheme.glow} transition-all duration-500 order-3`, __source: { fileName: "", lineNumber: 432, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-base sm:text-lg md:text-xl font-bold text-white mb-2 sm:mb-3 md:mb-4 font-orbitron", __source: { fileName: "", lineNumber: 433, columnNumber: 13 }, __self: this }, "Spin History"), /*#__PURE__*/ React.createElement("div", { className: "space-y-1 sm:space-y-2 max-h-32 sm:max-h-40 md:max-h-48 overflow-y-auto", __source: { fileName: "", lineNumber: 436, columnNumber: 13 }, __self: this }, gameHistory.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-slate-400 text-center py-2 sm:py-4 text-xs sm:text-sm", __source: { fileName: "", lineNumber: 438, columnNumber: 17 }, __self: this }, "No spins yet") : gameHistory.map((spin, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded flex justify-between items-center text-xs sm:text-sm border ${spin.win > 0 ? 'bg-green-900/20 border-green-600/30' : 'bg-slate-900/20 border-slate-600/30'}`, __source: { fileName: "", lineNumber: 443, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 451, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 452, columnNumber: 23 }, __self: this }, "Spin #", gameHistory.length - index), /*#__PURE__*/ React.createElement("img", { src: planeTypes[spin.aircraft].image, alt: planeTypes[spin.aircraft].name, className: "w-4 h-4 object-contain", __source: { fileName: "", lineNumber: 453, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 459, columnNumber: 21 }, __self: this }, spin.winningLines.length > 0 && /*#__PURE__*/ React.createElement("span", { className: "text-yellow-400 text-xs", __source: { fileName: "", lineNumber: 461, columnNumber: 25 }, __self: this }, spin.winningLines.length, " lines"), /*#__PURE__*/ React.createElement("span", { className: `font-mono font-bold ${spin.win > 0 ? 'text-green-400' : 'text-slate-400'}`, __source: { fileName: "", lineNumber: 465, columnNumber: 23 }, __self: this }, spin.win > 0 ? `+${spin.win}` : '0', " coins")))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 479, columnNumber: 7 }, __self: this }, ` .bg-stars { background-image: radial-gradient(2px 2px at 20px 30px, #eee, transparent), radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 90px 40px, #fff, transparent), radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.5), transparent); background-repeat: repeat; background-size: 200px 100px; animation: twinkle 3s ease-in-out infinite alternate; } .cloud { position: absolute; background: rgba(255, 255, 255, 0.1); border-radius: 50px; opacity: 0.6; } .cloud:before, .cloud:after { content: ''; position: absolute; background: rgba(255, 255, 255, 0.1); border-radius: 50px; } .cloud-1 { width: 100px; height: 40px; top: 20%; left: 10%; animation: float 20s ease-in-out infinite; } .cloud-1:before { width: 50px; height: 50px; top: -25px; left: 10px; } .cloud-1:after { width: 60px; height: 20px; top: -10px; right: 10px; } .cloud-2 { width: 80px; height: 30px; top: 40%; right: 20%; animation: float 25s ease-in-out infinite reverse; } .cloud-2:before { width: 40px; height: 40px; top: -20px; left: 15px; } .cloud-2:after { width: 50px; height: 15px; top: -5px; right: 15px; } .cloud-3 { width: 120px; height: 50px; top: 60%; left: 30%; animation: float 30s ease-in-out infinite; } .cloud-3:before { width: 60px; height: 60px; top: -30px; left: 20px; } .cloud-3:after { width: 70px; height: 25px; top: -15px; right: 20px; } @keyframes float { 0%, 100% { transform: translateX(0px) translateY(0px); } 25% { transform: translateX(10px) translateY(-5px); } 50% { transform: translateX(-5px) translateY(5px); } 75% { transform: translateX(5px) translateY(-3px); } } @keyframes twinkle { 0% { opacity: 0.3; } 100% { opacity: 0.8; } } @keyframes spin-fast { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } .animate-spin-fast { animation: spin-fast 0.1s linear infinite; } `)); }