/* Main Stylesheet for TxMeta */

/* This CSS is designed for a fade-in/slide-up effect on sections as they scroll into view. */
/* It also ensures proper scroll-padding for the fixed header. */

html {
    /* Ensures anchor links scroll to the correct position, accounting for the fixed header. */
    scroll-padding-top: 120px;
}

body {
    /* Default font will be set in index.html, fallbacks here */
    font-family: 'Inter', sans-serif; 
    background-color: #09090b;
    color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
}

/* === PRELOADER === */
.preloader-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #09090b;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease-in-out;
}

.preloader-main.loaded {
    opacity: 0;
    visibility: hidden;
}

.preloader-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(196, 231, 15, 0.3);
    border-radius: 50%;
    border-top-color: #C4E70F;
    animation: spin 1s ease-in-out infinite;
}

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

/* === ADVANCED NAVBAR === */
.txmeta-navbar {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* === MOBILE MENU === */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    visibility: hidden;
}

.mobile-menu.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mobile-menu .close-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 2rem;
    color: #cbd5e1;
    cursor: pointer;
    transition: color 0.3s ease;
}

.mobile-menu .close-btn:hover {
    color: #67e8f9;
}

.mobile-menu .nav-link {
    font-size: 1.5rem;
    margin: 1rem 0;
    color: #cbd5e1;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: slideInMobile 0.5s ease forwards;
}

.mobile-menu .nav-link:nth-child(1) {
    animation-delay: 0.1s;
}

.mobile-menu .nav-link:nth-child(2) {
    animation-delay: 0.2s;
}

.mobile-menu .nav-link:nth-child(3) {
    animation-delay: 0.3s;
}

.mobile-menu .nav-link:nth-child(4) {
    animation-delay: 0.4s;
}

.mobile-menu .nav-link:nth-child(5) {
    animation-delay: 0.5s;
}

.mobile-menu .nav-link:nth-child(6) {
    animation-delay: 0.6s;
}

@keyframes slideInMobile {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu .nav-link:hover {
    color: #67e8f9;
    transform: scale(1.05);
}

/* === SECTIONS WITH FADE-IN/SLIDE-UP EFFECT === */
.section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
    /* Initial state for animation */
    opacity: 0;
    transform: translateY(120px);
    /* Increased from 80px for more visibility */
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Class to make section visible */
.section.section-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Z-index for visual layering */
#hero {
    z-index: 10;
}

#services {
    z-index: 20;
}

#why-cardano {
    z-index: 30;
}

#process {
    z-index: 40;
}

#testimonials {
    z-index: 50;
}

#contact {
    z-index: 60;
}

#subscribe {
    z-index: 70;
}

.nav-link.active {
    color: #C4E70F !important;
    font-weight: 600;
}

/* === HERO AURORA === */
.hero-aurora {
    background-color: #09090b;
    /* Dark Theme Texture */
    background-image:
        url('../images/hero-bg-dark.png'),
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(196, 231, 15, 0.25), transparent),
        radial-gradient(ellipse 80% 50% at 80% 50%, rgba(196, 231, 15, 0.15), transparent),
        radial-gradient(ellipse 80% 50% at 20% 50%, rgba(196, 231, 15, 0.08), transparent);
    background-size: cover, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed; /* Parallax-like feel */
    background-blend-mode: overlay, normal, normal, normal;
    position: relative;
    overflow: hidden;
}

/* Pulsing animated gradient overlay */
.hero-aurora::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 60% 40% at 30% 20%, rgba(196, 231, 15, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 70% 80%, rgba(196, 231, 15, 0.08) 0%, transparent 50%);
    animation: pulseGradient 15s ease-in-out infinite;
    z-index: 0;
}

