/* Angular Components CSS */

/* Angular Cards */
.angular-card {
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    transition: all 0.4s ease;
}
.angular-card:hover {
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
    transform: translateY(-5px);
}

/* Angular Stats Cards */
.angular-stat {
    position: relative;
    clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
    transition: all 0.3s ease;
}
.angular-stat:hover {
    clip-path: polygon(25px 0, 100% 0, calc(100% - 25px) 100%, 0 100%);
    transform: scale(1.05) rotate(1deg);
}

/* Angular Team Cards */
.angular-team-card {
    clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    transition: all 0.5s ease;
}
.angular-team-card:hover {
    clip-path: polygon(0 25px, 25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%);
}

/* Angular Values Cards */
.angular-value {
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    border-left: none;
    position: relative;
}
.angular-value::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 4px;
    background: linear-gradient(to bottom, #cb1a1a, #a31212);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Angular Footer */
.angular-footer {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    position: relative;
    overflow: hidden;
}

.footer-section {
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    height: 100%;
}
.footer-section h3 {
    position: relative;
    padding-left: 1rem;
}
.footer-section h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: #cb1a1a;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Angular Menu */
.angular-menu {
    /* Base menu styles */
}

/* 3D Card Effects */
.card-container {
    perspective: 1000px;
}
.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}
.card-container:hover .card-3d {
    transform: rotateX(10deg) rotateY(10deg);
}

/* Floating Animation */
.floating-card {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* Gradient Border Animation */
.gradient-border {
    background: linear-gradient(45deg, #cb1a1a, #a31212, #cb1a1a);
    background-size: 400% 400%;
    animation: gradient-shift 4s ease infinite;
}
@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Morphing Background */
.morphing-bg {
    background: linear-gradient(-45deg, #cb1a1a, #a31212, #cb1a1a, #d32f2f);
    background-size: 400% 400%;
    animation: morphing 15s ease infinite;
}
@keyframes morphing {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Text Reveal Animation */
.text-reveal {
    background: linear-gradient(90deg, transparent, #cb1a1a, transparent);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-reveal 3s ease-in-out infinite;
}
@keyframes text-reveal {
    0%, 100% { background-position: -200% 0; }
    50% { background-position: 200% 0; }
}

/* Interactive Stats */
.interactive-stats {
    cursor: pointer;
    transition: all 0.3s ease;
}
.interactive-stats:hover {
    transform: scale(1.05) rotate(2deg);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .angular-menu {
        width: 60px;
    }
    .angular-menu:hover {
        width: 180px;
    }

    /* Fix angular cards on mobile - reduce clip-path effect to prevent white bottom showing */
    .angular-card {
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    }
    .angular-card:hover {
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    }
    
    /* Fix other angular elements on mobile */
    .angular-stat {
        clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    }
    .angular-stat:hover {
        clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    }
    
    .angular-team-card {
        clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    }
    .angular-team-card:hover {
        clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    }
    
    .angular-value {
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    }
}