/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
/* --- GALLERY STYLES (Blurry Messy Desk) --- */

img {
  /* 1. SIZE & POSITION */
  max-width: 400px; /* Slightly smaller for the pile effect */
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  
  /* 2. THE BLURRY "UNLOADED" LOOK */
  filter: blur(5px) grayscale(50%); /* Blurry and slightly gray */
  opacity: 0.8; /* A bit see-through */
  transition: all 0.5s ease; /* Smooth transition for the focus */
  
  /* 3. POLAROID FRAME */
  background-color: white;
  padding: 10px 10px 40px 10px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  
  /* 4. SPACING */
  margin-bottom: 60px;
  cursor: pointer; /* Shows a hand cursor so people know to touch it */
}

/* --- THE MESSY SCATTER (Rotations) --- */
img:nth-child(odd) { transform: rotate(-3deg); }
img:nth-child(even) { transform: rotate(4deg) translateY(10px); }
img:nth-child(3n) { transform: rotate(-5deg) translateY(-5px); } /* Adds more randomness */

/* --- THE INTERACTIVE HOVER (Focus & Float) --- */
img:hover {
  /* 1. REMOVE BLUR (Focus) */
  filter: blur(0px) grayscale(0%);
  opacity: 1;
  
  /* 2. FLOAT UP */
  transform: scale(1.2) rotate(0deg); /* Grows 20% and straightens out */
  
  /* 3. SHADOW DEPTH */
  box-shadow: 0 15px 30px rgba(0,0,0,0.4);
  
  /* 4. BRING TO FRONT */
  position: relative;
  z-index: 100;
}
/* --- THE 3D FOREST FLOOR --- */

/* 1. THE SCENE (The user's eyes) */
.forest-floor {
  perspective: 1000px; /* How "deep" the 3D space feels */
  padding: 50px;
  overflow-x: hidden; /* Prevents scrollbars if things get too wide */
  text-align: center;
}

/* 2. THE PHOTOS ON THE GROUND */
.forest-floor img {
  /* Size on the floor */
  max-width: 300px;
  width: 100%;
  height: auto;
  display: inline-block; /* Allows them to sit side-by-side scattered */
  
  /* LAY IT DOWN */
  transform: rotateX(50deg) scale(0.8); /* Tilts it backward onto the floor */
  transform-origin: center bottom; /* Pivots from the bottom */
  
  /* The Look */
  filter: blur(2px) sepia(40%); /* Slightly blurry and dirty/old */
  opacity: 0.9;
  border: 5px solid white; /* Old photo border */
  box-shadow: 0px 20px 10px rgba(0,0,0,0.5); /* Shadow ON THE GROUND */
  
  /* Interaction settings */
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
  margin: -20px 20px; /* Negative margin makes them overlap slightly like a pile */
  cursor: zoom-in;
}

/* 3. RANDOM SCATTER (Messy Floor) */
.forest-floor img:nth-child(odd) { transform: rotateX(50deg) rotateZ(-15deg) scale(0.8); }
.forest-floor img:nth-child(even) { transform: rotateX(50deg) rotateZ(10deg) scale(0.8); }
.forest-floor img:nth-child(3n) { transform: rotateX(50deg) rotateZ(5deg) scale(0.8); }

/* 4. THE HOVER (Floating to Screen) */
.forest-floor img:hover {
  /* Lift it UP and face the screen directly */
  transform: rotateX(0deg) rotateZ(0deg) scale(1.3) translateY(-50px);
  
  /* Clear the dirt/blur */
  filter: blur(0px) sepia(0%);
  opacity: 1;
  
  /* Big shadow far below */
  box-shadow: 0px 50px 50px rgba(0,0,0,0.6);
  
  /* Make sure it's on top of the pile */
  position: relative;
  z-index: 1000;
}