mirror of
https://github.com/adam-benyekkou/my_portfolio.git
synced 2026-01-16 04:30:08 +00:00
Added optimization / patched memory leaks for several animation and Threejs component
This commit is contained in:
AdamBtech
@@ -1,551 +1,248 @@
|
||||
/* ===================== NEURAL PROFILE SECTION ANIMATIONS ===================== */
|
||||
/* ===================== NEURAL PROFILE ANIMATIONS ===================== */
|
||||
|
||||
/* Section Container Animation */
|
||||
/* Core keyframes - reused across components */
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-30px, 0, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(30px, 0, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 30px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ===================== NEURAL SECTION ELEMENTS ===================== */
|
||||
|
||||
/* Section container - no animation */
|
||||
.neural-section {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
animation: neuralSectionMaterialize 1.2s ease-out 0.1s forwards;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes neuralSectionMaterialize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
filter: blur(2px);
|
||||
}
|
||||
60% {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-5px);
|
||||
filter: blur(0.5px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Header Section Animation */
|
||||
/* Header - no animation */
|
||||
.neural-header {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
animation: neuralHeaderSlideDown 1s ease-out 0.3s forwards;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes neuralHeaderSlideDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
filter: blur(1px);
|
||||
}
|
||||
70% {
|
||||
opacity: 0.9;
|
||||
transform: translateY(3px);
|
||||
filter: blur(0.3px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Divider Line Animation */
|
||||
/* Divider - static */
|
||||
.neural-divider {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
animation: neuralDividerExpand 0.8s ease-out 0.8s forwards;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes neuralDividerExpand {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
transform: scaleX(0.7);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Content Grid Animation */
|
||||
/* Main content grid */
|
||||
.neural-content-grid {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
animation: neuralContentReveal 1.2s ease-out 0.5s forwards;
|
||||
opacity: 0;
|
||||
animation: slideInUp 0.8s ease-out 0.3s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralContentReveal {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Left Panel - Neural Profile Tree Animation */
|
||||
/* Left panel */
|
||||
.neural-left-panel {
|
||||
opacity: 0;
|
||||
transform: translateX(-40px) scale(0.95);
|
||||
animation: neuralLeftPanelSlideIn 1.2s ease-out 0.7s forwards;
|
||||
opacity: 0;
|
||||
animation: slideInLeft 0.8s ease-out 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralLeftPanelSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-40px) scale(0.95);
|
||||
border-color: transparent;
|
||||
background-color: rgba(41, 41, 37, 0);
|
||||
}
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
transform: translateX(-10px) scale(0.98);
|
||||
border-color: var(--color-nier-border);
|
||||
}
|
||||
80% {
|
||||
opacity: 0.9;
|
||||
transform: translateX(2px) scale(1.01);
|
||||
background-color: var(--color-nier-bg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
border-color: var(--color-nier-border);
|
||||
background-color: var(--color-nier-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Neural Profile Tree Content */
|
||||
/* Tree content */
|
||||
.neural-tree-container {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: neuralTreeContentFadeUp 0.8s ease-out 1.2s forwards;
|
||||
opacity: 0;
|
||||
animation: slideInUp 0.6s ease-out 0.8s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralTreeContentFadeUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Right Panel Container Animation */
|
||||
/* Right panel */
|
||||
.neural-right-panel {
|
||||
opacity: 0;
|
||||
transform: translateX(40px);
|
||||
animation: neuralRightPanelSlideIn 1s ease-out 0.9s forwards;
|
||||
opacity: 0;
|
||||
animation: slideInRight 0.8s ease-out 0.6s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralRightPanelSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(40px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Video Display Panel Animation */
|
||||
/* Video panel */
|
||||
.neural-video-panel {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(20px);
|
||||
animation: neuralVideoPanelMaterialize 1.2s ease-out 1.1s forwards;
|
||||
opacity: 0;
|
||||
animation: scaleIn 0.8s ease-out 0.7s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralVideoPanelMaterialize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(20px);
|
||||
border-color: transparent;
|
||||
background-color: rgba(41, 41, 37, 0);
|
||||
}
|
||||
30% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.98) translateY(10px);
|
||||
border-color: var(--color-nier-accent);
|
||||
}
|
||||
70% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.01) translateY(-2px);
|
||||
background-color: var(--color-nier-dark);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
border-color: var(--color-nier-accent);
|
||||
background-color: var(--color-nier-dark);
|
||||
}
|
||||
}
|
||||
|
||||
/* Video Container Inner Animation */
|
||||
/* Video inner container */
|
||||
.neural-video-inner {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
animation: neuralVideoInnerExpand 0.8s ease-out 1.5s forwards;
|
||||
opacity: 0;
|
||||
animation: scaleIn 0.6s ease-out 1.0s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralVideoInnerExpand {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
border-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1.02);
|
||||
border-color: rgba(255, 201, 102, 0.3);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
border-color: rgba(255, 201, 102, 0.5);
|
||||
background-color: rgba(41, 41, 37, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Holo Video Component Animation */
|
||||
/* Holo video */
|
||||
.neural-holo-video {
|
||||
opacity: 0;
|
||||
animation: neuralHoloVideoFadeIn 1s ease-out 1.8s forwards;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.8s ease-out 1.2s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralHoloVideoFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
filter: blur(2px) brightness(0.5);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
filter: blur(1px) brightness(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
filter: blur(0px) brightness(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Panel Animation */
|
||||
/* Status panel */
|
||||
.neural-status-panel {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.95);
|
||||
animation: neuralStatusPanelRise 1s ease-out 1.3s forwards;
|
||||
opacity: 0;
|
||||
animation: slideInUp 0.8s ease-out 0.9s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralStatusPanelRise {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.95);
|
||||
border-color: transparent;
|
||||
background-color: rgba(41, 41, 37, 0);
|
||||
}
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
transform: translateY(10px) scale(0.98);
|
||||
border-color: var(--color-nier-border);
|
||||
}
|
||||
80% {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-2px) scale(1.01);
|
||||
background-color: var(--color-nier-mid);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
border-color: var(--color-nier-border);
|
||||
background-color: var(--color-nier-mid);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Grid Content Animation */
|
||||
/* Status grid */
|
||||
.neural-status-grid {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
animation: neuralStatusGridFadeUp 0.6s ease-out 1.7s forwards;
|
||||
opacity: 0;
|
||||
animation: slideInUp 0.5s ease-out 1.2s forwards;
|
||||
}
|
||||
|
||||
@keyframes neuralStatusGridFadeUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Items Staggered Animation */
|
||||
/* Status items */
|
||||
.neural-status-item {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
animation: neuralStatusItemSlideIn 0.5s ease-out forwards;
|
||||
opacity: 0;
|
||||
animation: slideInLeft 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) { animation-delay: 1.9s; }
|
||||
.neural-status-item:nth-child(2) { animation-delay: 2.1s; }
|
||||
.neural-status-item:nth-child(1) { animation-delay: 1.4s; }
|
||||
.neural-status-item:nth-child(2) { animation-delay: 1.5s; }
|
||||
|
||||
@keyframes neuralStatusItemSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Labels Animation */
|
||||
/* Status labels */
|
||||
.neural-status-label {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
animation: neuralStatusLabelFadeDown 0.4s ease-out forwards;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-status-label { animation-delay: 2.0s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-label { animation-delay: 2.2s; }
|
||||
.neural-status-item:nth-child(1) .neural-status-label { animation-delay: 1.5s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-label { animation-delay: 1.6s; }
|
||||
|
||||
@keyframes neuralStatusLabelFadeDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.6;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Values Animation */
|
||||
/* Status values */
|
||||
.neural-status-value {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
animation: neuralStatusValuePop 0.4s ease-out forwards;
|
||||
opacity: 0;
|
||||
animation: scaleIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-status-value { animation-delay: 2.1s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-value { animation-delay: 2.3s; }
|
||||
.neural-status-item:nth-child(1) .neural-status-value { animation-delay: 1.6s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-value { animation-delay: 1.7s; }
|
||||
|
||||
@keyframes neuralStatusValuePop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Pulse Animation for Status Indicator */
|
||||
/* Pulse dot */
|
||||
.neural-pulse-dot {
|
||||
opacity: 0;
|
||||
animation: neuralPulseDotAppear 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
animation: scaleIn 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-pulse-dot { animation-delay: 2.2s; }
|
||||
.neural-status-item:nth-child(1) .neural-pulse-dot { animation-delay: 1.7s; }
|
||||
|
||||
@keyframes neuralPulseDotAppear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
/* ===================== BACKGROUND ELEMENTS ===================== */
|
||||
|
||||
/* Background Checkered Pattern Enhancement */
|
||||
/* Checkered background - static */
|
||||
.neural-checkered-bg {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.neural-checkered-bg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
background-image:
|
||||
linear-gradient(45deg, rgba(255, 201, 102, 0.01) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, rgba(255, 201, 102, 0.01) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, rgba(255, 201, 102, 0.01) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, rgba(255, 201, 102, 0.01) 75%);
|
||||
background-size: 30px 30px;
|
||||
background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
|
||||
animation: neuralBgPatternFadeIn 3s ease-out 0.2s forwards;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 1;
|
||||
background-image:
|
||||
linear-gradient(45deg, rgba(255, 201, 102, 0.01) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, rgba(255, 201, 102, 0.01) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, rgba(255, 201, 102, 0.01) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, rgba(255, 201, 102, 0.01) 75%);
|
||||
background-size: 30px 30px;
|
||||
background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@keyframes neuralBgPatternFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scanning Line Effect for Neural Section */
|
||||
/* Scan line - hidden */
|
||||
.neural-scan-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(255, 201, 102, 0.6),
|
||||
transparent
|
||||
);
|
||||
animation: neuralScanLine 4s ease-in-out 1s forwards;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes neuralScanLine {
|
||||
0% {
|
||||
left: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===================== RESPONSIVE DESIGN ===================== */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
/* Faster animations on tablets */
|
||||
.neural-section {
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.neural-left-panel,
|
||||
.neural-video-panel {
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.neural-right-panel {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
.neural-content-grid,
|
||||
.neural-left-panel,
|
||||
.neural-video-panel,
|
||||
.neural-right-panel {
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* Much faster animations on mobile */
|
||||
.neural-section {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.05s;
|
||||
}
|
||||
.neural-content-grid { animation-delay: 0.2s; }
|
||||
.neural-left-panel { animation-delay: 0.3s; }
|
||||
.neural-right-panel { animation-delay: 0.4s; }
|
||||
.neural-video-panel { animation-delay: 0.5s; }
|
||||
.neural-status-panel { animation-delay: 0.6s; }
|
||||
|
||||
.neural-header {
|
||||
animation-duration: 0.6s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.neural-status-item:nth-child(1) { animation-delay: 0.8s; }
|
||||
.neural-status-item:nth-child(2) { animation-delay: 0.9s; }
|
||||
|
||||
.neural-divider {
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.neural-status-item:nth-child(1) .neural-status-label { animation-delay: 0.9s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-label { animation-delay: 1.0s; }
|
||||
|
||||
.neural-content-grid {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.neural-status-item:nth-child(1) .neural-status-value { animation-delay: 1.0s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-value { animation-delay: 1.1s; }
|
||||
|
||||
.neural-left-panel {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.neural-status-item:nth-child(1) .neural-pulse-dot { animation-delay: 1.1s; }
|
||||
|
||||
.neural-right-panel {
|
||||
animation-duration: 0.6s;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
/* Faster animations on mobile */
|
||||
.neural-content-grid,
|
||||
.neural-left-panel,
|
||||
.neural-right-panel,
|
||||
.neural-video-panel,
|
||||
.neural-status-panel {
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.neural-video-panel {
|
||||
animation-duration: 0.8s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
.neural-tree-container,
|
||||
.neural-video-inner,
|
||||
.neural-holo-video,
|
||||
.neural-status-grid {
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
|
||||
.neural-status-panel {
|
||||
animation-duration: 0.6s;
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
|
||||
.neural-status-item:nth-child(1) { animation-delay: 0.9s; }
|
||||
.neural-status-item:nth-child(2) { animation-delay: 1.0s; }
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-status-label { animation-delay: 1.0s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-label { animation-delay: 1.1s; }
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-status-value { animation-delay: 1.1s; }
|
||||
.neural-status-item:nth-child(2) .neural-status-value { animation-delay: 1.2s; }
|
||||
|
||||
.neural-status-item:nth-child(1) .neural-pulse-dot { animation-delay: 1.2s; }
|
||||
.neural-status-item,
|
||||
.neural-status-label,
|
||||
.neural-status-value,
|
||||
.neural-pulse-dot {
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===================== ACCESSIBILITY ===================== */
|
||||
|
||||
/* Respect reduced motion preferences */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.neural-section,
|
||||
.neural-header,
|
||||
.neural-divider,
|
||||
.neural-content-grid,
|
||||
.neural-left-panel,
|
||||
.neural-tree-container,
|
||||
.neural-right-panel,
|
||||
.neural-video-panel,
|
||||
.neural-video-inner,
|
||||
.neural-holo-video,
|
||||
.neural-status-panel,
|
||||
.neural-status-grid,
|
||||
.neural-status-item,
|
||||
.neural-status-label,
|
||||
.neural-status-value,
|
||||
.neural-pulse-dot {
|
||||
animation: none !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.neural-checkered-bg::before,
|
||||
.neural-scan-line {
|
||||
display: none !important;
|
||||
}
|
||||
*[class*="neural-"] {
|
||||
animation: none !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,20 @@
|
||||
/* NieR-style hover effects for tree nodes */
|
||||
/* ===================== OPTIMIZED TREE & CHIP SYSTEM ===================== */
|
||||
|
||||
/* Core keyframes */
|
||||
@keyframes textGlitch {
|
||||
0%, 100% { transform: translateX(0); clip-path: inset(0); }
|
||||
10% { transform: translateX(-2px); clip-path: inset(0 0 40% 0); }
|
||||
20% { transform: translateX(1px); clip-path: inset(40% 0 0 0); }
|
||||
30% { transform: translateX(-1px); clip-path: inset(20% 0 20% 0); }
|
||||
}
|
||||
|
||||
@keyframes scanLine {
|
||||
from { opacity: 0.5; left: -100%; }
|
||||
to { opacity: 0; left: 100%; }
|
||||
}
|
||||
|
||||
/* ===================== TREE NODES ===================== */
|
||||
|
||||
.tree-node-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -6,7 +22,6 @@
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* Underline effect */
|
||||
.tree-node-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -16,35 +31,11 @@
|
||||
height: 1px;
|
||||
background-color: var(--color-nier-text-dark);
|
||||
transition: width 0.3s ease;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Text color change on hover */
|
||||
.tree-node-item:hover {
|
||||
color: var(--color-nier-text-dark);
|
||||
border-bottom-color: var(--color-nier-text-dark);
|
||||
}
|
||||
|
||||
/* Underline animation on hover */
|
||||
.tree-node-item:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Glitch effect on hover - target the text span directly */
|
||||
.tree-node-item:hover span.text-nier-dark {
|
||||
animation: nier-text-glitch 0.6s ease;
|
||||
}
|
||||
|
||||
/* Alternative - target any span with text */
|
||||
.tree-node-item:hover span:last-of-type {
|
||||
animation: nier-text-glitch 0.6s ease;
|
||||
}
|
||||
|
||||
/* Scan line for tree nodes */
|
||||
.tree-node-item .scan-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
inset: 0 0 auto -100%;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--color-nier-text-dark);
|
||||
@@ -53,16 +44,30 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tree-node-item:hover .scan-line {
|
||||
animation: nier-button-scan 0.3s ease forwards;
|
||||
/* Tree node hover effects */
|
||||
.tree-node-item:hover {
|
||||
color: var(--color-nier-text-dark);
|
||||
border-bottom-color: var(--color-nier-text-dark);
|
||||
}
|
||||
|
||||
.tree-node-item:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tree-node-item:hover span:last-of-type {
|
||||
animation: textGlitch 0.6s ease;
|
||||
}
|
||||
|
||||
.tree-node-item:hover .scan-line {
|
||||
animation: scanLine 0.3s ease forwards;
|
||||
}
|
||||
|
||||
/* Active/click state for tree nodes */
|
||||
.tree-node-item:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* NieR-style Chip Container System - NO INTERACTIONS */
|
||||
/* ===================== CHIP SYSTEM ===================== */
|
||||
|
||||
.chip-container {
|
||||
position: relative;
|
||||
}
|
||||
@@ -70,33 +75,19 @@
|
||||
.chip-parent {
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
border-radius: 0;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15); /* Very thin border */
|
||||
box-shadow: none;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease; /* Allow parent scaling */
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
/* Parent Chip Colors - Complete NieR Earth Palette */
|
||||
.tools-parent {
|
||||
background: linear-gradient(135deg, #a67c63 0%, #8b6b52 100%);
|
||||
}
|
||||
/* Parent chip gradients */
|
||||
.tools-parent { background: linear-gradient(135deg, #a67c63, #8b6b52); }
|
||||
.frontend-parent { background: linear-gradient(135deg, #b8916f, #a67c63); }
|
||||
.backend-parent { background: linear-gradient(135deg, #c9b896, #b8916f); }
|
||||
.database-parent { background: linear-gradient(135deg, #e6d7b8, #d4c4a0); }
|
||||
|
||||
.frontend-parent {
|
||||
background: linear-gradient(135deg, #b8916f 0%, #a67c63 100%);
|
||||
}
|
||||
|
||||
.backend-parent {
|
||||
background: linear-gradient(135deg, #c9b896 0%, #b8916f 100%);
|
||||
}
|
||||
|
||||
.database-parent {
|
||||
background: linear-gradient(135deg, #e6d7b8 0%, #d4c4a0 100%);
|
||||
}
|
||||
|
||||
/* Locked Parent Category */
|
||||
.locked-parent {
|
||||
background: linear-gradient(135deg, #606060 0%, #4a4a4a 100%);
|
||||
background: linear-gradient(135deg, #606060, #4a4a4a);
|
||||
border: none;
|
||||
cursor: not-allowed;
|
||||
height: 100%;
|
||||
@@ -111,14 +102,12 @@
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Chip Cells Column Layout */
|
||||
.chip-cells-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Locked Content Styling */
|
||||
.locked-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -136,58 +125,46 @@
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
/* Individual Chip Cells - Keep original grayish overlay */
|
||||
/* Chip cells */
|
||||
.chip-cell {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
border-radius: 0;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2); /* Keep original border */
|
||||
background: rgba(0, 0, 0, 0.1); /* Keep original grayish overlay */
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); /* Keep original shadow */
|
||||
transition: transform 0.2s ease; /* Allow scale animation */
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.chip-cell::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
right: 1px;
|
||||
inset: 1px 1px auto 1px;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.1); /* Keep original highlight */
|
||||
border-radius: 0;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Scale animation when tree node is hovered OR selected */
|
||||
/* Active states */
|
||||
.chip-cell.cell-hovered,
|
||||
.chip-cell.cell-selected {
|
||||
transform: scale(1.05) !important;
|
||||
background: rgba(0, 0, 0, 0.1) !important; /* Keep original grayish color */
|
||||
border: 1px solid rgba(0, 0, 0, 0.2) !important; /* Keep original border */
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important; /* Keep original shadow */
|
||||
}
|
||||
|
||||
/* Parent categories scale when children are hovered OR selected */
|
||||
.chip-container.chip-hovered .chip-parent,
|
||||
.chip-container.chip-selected .chip-parent {
|
||||
transform: scale(1.02) !important;
|
||||
}
|
||||
|
||||
/* NO direct hover effects on cells */
|
||||
/* Prevent direct chip interactions */
|
||||
.chip-cell:hover,
|
||||
.chip-cell:focus,
|
||||
.chip-cell:active {
|
||||
background: rgba(0, 0, 0, 0.1) !important; /* Keep original grayish */
|
||||
border: 1px solid rgba(0, 0, 0, 0.2) !important; /* Keep original border */
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important; /* Keep original shadow */
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2) !important;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
|
||||
transform: none !important;
|
||||
filter: none !important;
|
||||
opacity: 1 !important;
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.chip-cell:hover::before,
|
||||
@@ -195,60 +172,12 @@
|
||||
.chip-cell:active::before,
|
||||
.chip-cell.cell-hovered::before,
|
||||
.chip-cell.cell-selected::before {
|
||||
background: rgba(255, 255, 255, 0.1) !important; /* Keep original highlight */
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
height: 4px !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* NO CONTAINER EFFECTS */
|
||||
.chip-normal,
|
||||
.chip-selected,
|
||||
.chip-hovered {
|
||||
/* No effects */
|
||||
}
|
||||
/* ===================== RESPONSIVE DESIGN ===================== */
|
||||
|
||||
/* Text glitch effect for tree nodes only */
|
||||
@keyframes nier-text-glitch {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
10% {
|
||||
transform: translateX(-2px);
|
||||
clip-path: inset(0 0 40% 0);
|
||||
}
|
||||
15% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(1px);
|
||||
clip-path: inset(40% 0 0 0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(-1px);
|
||||
clip-path: inset(20% 0 20% 0);
|
||||
}
|
||||
35% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Scan line animation for tree nodes only */
|
||||
@keyframes nier-button-scan {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
left: -100%;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.chip-cell {
|
||||
height: 12px;
|
||||
@@ -263,14 +192,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch device optimization for tree nodes only */
|
||||
/* Touch devices */
|
||||
@media (hover: none) {
|
||||
.tree-node-item:active::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tree-node-item:active .scan-line {
|
||||
animation: nier-button-scan 0.3s ease forwards;
|
||||
animation: scanLine 0.3s ease forwards;
|
||||
}
|
||||
|
||||
.tree-node-item:active {
|
||||
|
||||
Reference in New Issue
Block a user