body {
  font-size: 18px;
  color: #876863;
  background-color: black;
  font-family: "Garamond", "Times New Roman";
}

.table-wrapper {
  position: relative;
  width: 1525px;
  height: auto;
}

.table-background {
  display: block;
  width: 100%;
  height: auto;
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.box {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  background: none;
  overflow: hidden;
}

/* ----------------------------
   Butterfly box (top)
---------------------------- */
.butterfly-box {
  top: 165px;
  left: 625px;
  width: 225px;
  height: 525px;
}

.swap {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.swap img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.swap img.gif {
  opacity: 0;
  pointer-events: none;
}

.swap:hover img.gif {
  opacity: 1;
}

.swap:hover img.still {
  opacity: 0;
}

/* ----------------------------
   Picture frame (no hover)
---------------------------- */
.frame-box {
  top: 274px;
  left: 134px;
  width: 300px;
  height: auto;
}

.frame-box img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.frame-box.hoverimage:hover {
  transform: scale(1.1);
}

/*----------------------------
plant pot (no hover, gif swap)
-----------------------------*/
/* plant pot box */
.plant-box {
  position: relative;
  top: 320px;
  left: 440px;
  width: 200px;
  aspect-ratio: 494 / 812;
}

/* wrapper for gif */
.swap2 {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.swap2 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.swap2 img.gif2 {
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.swap2:hover img.gif2 {
  opacity: 1;
}

.swap2:hover img.still2 {
  opacity: 0;
}



/* ----------------------------
   Book (hover enlarges)
---------------------------- */
.book-box {
  top: 500px;
  left: 305px;
  width: 618px;
  height: 275px;
  z-index: 2
}

.book-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.book-box.hoverimage:hover {
  transform: scale(1.1);
}

/* ----------------------------
   Skull (no hover)
---------------------------- */
.skull-box {
  top: 125px;
  left: 813px;
  width: 325px;
  height: 625px;
}

.skull-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ----------------------------
   Movie camera (hover enlarges)
---------------------------- */
.camera-box {
  top: 393px;
  left: 1093px;
  width: 225px;
  height: 325px;
}

.camera-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.camera-box.hoverimage:hover {
  transform: scale(1.1);
}

/* ----------------------------
   Audio box
---------------------------- */
.audio-box {
  top: 0px;
  left: 0px;
  width: 110px;
  height: 200px;
  border: none;
}

.audio-box.hoverimage:hover {
  transform: scale(1.1);
}

#cena {
  display: none;
}

audio {
  width: 100%;
  margin: 20px 0;
}

/*-- knob box --*/
.knob-box {
  position: absolute;
  top: 895px;
  left: 766px;
  width: 59px;
  height: auto;
  z-index: 20;
}

.knob-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.knob-box.hoverimage:hover {
  opacity: 0;
  transform: scale(1.1)
}

/* Popup container */
.popup {
  display: none;
  position: absolute;
  background: #000000;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 5px;
  width: 95px;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/* Close button */
.popup .close {
  position: absolute;
  top: 3px;
  right: 10px;
  font-size: 22px;
  cursor: pointer;
  font-weight: bold;
}

/* Scroll area containing the site buttons */
.scroll-container {
  max-height: 150px;
  width: 90px;   /* <-- adjust size of scroll box here */
  overflow-y: auto;
  margin-top: 15px;    /* space so the close button doesn't overlap */
  padding-right: 6px;  /* room for scrollbar */
}

/* Each site button image */
.site-image {
  width: 88px;
  display: block;
  margin: 10px auto;
  border-radius: 6px;
  transition: transform 0.2s;
}

.site-image:hover {
  transform: scale(1.05);
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}


/*loading overlay*/
#loader {
  opacity: 1;
  transition: opacity 1s ease-out;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.gif-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gif-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0) 70%
  );
  animation: glowPulse 2s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* Ensure the GIF is above the glow */
.loader-gif {
  position: relative;
  z-index: 1;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* space between GIF and text */
}



#loader img {
  width: 200px;
  height: auto;
  margin-bottom: 20px;
}

#loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

#loader .loader-gif {
  position: relative;
  z-index: 2;
}