Spaces:
Sleeping
Sleeping
| /* Typography - Ancient Transmission Scripts */ | |
| @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Uncial+Antiqua&family=Metamorphous&display=swap'); | |
| /* Living Nexus Global Styles - Ancient Botanical Interface */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| height: 100vh; | |
| width: 100vw; | |
| overflow: hidden; | |
| font-family: 'Metamorphous', 'Uncial Antiqua', serif; | |
| background: #0F1B13; /* Deep forest void */ | |
| color: #A67B5B; /* Earthy copper text */ | |
| /* Subtle organic texture */ | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0,0h1v1h-1zM2,2h1v1h-1z' fill='%232D5016' opacity='0.03'/%3E%3C/svg%3E"); | |
| } | |
| #root { | |
| height: 100vh; | |
| width: 100vw; | |
| position: relative; | |
| } | |
| /* Main Living Nexus Artifact Container */ | |
| .living-nexus-artifact { | |
| position: relative; | |
| width: 100vw; | |
| height: 100vh; | |
| overflow: hidden; | |
| background: #0F1B13; | |
| } | |
| /* Main Visualization Container - Full viewport background */ | |
| .visualization-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| z-index: 1; | |
| } | |
| /* Audio Player Container - Fixed as left vertical dock */ | |
| .audio-player-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| z-index: 1000; | |
| pointer-events: none; | |
| width: 350px; /* Fixed width for the dock */ | |
| } | |
| .audio-player-container .control-plinth { | |
| pointer-events: all; | |
| } | |
| /* Interaction States for the Artifact */ | |
| .living-nexus-artifact.dormant { | |
| opacity: 0.8; | |
| } | |
| .living-nexus-artifact.awakening { | |
| animation: awakeningSequence 2s ease-in-out; | |
| } | |
| .living-nexus-artifact.alive { | |
| opacity: 1; | |
| } | |
| /* Ancient Botanical & Celestial Color Palette */ | |
| :root { | |
| /* Deep Forest & Earth Tones */ | |
| --forest-deep: #0F1B13; /* Deep forest background */ | |
| --forest-medium: #1C2E1F; /* Medium forest */ | |
| --forest-light: #2D5016; /* Light forest green */ | |
| --moss-dark: #3A4D2A; /* Dark moss */ | |
| --moss-medium: #4F6B3E; /* Medium moss */ | |
| --moss-light: #6B8C42; /* Light moss */ | |
| /* Earthy Copper & Bronze */ | |
| --copper-dark: #5D4037; /* Deep earth copper */ | |
| --copper-medium: #795548; /* Medium copper */ | |
| --copper-light: #A67B5B; /* Light copper text */ | |
| --bronze-warm: #8D6E63; /* Warm bronze */ | |
| /* Celestial Nebula Accents */ | |
| --nebula-deep: #2A1810; /* Deep space brown */ | |
| --nebula-purple: #4A306B; /* Celestial purple */ | |
| --nebula-teal: #3E5B4C; /* Nebula teal */ | |
| --stellar-copper: #B8860B; /* Stellar copper highlights */ | |
| /* Organic Textures */ | |
| --bark-brown: #3E2723; /* Tree bark */ | |
| --root-brown: #4E342E; /* Root brown */ | |
| --earth-dark: #1B0E0A; /* Deep earth */ | |
| /* Gradients */ | |
| --forest-gradient: linear-gradient( | |
| 135deg, | |
| var(--forest-light) 0%, | |
| var(--forest-medium) 50%, | |
| var(--forest-deep) 100% | |
| ); | |
| --copper-gradient: linear-gradient( | |
| 135deg, | |
| var(--stellar-copper) 0%, | |
| var(--bronze-warm) 50%, | |
| var(--copper-dark) 100% | |
| ); | |
| --nebula-gradient: linear-gradient( | |
| 45deg, | |
| var(--nebula-purple) 0%, | |
| var(--nebula-teal) 50%, | |
| var(--forest-medium) 100% | |
| ); | |
| } | |
| /* Organic Energy Matrix */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 20% 80%, rgba(77, 107, 62, 0.06) 0%, transparent 60%), | |
| radial-gradient(circle at 80% 20%, rgba(74, 48, 107, 0.04) 0%, transparent 60%), | |
| radial-gradient(circle at 40% 40%, rgba(166, 123, 91, 0.03) 0%, transparent 70%), | |
| radial-gradient(circle at 60% 60%, rgba(62, 91, 76, 0.02) 0%, transparent 80%); | |
| background-size: 900px 900px, 700px 700px, 1100px 1100px, 500px 500px; | |
| animation: organicPulse 20s ease-in-out infinite; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| @keyframes organicPulse { | |
| 0%, 100% { | |
| opacity: 0.15; | |
| transform: scale(1) rotate(0deg); | |
| } | |
| 25% { | |
| opacity: 0.25; | |
| transform: scale(1.01) rotate(0.2deg); | |
| } | |
| 50% { | |
| opacity: 0.35; | |
| transform: scale(1.02) rotate(0deg); | |
| } | |
| 75% { | |
| opacity: 0.2; | |
| transform: scale(1.01) rotate(-0.2deg); | |
| } | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Cinzel', serif; | |
| font-weight: 700; | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| color: var(--copper-light); | |
| } | |
| /* Runic Text Classes */ | |
| .runic-text { | |
| font-family: 'Uncial Antiqua', serif; | |
| letter-spacing: 0.15em; | |
| text-transform: lowercase; | |
| color: var(--bronze-warm); | |
| } | |
| .transmission-text { | |
| font-family: 'Metamorphous', serif; | |
| color: var(--moss-medium); | |
| } | |
| .ancient-title { | |
| font-family: 'Cinzel', serif; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3em; | |
| color: var(--stellar-copper); | |
| } | |
| /* Runic Glyph Animation Base */ | |
| .glyph, .rune { | |
| display: inline-block; | |
| color: var(--stellar-copper); | |
| transition: all 0.4s ease; | |
| } | |
| .glyph:hover, .rune:hover { | |
| transform: scale(1.15) rotate(5deg); | |
| color: var(--copper-light); | |
| } | |
| /* Living Tree Styles */ | |
| .world-tree { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| z-index: 1; | |
| pointer-events: none; /* Allow clicks to pass through to controls */ | |
| } | |
| .living-nexus-artifact .world-tree { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .tree-trunk { | |
| stroke: var(--bark-brown); | |
| stroke-width: 8; | |
| animation: trunkPulse 3s ease-in-out infinite; | |
| } | |
| @keyframes trunkPulse { | |
| 0%, 100% { | |
| stroke-width: 8; | |
| opacity: 0.8; | |
| } | |
| 50% { | |
| stroke-width: 12; | |
| opacity: 1; | |
| } | |
| } | |
| .tree-branches { | |
| stroke: var(--bronze-warm); | |
| stroke-width: 2; | |
| opacity: 0.7; | |
| animation: branchShimmer 2s ease-in-out infinite; | |
| } | |
| @keyframes branchShimmer { | |
| 0%, 100% { opacity: 0.6; } | |
| 50% { opacity: 0.9; } | |
| } | |
| .tree-roots { | |
| stroke: var(--root-brown); | |
| stroke-width: 6; | |
| opacity: 0.8; | |
| animation: rootGlow 4s ease-in-out infinite; | |
| } | |
| @keyframes rootGlow { | |
| 0%, 100% { | |
| opacity: 0.8; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| } | |
| /* Core Glyphs */ | |
| .core-glyph { | |
| fill: var(--stellar-copper); | |
| stroke: var(--bronze-warm); | |
| stroke-width: 1; | |
| animation: glyphPulse 2.5s ease-in-out infinite; | |
| } | |
| @keyframes glyphPulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| opacity: 0.8; | |
| } | |
| 50% { | |
| transform: scale(1.1); | |
| opacity: 1; | |
| } | |
| } | |
| /* Ember Particles */ | |
| .ember-particle { | |
| fill: var(--moss-light); | |
| opacity: 0.7; | |
| animation: emberFloat 3s ease-in-out infinite; | |
| } | |
| @keyframes emberFloat { | |
| 0% { | |
| transform: translateY(0px); | |
| opacity: 0.7; | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(0px); | |
| opacity: 0.7; | |
| } | |
| } | |
| /* Energy Flow Paths */ | |
| .energy-path { | |
| stroke: var(--stellar-copper); | |
| stroke-width: 2; | |
| fill: none; | |
| opacity: 0.4; | |
| stroke-dasharray: 5 5; | |
| animation: energyFlow 4s linear infinite; | |
| } | |
| /* Control Plinth Component Styles - Updated for Dock */ | |
| .control-plinth { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 15px; | |
| min-width: 600px; | |
| } | |
| /* Vertical Dock Specific Styles */ | |
| .control-plinth-dock { | |
| font-family: 'Cinzel', serif; | |
| } | |
| .control-plinth-dock .central-glyph { | |
| background: var(--copper-gradient); | |
| border: 2px solid var(--stellar-copper); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--forest-deep); | |
| transition: all 0.3s ease; | |
| border-radius: 50%; | |
| } | |
| .control-plinth-dock .central-glyph:hover { | |
| transform: scale(1.1); | |
| background: var(--nebula-gradient); | |
| } | |
| .control-plinth-dock .plinth-control { | |
| background: transparent; | |
| border: 1px solid var(--bronze-warm); | |
| color: var(--copper-light); | |
| border-radius: 6px; | |
| font-family: 'Cinzel', serif; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .control-plinth-dock .plinth-control:hover { | |
| background: var(--bronze-warm); | |
| color: var(--forest-deep); | |
| } | |
| .control-plinth-dock .timeline-channel { | |
| background: var(--bark-brown); | |
| border-radius: 4px; | |
| position: relative; | |
| border: 1px solid var(--bronze-warm); | |
| overflow: hidden; | |
| } | |
| .control-plinth-dock .timeline-indicator { | |
| height: 100%; | |
| background: var(--copper-gradient); | |
| border-radius: 4px; | |
| transition: width 0.1s ease; | |
| } | |
| .control-plinth-dock .volume-slider { | |
| height: 4px; | |
| background: var(--bark-brown); | |
| border-radius: 2px; | |
| outline: none; | |
| cursor: pointer; | |
| -webkit-appearance: none; | |
| } | |
| .control-plinth-dock .volume-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: var(--stellar-copper); | |
| cursor: pointer; | |
| } | |
| /* Enhanced Dock Animations */ | |
| @keyframes glyphPulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| } | |
| /* Collapsed Dock Scrollbar Styling */ | |
| .control-plinth-dock .track-list::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .control-plinth-dock .track-list::-webkit-scrollbar-track { | |
| background: rgba(166, 123, 91, 0.1); | |
| border-radius: 3px; | |
| } | |
| .control-plinth-dock .track-list::-webkit-scrollbar-thumb { | |
| background: rgba(166, 123, 91, 0.4); | |
| border-radius: 3px; | |
| } | |
| .control-plinth-dock .track-list::-webkit-scrollbar-thumb:hover { | |
| background: rgba(166, 123, 91, 0.6); | |
| } | |
| .track-info { | |
| text-align: center; | |
| margin-bottom: 10px; | |
| } | |
| .track-title { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--stellar-copper); | |
| margin-bottom: 4px; | |
| } | |
| .track-artist { | |
| font-size: 14px; | |
| color: var(--bronze-warm); | |
| } | |
| .plinth-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .volume-control { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .volume-slider { | |
| width: 80px; | |
| height: 4px; | |
| background: var(--bark-brown); | |
| border-radius: 2px; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| .volume-slider::-webkit-slider-thumb { | |
| appearance: none; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: var(--stellar-copper); | |
| cursor: pointer; | |
| } | |
| .time-display { | |
| display: flex; | |
| gap: 8px; | |
| font-size: 12px; | |
| color: var(--bronze-warm); | |
| font-family: 'Cinzel', serif; | |
| } | |
| .track-list-tablet { | |
| background: rgba(0, 0, 0, 0.8); | |
| border: 1px solid rgba(255, 215, 0, 0.2); | |
| border-radius: 6px; | |
| padding: 15px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); | |
| max-height: 200px; | |
| overflow-y: auto; | |
| min-width: 350px; | |
| margin-top: 10px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .tablet-header { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid rgba(255, 215, 0, 0.3); | |
| } | |
| .tablet-header h3 { | |
| margin: 0; | |
| color: #FFD700; | |
| font-size: 14px; | |
| } | |
| .close-tablet { | |
| background: none; | |
| border: 1px solid var(--burnished-bronze); | |
| color: var(--burnished-bronze); | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| } | |
| .close-tablet:hover { | |
| background: var(--burnished-bronze); | |
| color: var(--deep-earth); | |
| } | |
| .track-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .track-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 6px 10px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| border: 1px solid transparent; | |
| } | |
| .track-item:hover { | |
| background: var(--stone-gray); | |
| border-color: var(--burnished-bronze); | |
| } | |
| .track-item.active { | |
| background: var(--burnished-bronze); | |
| border-color: var(--mystical-gold); | |
| } | |
| .track-item.active .track-name { | |
| color: var(--mystical-gold); | |
| } | |
| .track-number { | |
| font-size: 12px; | |
| color: var(--bronze-warm); | |
| min-width: 20px; | |
| } | |
| .track-details { | |
| flex: 1; | |
| } | |
| .track-name { | |
| font-size: 12px; | |
| color: var(--copper-light); | |
| margin-bottom: 1px; | |
| } | |
| /* Social Glyphs Component Styles */ | |
| .social-glyphs { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| z-index: 1000; | |
| } | |
| .social-glyph { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 8px; | |
| background: var(--earth-dark); | |
| border: 1px solid var(--bronze-warm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| color: var(--bronze-warm); | |
| font-size: 18px; | |
| position: relative; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); | |
| } | |
| .social-glyph:hover { | |
| background: var(--bronze-warm); | |
| color: var(--stellar-copper); | |
| transform: scale(1.1); | |
| border-color: var(--stellar-copper); | |
| } | |
| .social-glyph::before { | |
| content: ''; | |
| position: absolute; | |
| top: -1px; | |
| left: -1px; | |
| right: -1px; | |
| bottom: -1px; | |
| background: linear-gradient(45deg, var(--stellar-copper), var(--bronze-warm)); | |
| border-radius: 9px; | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .social-glyph:hover::before { | |
| opacity: 0.2; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| bottom: 120%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--earth-dark); | |
| color: var(--copper-light); | |
| padding: 8px 12px; | |
| border-radius: 6px; | |
| border: 1px solid var(--bronze-warm); | |
| font-size: 12px; | |
| white-space: nowrap; | |
| opacity: 1; | |
| pointer-events: none; | |
| z-index: 1001; | |
| font-family: 'Cinzel', serif; | |
| letter-spacing: 1px; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); | |
| } | |
| .tooltip::after { | |
| content: ''; | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border: 5px solid transparent; | |
| border-top-color: var(--bronze-warm); | |
| } | |
| /* Glyph Animation */ | |
| .social-glyph { | |
| animation: glyphAppear 0.6s ease-out backwards; | |
| } | |
| .social-glyph:nth-child(1) { animation-delay: 0.1s; } | |
| .social-glyph:nth-child(2) { animation-delay: 0.2s; } | |
| .social-glyph:nth-child(3) { animation-delay: 0.3s; } | |
| .social-glyph:nth-child(4) { animation-delay: 0.4s; } | |
| .social-glyph:nth-child(5) { animation-delay: 0.5s; } | |
| @keyframes glyphAppear { | |
| 0% { | |
| opacity: 0; | |
| transform: scale(0.5) translateY(20px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1) translateY(0); | |
| } | |
| } | |
| /* Platform-specific subtle effects */ | |
| .social-glyph[data-platform="spotify"]:hover { | |
| border-color: #1DB954; | |
| } | |
| .social-glyph[data-platform="apple"]:hover { | |
| border-color: #FA57C1; | |
| } | |
| .social-glyph[data-platform="instagram"]:hover { | |
| border-color: #E4405F; | |
| } | |
| .social-glyph[data-platform="youtube"]:hover { | |
| border-color: #FF0000; | |
| } | |
| .social-glyph[data-platform="twitter"]:hover { | |
| border-color: #1DA1F2; | |
| } | |
| @keyframes energyFlow { | |
| 0% { stroke-dashoffset: 0; } | |
| 100% { stroke-dashoffset: 40; } | |
| } | |
| /* Control Plinth Styles */ | |
| .control-plinth { | |
| position: relative; | |
| margin: 15px auto; | |
| background: rgba(15, 27, 19, 0.9); | |
| border: 1px solid rgba(166, 123, 91, 0.3); | |
| border-radius: 8px; | |
| padding: 15px 25px; | |
| box-shadow: | |
| 0 4px 20px rgba(0, 0, 0, 0.8), | |
| inset 0 1px 3px rgba(166, 123, 91, 0.1); | |
| backdrop-filter: blur(15px); | |
| max-width: 700px; | |
| width: 85%; | |
| } | |
| .control-plinth::before { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| background: var(--forest-gradient); | |
| border-radius: 14px; | |
| z-index: -1; | |
| opacity: 0.3; | |
| animation: plinthGlow 6s ease-in-out infinite; | |
| } | |
| @keyframes plinthGlow { | |
| 0%, 100% { opacity: 0.2; } | |
| 50% { opacity: 0.3; } | |
| } | |
| /* Plinth Controls */ | |
| .plinth-control { | |
| background: transparent; | |
| border: 1px solid var(--bronze-warm); | |
| color: var(--copper-light); | |
| padding: 8px 16px; | |
| border-radius: 6px; | |
| font-family: 'Cinzel', serif; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| margin: 0 5px; | |
| } | |
| .plinth-control:hover { | |
| background: var(--bronze-warm); | |
| color: var(--forest-deep); | |
| transform: translateY(-2px); | |
| } | |
| .plinth-control:active { | |
| transform: translateY(0px); | |
| } | |
| /* Play/Pause Central Glyph */ | |
| .central-glyph { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background: var(--copper-gradient); | |
| border: 3px solid var(--stellar-copper); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| color: var(--forest-deep); | |
| transition: all 0.3s ease; | |
| margin: 0 15px; | |
| } | |
| .central-glyph:hover { | |
| transform: scale(1.1); | |
| background: var(--nebula-gradient); | |
| } | |
| /* Timeline Scrubber */ | |
| .timeline-channel { | |
| width: 300px; | |
| height: 8px; | |
| background: var(--bark-brown); | |
| border-radius: 4px; | |
| position: relative; | |
| margin: 0 15px; | |
| border: 1px solid var(--bronze-warm); | |
| overflow: hidden; | |
| } | |
| .timeline-indicator { | |
| height: 100%; | |
| background: var(--copper-gradient); | |
| border-radius: 4px; | |
| transition: width 0.1s ease; | |
| } | |
| .timeline-scrubber { | |
| -webkit-appearance: none; | |
| width: 100%; | |
| height: 8px; | |
| background: transparent; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| cursor: pointer; | |
| } | |
| .timeline-scrubber::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--stellar-copper); | |
| cursor: pointer; | |
| } | |
| /* Volume Control */ | |
| .volume-dial { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| border: 2px solid var(--bronze-warm); | |
| background: var(--earth-dark); | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .volume-indicator { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 2px; | |
| height: 16px; | |
| background: var(--stellar-copper); | |
| transform-origin: bottom center; | |
| transform: translate(-50%, -100%); | |
| transition: transform 0.3s ease; | |
| } | |
| /* Social Glyphs */ | |
| .social-glyphs { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| z-index: 1000; | |
| } | |
| .social-glyph { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 8px; | |
| background: var(--deep-earth); | |
| border: 1px solid var(--burnished-bronze); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| color: var(--burnished-bronze); | |
| } | |
| .social-glyph:hover { | |
| background: var(--burnished-bronze); | |
| color: var(--mystical-gold); | |
| box-shadow: 0 0 15px var(--mystical-gold); | |
| transform: scale(1.1); | |
| } | |
| /* Tooltip */ | |
| .tooltip { | |
| position: absolute; | |
| bottom: 120%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--void-black); | |
| color: var(--ancient-white); | |
| padding: 8px 12px; | |
| border-radius: 6px; | |
| border: 1px solid var(--burnished-bronze); | |
| font-size: 12px; | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| z-index: 1001; | |
| } | |
| .social-glyph:hover .tooltip { | |
| opacity: 1; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .control-plinth { | |
| margin: 10px auto; | |
| padding: 15px 20px; | |
| width: 95%; | |
| } | |
| .timeline-channel { | |
| width: 200px; | |
| } | |
| .central-glyph { | |
| width: 50px; | |
| height: 50px; | |
| font-size: 20px; | |
| } | |
| .social-glyphs { | |
| bottom: 10px; | |
| right: 10px; | |
| } | |
| } | |
| /* Loading Animation */ | |
| .awakening { | |
| animation: awakeningSequence 2s ease-out forwards; | |
| } | |
| @keyframes awakeningSequence { | |
| 0% { | |
| opacity: 0.3; | |
| filter: brightness(0.5); | |
| } | |
| 50% { | |
| opacity: 0.7; | |
| filter: brightness(1.2); | |
| } | |
| 100% { | |
| opacity: 1; | |
| filter: brightness(1); | |
| } | |
| } | |
| /* Dormant State */ | |
| .dormant { | |
| opacity: 0.4; | |
| filter: grayscale(0.5); | |
| animation: dormantBreath 8s ease-in-out infinite; | |
| } | |
| @keyframes dormantBreath { | |
| 0%, 100% { | |
| opacity: 0.3; | |
| transform: scale(0.98); | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| transform: scale(1); | |
| } | |
| } | |
| /* User Interaction Prompt Overlay */ | |
| .interaction-prompt-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| background: rgba(15, 27, 19, 0.95); | |
| backdrop-filter: blur(8px); | |
| z-index: 9999; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| animation: promptFadeIn 0.5s ease-out; | |
| } | |
| .interaction-prompt { | |
| position: relative; | |
| text-align: center; | |
| max-width: 500px; | |
| padding: 3rem 2rem; | |
| background: var(--forest-gradient); | |
| border: 2px solid var(--stellar-copper); | |
| border-radius: 20px; | |
| box-shadow: | |
| 0 0 30px rgba(184, 134, 11, 0.3), | |
| inset 0 0 20px rgba(77, 107, 62, 0.2); | |
| animation: promptPulse 3s ease-in-out infinite; | |
| } | |
| .interaction-prompt .prompt-icon { | |
| font-size: 4rem; | |
| margin-bottom: 1.5rem; | |
| animation: iconFloat 2s ease-in-out infinite; | |
| } | |
| .interaction-prompt h3 { | |
| font-family: 'Cinzel', serif; | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--stellar-copper); | |
| margin-bottom: 1rem; | |
| text-shadow: 0 0 10px rgba(184, 134, 11, 0.5); | |
| letter-spacing: 0.1em; | |
| } | |
| .interaction-prompt p { | |
| font-family: 'Metamorphous', serif; | |
| font-size: 1.1rem; | |
| color: var(--copper-light); | |
| opacity: 0.9; | |
| line-height: 1.5; | |
| } | |
| .prompt-glow { | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| background: linear-gradient(45deg, | |
| var(--stellar-copper), | |
| var(--nebula-purple), | |
| var(--stellar-copper)); | |
| border-radius: 20px; | |
| z-index: -1; | |
| opacity: 0.3; | |
| animation: glowRotate 4s linear infinite; | |
| } | |
| @keyframes promptFadeIn { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.9); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes fadeInPulse { | |
| 0% { | |
| opacity: 0; | |
| transform: translate(-50%, -50%) scale(0.8); | |
| } | |
| 50% { | |
| opacity: 0.8; | |
| transform: translate(-50%, -50%) scale(1.02); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translate(-50%, -50%) scale(1); | |
| } | |
| } | |
| @keyframes promptPulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| box-shadow: | |
| 0 0 30px rgba(184, 134, 11, 0.3), | |
| inset 0 0 20px rgba(77, 107, 62, 0.2); | |
| } | |
| 50% { | |
| transform: scale(1.02); | |
| box-shadow: | |
| 0 0 40px rgba(184, 134, 11, 0.5), | |
| inset 0 0 25px rgba(77, 107, 62, 0.3); | |
| } | |
| } | |
| @keyframes iconFloat { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| @keyframes glowRotate { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* Responsive interaction prompt */ | |
| @media (max-width: 768px) { | |
| .interaction-prompt { | |
| max-width: 90%; | |
| padding: 2rem 1.5rem; | |
| } | |
| .interaction-prompt h3 { | |
| font-size: 1.4rem; | |
| } | |
| .interaction-prompt p { | |
| font-size: 1rem; | |
| } | |
| .interaction-prompt .prompt-icon { | |
| font-size: 3rem; | |
| } | |
| } |