html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* prevents page scroll */
    background: radial-gradient(circle at top, #242424 0%, #1b1b1b 70%);
  }

   /*fonts*/
.pixelify-sans {
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  .jacquard-12-regular {
    font-family: "Jacquard 12", system-ui;
    font-weight: 400;
    font-style: normal;
  }
  
  .scene {
    height: 100svh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  
  /* CABINETS */
  .cabinets {
    margin-top: 200px;
    display: flex;
    align-items: flex-end;
    position: relative;
  }
  
  .cabinet-wrapper {
    position: relative;
    display: inline-block;
  }
  
  .cabinet-stack {
    position: relative;
    display: inline-block;
  }
  
  .cabinet {
    height: 70vh;
    display: block;
  }
  
  /* PHOTO */
  .cabinet-photo {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
  }

  
  
  /* DRAWERS */
  .drawers {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 90%;
    gap: 3px;
  }
  
  .drawer {
    width: 100%;
    display: block;
    transition: filter 0.15s ease;
  }
  
  .drawer-link:hover .drawer {
    filter: brightness(1.08);
  }
  
  /* DESK — FIXED RIGHT */
  .desk {
    position: fixed;
    bottom: -200px;
    right: -200px;
    width: 50vw;
    z-index: 10;
    pointer-events: auto; 
  }

  .desk-link {
    position: fixed;
    bottom: -200px;
    right: -200px;
    width: 50vw;
    z-index: 10;
  }

  .desk-link:hover .desk {
    filter: brightness(1.05);
    transform: translateY(-2px);
    transition: 0.15s ease;
  }
  
  
  /* OC GIF — FIXED LEFT */
  .oc-gif {
    position: fixed;
    bottom: -70px;   
    left: -20px;     
    width: 60vw;
    z-index: 11;      
    pointer-events: none;
  }

  .oc-gif:hover {
    transform: translateY(-6px);
    filter: brightness(1.05);
  }
  
  
  /* FLOOR */
  .floor {
    width: 100%;
    height: calc(12vh + 200px);
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.35) 0px,
        rgba(0,0,0,0.35) 2px,
        transparent 2px,
        transparent 48px
      ),
      repeating-linear-gradient(
        to bottom,
        #2c2c2c 0px,
        #2c2c2c 32px,
        #2f2f2f 48px
      );
    box-shadow: inset 0 30px 30px -20px rgba(0,0,0,0.55);
  }

  /* INFO PANEL */
.info-panel {
    position: fixed;
    top: 24px;
    right: 40px;
    max-width: 360px;
  
    color: #e6e6e6;
    font-family: 'Pixelify Sans' , 'Courier New' , 'Courier', 'Monospace'; 
  
    z-index: 20;
    pointer-events: none; 
  }
  
  .info-panel h1 {
    margin: 0 0 8px 0;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.5px;
  }
  
  .info-panel p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #bdbdbd;
  }
  /* MOBILE */
  @media (max-width: 768px) {
    .cabinets {
      flex-direction: column;
    }
  
    .cabinet {
      height: 80vh;
    }
  
    .left-cabinet {
      padding-top: 27vh;
      margin-bottom: -2vh;
    }
  
    .cabinet-photo {
      width: 55%;
    }
  
    .floor {
      height: calc(15vh + 200px);
    }
  
    .desk,
    .oc-gif {
      display: none;
    }

  }

  @media (max-width: 768px) {
    .info-panel {
      position: relative;     
      top: auto;
      right: auto;
  
      width: 100%;
      max-width: none;
  
      padding: 20px 18px;
      box-sizing: border-box;
  
      text-align: center;
      pointer-events: none;
  
      order: -1;             
    }
  
    .info-panel h1 {
      font-size: 1.25rem;
    }
  
    .info-panel p {
      font-size: 0.95rem;
    }
  }

  @media (max-width: 768px) {

    html, body {
      overflow: auto; 
    }
  
    .scene {
      height: auto;        
      overflow: visible;   
    }
  
  }