/* Professional 3D Section Title Animations */

/* Container for section title animations */
.section-title-wrapper {
    position: relative;
    display: inline-block;
    perspective: 1000px;
    margin-bottom: 2rem;
}

/* Animated decorative line under titles */
.animated-underline {
    position: relative;
    display: block;
    width: 120px;
    height: 4px;
    margin: 1.5rem auto;
    background: linear-gradient(90deg, transparent, #E10600, transparent);
    transform-style: preserve-3d;
    animation: underlinePulse 3s ease-in-out infinite;
}

.animated-underline::before,
.animated-underline::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    background: #E10600;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 20px rgba(225, 6, 0, 0.6);
    animation: dotPulse 2s ease-in-out infinite;
}

.animated-underline::before {
    left: -30px;
    animation-delay: 0.2s;
}

.animated-underline::after {
    right: -30px;
    animation-delay: 0.4s;
}

/* 3D Floating Shapes */
.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
    margin-bottom: 2rem;
}

.shape {
    position: absolute;
    transform-style: preserve-3d;
    animation-timing-function: ease-in-out;
    opacity: 0.6;
}

/* ============================================
   GYM-THEMED SHAPES
   Dumbbells and Supplements
   ============================================ */

/* Dumbbell Shape */
.shape-dumbbell {
    width: 45px;
    height: 12px;
    background: linear-gradient(90deg, #E10600, #FF4444);
    left: 10%;
    top: 20px;
    animation: floatDumbbell 6s infinite;
    border-radius: 2px;
}

.shape-dumbbell::before,
.shape-dumbbell::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 18px;
    background: radial-gradient(circle, #FF4444, #E10600);
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 5px 15px rgba(225, 6, 0, 0.4);
}

.shape-dumbbell::before {
    left: -4px;
}

.shape-dumbbell::after {
    right: -4px;
}

.shape-dumbbell-2 {
    width: 40px;
    height: 10px;
    background: linear-gradient(90deg, #E10600, #000);
    right: 15%;
    top: 30px;
    animation: floatDumbbell 7s infinite;
    border-radius: 2px;
}

.shape-dumbbell-2::before,
.shape-dumbbell-2::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 16px;
    background: radial-gradient(circle, #E10600, #000);
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 5px 15px rgba(225, 6, 0, 0.3);
}

.shape-dumbbell-2::before {
    left: -3px;
}

.shape-dumbbell-2::after {
    right: -3px;
}

.shape-dumbbell-3 {
    width: 38px;
    height: 10px;
    background: linear-gradient(90deg, #000, #E10600);
    left: 15%;
    top: 25px;
    animation: floatDumbbell 5.5s infinite;
    border-radius: 2px;
}

.shape-dumbbell-3::before,
.shape-dumbbell-3::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 15px;
    background: radial-gradient(circle, #000, #E10600);
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
}

.shape-dumbbell-3::before {
    left: -3px;
}

.shape-dumbbell-3::after {
    right: -3px;
}

.shape-dumbbell-4 {
    width: 42px;
    height: 11px;
    background: linear-gradient(90deg, #FF4444, #000);
    left: 8%;
    top: 22px;
    animation: floatDumbbell 6.5s infinite;
    border-radius: 2px;
}

.shape-dumbbell-4::before,
.shape-dumbbell-4::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 17px;
    background: radial-gradient(circle, #E10600, #000);
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
}

.shape-dumbbell-4::before {
    left: -4px;
}

.shape-dumbbell-4::after {
    right: -4px;
}

/* Supplement Bottle Shape */
.shape-supplement-bottle {
    width: 22px;
    height: 38px;
    background: linear-gradient(180deg, #E10600 0%, #000 100%);
    border-radius: 3px 3px 5px 5px;
    left: 50%;
    top: 15px;
    animation: floatBottle 5s infinite;
    box-shadow: 0 10px 25px rgba(225, 6, 0, 0.4);
}

.shape-supplement-bottle::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 8px;
    background: #E10600;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px 2px 0 0;
}

.shape-supplement-bottle::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 3px;
    background: #000;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1px;
}

.shape-supplement-bottle-2 {
    width: 20px;
    height: 35px;
    background: linear-gradient(180deg, #000 0%, #E10600 100%);
    border-radius: 3px 3px 5px 5px;
    left: 45%;
    top: 18px;
    animation: floatBottle 5.5s infinite;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.shape-supplement-bottle-2::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 7px;
    background: #000;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px 2px 0 0;
}

.shape-supplement-bottle-3 {
    width: 24px;
    height: 40px;
    background: linear-gradient(180deg, #E10600 0%, #FF4444 100%);
    border-radius: 3px 3px 6px 6px;
    left: 35%;
    top: 20px;
    animation: floatBottle 6s infinite;
    box-shadow: 0 10px 25px rgba(225, 6, 0, 0.5);
}

.shape-supplement-bottle-3::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background: #E10600;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px 2px 0 0;
}

/* Protein Shaker Shape */
.shape-protein-shaker {
    width: 26px;
    height: 42px;
    background: linear-gradient(180deg, transparent 0%, transparent 15%, #E10600 15%, #000 100%);
    border-radius: 4px 4px 6px 6px;
    left: 75%;
    top: 35px;
    animation: floatShaker 8s infinite;
    box-shadow: 0 10px 20px rgba(225, 6, 0, 0.3);
    border: 2px solid #E10600;
}

.shape-protein-shaker::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 6px;
    background: #E10600;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px 3px 0 0;
}

.shape-protein-shaker-2 {
    width: 24px;
    height: 38px;
    background: linear-gradient(180deg, transparent 0%, transparent 15%, #000 15%, #E10600 100%);
    border-radius: 4px 4px 6px 6px;
    right: 20%;
    top: 30px;
    animation: floatShaker 7.5s infinite;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border: 2px solid #000;
}

.shape-protein-shaker-2::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 5px;
    background: #000;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px 3px 0 0;
}

.shape-protein-shaker-3 {
    width: 28px;
    height: 45px;
    background: linear-gradient(180deg, transparent 0%, transparent 15%, #E10600 15%, #FF4444 100%);
    border-radius: 4px 4px 7px 7px;
    right: 25%;
    top: 28px;
    animation: floatShaker 7s infinite;
    box-shadow: 0 12px 25px rgba(225, 6, 0, 0.4);
    border: 2px solid #E10600;
}

.shape-protein-shaker-3::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 6px;
    background: #E10600;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px 3px 0 0;
}

/* Weight Plate Shape */
.shape-weight-plate {
    width: 45px;
    height: 45px;
    background: radial-gradient(circle, transparent 35%, #E10600 35%, #000 45%, transparent 45%);
    border-radius: 50%;
    right: 10%;
    top: 25px;
    animation: floatPlate 8s infinite, rotatePlate 6s linear infinite;
    box-shadow: 0 10px 30px rgba(225, 6, 0, 0.4);
}

.shape-weight-plate-2 {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, transparent 35%, #000 35%, #E10600 45%, transparent 45%);
    border-radius: 50%;
    left: 70%;
    top: 30px;
    animation: floatPlate 7s infinite, rotatePlate 5s linear infinite;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.shape-weight-plate-3 {
    width: 42px;
    height: 42px;
    background: radial-gradient(circle, transparent 35%, #E10600 35%, #FF4444 45%, transparent 45%);
    border-radius: 50%;
    right: 12%;
    top: 28px;
    animation: floatPlate 7.5s infinite, rotatePlate 5.5s linear infinite;
    box-shadow: 0 10px 28px rgba(225, 6, 0, 0.5);
}

.shape-weight-plate-4 {
    width: 48px;
    height: 48px;
    background: radial-gradient(circle, transparent 35%, #000 35%, #E10600 45%, transparent 45%);
    border-radius: 50%;
    right: 15%;
    top: 32px;
    animation: floatPlate 8.5s infinite, rotatePlate 6.5s linear infinite;
    box-shadow: 0 12px 30px rgba(225, 6, 0, 0.4);
}

/* Supplement Capsule Shape */
.shape-supplement-capsule {
    width: 30px;
    height: 14px;
    background: linear-gradient(90deg, #E10600 50%, #000 50%);
    border-radius: 15px;
    left: 30%;
    top: 40px;
    animation: floatCapsule 6.5s infinite;
    box-shadow: 0 5px 15px rgba(225, 6, 0, 0.4);
}

.shape-supplement-capsule-2 {
    width: 28px;
    height: 12px;
    background: linear-gradient(90deg, #000 50%, #E10600 50%);
    border-radius: 14px;
    left: 55%;
    top: 35px;
    animation: floatCapsule 7s infinite;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* Barbell Shape */
.shape-barbell {
    width: 65px;
    height: 8px;
    background: linear-gradient(90deg, #000, #E10600, #000);
    right: 8%;
    top: 32px;
    animation: floatBarbell 9s infinite;
    border-radius: 1px;
}

.shape-barbell::before,
.shape-barbell::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 22px;
    background: radial-gradient(circle, #E10600, #000);
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 5px 20px rgba(225, 6, 0, 0.4);
}

.shape-barbell::before {
    left: -3px;
}

.shape-barbell::after {
    right: -3px;
}

/* ============================================
   SECTION DIVIDER 3D - Professional Design
   ============================================ */

/* Main Container */
.section-divider-3d {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 6px;
    margin: 1rem auto 2rem;
    transform-style: preserve-3d;
    perspective: 1000px;
    z-index: 10;
}

/* Main Divider Bar with Gradient Animation - BRIGHT RED */
.divider-bar {
    position: relative;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, 
        rgba(225, 6, 0, 0.3) 0%, 
        #E10600 20%, 
        #FF4444 50%, 
        #E10600 80%, 
        rgba(225, 6, 0, 0.3) 100%
    );
    background-size: 200% 100%;
    border-radius: 8px;
    animation: dividerShine 4s ease-in-out infinite;
    box-shadow: 
        0 0 25px rgba(225, 6, 0, 0.8),
        0 3px 15px rgba(225, 6, 0, 0.6),
        inset 0 1px 3px rgba(255, 255, 255, 0.3);
    overflow: visible;
}

/* Glowing Dots on Both Ends - BRIGHT RED */
.divider-bar::before,
.divider-bar::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #FF4444 0%, #E10600 50%, #FF4444 100%);
    border: 2px solid #E10600;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 
        0 0 20px rgba(225, 6, 0, 1),
        0 0 35px rgba(225, 6, 0, 0.7),
        inset 0 0 5px rgba(255, 255, 255, 0.5);
    animation: dividerDotPulse 2.5s ease-in-out infinite;
}

.divider-bar::before {
    left: -18px;
}

.divider-bar::after {
    right: -18px;
    animation-delay: 1.25s;
}

/* Center Diamond Accent */
.divider-bar:hover::after {
    animation-delay: 0s;
}

/* Particle Effect */
.particles-container {
    position: absolute;
    width: 100%;
    height: 100px;
    top: 100%;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #E10600;
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat 4s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(225, 6, 0, 0.9);
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 25%; animation-delay: 0.5s; }
.particle:nth-child(3) { left: 40%; animation-delay: 1s; }
.particle:nth-child(4) { left: 55%; animation-delay: 1.5s; }
.particle:nth-child(5) { left: 70%; animation-delay: 2s; }
.particle:nth-child(6) { left: 85%; animation-delay: 2.5s; }

/* Keyframe Animations */
@keyframes underlinePulse {
    0%, 100% { 
        transform: scaleX(1) rotateX(0deg);
        opacity: 1;
    }
    50% { 
        transform: scaleX(1.2) rotateX(5deg);
        opacity: 0.8;
    }
}

@keyframes dotPulse {
    0%, 100% { 
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
    50% { 
        transform: translateY(-50%) scale(1.3);
        opacity: 0.7;
    }
}

/* ============================================
   GYM-THEMED SHAPE ANIMATIONS
   ============================================ */

@keyframes floatDumbbell {
    0%, 100% { 
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(-10deg);
    }
    50% { 
        transform: translateY(-25px) rotate(0deg);
    }
    75% {
        transform: translateY(-15px) rotate(10deg);
    }
}

@keyframes floatBottle {
    0%, 100% { 
        transform: translateY(0) rotate(0deg) scale(1);
    }
    33% {
        transform: translateY(-18px) rotate(-5deg) scale(1.05);
    }
    66% {
        transform: translateY(-28px) rotate(5deg) scale(1.1);
    }
}

@keyframes floatShaker {
    0%, 100% { 
        transform: translateY(0) rotate(0deg);
    }
    30% {
        transform: translateY(-12px) rotate(-8deg);
    }
    60% { 
        transform: translateY(-22px) rotate(8deg);
    }
    80% {
        transform: translateY(-15px) rotate(-3deg);
    }
}

@keyframes floatPlate {
    0%, 100% { 
        transform: translateY(0) scale(1);
    }
    50% { 
        transform: translateY(-20px) scale(1.08);
    }
}

@keyframes rotatePlate {
    0% { 
        transform: rotate(0deg);
    }
    100% { 
        transform: rotate(360deg);
    }
}

@keyframes floatCapsule {
    0%, 100% { 
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(-15deg);
    }
    50% { 
        transform: translateY(-20px) rotate(0deg);
    }
    75% {
        transform: translateY(-10px) rotate(15deg);
    }
}

@keyframes floatBarbell {
    0%, 100% { 
        transform: translateY(0) rotate(0deg) scale(1);
    }
    40% {
        transform: translateY(-18px) rotate(-5deg) scale(1.03);
    }
    70% {
        transform: translateY(-28px) rotate(5deg) scale(1.06);
    }
}

/* Divider Bar Shine Animation */
@keyframes dividerShine {
    0% { 
        background-position: 0% 50%;
        box-shadow: 
            0 0 20px rgba(225, 6, 0, 0.3),
            0 2px 10px rgba(0, 0, 0, 0.2);
    }
    50% { 
        background-position: 100% 50%;
        box-shadow: 
            0 0 30px rgba(225, 6, 0, 0.6),
            0 3px 15px rgba(0, 0, 0, 0.3);
    }
    100% { 
        background-position: 200% 50%;
        box-shadow: 
            0 0 20px rgba(225, 6, 0, 0.3),
            0 2px 10px rgba(0, 0, 0, 0.2);
    }
}

/* Glowing Dot Pulse Animation */
@keyframes dividerDotPulse {
    0%, 100% { 
        transform: translateY(-50%) scale(1);
        opacity: 1;
        box-shadow: 
            0 0 15px rgba(225, 6, 0, 0.8),
            0 0 30px rgba(225, 6, 0, 0.4);
    }
    50% { 
        transform: translateY(-50%) scale(1.3);
        opacity: 0.8;
        box-shadow: 
            0 0 25px rgba(225, 6, 0, 1),
            0 0 40px rgba(225, 6, 0, 0.6),
            0 0 60px rgba(225, 6, 0, 0.3);
    }
}

@keyframes particleFloat {
    0% { 
        opacity: 0;
        transform: translateY(0) scale(0);
    }
    20% { 
        opacity: 1;
        transform: translateY(-20px) scale(1);
    }
    80% { 
        opacity: 1;
        transform: translateY(-60px) scale(1);
    }
    100% { 
        opacity: 0;
        transform: translateY(-80px) scale(0);
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .floating-shapes {
        height: 100px;
    }
    
    .shape {
        opacity: 0.1;
    }
    
    .shape-cube,
    .shape-sphere,
    .shape-ring {
        width: 30px;
        height: 30px;
    }
    
    .shape-cube::before {
        width: 30px;
        height: 30px;
    }
    
    .shape-pyramid {
        border-left-width: 20px;
        border-right-width: 20px;
        border-bottom-width: 35px;
    }
    
    .shape-diamond {
        width: 25px;
        height: 25px;
    }
    
    .shape-hexagon {
        width: 30px;
        height: 17px;
    }
    
    .animated-underline {
        width: 80px;
        height: 3px;
    }
    
    .animated-underline::before,
    .animated-underline::after {
        width: 15px;
        height: 15px;
    }
    
    /* Responsive Divider Bar */
    .section-divider-3d {
        width: 100px;
        height: 5px;
        margin: 0.75rem auto 1.5rem;
    }
    
    .divider-bar {
        height: 4px;
    }
    
    .divider-bar::before,
    .divider-bar::after {
        width: 8px;
        height: 8px;
        border-width: 1.5px;
    }
    
    .divider-bar::before {
        left: -14px;
    }
    
    .divider-bar::after {
        right: -14px;
    }
    
    /* Collaborate section stays black on tablet */
    #collaborate .section-divider-3d .divider-bar {
        background: linear-gradient(90deg, 
            rgba(0, 0, 0, 0.3) 0%, 
            #000000 20%, 
            #1a1a1a 50%, 
            #000000 80%, 
            rgba(0, 0, 0, 0.3) 100%
        ) !important;
    }
    
    #collaborate .section-divider-3d .divider-bar::before,
    #collaborate .section-divider-3d .divider-bar::after {
        background: radial-gradient(circle, #1a1a1a 0%, #000000 50%, #1a1a1a 100%) !important;
        border: 1.5px solid #000000 !important;
    }
}

@media (max-width: 480px) {
    .floating-shapes {
        height: 80px;
    }
    
    .shape {
        opacity: 0.08;
    }
    
    .shape-cube,
    .shape-sphere,
    .shape-ring {
        width: 25px;
        height: 25px;
    }
    
    .particles-container {
        height: 60px;
    }
    
    .particle {
        width: 3px;
        height: 3px;
    }
    
    /* Collaborate section stays black on mobile */
    #collaborate .section-divider-3d .divider-bar {
        background: #000000 !important;
    }
    
    #collaborate .section-divider-3d .divider-bar::before,
    #collaborate .section-divider-3d .divider-bar::after {
        background: #000000 !important;
        border: 1.5px solid #000000 !important;
    }
}

/* ============================================
   COLLABORATE SECTION - Black Theme Variant (All Media)
   ============================================ */
#collaborate .section-divider-3d .divider-bar {
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0.3) 0%, 
        #000000 20%, 
        #1a1a1a 50%, 
        #000000 80%, 
        rgba(0, 0, 0, 0.3) 100%
    ) !important;
    box-shadow: 
        0 0 25px rgba(0, 0, 0, 0.8),
        0 3px 15px rgba(0, 0, 0, 0.6),
        inset 0 1px 3px rgba(255, 255, 255, 0.3) !important;
}

#collaborate .section-divider-3d .divider-bar::before,
#collaborate .section-divider-3d .divider-bar::after {
    background: radial-gradient(circle, #1a1a1a 0%, #000000 50%, #1a1a1a 100%) !important;
    border: 2px solid #000000 !important;
    box-shadow: 
        0 0 20px rgba(0, 0, 0, 1),
        0 0 35px rgba(0, 0, 0, 0.7),
        inset 0 0 5px rgba(255, 255, 255, 0.5) !important;
}

/* ============================================
   COLLABORATE SECTION - Black Floating Shapes
   Enhanced Visibility & Lazy Animations
   ============================================ */

/* Increase visibility of shapes in Collaborate section */
#collaborate .shape {
    opacity: 0.35;
    animation-duration: 8s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Black Cube with enhanced shadow */
#collaborate .shape-cube::before {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.8),
        0 5px 15px rgba(0, 0, 0, 0.6),
        inset 0 2px 5px rgba(255, 255, 255, 0.1);
    animation: lazyRotateCube 10s ease-in-out infinite;
}

/* Black Pyramid with lazy sway */
#collaborate .shape-pyramid {
    border-bottom-color: #000000;
    filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.7));
    animation: floatPyramid 9s ease-in-out infinite, lazySwayPyramid 6s ease-in-out infinite;
}

/* Black Sphere with glossy effect */
#collaborate .shape-sphere {
    background: radial-gradient(circle at 35% 35%, #2a2a2a, #000000 60%, #000000);
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.7),
        inset -5px -5px 15px rgba(255, 255, 255, 0.1),
        inset 5px 5px 10px rgba(0, 0, 0, 0.5);
    animation: floatSphere 8s ease-in-out infinite, lazyPulse 5s ease-in-out infinite;
}

/* Black Ring with rotation */
#collaborate .shape-ring {
    border-color: #000000;
    border-width: 5px;
    box-shadow: 
        0 0 25px rgba(0, 0, 0, 0.6),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
    animation: floatRing 10s ease-in-out infinite, lazyRotateRing 8s linear infinite;
}

