body {
  margin: 0;

  /*Background*/
  background-image: url("bg1.jpg");
  background-size: cover;       
  background-position: center;   
  background-repeat: no-repeat; 
  background-attachment: fixed; 

   /*Font*/
  color: #eaeaea;
  font-family: monospace;
  text-align: center;
}

/* make header ABOVE fog */
h1 {
  position: relative;
  z-index: 2;
}

h1 {
  margin-top: 30px;
  letter-spacing: 4px;

  position: relative; /* needed for layering */
  z-index: 2;

  color: white;

  /* ✨ glow */
  text-shadow: 
    0 0 10px #ffffff,
    0 0 20px #ffffff,
    0 0 40px #ffffff;
}
/* model container */
.model {
  margin-top: 60px;
}

/* iframe */
iframe {
  width: 320px;
  height: 320px;
  border: none;
  background: transparent;
  filter: drop-shadow(0 0 15px rgba(255,255,255,0.2));
}

/* links */
a {
  color: #00ffcc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/*snow*/
.snow-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none; 

  z-index: 999; 

  object-fit: cover; 
  opacity: 0.5;
}

.fog-overlay {
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  object-fit: cover;
  pointer-events: none;

  z-index: 500;

  opacity: 0.4;


  mix-blend-mode: screen;
}

/* ===== MENU ROW (ADD BELOW EVERYTHING) ===== */

.menu-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  margin-top: 80px;
}

/* side objects slightly faded */
.menu-row .model:nth-child(1),
.menu-row .model:nth-child(3) {
  opacity: 0.7;
}

/* hover interaction */
.model {
  transition: 0.2s;
}


/* ===== MODEL INTERACTIONS ===== */
/* put this at the VERY BOTTOM of style.css */

/* makes zoom animation smooth */
iframe {
  transition: transform 0.2s ease;
}


/* hovering directly on iframe (fixes issue) */
iframe:hover {
  transform: scale(1.25);
}

/* adds glowing outline when hovering */
.model:hover {
  transform: scale(1.25);

  /* ✨ outline effect */
  box-shadow: 0 0 20px rgba(255,255,255,0.8);

  /* optional: soft glow */
  border-radius: 10px;
}