/* Custom styling to supplement Tailwind */

/* Hide scrollbar for cleaner look */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #020617; /* yosdark */
}
::-webkit-scrollbar-thumb {
    background: #0F172A; /* navy */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #38BDF8; /* yosblue */
}

/* Base reveal classes (invisible before scroll) */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active reveal classes (triggered by JS) */
.reveal-active {
    opacity: 1;
    transform: translate(0, 0);
}

/* Smooth background grid for that tech/blueprint feel */
body {
    background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
}