@import url("https://fonts.cdnfonts.com/css/thegoodmonolith");
@font-face { font-family: "PPNeueMontreal"; src: url("https://assets.codepen.io/7558/PPNeueMontreal-Variable.woff2")format("woff2"); font-weight: 100 900; font-style: normal;}
    
:root { 

--spacing-base: 1rem; 
--spacing-md: 1.5rem; 
--spacing-lg: 2rem; 
--color-text: #ffffff; 
--color-text-dim: 0.6; 
--transition-medium: 0.3s ease; 
--font-size-base: 14px;}


* { margin: 0; padding: 0; box-sizing: border-box; -webkit-user-select: var(--var-none);    -moz-user-select: var(--var-none);     -ms-user-select: var(--var-none);         user-select: var(--var-none);}


body { font-family: "PPNeueMontreal", sans-serif; background: #000; overflow: hidden; height: 100vh; cursor: -webkit-grab; cursor: grab;}
body.dragging { cursor: -webkit-grabbing; cursor: grabbing;}
body.zoom-mode { cursor: default;}
.preloader-overlay { background: #000;}

/* Header and Footer */
.header,.footer { position: fixed; left: 0; width: 100vw; padding: 1.5rem; z-index: 10000; display: grid; grid-template-columns: repeat(12, 1fr); -moz-column-gap: var(--spacing-base);      column-gap: var(--spacing-base); pointer-events: var(--var-none); opacity: 0;}
.header > *,.footer > * { pointer-events: var(--var-auto);}
.header { top: 0;}
.footer { bottom: 0;}

/* Grid column assignments */
.nav-section { grid-column: 1 / span 3;}
.values-section { grid-column: 1 / span 2;}
.location-section { grid-column: 7 / span 2;}
.contact-section { grid-column: 9 / span 2;}
.social-section { grid-column: 11 / span 2; text-align: right;}

/* Bottom bar */
.coordinates-section { grid-column: 1 / span 3; font-family: "TheGoodMonolith", monospace;}
.info-section { grid-column: 9 / span 4; text-align: right;}

/* ===== LOGO COMPONENT ===== */
.logo-container { margin-bottom: var(--spacing-md); display: block; width: 3rem; height: 1.5rem; position: relative; cursor: pointer;}
.logo-circles { position: relative; width: 100%; height: 100%;}
.circle { position: absolute; border-radius: 50%; transition: transform var(--transition-medium); width: 1.4rem; height: 1.4rem; background-color: var(--color-text); top: 50%;}
.circle-1 { left: 0; transform: translate(0, -50%);}
.circle-2 { left: 0.8rem; transform: translate(0, -50%); mix-blend-mode: exclusion;}
.logo-container:hover .circle-1 { transform: translate(-0.5rem, -50%);}
.logo-container:hover .circle-2 { transform: translate(0.5rem, -50%);}

/* Key hint styling */
.key-hint { display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; border: 1px solid var(--color-text); border-radius: 3px; font-size: 12px; margin: 0 3px; min-width: 20px; height: 20px;}

/* Footer text styling */
.footer p { font-family: "TheGoodMonolith", monospace;}

/* Global link styling */
a { position: relative; cursor: pointer; color: var(--color-text); padding: 0; display: inline-block; z-index: 1; text-decoration: var(--var-none); font-size: var(--font-size-base); opacity: 1; transition: color var(--transition-medium); font-weight: 700;}
a::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--color-text); z-index: -1; transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);}
a:hover::after { width: 100%;}
a:hover { color: black; mix-blend-mode: difference; opacity: 1;}
p { display: block; text-decoration: var(--var-none); color: #ffffff; font-size: 14px; font-weight: 600; letter-spacing: -0.01rem; -webkit-font-smoothing: antialiased;}
ul { list-style: var(--var-none);}
h3 { font-size: 14px; margin-bottom: var(--spacing-base); font-weight: 600; color: #fff;}
.viewport { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; z-index: 1; opacity: 0;}
.canvas-wrapper { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; isolation: isolate;}
.grid-container { position: relative; width: 100%; height: 100%;}
.grid-item { position: absolute; width: 320px; height: 320px; background: #000; cursor: pointer; will-change: transform, opacity; z-index: 1; opacity: 1; transition: opacity 0.6s ease;}
.grid-item.out-of-view { opacity: 0.1;}
.grid-item.selected { z-index: 2 !important;}
.grid-item img { width: 100%; height: 100%; -o-object-fit: cover;    object-fit: cover; display: block; -webkit-user-select: var(--var-none);    -moz-user-select: var(--var-none);     -ms-user-select: var(--var-none);         user-select: var(--var-none); pointer-events: var(--var-none);}

/* Split Screen Layout */
.split-screen-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; z-index: 2; opacity: 0; pointer-events: var(--var-none);}
.split-screen-container.active { opacity: 1; pointer-events: all;}
.split-left { position: relative; width: 50vw; height: 100vh; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1; cursor: pointer;}
.split-right { position: relative; width: 50vw; height: 100vh; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1; cursor: pointer;}

/* Image target - BEHIND the scaling image */
.zoom-target { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; z-index: 1;}

/* Image title overlay - positioned at bottom left */
.image-title-overlay { position: absolute; bottom: 40px; left: 40px; transform: var(--var-none); color: white; z-index: 4; opacity: 0; pointer-events: var(--var-none);}
.image-title-overlay.active { opacity: 0;}
.image-slide-number { position: relative; width: 400px; height: 20px; margin-bottom: 0.5em; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);         clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); overflow: hidden;}
.image-slide-number span { position: absolute; top: 0; left: 0; color: white; font-family: "TheGoodMonolith", monospace; font-size: 12px; font-weight: 400; line-height: 1.5; transform: translateY(0px); will-change: transform; margin: 0; padding: 0; text-transform: uppercase; letter-spacing: 0.1em;}
.image-slide-title { position: relative; width: 400px; height: 60px; margin-bottom: 1em; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);         clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); overflow: hidden;}
.image-slide-title h1 { position: absolute; top: 0; left: 0; color: white; font-family: "PPNeueMontreal", sans-serif; font-size: 48px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; transform: translateY(0px); will-change: transform; margin: 0; padding: 0;}
.image-slide-description { position: relative; width: 400px; min-height: 80px; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);         clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); overflow: hidden;}
.description-line { position: relative; display: block; color: rgba(255, 255, 255, 0.8); font-family: "PPNeueMontreal", sans-serif; font-size: 16px; font-weight: 300; line-height: 1.4; transform: translateY(0px); will-change: transform; margin: 0; padding: 0; overflow: hidden;}

