/* 
    VIVA ENGINEERING - Premium Design System
    Centralized CSS for industrial excellence
*/

:root {
    --primary-orange: #FF5722;
    --primary-orange-hover: #E64A19;
    --industrial-black: #000000;
    --industrial-gray: #111827;
    --industrial-gray-light: #1f2937;
    --text-white: #ffffff;
    --text-gray: #9ca3af;
    --glass-bg: rgba(17, 24, 39, 0.7);
    --glass-border: rgba(255, 87, 34, 0.2);
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Roboto Slab', serif;
    --font-mono: 'Space Mono', monospace;
}

/* Loading Screen */
#loading-screen {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-ring {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 87, 34, 0.1);
    border-top: 3px solid #FF5722;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 24px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Base Styles */
html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    background-color: var(--industrial-black);
    color: var(--text-white);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

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

::-webkit-scrollbar-track {
    background: var(--industrial-black);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-orange);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-orange-hover);
}

/* Utility Classes */
.bg-grid-pattern {
    background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

.glass-morphism {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
}

.text-gradient-orange {
    background: linear-gradient(135deg, #FF5722 0%, #FF8A65 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animations Keyframes */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

@keyframes pulse-glow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(255, 87, 34, 0.3);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 20px rgba(255, 87, 34, 0.6);
        transform: scale(1.02);
    }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes rotate-in {
    from { transform: rotate(-10deg) scale(0.9); opacity: 0; }
    to { transform: rotate(0) scale(1); opacity: 1; }
}

@keyframes bounce-in {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); opacity: 1; }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Animation Utility Classes */
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-shimmer {
    animation: shimmer 2s linear infinite;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
    background-size: 1000px 100%;
}
.animate-gradient-flow {
    background-size: 200% 200%;
    animation: gradient-flow 3s ease infinite;
}
.animate-wave { animation: wave 3s ease-in-out infinite; }
.animate-rotate-in { animation: rotate-in 0.8s ease-out forwards; }
.animate-bounce-in { animation: bounce-in 0.8s ease-out forwards; }

@keyframes gear-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes neon-glow {
    0%, 100% { box-shadow: 0 0 5px #FF6B00, 0 0 10px #FF6B00; }
    50% { box-shadow: 0 0 15px #FF6B00, 0 0 25px #FF6B00; }
}

@keyframes particle-float {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) translateX(20px); opacity: 0; }
}

.animate-gear-rotate { animation: gear-rotate 20s linear infinite; }
.animate-neon-glow { animation: neon-glow 2s ease-in-out infinite; }
.animate-particle-float { animation: particle-float 3s linear infinite; }

.hover-lift { transition: all 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); }

.hover-rotate:hover { transform: rotate(5deg) scale(1.05); transition: transform 0.3s ease; }
.hover-scale { transition: transform 0.3s ease; }
.hover-scale:hover { transform: scale(1.05); }

/* Component Styles */
.btn-premium {
    position: relative;
    padding: 12px 32px;
    background: var(--primary-orange);
    color: white;
    font-weight: 700;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-premium:hover {
    background: var(--primary-orange-hover);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 87, 34, 0.3);
}

.btn-premium::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.btn-premium:hover::after {
    left: 100%;
}

/* Contact Page Enhancements */
.faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer.active {
    max-height: 500px;
    opacity: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.animate-pulse-slow {
    animation: pulse 4s ease-in-out infinite;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-down {
    animation: slideDown 0.5s ease-out forwards;
}

/* Gallery Page Enhancements */
.filter-btn {
    padding: 10px 24px;
    background: transparent;
    border: 2px solid #374151;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-btn:hover {
    border-color: var(--orange-primary);
    color: var(--orange-primary);
    transform: translateY(-2px);
}

.filter-btn.active {
    background: var(--orange-primary);
    border-color: var(--orange-primary);
    color: white;
    box-shadow: 0 10px 20px rgba(255, 107, 0, 0.2);
}

.gallery-item {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox-modal {
    backdrop-filter: blur(10px);
    transition: opacity 0.4s ease;
}

#lightbox-image {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.shimmer-bg {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.9) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.animate-pop-in {
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Premium Product Card UI */
.product-card-gallery .inner-card {
    position: relative;
    height: 520px;
    border-radius: 20px;
    overflow: hidden;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}

.product-card-gallery .inner-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,87,34,0.3) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.05) 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.5s ease;
}

.product-card-gallery:hover .inner-card {
    transform: translateY(-15px) scale(1.02);
    border-color: rgba(255, 87, 34, 0.4);
    box-shadow: 0 40px 80px rgba(0,0,0,0.9), 0 0 30px rgba(255, 87, 34, 0.1);
}

