/* style.css
    Steps are hidden by default and revealed when the image is hovered,
    focused (keyboard), or when a hidden checkbox is used to toggle on click.
*/

body {
  font-family: "Fredericka the Great", serif;
  font-weight: 400;
  font-style: normal;
  align-content: center;
  align-items: center;
  text-align: center;
  margin: 2rem;
  color: cornflowerblue;
  background-color: #f0f0f0;
}

/* Base layout */
.image { display: inline-block; position: relative; cursor: pointer; }
.image img { display: block; max-width: 100%; height: auto; } 

/* Hidden by default */
.step .text{
  position: absolute; /* adjust as needed (or remove if not overlay) */
  bottom: 0;
  left: 0;
  right: 0;
  bottom: -9999px; /* keep out of flow for non-overlay layouts */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}

.step img {
 visibility: visible;
}

/* Reveal on hover or keyboard focus inside the image container */
.step:hover .text,
.step:focus-within .text{
  bottom: auto; /* restore for overlay positioning */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.alive {
  transition: transform 500ms ease-in-out;
  transform-origin: center center;
}
.alive:hover {
  transform: scale(1.4);
}
/* 
.instructions {
  position: relative;
  display: inline-block;
  width: 800px;
  height: 200px; 
  background-color: lightgreen;
} */

.animation {
  position: relative;
  display: inline-block;
  width: 1000px;
  height: 1000px; 
}

.step {
  position: absolute;
  display:flow-root;
  width: auto;
  height: auto; 
  margin: 10px;
}
.background {
  position: absolute;
  top: 100px;
  left: 0;
  width: 1000px;
  height: 1000px; 
  z-index: -2; /* behind other content */
}
#background{
  width: 1000px;
  height: 1000px; 
}

img{
  z-index: -1; /* behind text */
}

.text {
  width: 1000px;
}

.text p {
  font-size: 1.5rem;
  margin-top: 0.5rem;
}

#step-1 { top: 280px; left: 0px;}
#step-1 .text { top: -280px;}
#step-2 { top: 200px; left: 300px; } 
#step-2 .text { top: -200px; left: -300px; } 
#step-3 { top: 320px; left: 620px; }
#step-3 .text { top: -320px; left: -620px; }
#step-4 { top: 500px; left: 670px; }
#step-4 .text { top: -500px; left: -670px; }
#step-5 { top: 850px; left: 560px; }
#step-5 .text { top: -850px; left: -560px; }
#step-6 { top: 850px; left: 240px; }
#step-6 .text { top: -850px; left: -240px; }
#step-7 { top: 640px; left: 70px; }
#step-7 .text { top: -640px; left: -70px;}
#step-8 { top: 500px; left: 320px; }
#step-8 .text { top: -500px; left: -320px;}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 4rem;
  bottom: 30px;
  margin-bottom: 0.5rem;
}