@media (max-width: 900px) { .image-title-overlay {   bottom: 20px;   left: 20px; }
.image-slide-number {   width: 300px;   height: 18px; }
.image-slide-number span {   font-size: 10px; }
.image-slide-title {   width: 300px;   height: 50px; }
.image-slide-title h1 {   font-size: 36px; }
.image-slide-description {   width: 300px;   min-height: 70px; }
.description-line {   font-size: 14px; }
 }
 
/* Hide placeholder when active */
.split-screen-container.active .zoom-target::before { display: var(--var-none);}
.zoom-target::before { content: "IMAGE TARGET"; color: rgba(255, 255, 255, 0.5); font-family: "TheGoodMonolith", monospace; font-size: 0.75em; font-weight: 400; text-transform: uppercase; letter-spacing: 2px;}
.controls-container { position: fixed; bottom: 1.25em; left: 50%; transform: translateX(-50%); display: flex; z-index: 6; opacity: 0; transition: left 1.2s cubic-bezier(0.87, 0, 0.13, 1);}
.controls-container.visible { opacity: 1;}
.controls-container.split-mode { left: 75%;}
.percentage-indicator { background-color: #f0f0f0; background-image: radial-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 0); background-size: 0.44em 0.44em; background-position: -0.06em -0.06em; padding: 0.625em 1.25em; border-radius: 0.25em; display: flex; align-items: center; justify-content: center; font-family: "TheGoodMonolith", monospace; font-size: 0.75em; font-weight: 400; text-transform: uppercase; color: #333; min-width: 5em; white-space: nowrap;}
.switch { display: flex; gap: 1.25em; background-color: #222; background-image: radial-gradient(rgba(255, 255, 255, 0.015) 1px,transparent 0); background-size: 0.44em 0.44em; background-position: -0.06em -0.06em; padding: 0.625em 1.25em; border-radius: 0.25em; transition: padding 0.3s ease-in-out;}
.sound-toggle { background-color: #f0f0f0; background-image: radial-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 0); background-size: 0.44em 0.44em; background-position: -0.06em -0.06em; padding: 0.5em 0.75em; border-radius: 0.25em; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; min-width: 3.75em; position: relative; border-color: transparent;}
.sound-wave-canvas { width: 2em; height: 1em; border: var(--var-none) !important; outline: var(--var-none) !important; background: var(--var-none) !important;}
.sound-toggle.active .sound-wave-canvas { opacity: 1;}
.sound-toggle:hover .sound-wave-canvas { opacity: 0.8;}
.switch-button { background: var(--var-none); border: var(--var-none); border-color: transparent; color: #666; cursor: pointer; font-family: "TheGoodMonolith", monospace; font-size: 0.75em; font-weight: 400; text-transform: uppercase; padding: 5px 10px; position: relative; transition: all 0.3s ease-in-out; white-space: nowrap;}
.switch-button-current { color: #f0f0f0;}
.indicator-dot { position: absolute; width: 5px; height: 5px; background-color: #f0f0f0; border-radius: 50%; opacity: 0; transition: opacity 0.3s ease-in-out; top: 50%; transform: translateY(-50%); left: -8px;}
.switch-button:hover .indicator-dot { opacity: 1;}

/* Simple 64px white arrow button */
.close-button { position: fixed; top: 50%; right: 20px; width: 64px; height: 64px; background: var(--var-none); border: var(--var-none); border-color: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; opacity: 0; pointer-events: var(--var-none); transform: translate(40px, -50%);}
.close-button.active { pointer-events: all;}
.close-button:hover { opacity: 0.7;}
.close-button svg { width: 64px; height: 64px; transform: rotate(180deg);}

/* Scaling image overlay */
.scaling-image-overlay { position: fixed; top: 0; left: 0; z-index: 3; pointer-events: var(--var-none); will-change: transform; opacity: 1 !important;}
.scaling-image-overlay img { width: 100%; height: 100%; -o-object-fit: cover;    object-fit: cover; display: block;}

/* Page vignette effect */
.page-vignette-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: var(--var-none); z-index: 2;}
.page-vignette-extreme { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: overlay; background: linear-gradient(to bottom,rgba(0, 0, 0, 0.9) 0%,rgba(0, 0, 0, 0.5) 20%,transparent 40%);}
.close-button {transition:.3s all ease-in-out; transform:scale(1)!important;}
.close-button:hover {transition:.3s all ease-in-out; transform:scale(1.2)!important;}



:root {

    --pointerevents-auto: auto;
    --pointerevents-none: none;

    --userselect-auto: auto;
    --userselect-none: none;
    
    --touchaction-auto: auto;
    --touchaction-none: none;

    --var-none: unset;
    --var-auto: auto;
}