Modal Styles

.modal-1 { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }

.modal-2 { transform: translateX(100%); animation: slide-in 0.5s forwards; }\n@keyframes slide-in { to { transform: translateX(0); } }

.modal-3 { transform: scale(0); animation: bubble-pop 0.5s forwards; }\n@keyframes bubble-pop { to { transform: scale(1); } }

.modal-4 { transform: rotateY(90deg); animation: flip-in 0.5s forwards; }\n@keyframes flip-in { to { transform: rotateY(0); } }

.modal-5 { opacity: 0; animation: fade-in 0.5s forwards; }\n@keyframes fade-in { to { opacity: 1; } }

.modal-6 { transform: scale(0); animation: elastic-pop 0.5s forwards; }\n@keyframes elastic-pop { 50% { transform: scale(1.2); } 100% { transform: scale(1); } }

.modal-7 { background: #e0e0e0; box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff; }

.modal-8 { border: 2px solid #ef4444; box-shadow: 0 0 10px #ef4444; animation: neon-glow 1s infinite; }\n@keyframes neon-glow { 50% { box-shadow: 0 0 20px #ef4444; } }

.modal-9 { position: absolute; cursor: move; }\n/* Use interact.js for drag functionality */

.modal-10 { width: 100vw; height: 100vh; border-radius: 0; }

.modal-11 { max-width: 200px; padding: 8px; font-size: 14px; }

.modal-12 .carousel { display: flex; overflow-x: auto; gap: 10px; }\n.modal-12 .carousel img { width: 100px; }

.modal-13 video { width: 100%; max-height: 200px; }

.modal-14 audio { width: 100%; }

.modal-15 .form-step { display: none; }\n.modal-15 .form-step.active { display: block; }

.modal-16 .tab { display: none; }\n.modal-16 .tab.active { display: block; }

.modal-17 .step { display: none; }\n.modal-17 .step.active { display: block; }

.modal-18 .countdown { font-size: 24px; animation: pulse 1s infinite; }\n@keyframes pulse { 50% { transform: scale(1.1); } }

.modal-19 svg path { animation: draw 2s infinite; }\n@keyframes draw { to { stroke-dashoffset: 0; } }

.modal-20 { clip-path: circle(0% at center); animation: clip-reveal 0.5s forwards; }\n@keyframes clip-reveal { to { clip-path: circle(100% at center); } }

.modal-21 { background: url('bg.jpg') center/cover; background-attachment: fixed; }

.modal-22 { position: sticky; top: 10px; }

.modal-23 { max-height: 300px; overflow-y: auto; }

.modal-24 { transform: translateY(50%) scaleY(0); animation: split-reveal 0.5s forwards; }\n@keyframes split-reveal { to { transform: translateY(0) scaleY(1); } }

.modal-25:hover { transform: translate(5px, -5px); transition: transform 0.2s; }

.modal-26 { opacity: 0; }\n.trigger-btn:hover + .modal-overlay { display: flex; opacity: 1; }

.modal-27 { max-width: 150px; font-size: 12px; padding: 8px; }

.modal-28 { position: fixed; bottom: 10px; right: 10px; max-width: 200px; }

.modal-29 { transform: translateY(100%); animation: slide-up 0.5s forwards; }\n@keyframes slide-up { to { transform: translateY(0); } }

.modal-30 { transform: scale(0); animation: jelly 0.5s forwards; }\n@keyframes jelly { 50% { transform: scale(1.3, 0.7); } 100% { transform: scale(1); } }

.modal-31 { transform: scale(0.1); animation: zoom 0.3s forwards; }\n@keyframes zoom { to { transform: scale(1); } }

.modal-32 { transform: rotate(360deg); animation: rotate-in 0.5s forwards; }\n@keyframes rotate-in { to { transform: rotate(0); } }

.modal-33 { background: linear-gradient(45deg, #ff0000, #0000ff); animation: thermal 2s infinite; }\n@keyframes thermal { 50% { background: linear-gradient(45deg, #0000ff, #ff0000); } }

.modal-34 { border-bottom: 4px solid #ef4444; animation: underline 0.5s forwards; }\n@keyframes underline { to { border-bottom-width: 8px; } }

.modal-35 { display: none; }\nconst recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\nrecognition.onresult = (event) => { if (event.results[0][0].transcript.includes('open')) document.querySelector('.modal-35').style.display = 'block'; };

.modal-36 { transform: translateY(-100%); animation: waterfall 0.5s forwards; }\n@keyframes waterfall { to { transform: translateY(0); } }

.modal-37 { background: rgba(0, 0, 0, 0.1); filter: contrast(1.5); }

.modal-38 { background: radial-gradient(circle, #fff 50%, #000 50%); animation: spin 2s infinite; }\n@keyframes spin { to { transform: rotate(360deg); } }

.modal-39 { transform: translateX(-10px); animation: zigzag 0.5s infinite alternate; }\n@keyframes zigzag { to { transform: translateX(10px); } }

.modal-40 { transform: scale(0.5); animation: zoom-in-out 1s infinite; }\n@keyframes zoom-in-out { 50% { transform: scale(1); } }

.modal-41 { transform: translateY(-20px); animation: bounce 0.5s infinite; }\n@keyframes bounce { 50% { transform: translateY(0); } }

.modal-42 { transform: translateY(-100%); animation: curtain 0.5s forwards; }\n@keyframes curtain { to { transform: translateY(0); } }

.modal-43 { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); }

.modal-44 { transform: scale(0); animation: explode 0.5s forwards; }\n@keyframes explode { to { transform: scale(1); } }

.modal-45 { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(15px); }

.modal-46 { background: linear-gradient(45deg, #ef4444, #3b82f6); opacity: 0; animation: fade-in 0.5s forwards; }\n@keyframes fade-in { to { opacity: 1; } }

.modal-47 { border: 2px solid #facc15; box-shadow: 0 0 10px #facc15; }

.modal-48 { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); }

.modal-49 { transform: translateY(-50px); animation: jump-in 0.5s forwards; }\n@keyframes jump-in { to { transform: translateY(0); } }

.modal-50 { transform: scale(0); animation: kinetic 0.5s forwards; }\n@keyframes kinetic { 50% { transform: scale(1.2); } 100% { transform: scale(1); } }