/* Black Diamond with shine */
#collaborate .shape-diamond {
    background: linear-gradient(135deg, #000000 0%, #2a2a2a 50%, #000000 100%);
    box-shadow: 
        0 12px 25px rgba(0, 0, 0, 0.7),
        inset 2px 2px 5px rgba(255, 255, 255, 0.15);
    animation: floatDiamond 9s ease-in-out infinite, lazySpinDiamond 12s linear infinite;
}

/* Black Hexagon */
#collaborate .shape-hexagon {
    background: #000000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
    animation: floatHexagon 10s ease-in-out infinite, lazyTiltHexagon 7s ease-in-out infinite;
}

#collaborate .shape-hexagon::before {
    border-bottom-color: #000000;
}

#collaborate .shape-hexagon::after {
    border-top-color: #000000;
}

/* Lazy Animation Keyframes for Black Shapes */
@keyframes lazyRotateCube {
    0%, 100% { transform: rotateX(45deg) rotateZ(45deg) rotateY(0deg); }
    50% { transform: rotateX(45deg) rotateZ(45deg) rotateY(180deg); }
}

@keyframes lazySwayPyramid {
    0%, 100% { transform: rotateZ(-3deg); }
    50% { transform: rotateZ(3deg); }
}

@keyframes lazyPulse {
    0%, 100% { transform: scale(1); opacity: 0.35; }
    50% { transform: scale(1.1); opacity: 0.45; }
}

@keyframes lazyRotateRing {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(360deg); }
}

@keyframes lazySpinDiamond {
    from { transform: rotate(45deg); }
    to { transform: rotate(405deg); }
}

@keyframes lazyTiltHexagon {
    0%, 100% { transform: perspective(400px) rotateY(-5deg); }
    50% { transform: perspective(400px) rotateY(5deg); }
}

/* Black Particles for Collaborate Section */
#collaborate .particle {
    background: #000000;
    opacity: 0.4;
    box-shadow: 
        0 0 12px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 0, 0, 0.5);
}

/* Reduced Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    .animated-underline,
    .shape,
    .particle,
    .divider-bar {
        animation: none !important;
    }
    
    .animated-underline {
        opacity: 1;
    }
    
    .shape {
        opacity: 0.1;
    }
}

/* Performance optimization */
.floating-shapes,
.particles-container {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.shape,
.particle {
    will-change: transform, opacity;
    transform: translateZ(0);
}