/* styles.css */

/* import the JMH Typewriter font, idk why it's not working */
@font-face {
    font-family: 'JMH Typewriter';
    src: url('/fonts/JMHTypewriter.woff') format('woff'),
         url('/fonts/JMHTypewriter.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* hover effect for "MAPPING FANON" text */
.header .logo-text {
    cursor: pointer; /* element is interactive */
    transition: color 0.3s ease; /* smooth transition for color change */
}

.header .logo-text:hover {
    color: yellow;
}


/* grid cells */
.grid div {
    --translateX: 0px;
    --translateY: 0px;
    --scaleFactor: 1; /* Default scale */
    transform: translate(var(--translateX), var(--translateY)) scale(var(--scaleFactor));
    width: 100%;
    height: 100%;
    background-image: url("/images/fanon.jpg");
    background-size: 75vw 85.7vh;
    opacity: 1; 
    transition: opacity 0.3s ease, transform 0.3s ease;
    background-repeat: no-repeat;
    user-select: none;
    will-change: transform, opacity;
}

/* animations */
.grid div.active {
    opacity: 1;
}



/* default margns and background */
body {
    margin: 0;
    overflow: hidden;
    background: white;
    font-family: Arial, sans-serif;
}

/* header style */
.header {
    background-color: black;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-sizing: border-box;
    height: 100px; 
}

/* left of the header */
.header .logo {
    font-family: 'JMH Typewriter', monospace; 
    font-size: 64px;
    flex: 1; 
    padding: 5px; 
}

/* right side navigation links */
.header .nav-links {
    display: flex;
    gap: 30px; /* Space between links */
}

.header .nav-links a {
    color: white;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 18px;
    transition: color 0.3s, text-decoration 0.3s;
}

.header .nav-links a:hover {
    color: yellow;
    text-decoration: underline;
}

/* position the grid and overlay text */
.container {
    position: relative;
    width: 100vw;
    height: calc(100vh - 100px);
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    padding-top: 5px; 
    box-sizing: border-box;
    overflow: hidden; 
}

/* responsive */
.grid {
    position: absolute; 
    bottom: 0;          
    left: 50%;          
    transform: translateX(-50%); 
    width: 110vw;        
    height: calc(100vh - 65px);    
    display: grid;
    
    grid-template-columns: repeat(25, 1fr); /* 25 columns */
    grid-template-rows: repeat(12, 1fr);    /* 12 rows */
    gap: 0.7px;
    pointer-events: none;
}

/* each grid cell as a square */
.grid div {
    --translateX: 0px;
    --translateY: 0px;
    --scaleFactor: 1; /* Default scale */
    transform: translate(var(--translateX), var(--translateY)) scale(var(--scaleFactor));
    width: 100%;
    height: 100%;
    background-image: url("/images/fanon.jpeg");
    background-size: 75vw 85.7vh; 
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    background-repeat: no-repeat;
    user-select: none;
    will-change: transform;
}

.grid div.active {
    opacity: 1;
}

.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    font-size: 32px;
    font-weight: bold;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.grid div:hover + .text {
    opacity: 1;
}

.grid div.repel {
    transform: translate(var(--translateX), var(--translateY)) scale(var(--scaleFactor));
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
    }

    .header .nav-links {
        flex-direction: column;
        gap: 10px;
    }

    .header .logo {
        flex: none;
        margin-bottom: 10px;
    }

    .container {
        height: calc(100vh - 60px);
        padding-top: 5px;
    }
}