*,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      
  background: radial-gradient(circle at center, #f3e8ff, #e9d5ff, #d8b4fe);

      font-family: 'Poppins', sans-serif;
      overflow: hidden;
    }

    .book {
      perspective: 200vw;
      transition: opacity 0.4s 0.2s;
    }

    .pages {
      width: 60vw;
      height: 44vw;
      position: relative;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      border-radius: 8px;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    }

    .page {
      position: absolute;
      top: 0;
      width: 30vw;
      height: 44vw;
      transform-origin: left;
      transition: transform 1.2s ease-in-out;
      backface-visibility: hidden;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
      background: #ffe4ec url('https://www.transparenttextures.com/patterns/paper-fibers.png');
      box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.05);
    }

    .page:nth-child(odd) {
      transform-origin: left;
      right: 0;
      background-image: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0));
    }

    .page:nth-child(odd):hover {
      transform: rotateY(-12deg);
    }

    .page:nth-child(even) {
      transform-origin: right;
      left: 0;
      transform: rotateY(180deg);
      background-image: linear-gradient(to left, rgba(0,0,0,0.1), rgba(0,0,0,0));
    }

    .page.flipped:nth-child(odd) {
      transform: rotateY(-180deg);
      box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    }

    .page.flipped:nth-child(even) {
      transform: rotateY(0deg);
      box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
    }

    .page p {
      font-family: 'Lovers Quarrel', cursive;
      text-align: center;
      font-size: 5vw;
      margin: 0;
      line-height: 1.3;
      color: #333;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .page::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.5s ease;
      pointer-events: none;
    }

    .page:hover::before {
      opacity: 1;
    }

    .page::after {
      content: "";
      position: absolute;
      top: 0; bottom: 0; left: 0; right: 0;
      border-radius: 8px;
      box-shadow: inset 0 0 8px rgba(255,255,255,0.1);
    }

    @media (max-width: 768px) {
      .pages {
        width: 90vw;
        height: 65vw;
      }
      .page {
        width: 45vw;
        height: 65vw;
      }
      .page p {
        font-size: 9vw;
      }
    }

/* ===== CUSTOM PAGES ===== */

/* COVER */
.cover-page {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cover-text {
  font-size: 42px;
  text-align: center;
  font-family: 'Lovers Quarrel', cursive;
}

/* CAKE PAGE */
.cake-page {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 8px;
  font-family: 'Lovers Quarrel', cursive;
  line-height: -3;
}

/* GRID LAYOUT */
.cake-page-layout {
  display: grid;
  grid-template-rows: 55% 45%;   /* adjust playlist share here */
  height: 100%;
}

/* ---------- TOP AREA ---------- */
.top-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}

/* CAKE */
.cake-area {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

.cake-area img {
  width: 80%;                   /* size */
  position: relative;
  top: -30px;                   /* 👈 move UP / DOWN */
  left: -60px;                    /* 👈 move LEFT / RIGHT */
}

/* CAT */
.cat-area {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.cat {
  width: 40%;                   /* size */
  position: relative;
  top: -40px;                    /* 👈 vertical adjust */
  left: -170px;                    /* 👈 horizontal adjust */
}

/* PHOTO PAGE */
.photo-page {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* HEART PHOTOS */
.heart {
  height: 65%;
  position: relative;
}

.photo {
  width: 10%;          /* 📸 adjust photo size HERE */
  position: absolute;
  border-radius: 0px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.left-photo {
  left: 10%;
  transform: rotate(-12deg);
}

.right-photo {
  right: 10%;
  transform: rotate(12deg);
}

/* NOTE */
.page.photo-page .note {
  font-size: 10px;
  line-height: 0.8;
  font-style: italic;
  text-align: center;
  top: 90px;
  left: 130px;
}

/* ===============================
   PHOTO CARDS
   =============================== */



  




/* Card image */
.photo-card img {
  width: 50%;
  border-radius: 12px;
  display: block;
}

/* Card note */
.photo-note {
  margin-top: 6px;
  font-size: 12px;
  font-style: italic;
}






.spotify {
  width: 380px;                 /* size */
  height: 380px;
  border-radius: 16px;
  border: none;
  position: relative;
  transform: scale(0.28);      /* 👈 THIS reduces size */
  transform-origin: top center;
  top: 80px;                     /* 👈 move UP / DOWN */
  left: -110px;                    /* 👈 move LEFT / RIGHT */
}




/* THIS LINE STOPS THE BOOK FROM GRABBING CLICKS */
.page  {
  touch-action: manipulation;
}


/* ===== FIX SPOTIFY ON PHOTO PAGE ===== */





/* END PAGE TEXT SIZE */
.end-page .end-text {
  font-size: 27px;   /* adjust this value */
}

/* ===== COVER PAGE GIF ===== */
.cover-page {
  flex-direction: column;
  gap: 12px;
}

.cover-gif {
  width: 50px;        /* adjust size here */
  height: auto;
  margin-top: 170px;
}

/* ===== SPOTIFY (CAKE PAGE ONLY) ===== */
.cake-page .playlist-area {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cake-page .spotify {
  width: 380px;
  height: 380px;
  border-radius: 16px;
  border: none;

  transform: scale(0.28);
  transform-origin: top center;

  margin-top: -10px;   /* adjust position */
}
.cake-page .spotify {
  pointer-events: auto;
  z-index: 9999;
  position: relative;
 
}

.photo-page .spotify {
  pointer-events: auto;
  position: relative;
  z-index: 9999;
  left : -80px;
  margin-top: -100px;
  transform: scale(0.23);
}

.photo-page .playlist-area {
  pointer-events: auto;
}