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

html {
    scroll-behavior: smooth; /* Enables smooth jumping to anchor links */
}

/* Default: Hide mobile gallery */
.mobile-view {
    display: none;
}

/* Tablet and Phone (Screens smaller than 768px) */
@media (max-width: 768px) {
    .desktop-view {
        display: none;
    }
    .mobile-view {
        display: block;
    }
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.container::-webkit-scrollbar {
    display: none;
}

.container {
    /* Lock the container to the screen edges instead of relying on 100vh */
    position: absolute; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* Auto is safer than scroll for Safari trackpads */
    overflow-y: auto; 
    
    /* Strictly kill any horizontal scroll calculations */
    overflow-x: hidden; 
    
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch; /* Forces hardware acceleration in WebKit */
}

.project-section {
    position: relative;
    /* Use 100% of the absolute container, NOT 100vh/100vw */
    height: 100%; 
    width: 100%;  
    
    scroll-snap-align: start;
    scroll-snap-stop: always; 
    
    /* Helps browser "aim" accurately when loading a direct URL link */
    scroll-margin-top: 0; 
    
    overflow: hidden;
}

.gallery, .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide {
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.project-info {
    position: absolute;
    top: 16px;
    left: 112px;
    pointer-events: none; /* Allows clicks to pass through to the nav-zones */
    z-index:10000;
    color:#fff;
    text-decoration:none;
    background:rgba(0,0,0,.35);
    padding:.4rem .6rem;
    border-radius:9999px;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    font:400 10px/1.1 Switzerworld;
}

@media (max-width: 768px) {
    .project-info {
        top: 48px;
        left: 16px;
        max-width: 280px;
        text-wrap: balance;
        border-radius:25px;
    }
} /* <-- Added this missing bracket! */

/* Invisible click zones */
.nav-zone {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: 5;
    cursor: pointer;
}

.nav-zone.left { left: 0; }
.nav-zone.right { right: 0; }

/* Hide native cursor and show our custom white circle on pointer-precise devices */
@media (pointer: fine) {
  html, body, .flow { cursor: none; }

  /* Cursor container follows the pointer (JS already moves it) */
  #cursor {
    position: fixed;
    left: 0;
    top: 0;
    /* keep the container lightweight; children draw the visuals */
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    will-change: transform;
  }

  /* Smooth, subtle motion */
#cursor {
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

/* Grow a bit over links */
#cursor.over-link {
  transform: translate(-50%, -50%) scale(1.8);
}

/* Grow a bit when dragging/holding mouse */
#cursor.dragging {
  transform: translate(-50%, -50%) scale(1.5);
}

/* If dragging while over a link, go a touch larger */
#cursor.over-link.dragging {
  transform: translate(-50%, -50%) scale(2);
}


  /* Inner white dot */
  #cursor::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;           /* dot diameter */
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
  }

  /* Soft blur halo around the dot */
  #cursor::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;          /* halo diameter (increase for a larger blur area) */
    height: 36px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* The magic: blur whatever is behind this circle */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); /* Safari */
    /* A tiny translucent fill helps make the blur perceptible on all backgrounds */
    background: rgba(255, 255, 255, 0.06);
  }
}