.product-card-gallery:hover .inner-card::after {
    opacity: 1;
}

.product-card-gallery .card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7) contrast(1.1);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.product-card-gallery:hover .card-image {
    transform: scale(1.15) rotate(1deg);
    filter: brightness(0.4) blur(2px);
}

.product-card-gallery .card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, 
        rgba(0,0,0,1) 0%, 
        rgba(0,0,0,0.4) 40%, 
        transparent 100%);
    opacity: 1;
    transition: all 0.5s ease;
}

.product-card-gallery:hover .card-overlay {
    background: radial-gradient(circle at center, rgba(255,87,34,0.1) 0%, rgba(0,0,0,0.8) 100%);
}

.card-technical-id {
    position: absolute;
    top: 30px;
    right: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 900;
    color: rgba(255,255,255,0.2);
    letter-spacing: 3px;
    z-index: 20;
    text-transform: uppercase;
    transition: all 0.5s ease;
}

.product-card-gallery:hover .card-technical-id {
    color: var(--primary-orange);
    transform: translateX(-5px);
}

.card-specs-overlay {
    position: absolute;
    top: 50%;
    left: 40px;
    right: 40px;
    transform: translateY(20px);
    opacity: 0;
    z-index: 25;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

.product-card-gallery:hover .card-specs-overlay {
    opacity: 1;
    transform: translateY(-50%);
}

.spec-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 11px;
    color: var(--text-gray);
}

.spec-pill span:last-child {
    color: white;
    font-weight: 700;
}

.product-card-gallery .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    z-index: 30;
    transition: transform 0.5s ease;
}

.product-card-gallery:hover .card-content {
    transform: translateY(-20px);
}

/* Filter Buttons */
.filter-btn {
    padding: 12px 28px;
    background: var(--industrial-gray);
    border: 1px solid var(--industrial-gray-light);
    border-radius: 50px;
    color: var(--text-gray);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.filter-btn:hover, .filter-btn.active {
    background: var(--primary-orange);
    color: white;
    border-color: var(--primary-orange);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 87, 34, 0.3);
}

/* Breadcrumb */
.breadcrumb-item {
    color: var(--text-gray);
    transition: color 0.3s ease;
}

.breadcrumb-item:hover {
    color: var(--primary-orange);
}

.breadcrumb-active {
    color: var(--primary-orange);
    font-weight: bold;
}
/* Creative Industrial Blueprint & Mechanical Accents */
.blueprint-bg-complex {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: 
        linear-gradient(rgba(255, 87, 34, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 87, 34, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(255, 87, 34, 0.01) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 87, 34, 0.01) 2px, transparent 2px);
    background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px;
    background-position: center center;
    opacity: 0.5;
}

.blueprint-coords {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(255, 87, 34, 0.2);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.decorative-gear-bg {
    position: fixed;
    bottom: -150px;
    right: -150px;
    width: 600px;
    height: 600px;
    background: url('data:image/svg+xml;utf8,<svg xmlns=" http://www.w3.org/2000/svg\ viewBox=\0 0 100 100\ fill=\none\ stroke=\rgba 255 87 34 0.03 \ stroke-width=\0.5\><path d=\M50 10 L55 25 L70 20 L65 35 L80 40 L65 45 L70 60 L55 55 L50 70 L45 55 L30 60 L35 45 L20 40 L35 35 L30 20 L45 25 Z\ /></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -1;
    opacity: 0.6;
}

.cad-marker {
 position: absolute;
 width: 40px;
 height: 40px;
 border: 1px solid rgba(255, 87, 34, 0.3);
 z-index: 20;
 pointer-events: none;
}

.cad-label {
 position: absolute;
 font-family: var(--font-mono);
 font-size: 8px;
 color: var(--primary-orange);
 opacity: 0.6;
 letter-spacing: 1px;
}

.product-card-gallery:hover .cad-label {
 opacity: 1;
}

/* Staggered entry classes for GSAP */
.gsap-reveal-stagger {
 opacity: 0;
 transform: translateY(30px);
}

/* Interactive Gallery Animations */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 5px rgba(255, 87, 34, 0.5); border-color: rgba(255, 87, 34, 0.5); }
    50% { box-shadow: 0 0 15px rgba(255, 87, 34, 0.8); border-color: rgba(255, 87, 34, 1); }
    100% { box-shadow: 0 0 5px rgba(255, 87, 34, 0.5); border-color: rgba(255, 87, 34, 0.5); }
}
.animate-pulse-glow {
    animation: pulse-glow 2s infinite ease-in-out;
}