/* OSNOVE */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { background-color: #000 !important; color: #fff; font-family: 'Chivo Mono', monospace; text-transform: uppercase; }
body { padding: 20px; overflow-x: hidden; }

/* CUSTOM CURSOR */
#cursor-play { position: fixed; pointer-events: none; z-index: 10000; font-size: 9px; transform: translate(15px, 15px); opacity: 0; transition: opacity 0.2s ease; }
body:has(.work-item:hover) #cursor-play, body:has(.video-poster:hover) #cursor-play { opacity: 1; }

/* HEADER */
header { display: flex; justify-content: space-between; position: fixed; top: 20px; left: 20px; width: calc(100% - 40px); z-index: 8000; transition: opacity 0.4s ease; background: black; }
.logo { font-size: 1.4rem; letter-spacing: 2px; cursor: pointer; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
nav { display: flex; gap: 15px; }
nav a { color: #555; text-decoration: none; font-size: 0.7rem; cursor: pointer; transition: color 0.3s; }
nav a.active { color: #fff; }

/* GRID */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; row-gap: 60px; margin-top: 150px; padding-bottom: 100px; }
.work-item { cursor: pointer; pointer-events: auto; }
.text-container { height: 35px; display: flex; align-items: flex-end; margin-bottom: 10px; }
.work-item span { display: block; font-size: 0.65rem; color: #fff; }

.thumb { 
    width: 100%; aspect-ratio: 16/10; background-color: #000; 
    background-size: contain; background-repeat: no-repeat; background-position: center; 
    border: none;
    transition: background-image 0.3s ease; 
}

.work-item:hover .thumb { 
    background-image: var(--hover-gif) !important; 
    background-size: contain; 
}

/* ABOUT SECTION */
.about-section { max-width: 800px; margin: 150px auto 0 0; padding-left: 10px; }
.about-block { margin-bottom: 60px; }
.about-section h3 { font-size: 0.75rem; color: #555; margin-bottom: 15px; }
.about-section p { font-size: 1.1rem; line-height: 1.5; }
.contact-links a { display: block; margin-top: 10px; color: #fff; text-decoration: none; font-size: 1.1rem; width: fit-content; }

/* VIDEO OVERLAY */
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9000; align-items: center; justify-content: center; }
.center-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.video-container { width: 100%; max-width: 1200px; aspect-ratio: 16/9; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.video-container.zoomed-out { transform: scale(0.8); }
.video-poster { width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; cursor: pointer; }
.video-info-footer { width: 100%; max-width: 1200px; padding: 30px 0; display: flex; justify-content: space-between; align-items: flex-end; transition: opacity 0.4s ease; }
.video-title-below { font-size: 0.65rem; }
.nav-arrows-container { display: flex; gap: 30px; font-size: 0.65rem; color: #555; }
.arrow { cursor: pointer; transition: 0.3s; }
.arrow:hover { color: #fff; }

/* MOBILE */
@media (max-width: 768px) {
    header { top: 20px; flex-direction: column; align-items: center; gap: 15px; width: calc(100% - 40px); left: 20px; position: absolute; }
    .logo { position: relative; left: auto; transform: none; order: 1; font-size: 1.2rem; }
    nav { order: 2; gap: 15px; background: rgba(0, 0, 0, 0.8); padding: 5px 15px; border-radius: 30px; }
    .work-grid { grid-template-columns: repeat(2, 1fr); margin-top: 120px; gap: 10px; row-gap: 30px; }
    .video-container.zoomed-out { transform: scale(1); }
    #cursor-play, .thumb:hover { display: none !important; }
}

body.is-playing header, body.is-playing .video-info-footer { opacity: 0; pointer-events: none; }