/**
 * Custom CSS styles for JVSOL website
 * Extends Tailwind CSS framework with custom styles
 */

/* Typography enhancements */
body {
    font-feature-settings: "kern", "liga", "clig", "calt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Navigation styles */
.nav-link {
    @apply px-4 py-2 rounded-md text-secondary-700 font-medium transition-colors;
}

.nav-link:hover {
    @apply text-primary-600 bg-primary-50;
}

.nav-link.active {
    @apply text-primary-700 bg-primary-100;
}

.mobile-nav-link {
    @apply px-4 py-3 rounded-md text-secondary-700 font-medium transition-colors block w-full text-left;
}

.mobile-nav-link:hover {
    @apply text-primary-600 bg-primary-50;
}

.mobile-nav-link.active {
    @apply text-primary-700 bg-primary-100;
}

.mobile-subnav-link {
    @apply px-4 py-2 rounded-md text-secondary-600 text-sm transition-colors block;
}

.mobile-subnav-link:hover {
    @apply text-primary-600 bg-primary-50;
}

/* Button hover effects */
.btn-primary, .btn-secondary {
    @apply relative overflow-hidden;
}

.btn-primary::after, .btn-secondary::after {
    content: '';
    @apply absolute bottom-0 left-0 w-full h-0 bg-black bg-opacity-10 transition-all duration-300;
}

.btn-primary:hover::after, .btn-secondary:hover::after {
    @apply h-full;
}

/* Hero section animations */
.hero-animation {
    @apply transition-all duration-500;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Pulse animation for indicators */
.pulse-animation {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.pulse-animation-delay {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 1s;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Solution cards hover effects */
.solution-card {
    @apply transition-all duration-300;
}

.solution-card:hover {
    @apply transform -translate-y-1;
}

.solution-card-image {
    @apply transition-all duration-500;
}

.solution-card:hover .solution-card-image {
    @apply transform scale-110;
}

/* Testimonial slider styles */
.testimonial-slide {
    @apply opacity-0 absolute transition-opacity duration-500;
    pointer-events: none;
}

.testimonial-slide.active {
    @apply opacity-100 relative;
    pointer-events: auto;
}

/* Card hover effects */
.hover-card {
    @apply transition-all duration-300;
}

.hover-card:hover {
    @apply transform -translate-y-2 shadow-xl;
}

/* Back to top button */
#back-to-top {
    @apply transition-all duration-300 transform;
}

#back-to-top:hover {
    @apply bg-primary-700 scale-110;
}

/* Custom form styling */
.form-input, .form-textarea, .form-select {
    @apply block w-full rounded-md border-secondary-300 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50;
}

.form-label {
    @apply block text-sm font-medium text-secondary-700 mb-1;
}

.form-error {
    @apply mt-1 text-sm text-red-600;
}

/* Success message animation */
.success-message {
    animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom file input */
.custom-file-input {
    @apply opacity-0 absolute h-0 w-0;
}

.custom-file-label {
    @apply flex items-center px-4 py-2 bg-white border border-secondary-300 rounded-md shadow-sm text-sm font-medium text-secondary-700 hover:bg-secondary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 cursor-pointer;
}

/* Stats counter animation */
.counter-value {
    @apply transition-all duration-1000;
}

/* Content section spacing */
.content-section {
    @apply py-16 md:py-24;
}

.content-section-sm {
    @apply py-10 md:py-16;
}

/* Industry 4.0 diagram */
.industry-diagram-container {
    @apply relative;
}

.industry-diagram-node {
    @apply absolute bg-white rounded-full p-3 shadow-lg transition-all duration-300 transform cursor-pointer;
}

.industry-diagram-node:hover {
    @apply scale-110 shadow-xl;
}

.industry-diagram-line {
    @apply absolute bg-primary-200;
    height: 2px;
    transform-origin: left center;
    z-index: -1;
}

/* Timeline component */
.timeline-container {
    @apply relative;
}

.timeline-container::before {
    content: '';
    @apply absolute left-1/2 transform -translate-x-1/2 h-full bg-primary-200;
    width: 2px;
}

.timeline-item {
    @apply relative pl-10 md:pl-0 mb-10;
}

.timeline-item:last-child {
    @apply mb-0;
}

.timeline-dot {
    @apply absolute left-0 md:left-1/2 transform md:-translate-x-1/2 h-6 w-6 rounded-full bg-primary-600 border-4 border-white shadow-md;
    top: 50%;
    transform: translateY(-50%);
}

@media (min-width: 768px) {
    .timeline-item:nth-child(odd) {
        @apply md:pr-10 md:text-right;
    }
    
    .timeline-item:nth-child(even) {
        @apply md:pl-10 md:ml-auto;
    }
    
    .timeline-item {
        @apply w-1/2;
    }
}

/* Gradient text */
.gradient-text {
    @apply font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-blue-500;
}

/* Solution tab navigation */
.solution-tab-button {
    @apply py-3 px-5 font-medium rounded-t-lg transition-colors;
}

.solution-tab-button.active {
    @apply border-b-2 border-primary-600;
}

.solution-tab-panel {
    @apply transition-all duration-300;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    @apply bg-secondary-100;
}
 
::-webkit-scrollbar-thumb {
    @apply bg-secondary-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-secondary-400;
}

/* Loading spinner */
.spinner {
    @apply inline-block h-5 w-5 border-2 border-secondary-100 border-t-primary-600 rounded-full animate-spin;
}

.button-loader {
    @apply inline-block h-5 w-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2;
    display: none;
}

/* Animated underline */
.animated-underline {
    @apply relative;
}

.animated-underline::after {
    content: '';
    @apply absolute left-0 bottom-0 w-0 h-0.5 bg-primary-500 transition-all duration-300;
}

.animated-underline:hover::after {
    @apply w-full;
}

/* Particles background */
#particles-js {
    @apply fixed inset-0 -z-10;
}

/* Card grid with masonry layout for blog */
@media (min-width: 768px) {
    .masonry-grid {
        column-count: 2;
        column-gap: 1.5rem;
    }
    
    @media (min-width: 1024px) {
        .masonry-grid {
            column-count: 3;
        }
    }
    
    .masonry-item {
        break-inside: avoid;
        margin-bottom: 1.5rem;
    }
}