/* css/style.css */

/* Reset & Base */
html {
    scroll-behavior: smooth;
    background-color: #1A1A1A;
}

body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography Fine-tuning */
.font-heading {
    letter-spacing: -0.03em;
}

.font-drama {
    letter-spacing: 0.02em;
    font-weight: 400; /* Ensuring the elegant thin look */
}

/* Global Noise Overlay - Raw Texture */
.noise-overlay {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: multiply;
}

/* Form Input Placeholders floating logic */
input:not(:placeholder-shown) + label,
textarea:not(:placeholder-shown) + label {
    top: -14px;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    color: #CC5833;
}

/* Remove default webkit styles for inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #1A1A1A !important;
}

/* Custom Scroll Indicator Animation */
@keyframes scroll-down {
    0% {
        transform: translateY(-100%);
    }
    40%, 60% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}

/* Custom Columns/Masonry for the Portfolio Grid */
@media (min-width: 768px) {
    .columns-2 {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .columns-3 {
        column-count: 3;
    }
}

.break-inside-avoid {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Button Reset */
button {
    outline: none;
    border: none;
    cursor: pointer;
}