@keyframes pulseGradient {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

/* Interactive light particles */
.hero-aurora::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle 12px at var(--particle-1-x, 20%) var(--particle-1-y, 30%), rgba(196, 231, 15, 0.6) 0%, transparent 50%),
        radial-gradient(circle 10px at var(--particle-2-x, 80%) var(--particle-2-y, 60%), rgba(196, 231, 15, 0.5) 0%, transparent 50%),
        radial-gradient(circle 14px at var(--particle-3-x, 40%) var(--particle-3-y, 80%), rgba(196, 231, 15, 0.4) 0%, transparent 50%),
        radial-gradient(circle 11px at var(--particle-4-x, 70%) var(--particle-4-y, 20%), rgba(196, 231, 15, 0.5) 0%, transparent 50%),
        radial-gradient(circle 9px at var(--particle-5-x, 10%) var(--particle-5-y, 70%), rgba(196, 231, 15, 0.6) 0%, transparent 50%),
        radial-gradient(circle 13px at var(--particle-6-x, 90%) var(--particle-6-y, 40%), rgba(196, 231, 15, 0.4) 0%, transparent 50%);
    pointer-events: none;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    animation: floatUpwards 15s ease-in-out infinite;
}

@keyframes floatUpwards {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Ensure content stays above the light effect */
.hero-aurora .container {
    position: relative;
    z-index: 2;
}

/* === GLASS CARDS === */
.glass-card {
    background-color: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* === PROCESS STEPS === */
.process-step {
    position: relative;
    transition: all 0.3s ease;
}

.process-step:hover {
    transform: translateY(-5px);
}

.process-step .step-number {
    transition: all 0.3s ease;
}

.process-step:hover .step-number {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(196, 231, 15, 0.4);
}

/* === GRADIENTS === */
.gradient-text {
    background: linear-gradient(90deg, #C4E70F, #d4f02f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-border {
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 12px;
    position: relative;
}

.gradient-border::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background: linear-gradient(to right, #C4E70F, #d4f02f);
}

/* === ANIMATIONS === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.animate-fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-slide-in {
    animation: slideInRight 0.8s ease-out forwards;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* === ENHANCED INTERACTIONS === */
.service-card {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(196, 231, 15, 0.2);
}

.service-card:hover .service-icon {
    transform: rotate(5deg) scale(1.1);
    color: #C4E70F;
}

.service-icon {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* === TEAM MEMBER CARDS === */
.team-member-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.team-member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(196, 231, 15, 0.2);
}

.team-member-card img {
    transition: all 0.5s ease;
}

.team-member-card:hover img {
    transform: scale(1.1);
}

/* === TESTIMONIAL CARDS === */
.testimonial-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(196, 231, 15, 0.15);
}

/* === FORM ENHANCEMENTS === */
.contact-form {
    transition: all 0.3s ease;
}

.contact-form:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(196, 231, 15, 0.1);
}

.form-input {
    transition: all 0.3s ease;
}

.form-input:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(196, 231, 15, 0.2);
}

/* === LIGHT THEME === */
body.light-theme {
    background-color: #f8fafc;
    color: #1e293b;
    /* Darker text for better legibility on light background */
}

body.light-theme .txmeta-navbar {
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom-color: #e2e8f0;
}

body.light-theme .txmeta-navbar .navbar-brand,
body.light-theme .txmeta-navbar .nav-link {
    color: #1e293b;
}

body.light-theme .txmeta-navbar .nav-link.active {
    color: #C4E70F;
}

body.light-theme .txmeta-navbar .nav-link:hover {
    color: #15803d;
}

body.light-theme .txmeta-navbar #theme-toggle {
    color: #1e293b;
}

body.light-theme .section {
    background-color: #f8fafc;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-bottom-color: #e2e8f0;
}

/* Explicitly target p tags in hero and subscribe for legibility with a darker color */
body.light-theme #hero p,
body.light-theme #subscribe p {
    color: #1e293b;
}

body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4 {
    color: #1e293b;
}

