/* Custom 3D Scene Styles */ :root { --primary: #4f46e5; --secondary: #0f172a; --accent: #818cf8; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; perspective: 1000px; /* Global perspective just in case */ } .perspective-container { perspective: 1200px; } .scene { perspective: 1200px; } .carousel { transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); } /* Room Card Styling */ .room-card { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 20px; background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow: hidden; transform-style: preserve-3d; transition: all 0.5s ease; cursor: pointer; } .room-card:hover { border-color: var(--accent); box-shadow: 0 0 20px rgba(99, 102, 241, 0.4); } .room-card.active { box-shadow: 0 0 30px rgba(99, 102, 241, 0.6); border: 2px solid var(--primary); } .room-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); pointer-events: none; } .room-image { width: 100%; height: 60%; object-fit: cover; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .room-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transform: translateZ(20px); /* Pop out text */ } /* Empty Room State */ .room-card.empty-state { background: rgba(15, 23, 42, 0.6); border: 2px dashed rgba(99, 102, 241, 0.3); display: flex; justify-content: center; align-items: center; } .room-card.empty-state:hover { background: rgba(99, 102, 241, 0.1); border-color: var(--accent); } .plus-icon-large { width: 64px; height: 64px; color: rgba(99, 102, 241, 0.5); transition: transform 0.3s; } .room-card.empty-state:hover .plus-icon-large { transform: scale(1.2) rotate(90deg); color: var(--accent); } /* Animations */ @keyframes blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } } .animate-blob { animation: blob 7s infinite; } .animation-delay-2000 { animation-delay: 2s; } .animation-delay-4000 { animation-delay: 4s; } /* Scrollbar hide */ ::-webkit-scrollbar { display: none; }