.toast { animation: slideInUp 0.4s ease-out forwards, fadeIn 0.4s ease-out forwards; }
.scene-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .scene-card:hover { transform: translateY(-4px); } .scene-card:hover .scene-img { transform: scale(1.05); } .scene-img { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } SONE-166
.grid-bg { background-image: linear-gradient(to right, #80808005 1px, transparent 1px), linear-gradient(to bottom, #80808005 1px, transparent 1px); background-size: 24px 24px; } fadeIn 0.4s ease-out forwards
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SONE-166 — Feature</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://unpkg.com/lucide@latest"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@1,500&display=swap" rel="stylesheet"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: #050505; color: #e5e5e5; overflow-x: hidden; } } .scene-card:hover { transform: translateY(-4px)
.glow-orb { animation: pulse-slow 6s ease-in-out infinite; } .float-anim { animation: float 5s ease-in-out infinite; }
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #050505; } ::-webkit-scrollbar-thumb { background: #1A1D21; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #2a2d31; }