diff --git "a/index.html" "b/index.html" --- "a/index.html" +++ "b/index.html" @@ -76,56 +76,36 @@ background: radial-gradient(circle at center, #0f172a 0%, #020617 100%); } - .chat-container { - height: 500px; - overflow-y: auto; - scrollbar-width: thin; - scrollbar-color: #4f46e5 #1e1b4b; - } - .chat-container::-webkit-scrollbar { width: 6px; } - .chat-container::-webkit-scrollbar-track { background: #1e1b4b; } - .chat-container::-webkit-scrollbar-thumb { - background-color: #4f46e5; - border-radius: 3px; + /* CHAT CONSOLE STYLES */ + .chat-message { + animation: fadeIn 0.25s ease-out; } - - .typing-indicator::after { - content: '...'; - animation: typing 1.5s infinite; - display: inline-block; - width: 20px; - text-align: left; - } - @keyframes typing { - 0% { content: '.'; } - 33% { content: '..'; } - 66% { content: '...'; } + @keyframes fadeIn { + from { opacity: 0; transform: translateY(4px); } + to { opacity: 1; transform: translateY(0); } } - .modal { - transition: opacity 0.3s ease, transform 0.3s ease; - } + /* Modal visibility helpers */ .modal-hidden { opacity: 0; - transform: translateY(20px); pointer-events: none; + transform: translateY(10px); + transition: opacity 0.2s ease, transform 0.2s ease; } .modal-visible { opacity: 1; + pointer-events: auto; transform: translateY(0); } - @keyframes orb-breathe { - 0% { transform: scale(1); } - 50% { transform: scale(1.08); } - 100% { transform: scale(1); } - } - @keyframes orb-glow { - 0% { filter: drop-shadow(0 0 12px #6366f1aa);} - 50% { filter: drop-shadow(0 0 28px #a21cafbb);} - 100% { filter: drop-shadow(0 0 12px #6366f1aa);} + /* Neural visualization canvas */ + #neural-canvas { + width: 100%; + height: 100%; + display: block; } + /* Conscious orb hover amplification */ #conscious-orb-container { animation: orb-breathe 5s ease-in-out infinite, orb-glow 3s ease-in-out infinite; transition: box-shadow 0.4s, filter 0.4s; @@ -135,6 +115,17 @@ filter: drop-shadow(0 0 40px #a21cafee) brightness(1.12); } + @keyframes orb-breathe { + 0% { transform: scale(1); filter: brightness(1); } + 50% { transform: scale(1.04); filter: brightness(1.05); } + 100% { transform: scale(1); filter: brightness(1); } + } + @keyframes orb-glow { + 0% { box-shadow: 0 0 40px rgba(129, 140, 248, 0.6); } + 50% { box-shadow: 0 0 75px rgba(236, 72, 153, 0.85); } + 100% { box-shadow: 0 0 40px rgba(129, 140, 248, 0.6); } + } + /* Site-wide consistency styles */ .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.65); } .thin-scroll { @@ -160,36 +151,110 @@
-