html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  background-image: url("../img/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ========================= */
/* START OVERLAY */
/* ========================= */

#startOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#startBtn {
  font-size: 18px;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

/* ========================= */
/* MAIN CONTAINER */
/* ========================= */

.container {
  height: 100vh;
  width: 100vw;
  text-align: center;
  visibility: hidden;
  position: relative;
  overflow: hidden;
}

.container > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 20vh;
}

/* ========================= */
/* TEXT SECTIONS */
/* ========================= */

.one { font-size: 4.5rem; }
.two { font-size: 1.2rem; font-weight: lighter; }
.three { font-size: 3rem; }

.four .text-box {
  width: 600px;
  margin: 0 auto;
  border: 3px solid #aaa;
  border-radius: 5px;
  padding: 10px;
  position: relative;
}

.text-box p {
  margin: 0;
  text-align: left;
}

.text-box span {
  visibility: hidden;
}

.fake-btn {
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: #fff;
  background-color: rgb(21, 161, 237);
  padding: 5px 8px;
  border-radius: 3px;
}

/* ========================= */
/* IDEA SECTION */
/* ========================= */

.five p {
  font-size: 2rem;
  position: absolute;
  left: 0;
  right: 0;
}

.idea-5 {
  font-size: 4rem;
}

.idea-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.idea-6 span {
  font-size: 3rem;
}

/* ========================= */
/* PHOTO + LYRICS SECTION */
/* ========================= */

.six{
  position: relative;
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* pushes items apart */
  align-items: center;
  top: 12vh;
  padding: 60px 20px;               /* top & bottom breathing room */
  z-index: 5;
}


/* PHOTO STACK AREA */
.photo-stack {
  position: relative;
  width: min(380px, 78vw);
  height: min(380px, 42vh);
  border-radius: 20px;
  overflow: hidden;

  margin: 90px auto 0;   /* ✅ pushes photo down */
  z-index: 1;
}



.photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.5);
  z-index: 1;
}

/* LYRICS (ALWAYS ABOVE PHOTOS) */
.wish {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;                 /* ✅ top text goes near top */
  z-index: 10;
  text-align: center;
  padding-top: 15px;
}

.wish-hbd {
  margin: 0;
  margin-top: 10px;       /* tweak this */
}

#wishText {
  margin: 0;
  margin-top: 10px;
}

/* ✅ bottom text pinned near bottom */
.final-valentine {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 6vh;            /* ✅ pushes it down */
  text-align: center;
  opacity: 0;
  z-index: 10;
}



.wish-hbd,
#wishText,
.final-valentine {
  margin: 0;
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(0,0,0,0.8),
    0 2px 6px rgba(0,0,0,0.7),
    0 0 18px rgba(0,0,0,0.6);
}

.wish-hbd {
  font-size: 2.6rem;
}

#wishText {
  font-size: 1.5rem;
  margin-top: 10px;
}

.final-valentine {
  font-size: 2.8rem;
  opacity: 0;
}

/* ========================= */
/* BALLOONS */
/* ========================= */

.baloons img {
  position: absolute;
  width: 200px;
}

.baloons img:nth-child(even) { left: 10%; }
.baloons img:nth-child(odd) { right: 10%; }
.baloons img:nth-child(3n) { left: 30%; }

/* ========================= */
/* SOFT GLOW CIRCLES */
/* ========================= */

.eight {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
}

.eight svg {
  width: 120px;
  height: 120px;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  z-index: 2;
  filter: blur(6px);
}

.eight circle {
  opacity: 0.8;
}

/* Soft pink tones */
.eight svg:nth-child(1) { top: 7vh; left: 5vw; fill: #ff9acb; }
.eight svg:nth-child(2) { top: 23vh; left: 35vw; fill: #ff7fb4; }
.eight svg:nth-child(3) { top: 33vh; left: 23vw; fill: #ffb3da; }
.eight svg:nth-child(4) { top: 43vh; left: 57vw; fill: #ff9acb; }
.eight svg:nth-child(5) { top: 68vh; left: 7vw; fill: #ff7fb4; }
.eight svg:nth-child(6) { top: 42vh; left: 77vw; fill: #ffb3da; }
.eight svg:nth-child(7) { top: 68vh; left: 83vw; fill: #ff9acb; }
.eight svg:nth-child(8) { top: 86vh; left: 37vw; fill: #ff7fb4; }
.eight svg:nth-child(9) { top: 94vh; left: 87vw; fill: #ffb3da; }

/* ========================= */
/* FINAL SECTION */
/* ========================= */

.nine p {
  font-size: 2rem;
  font-weight: lighter;
}

#replay {
  cursor: pointer;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media (max-width: 600px) {
  .photo-stack {
    width: min(300px, 85vw);
    height: min(300px, 34vh);
  }

  .wish-hbd {
    font-size: 2rem;
  }

  #wishText {
    font-size: 1.2rem;
  }

  .final-valentine {
    font-size: 2rem;
  }
}