Spaces:
Running
Running
| /* Additional custom styles beyond Tailwind */ | |
| /* 3D Perspective Container */ | |
| .perspective-container { | |
| perspective: 2000px; | |
| transform-style: preserve-3d; | |
| } | |
| /* 3D Glass Panel with Depth */ | |
| .glass-panel-3d { | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(20px) saturate(180%); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| box-shadow: | |
| 0 20px 60px rgba(0, 0, 0, 0.08), | |
| 0 8px 25px rgba(0, 0, 0, 0.05), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.6), | |
| 0 0 0 1px rgba(255, 255, 255, 0.2); | |
| border-radius: 24px; | |
| transform: translateZ(0); | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .glass-panel-3d::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(255, 255, 255, 0.4) 0%, | |
| rgba(255, 255, 255, 0.1) 50%, | |
| rgba(255, 255, 255, 0.2) 100% | |
| ); | |
| pointer-events: none; | |
| border-radius: inherit; | |
| } | |
| .glass-panel-3d:hover { | |
| transform: translateY(-8px) translateZ(20px) rotateX(2deg); | |
| box-shadow: | |
| 0 30px 80px rgba(0, 0, 0, 0.12), | |
| 0 15px 35px rgba(0, 0, 0, 0.08), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.8), | |
| 0 0 0 1px rgba(59, 130, 246, 0.15); | |
| } | |
| /* 3D Card Hover Effects */ | |
| .card-3d { | |
| transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-style: preserve-3d; | |
| position: relative; | |
| } | |
| .card-3d:hover { | |
| transform: translateY(-12px) rotateX(5deg) rotateY(-2deg) scale(1.02); | |
| box-shadow: | |
| 0 25px 50px -12px rgba(0, 0, 0, 0.25), | |
| 0 0 0 1px rgba(59, 130, 246, 0.1); | |
| } | |
| .card-3d::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(255, 255, 255, 0.3) 0%, | |
| transparent 50%, | |
| rgba(255, 255, 255, 0.1) 100% | |
| ); | |
| border-radius: inherit; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .card-3d:hover::after { | |
| opacity: 1; | |
| } | |
| /* 3D Button Effects */ | |
| .btn-3d { | |
| position: relative; | |
| transform: translateZ(0); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: | |
| 0 4px 6px rgba(59, 130, 246, 0.2), | |
| 0 10px 20px rgba(59, 130, 246, 0.15), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.3); | |
| } | |
| .btn-3d:hover { | |
| transform: translateY(-3px) translateZ(10px) scale(1.02); | |
| box-shadow: | |
| 0 8px 15px rgba(59, 130, 246, 0.3), | |
| 0 20px 40px rgba(59, 130, 246, 0.2), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.4); | |
| } | |
| .btn-3d:active { | |
| transform: translateY(-1px) translateZ(5px) scale(0.98); | |
| box-shadow: | |
| 0 2px 4px rgba(59, 130, 246, 0.2), | |
| 0 5px 10px rgba(59, 130, 246, 0.15); | |
| } | |
| /* Floating Animation */ | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0px) rotateX(0deg) rotateY(0deg); | |
| } | |
| 25% { | |
| transform: translateY(-10px) rotateX(2deg) rotateY(-2deg); | |
| } | |
| 50% { | |
| transform: translateY(-5px) rotateX(-1deg) rotateY(1deg); | |
| } | |
| 75% { | |
| transform: translateY(-15px) rotateX(1deg) rotateY(-1deg); | |
| } | |
| } | |
| .floating-3d { | |
| animation: float 6s ease-in-out infinite; | |
| transform-style: preserve-3d; | |
| } | |
| .floating-3d-delay-1 { | |
| animation-delay: -1s; | |
| } | |
| .floating-3d-delay-2 { | |
| animation-delay: -2s; | |
| } | |
| .floating-3d-delay-3 { | |
| animation-delay: -3s; | |
| } | |
| /* 3D Gradient Text */ | |
| .gradient-text-3d { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 0 10px 30px rgba(59, 130, 246, 0.3); | |
| transform: translateZ(0); | |
| } | |
| /* 3D Model Cards */ | |
| .model-card-3d { | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-style: preserve-3d; | |
| position: relative; | |
| background: rgba(255, 255, 255, 0.9); | |
| border: 1px solid rgba(255, 255, 255, 0.5); | |
| } | |
| .model-card-3d::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -2px; | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), transparent, rgba(147, 51, 234, 0.2)); | |
| border-radius: inherit; | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .model-card-3d:hover::before { | |
| opacity: 1; | |
| } | |
| .model-card-3d:hover { | |
| transform: translateY(-8px) translateZ(30px) rotateX(5deg); | |
| box-shadow: | |
| 0 20px 40px rgba(59, 130, 246, 0.2), | |
| 0 0 0 1px rgba(59, 130, 246, 0.1); | |
| } | |
| .model-card-3d.active { | |
| border-color: #3b82f6; | |
| background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%); | |
| box-shadow: | |
| 0 0 0 3px rgba(59, 130, 246, 0.2), | |
| 0 10px 30px rgba(59, 130, 246, 0.15), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.8); | |
| transform: translateZ(20px); | |
| } | |
| /* 3D Input Fields */ | |
| .input-3d { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(209, 213, 219, 0.5); | |
| background: rgba(249, 250, 251, 0.8); | |
| box-shadow: | |
| inset 0 2px 4px rgba(0, 0, 0, 0.02), | |
| 0 1px 2px rgba(0, 0, 0, 0.02); | |
| } | |
| .input-3d:focus { | |
| transform: translateY(-2px) translateZ(10px); | |
| box-shadow: | |
| 0 4px 12px rgba(59, 130, 246, 0.15), | |
| 0 0 0 3px rgba(59, 130, 246, 0.1), | |
| inset 0 2px 4px rgba(0, 0, 0, 0.02); | |
| border-color: #3b82f6; | |
| background: rgba(255, 255, 255, 0.95); | |
| } | |
| /* 3D Timeline */ | |
| .timeline-3d { | |
| position: relative; | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| .timeline-marker-3d { | |
| transform: translateZ(10px); | |
| box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .timeline-marker-3d:hover { | |
| transform: translateZ(20px) scale(1.1); | |
| } | |
| /* 3D Idea Cards */ | |
| .idea-card-3d { | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-style: preserve-3d; | |
| background: rgba(255, 255, 255, 0.9); | |
| border: 1px solid rgba(255, 255, 255, 0.5); | |
| position: relative; | |
| } | |
| .idea-card-3d::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: inherit; | |
| padding: 2px; | |
| background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(59, 130, 246, 0.3)); | |
| -webkit-mask: | |
| linear-gradient(#fff 0 0) content-box, | |
| linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .idea-card-3d:hover::before { | |
| opacity: 1; | |
| } | |
| .idea-card-3d:hover { | |
| transform: translateY(-10px) translateZ(30px) rotateX(3deg); | |
| box-shadow: | |
| 0 25px 50px rgba(0, 0, 0, 0.15), | |
| 0 10px 20px rgba(236, 72, 153, 0.1); | |
| } | |
| .idea-card-3d.selected { | |
| border-color: #ec4899; | |
| background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 100%); | |
| transform: translateZ(40px) scale(1.02); | |
| box-shadow: | |
| 0 0 0 3px rgba(236, 72, 153, 0.2), | |
| 0 20px 40px rgba(236, 72, 153, 0.2); | |
| } | |
| /* 3D Navigation */ | |
| .nav-3d { | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(20px) saturate(180%); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.5); | |
| box-shadow: | |
| 0 4px 20px rgba(0, 0, 0, 0.05), | |
| 0 1px 0 rgba(255, 255, 255, 0.8) inset; | |
| transform: translateZ(50px); | |
| } | |
| /* 3D Tabs */ | |
| .tab-3d { | |
| position: relative; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-style: preserve-3d; | |
| } | |
| .tab-3d::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| width: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #3b82f6, #60a5fa); | |
| transition: all 0.3s ease; | |
| transform: translateX(-50%); | |
| border-radius: 3px 3px 0 0; | |
| box-shadow: 0 -2px 10px rgba(59, 130, 246, 0.4); | |
| } | |
| .tab-3d:hover::after, | |
| .tab-3d.active::after { | |
| width: 80%; | |
| } | |
| .tab-3d:hover { | |
| transform: translateY(-2px); | |
| text-shadow: 0 2px 10px rgba(59, 130, 246, 0.3); | |
| } | |
| /* 3D Storyboard */ | |
| .storyboard-3d { | |
| transform-style: preserve-3d; | |
| transition: all 0.4s ease; | |
| } | |
| .storyboard-3d:hover { | |
| transform: rotateY(-5deg) rotateX(5deg) translateZ(20px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); | |
| } | |
| /* 3D Comparison */ | |
| .comparison-3d { | |
| transform-style: preserve-3d; | |
| perspective: 2000px; | |
| } | |
| .comparison-pane-3d { | |
| transition: all 0.4s ease; | |
| transform: rotateY(-5deg); | |
| box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .comparison-pane-3d:hover { | |
| transform: rotateY(0deg) translateZ(30px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| /* 3D API Cards */ | |
| .api-card-3d { | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-style: preserve-3d; | |
| background: rgba(255, 255, 255, 0.9); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .api-card-3d::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| rgba(255, 255, 255, 0.4), | |
| transparent | |
| ); | |
| transition: left 0.5s ease; | |
| } | |
| .api-card-3d:hover::before { | |
| left: 100%; | |
| } | |
| .api-card-3d:hover { | |
| transform: translateY(-10px) translateZ(40px) rotateX(5deg); | |
| box-shadow: | |
| 0 30px 60px rgba(99, 102, 241, 0.2), | |
| 0 0 0 1px rgba(99, 102, 241, 0.1); | |
| } | |
| /* 3D Support Cards */ | |
| .support-card-3d { | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-style: preserve-3d; | |
| position: relative; | |
| } | |
| .support-card-3d:hover { | |
| transform: translateY(-8px) translateZ(30px) rotateY(3deg); | |
| box-shadow: | |
| 0 25px 50px rgba(245, 158, 11, 0.15), | |
| 0 0 0 1px rgba(245, 158, 11, 0.1); | |
| } | |
| /* 3D Modal */ | |
| .modal-3d { | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| .modal-content-3d { | |
| transform: translateZ(100px); | |
| box-shadow: | |
| 0 25px 50px -12px rgba(0, 0, 0, 0.25), | |
| 0 0 0 1px rgba(255, 255, 255, 0.1); | |
| animation: modalEnter 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| @keyframes modalEnter { | |
| from { | |
| opacity: 0; | |
| transform: translateZ(-100px) rotateX(10deg) scale(0.9); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateZ(100px) rotateX(0deg) scale(1); | |
| } | |
| } | |
| /* 3D Sliders */ | |
| .slider-thumb-3d::-webkit-slider-thumb { | |
| appearance: none; | |
| width: 24px; | |
| height: 24px; | |
| background: linear-gradient(135deg, #3b82f6, #60a5fa); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| box-shadow: | |
| 0 4px 10px rgba(59, 130, 246, 0.4), | |
| 0 0 0 3px rgba(255, 255, 255, 0.8), | |
| inset 0 2px 4px rgba(255, 255, 255, 0.3); | |
| border: 2px solid white; | |
| transition: all 0.2s ease; | |
| transform: translateZ(10px); | |
| } | |
| .slider-thumb-3d::-webkit-slider-thumb:hover { | |
| transform: translateZ(20px) scale(1.1); | |
| box-shadow: | |
| 0 6px 15px rgba(59, 130, 246, 0.5), | |
| 0 0 0 4px rgba(255, 255, 255, 0.9), | |
| inset 0 2px 4px rgba(255, 255, 255, 0.3); | |
| } | |
| .slider-thumb-3d::-webkit-slider-runnable-track { | |
| height: 8px; | |
| border-radius: 4px; | |
| background: linear-gradient(90deg, #e5e7eb, #d1d5db); | |
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); | |
| transform: translateZ(0); | |
| } | |
| /* 3D Badges */ | |
| .badge-3d { | |
| transform: translateZ(20px); | |
| box-shadow: | |
| 0 4px 10px rgba(0, 0, 0, 0.1), | |
| 0 0 0 1px rgba(255, 255, 255, 0.3) inset; | |
| transition: all 0.3s ease; | |
| } | |
| .badge-3d:hover { | |
| transform: translateZ(30px) scale(1.05); | |
| } | |
| /* 3D Glow Button */ | |
| .glow-button-3d { | |
| background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%); | |
| box-shadow: | |
| 0 4px 15px rgba(59, 130, 246, 0.4), | |
| 0 10px 30px rgba(59, 130, 246, 0.2), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.3), | |
| 0 0 20px rgba(59, 130, 246, 0.1); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .glow-button-3d::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| rgba(255, 255, 255, 0.3), | |
| transparent | |
| ); | |
| transition: left 0.5s ease; | |
| } | |
| .glow-button-3d:hover::before { | |
| left: 100%; | |
| } | |
| .glow-button-3d:hover { | |
| box-shadow: | |
| 0 8px 25px rgba(59, 130, 246, 0.5), | |
| 0 15px 40px rgba(59, 130, 246, 0.3), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.4), | |
| 0 0 30px rgba(59, 130, 246, 0.2); | |
| transform: translateY(-3px) translateZ(20px) scale(1.02); | |
| } | |
| /* 3D Toggle Switch */ | |
| .toggle-3d { | |
| transform-style: preserve-3d; | |
| transition: all 0.3s ease; | |
| } | |
| .toggle-3d:checked { | |
| transform: translateZ(10px); | |
| box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); | |
| } | |
| /* Original styles maintained for compatibility */ | |
| .temporal-grid { | |
| display: grid; | |
| grid-template-columns: 80px 1fr; | |
| gap: 1rem; | |
| align-items: start; | |
| } | |
| .time-marker { | |
| font-variant-numeric: tabular-nums; | |
| letter-spacing: -0.02em; | |
| } | |
| .motion-blur { | |
| filter: blur(0.5px); | |
| } | |
| /* Custom scrollbar for prompt output */ | |
| #promptOutput::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| #promptOutput::-webkit-scrollbar-track { | |
| background: rgba(30, 41, 59, 0.3); | |
| border-radius: 4px; | |
| } | |
| #promptOutput::-webkit-scrollbar-thumb { | |
| background: rgba(102, 126, 234, 0.5); | |
| border-radius: 4px; | |
| } | |
| #promptOutput::-webkit-scrollbar-thumb:hover { | |
| background: rgba(102, 126, 234, 0.8); | |
| } | |
| /* Storyboard preview styles */ | |
| .storyboard-frame { | |
| aspect-ratio: 16/9; | |
| background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); | |
| border: 2px solid #e5e7eb; | |
| border-radius: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .storyboard-frame:hover { | |
| border-color: #3b82f6; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); | |
| } | |
| /* Template cards */ | |
| .template-card { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .template-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Rating stars animation */ | |
| .star-rating { | |
| transition: color 0.2s ease; | |
| } | |
| .star-rating:hover { | |
| transform: scale(1.2); | |
| } | |
| /* Comparison view */ | |
| .comparison-pane { | |
| transition: all 0.3s ease; | |
| } | |
| .comparison-pane:hover { | |
| border-color: #3b82f6; | |
| } | |
| /* Audio/Foley section */ | |
| .audio-indicator { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| /* Animation for generation */ | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .prompt-segment { | |
| animation: slideIn 0.3s ease-out forwards; | |
| } | |
| .prompt-segment:nth-child(1) { animation-delay: 0.05s; } | |
| .prompt-segment:nth-child(2) { animation-delay: 0.1s; } | |
| .prompt-segment:nth-child(3) { animation-delay: 0.15s; } | |
| .prompt-segment:nth-child(4) { animation-delay: 0.2s; } | |
| .prompt-segment:nth-child(5) { animation-delay: 0.25s; } | |
| .prompt-segment:nth-child(6) { animation-delay: 0.3s; } | |
| .prompt-segment:nth-child(7) { animation-delay: 0.35s; } | |
| .prompt-segment:nth-child(8) { animation-delay: 0.4s; } | |
| .prompt-segment:nth-child(9) { animation-delay: 0.45s; } | |
| .prompt-segment:nth-child(10) { animation-delay: 0.5s; } | |
| /* 3D Shimmer Effect */ | |
| @keyframes shimmer { | |
| 0% { background-position: -200% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| .shimmer-3d { | |
| background: linear-gradient( | |
| 90deg, | |
| rgba(255, 255, 255, 0) 0%, | |
| rgba(255, 255, 255, 0.4) 50%, | |
| rgba(255, 255, 255, 0) 100% | |
| ); | |
| background-size: 200% 100%; | |
| animation: shimmer 2s infinite; | |
| } | |
| /* 3D Depth Layers */ | |
| .depth-layer-1 { transform: translateZ(10px); } | |
| .depth-layer-2 { transform: translateZ(20px); } | |
| .depth-layer-3 { transform: translateZ(30px); } | |
| .depth-layer-4 { transform: translateZ(40px); } | |
| .depth-layer-5 { transform: translateZ(50px); } | |
| /* Parallax Container */ | |
| .parallax-container { | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| .parallax-layer { | |
| transition: transform 0.1s ease-out; | |
| } |