body.light-theme .gradient-text {
    background: linear-gradient(90deg, #15803d, #16a34a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-theme .glass-card {
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(226, 232, 240, 0.7);
}

body.light-theme .glass-card p {
    color: #475569;
}

body.light-theme .glass-card .font-bold.text-white {
    color: #1e293b;
}

/* Light theme service cards */
body.light-theme .service-card {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(226, 232, 240, 0.8) !important;
}

body.light-theme .service-card:hover {
    border-color: #C4E70F !important;
}

body.light-theme .service-card h3 {
    color: #1e293b !important;
}

body.light-theme .service-card p {
    color: #475569 !important;
}

/* Light theme service cards - improved legibility with darker green */
body.light-theme .service-card .text-lime-400 {
    color: #15803d !important;
    /* Darker green for better contrast */
}

body.light-theme .service-card .bg-lime-500\/20 {
    background-color: rgba(21, 128, 61, 0.2) !important;
    /* Darker green background */
}

body.light-theme .service-card .border-lime-500\/30 {
    border-color: rgba(21, 128, 61, 0.3) !important;
    /* Darker green border */
}

/* Light theme service icons - darker green to match team section */
body.light-theme .service-card .fa-solid,
body.light-theme .service-card .fa-regular {
    color: #15803d !important;
    /* Darker green to match team section */
}

/* Light theme service badges - darker green */
body.light-theme .service-card .px-3.py-1.bg-lime-500\/20 {
    background-color: rgba(21, 128, 61, 0.15) !important;
}

body.light-theme .service-card .px-3.py-1.text-lime-400 {
    color: #15803d !important;
}

body.light-theme .service-card .px-3.py-1.border-lime-500\/30 {
    border-color: rgba(21, 128, 61, 0.4) !important;
}

/* Light theme "Learn more" links - darker green */
body.light-theme .service-card a.text-lime-400 {
    color: #15803d !important;
}

body.light-theme .service-card a.text-lime-400:hover {
    color: #16a34a !important;
    /* Slightly lighter green on hover */
}

/* Light Theme Service Tags (e.g. React, Haskell) */
body.light-theme .service-card .bg-slate-700\/50 {
    background-color: #f1f5f9 !important; /* slate-100 */
    color: #475569 !important; /* slate-600 */
    border-color: #e2e8f0 !important; /* slate-200 */
}

/* Light theme FontAwesome icons */
body.light-theme .fa-solid,
body.light-theme .fa-regular,
body.light-theme .fa-light,
body.light-theme .fa-duotone,
body.light-theme .fa-thin,
body.light-theme .fa-brands {
    color: #1e293b !important;
}

/* Light Theme Hero Background */
body.light-theme .hero-aurora {
    background-color: #ffffff;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(196, 231, 15, 0.15), transparent),
        radial-gradient(ellipse 60% 50% at 90% 50%, rgba(196, 231, 15, 0.08), transparent);
    background-blend-mode: normal;
}

/* Ensure Section Headers are visible in Light Mode */
body.light-theme .section h2.text-white,
body.light-theme .glass-card h2.text-white,
body.light-theme .section .font-bold.text-white {
    color: #1e293b !important;
}

body.light-theme .section p.text-slate-400,
body.light-theme .glass-card p.text-slate-400 {
    color: #475569 !important;
}

/* Fix "View Services" button in Light Mode */
body.light-theme .hero-aurora a.border-white\/10 {
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}
body.light-theme .hero-aurora a.border-white\/10:hover {
    border-color: #15803d !important;
    color: #15803d !important;
}

body.light-theme .contact-info .fa-solid {
    color: #C4E70F !important;
}
/* Fix "Why Cardano" Feature Cards in Light Mode */
body.light-theme #why-cardano .bg-white\/5 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

body.light-theme #why-cardano h4.text-white {
    color: #1e293b !important;
}

body.light-theme #why-cardano p.text-slate-400 {
    color: #475569 !important;
}

/* Fix "Why Cardano" Image Container */
body.light-theme #why-cardano .bg-slate-900\/30 {
    background-color: rgba(226, 232, 240, 0.5) !important; /* light slate */
}
body.light-theme .process-step .fa-solid,
body.light-theme .process-step .fa-regular {
    color: #64748b !important;
}

body.light-theme .timeline-step .fa-solid {
    color: #C4E70F !important;
}

body.light-theme .contact-info .fa-solid {
    color: #C4E70F !important;
}

body.light-theme .process-step .bg-slate-800 {
    background-color: #f8fafc;
}

body.light-theme .process-step .border-lime-400 {
    border-color: #64748b;
}

body.light-theme .process-step .text-lime-300 {
    color: #64748b;
}

body.light-theme .process-step h4 {
    color: #1e293b !important;
}

body.light-theme .process-step p {
    color: #64748b !important;
}

