/*
Theme Name: Maxi by Davie
Theme URI: http://danteburba.com
Author: Davie
Description: An ultra-modern, high-performance industrial theme for diesel and turbo specialists.
Version: 1.9
Updates: Finalized pointer-event passing and production-grade click fidelity.
*/

/* --- GLOBAL COLOR PALETTE --- */
:root {
    --brand-yellow: #fcd404;
    --brand-yellow-rgb: 252, 212, 4;
    --brand-yellow-hover: #eab308;
    --bg-dark: #09090b;
    --bg-zinc: #18181b;
    --text-primary: #f4f4f5;
    --text-muted: #a1a1aa;
    --border-glass: rgba(255, 255, 255, 0.1);
}

.scroll-smooth {
    scroll-behavior: smooth;
}

/* Glass UI Elements */
.glass {
    background: rgba(15, 15, 18, 0.8);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
    transition: border-color 0.4s ease;
}

.glass:hover {
    border-color: rgba(var(--brand-yellow-rgb), 0.4);
}

/* Technical Blueprint Corner Details */
.tech-border {
    position: relative;
    border: 1px solid var(--border-glass);
}

/**
 * PRODUCTION FIX: 
 * pointer-events: none ensures that decorative corners do not 
 * block the user from clicking the underlying gallery/system links.
 */
.tech-border::before, .tech-border::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: var(--brand-yellow);
    border-style: solid;
    pointer-events: none; 
    z-index: 5;
}

.tech-border::before {
    top: -1px;
    left: -1px;
    border-width: 1px 0 0 1px;
}

.tech-border::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 1px 1px 0;
}

/* Technical Image Handling */
.img-technical {
    overflow: hidden;
    background: #000;
}

.img-technical img {
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease, opacity 1s ease;
    filter: grayscale(20%) brightness(0.95);
    opacity: 0.9;
}

.img-technical:hover img {
    transform: scale(1.08);
    filter: grayscale(0%) brightness(1.1);
    opacity: 1;
}

.yellow-glow {
    box-shadow: 0 0 25px rgba(var(--brand-yellow-rgb), 0.2);
}

.text-gradient {
    background: linear-gradient(to right, #ffffff, var(--text-muted));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 35s linear infinite;
}