/* ============================================
   Nexora — Custom Styles
   IT Consulting Landing Page
   ============================================ */

/* ---------- Smooth Scroll ---------- */
html {
    scroll-behavior: smooth;
}

/* ---------- Header Background Transition ---------- */
.header-scrolled {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dark .header-scrolled {
    background: rgba(15, 23, 42, 0.9) !important;
}

/* ---------- Mobile Menu ---------- */
.mobile-menu-open {
    overflow: hidden;
}

/* ---------- Fade-in + Slide-up Animations ---------- */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for card elements */
.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }

/* ---------- Floating Animation (Hero Visual) ---------- */
@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(12deg); }
    50% { transform: translateY(-12px) rotate(12deg); }
}

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

@keyframes float-fast {
    0%, 100% { transform: translateY(0) rotate(-12deg); }
    50% { transform: translateY(-20px) rotate(-12deg); }
}

.animate-float-slow {
    animation: float-slow 6s ease-in-out infinite;
}

.animate-float-medium {
    animation: float-medium 4s ease-in-out infinite;
}

.animate-float-fast {
    animation: float-fast 3s ease-in-out infinite;
}

/* ---------- Focus States ---------- */
*:focus-visible {
    outline: 2px solid #4F46E5;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Form Input Focus ---------- */
input:focus,
textarea:focus {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ---------- Form Validation States ---------- */
input.invalid,
textarea.invalid {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

input.valid,
textarea.valid {
    border-color: #10B981 !important;
}

/* ---------- Button Ripple Effect (minimal) ---------- */
.btn-primary {
    position: relative;
    overflow: hidden;
}

/* ---------- Selection ---------- */
::selection {
    background: #4F46E5;
    color: #FFFFFF;
}

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

::-webkit-scrollbar-track {
    background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

.dark ::-webkit-scrollbar-track {
    background: #1E293B;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748B;
}

/* ---------- Process Steps Connector (Desktop) ---------- */
@media (min-width: 1024px) {
    .process-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 32px;
        right: -40px;
        width: 80px;
        height: 2px;
        background: linear-gradient(to right, #4F46E5, transparent);
        opacity: 0.2;
    }
}

/* ---------- Language Buttons ---------- */
.lang-btn {
    transition: all 0.2s ease;
}

.lang-btn.active {
    background: #4F46E5;
    color: #FFFFFF;
}

.lang-btn:not(.active) {
    background: transparent;
    color: #64748B;
}

.dark .lang-btn:not(.active) {
    color: #94A3B8;
}

/* ---------- Mobile Menu Transition ---------- */
#mobile-menu {
    transition: transform 0.3s ease-in-out;
}

/* ---------- Card Hover Enhancement ---------- */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ---------- Dark Mode Transitions ---------- */
.dark body {
    color-scheme: dark;
}

/* ---------- Responsive Typography ---------- */
@media (max-width: 640px) {
    h1 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.75rem;
        line-height: 1.3;
    }
}

/* ---------- Print Styles ---------- */
@media print {
    header,
    #contact,
    footer {
        display: none;
    }
}