/* R4XN Global Styles */

/* Base Styles */
/* body {
    font-family: 'Clash Grotesk', sans-serif;
    background-color: #f4f4f4;
    color: #111;
} */

html {
    overflow-x: hidden;
}

/* Custom Fonts */
.customfont {
    font-family: "Press Start 2P", sans-serif;
}

.roboto-font {
    font-family: "Roboto", sans-serif;
}

/* Scrollbar */
::-webkit-scrollbar {
    display: none;
}

/* Grid Background Pattern */
body::before {
    --size: 45px;
    --line: rgba(0, 0, 0, 0.1);
    content: '';
    position: fixed;
    inset: 0;
    background:
        linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size),
        linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size);
    mask: linear-gradient(-15deg, transparent 50%, white);
    pointer-events: none;
    z-index: -1;
}

/* Dark Mode Styles */
/* .dark body {
    background-color: #080808;
    color: #fff;
} */

.dark body::before {
    --line: rgba(255, 255, 255, 0.42);
}

/* Animations */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animated Border */
.animate-border {
    background: linear-gradient(270deg, #4D4D4D, #737373, #F4F4F4, #737373);
    background-size: 300% 300%;
    animation: gradientMove 3s ease infinite;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
}

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

/* Card Components */
.project-card {
    transition: all 0.3s ease;
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.dark .project-card:hover {
    box-shadow: 0 20px 40px rgba(255, 255, 255, 0.1);
}

.pricing-card {
    transition: all 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.dark .pricing-card:hover {
    box-shadow: 0 20px 40px rgba(255, 255, 255, 0.1);
}

/* Tech Stack Items */
.tech-stack-item {
    transition: all 0.3s ease;
}

.tech-stack-item:hover {
    transform: scale(1.05);
}

/* Feature Lists */
.feature-list li {
    position: relative;
    padding-left: 1.5rem;
}

.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
}

/* Gallery Wrapper */
.wrapper {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.wrapper li {
    flex-shrink: 0;
    width: clamp(500px, 60vw, 800px);
    padding-right: 1rem;
}

.wrapper img {
    width: 100%;
    height: auto;
    background: #f0f0f0;
}

/* Hover Effects */
.hover-underline {
    position: relative;
}

.hover-underline::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transition: width 0.3s ease;
}

.hover-underline:hover::after {
    width: 100%;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .wrapper li {
        width: clamp(300px, 80vw, 500px);
    }
}

/* Print Styles */
@media print {
    body::before {
        display: none;
    }
    
    .animate-border {
        animation: none;
    }
}