/*
Theme Name: Antigravity Parallax
Theme URI: https://maikeloosterink.nl
Author: Antigravity
Description: A premium parallax theme with smooth scrolling (Lenis) and grid layout.
Version: 1.0.0
*/

/* Import the styles from the prototype (we'll paste the content here) */
:root {
    --bg-color: #000000;
    --text-color: #ffffff;
    --font-display: 'Rock Salt', cursive;
    /* Backup/Optional */
    --font-body: 'Manrope', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --spacing-unit: 1rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ... content will be appended from the prototype style.css ... */:root {
    --bg-color: #000000;
    --text-color: #ffffff;
    --font-display: 'Rock Salt', cursive;
    --font-body: 'Manrope', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --spacing-unit: 1rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /* Fix sticky behavior if needed later */
}

.hero-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url('/hero.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
    /* Lower z-index so content flows over it */
    will-change: transform;
    pointer-events: none;
}

.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 
     "Freedom" style fade: 
     Multi-stop "scrim" gradient for buttery smooth transition to black (#000)
    */
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.013) 8.1%,
            rgba(0, 0, 0, 0.049) 15.5%,
            rgba(0, 0, 0, 0.104) 22.5%,
            rgba(0, 0, 0, 0.175) 29%,
            rgba(0, 0, 0, 0.259) 35.3%,
            rgba(0, 0, 0, 0.352) 41.2%,
            rgba(0, 0, 0, 0.45) 47.1%,
            rgba(0, 0, 0, 0.55) 52.9%,
            rgba(0, 0, 0, 0.648) 58.8%,
            rgba(0, 0, 0, 0.741) 64.7%,
            rgba(0, 0, 0, 0.825) 71%,
            rgba(0, 0, 0, 0.896) 77.5%,
            rgba(0, 0, 0, 0.951) 84.5%,
            rgba(0, 0, 0, 0.987) 91.9%,
            #000000 100%);
}

.hero-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    /* Let clicks pass closely */
}

/* Top Navigation */
/* Top Navigation */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* Left, Center, Right (Spacer) */
    align-items: center;
    padding: 2rem 3rem;
    pointer-events: auto;
    mix-blend-mode: difference;
    /* Cool effect for text over images */
}

.nav-logo {
    color: white;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    text-transform: lowercase;
    /* "maikeloosterink.nl" */
    letter-spacing: 0.05em;
    justify-self: start;
}

.top-nav ul {
    display: flex;
    gap: 4rem;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-self: center;
}

.top-nav a:not(.nav-logo) {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    font-family: var(--font-body);
    transition: opacity 0.3s ease;
    opacity: 0.8;
}

.top-nav a:hover {
    opacity: 1;
}

/* Corner Nav (Bottom only now) */
.corner-nav {
    position: absolute;
    padding: 2.5rem;
    pointer-events: auto;
}

.bottom-left {
    bottom: 0;
    left: 0;
}

.bottom-right {
    bottom: 0;
    right: 0;
}

.mono-text {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    opacity: 0.9;
    letter-spacing: 0.05em;
}

.desc-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: right;
    max-width: 200px;
    line-height: 1.4;
}

/* Branding */
.hero-center {
    overflow: hidden;
    /* For reveal animations if added */
}

.brand-title {
    font-family: var(--font-display);
    font-size: 9vw;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    color: white;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transform: rotate(-3deg);
    margin: 0;
    pointer-events: auto;
}

/* Content Grid */
/* Content Grid */
.content {
    position: relative;
    z-index: 2;
    /* 
       Gradient Background:
       - 0% to 20vh: Transparent (or near transparent) to allow the "overlap" fade we created
       - 20vh+: Solid Black (#000) to block the fixed hero image from appearing behind content
       Note: 20vh matches our negative margin overlap.
    */
    background: linear-gradient(to bottom, transparent 0%, #000 20vh, #000 100%);
    /* Pull content UP over the hero to eliminate gap */
    margin-top: -20vh;
    /* 
       Padding Top: 30vh
       Logic: Content starts at 80vh (-20vh margin). 
       Adding 30vh padding pushes the *content inside* (images) to start at 110vh.
       This ensures they clear the hero image completely.
    */
    padding: 30vh 4rem 8rem 4rem;
    min-height: 100vh;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8rem 6rem;
    max-width: 1400px;
    margin: 0 auto;
}

.grid-item {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Staggered layout */
.grid-item.tall {
    margin-top: 10rem;
}

/* Force first item to have no margin to start immediately */
.grid-item:first-child {
    margin-top: 0 !important;
}

.img-wrapper {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4/5;
    /* Portrait orientation common in AndyHardy */
    position: relative;
}

.img-wrapper img {
    width: 100%;
    height: 120%;
    /* Taller for parallax inside mask */
    object-fit: cover;
    display: block;
    transform: translateY(0);
    will-change: transform;
}

.item-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.item-info span {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.item-info h3 {
    font-family: var(--font-body);
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: -0.02em;
}

/* Responsive */
@media (max-width: 900px) {
    .brand-title {
        font-size: 14vw;
    }

    .grid-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .grid-item.tall {
        margin-top: 0;
    }

    .corner-nav {
        padding: 1.5rem;
    }

    .desc-text,
    .mono-text {
        display: none;
    }

    /* Simplify on mobile */
    .content {
        padding: 4rem 1.5rem;
    }

    .img-wrapper img {
        height: 100%;
    }

    /* Disable parallax hint on mobile maybe? */
}