body.light-theme .process-step .step-number {
    background-color: #f8fafc !important;
    border-color: #64748b !important;
    color: #64748b !important;
}

body.light-theme .process-step .step-number:hover {
    border-color: #C4E70F !important;
    color: #C4E70F !important;
    box-shadow: 0 0 20px rgba(196, 231, 15, 0.4) !important;
}

/* Light theme team member cards */
body.light-theme .team-member-card {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(226, 232, 240, 0.8) !important;
}

body.light-theme .team-member-card:hover {
    border-color: #C4E70F !important;
}

body.light-theme .team-member-card h3 {
    color: #1e293b !important;
}

body.light-theme .team-member-card p {
    color: #475569 !important;
}

/* Light theme team member roles - darker green for better visibility */
body.light-theme .team-member-card .text-lime-400 {
    color: #15803d !important;
    /* Darker green for better contrast */
}

/* Light theme social icons - darker green */
body.light-theme .team-member-card .fa-brands {
    color: #15803d !important;
    /* Darker green for social icons */
}

body.light-theme .team-member-card .bg-lime-500\/20 {
    background-color: rgba(21, 128, 61, 0.2) !important;
    /* Darker green background */
}

body.light-theme .team-member-card .border-lime-500\/30 {
    border-color: rgba(21, 128, 61, 0.3) !important;
    /* Darker green border */
}

/* Light theme skill badges - darker green */
body.light-theme .team-member-card .px-3.py-1.bg-lime-500\/20 {
    background-color: rgba(21, 128, 61, 0.15) !important;
}

body.light-theme .team-member-card .px-3.py-1.text-lime-400 {
    color: #15803d !important;
}

body.light-theme .team-member-card .px-3.py-1.border-lime-500\/30 {
    border-color: rgba(21, 128, 61, 0.4) !important;
}

body.light-theme .gradient-border::before {
    background: linear-gradient(to right, #15803d, #16a34a);
}

body.light-theme .gradient-border .text-white {
    color: #1e293b;
}

body.light-theme form input,
body.light-theme form textarea {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

body.light-theme form input:focus,
body.light-theme form textarea:focus {
    border-color: #15803d;
    box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.2);
}

body.light-theme .mobile-menu {
    background: rgba(248, 250, 252, 0.95);
}

body.light-theme .mobile-menu .nav-link,
body.light-theme .mobile-menu .close-btn {
    color: #475569;
}

body.light-theme .mobile-menu .nav-link:hover,
body.light-theme .mobile-menu .close-btn:hover {
    color: #15803d;
}

body.light-theme #mobile-menu-btn span {
    background-color: #1e293b !important;
}

/* Updated footer styling for better blending */
body.light-theme footer {
    background-color: rgba(241, 245, 249, 0.7);
    /* Slightly less transparent */
    border-top-color: #e2e8f0;
    color: #475569;
}

body.light-theme footer .font-bold.text-white {
    color: #1e293b;
}

body.light-theme .zao-product-card {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

body.light-theme .zao-product-card h5 {
    color: #1e293b !important;
}

body.light-theme .zao-product-card p {
    color: #64748b !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .section {
        min-height: auto;
        padding: 4rem 0;
    }

    .hero-aurora {
        padding: 6rem 0;
    }
}

/* Process Section - Visual Connector */
@media (min-width: 1024px) {
    .process-step::after {
        content: '';
        position: absolute;
        top: 2.5rem; /* Center vertically with the w-20 circle */
        left: 50%;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, 
            rgba(163, 230, 53, 0.4) 0%, 
            rgba(163, 230, 53, 0.1) 50%, 
            rgba(163, 230, 53, 0) 100%);
        z-index: 0;
        pointer-events: none;
    }

    /* Hide connector for the last item in the row (3rd item) and the very last item */
    .process-step:nth-child(3n)::after,
    .process-step:last-child::after {
        display: none;
    }
    
    /* Ensure the step circle is above the line */
    .process-step .step-number {
        position: relative;
        z-index: 10;
        background-color: #1e293b; /* Match bg to hide line behind */
    }
    /* Light mode adjustment for connector bg */
    body.light-theme .process-step .step-number {
        background-color: #f8fafc;
    }
}