body {
        margin: 0;
        padding: 0;
        width: 100%;
        background-color: #000;
        font-family: "Montserrat", sans-serif;
        color: #fff;
        overflow-x: hidden;
      }
      .gallery-container {
        height: 100vh;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
      }
      section {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        scroll-snap-align: start;
      }

      .scene {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .half {
        width: 100%;
        height: 50%;
        position: relative;
        overflow: hidden;
      }
      .bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        will-change: transform;
        transform: translateZ(0);
      }

      /* Section 1: Water */
      #section-water {
        font-family: "Montserrat", sans-serif;
      }
      #section-water .bg-image {
        background-image: url("https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=2000&auto=format&fit=crop");
      }
      #section-water .reality {
        z-index: 20;
      }
      #section-water .reality .bg-image {
        background-position: center 70%;
      }
      #section-water .reflection {
        z-index: 10;
      }
      #section-water .reflection .bg-image {
        background-position: center 70%;
        transform: scaleY(-1);
        transform-origin: center;
        filter: url(#filter-water) brightness(0.8);
        width: 105%;
        height: 105%;
        left: -2.5%;
        mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0.5) 50%,
          rgba(0, 0, 0, 0) 90%
        );
        -webkit-mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0.5) 50%,
          rgba(0, 0, 0, 0) 90%
        );
      }

      /* Section 2: Glitch */
      #section-glitch {
        font-family: "Courier New", Courier, monospace;
        color: #0ff;
      }
      #section-glitch .bg-image {
        background-image: url("https://images.unsplash.com/photo-1555680202-c86f0e12f086?q=80&w=2000&auto=format&fit=crop");
        filter: contrast(1.2) hue-rotate(10deg);
      }
      #section-glitch .reality {
        z-index: 20;
      }
      #section-glitch .reality .bg-image {
        background-position: center 70%;
      }
      #section-glitch .reflection {
        z-index: 10;
      }
      #section-glitch .reflection .bg-image {
        background-position: center 70%;
        transform: scaleY(-1);
        transform-origin: center;
        filter: url(#filter-glitch) brightness(0.7);
        width: 105%;
        height: 105%;
        left: -2.5%;
        mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0.6) 60%,
          rgba(0, 0, 0, 0) 100%
        );
        -webkit-mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0.6) 60%,
          rgba(0, 0, 0, 0) 100%
        );
      }
      #section-glitch .horizon-line {
        background: #0ff;
        box-shadow: 0 0 15px #0ff, 0 0 30px #0ff;
        height: 2px;
      }

      /* UI Parts */
      .hero-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 100;
        text-align: center;
        width: 100%;
        mix-blend-mode: difference;
        pointer-events: none;
      }
      #section-glitch .hero-text {
        mix-blend-mode: normal;
        text-shadow: 2px 0 #f0f, -2px 0 #0ff;
      }

      .title-real {
        font-size: 4rem;
        font-weight: 900;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 6px;
        line-height: 1;
        margin-bottom: 5px;
      }
      .title-reflect {
        font-size: 4rem;
        font-weight: 900;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 6px;
        line-height: 1;
        transform: scaleY(-1);
        transform-origin: center;
        opacity: 0.7;
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.9),
          rgba(255, 255, 255, 0)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      #section-glitch .title-reflect {
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.9),
          rgba(0, 255, 255, 0)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        opacity: 0.8;
        filter: url(#filter-glitch) blur(1px);
      }

      .horizon-line {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
        z-index: 50;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
      }
      .svg-filters {
        position: absolute;
        width: 0;
        height: 0;
        pointer-events: none;
      }

      .scroll-hint {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.8rem;
        letter-spacing: 2px;
        animation: bounce 2s infinite;
        pointer-events: none;
        mix-blend-mode: difference;
      }
      @keyframes bounce {
        0%,
        20%,
        50%,
        80%,
        100% {
          transform: translateX(-50%) translateY(0);
        }
        40% {
          transform: translateX(-50%) translateY(-10px);
        }
        60% {
          transform: translateX(-50%) translateY(-5px);
        }
      }