/* ================================
   HAPPY BIRTHDAY SHELVIA 💕
   by your special someone 💌
   ================================ */

   @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@300;500;700&display=swap');

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   body {
     font-family: 'Poppins', sans-serif;
     overflow: hidden;
     background: radial-gradient(ellipse at bottom, #0a0a12 0%, #000 100%);
     color: #fff;
     text-align: center;
     height: 100vh;
     width: 100%;
     position: relative;
   }
   
   /* ============================
      STAR BACKGROUND 🌌
      ============================ */
   #stars, #stars2, #stars3 {
     position: fixed;
     top: 0; left: 0;
     width: 100%;
     height: 100%;
     display: block;
     background: transparent;
     z-index: 0;
     pointer-events: none;
   }
   
   #stars:after, #stars2:after, #stars3:after {
     content: "";
     position: absolute;
     top: 0; left: 0;
     width: 100%; height: 100%;
   }
   
   #stars {
     background: transparent url('https://raw.githubusercontent.com/VincentGarreau/particles.js/master/demo/img/stars.png') repeat top center;
     animation: animStar 50s linear infinite;
   }
   #stars2 {
     background: transparent url('https://raw.githubusercontent.com/VincentGarreau/particles.js/master/demo/img/stars.png') repeat top center;
     animation: animStar 100s linear infinite;
     opacity: 0.5;
   }
   #stars3 {
     background: transparent url('https://raw.githubusercontent.com/VincentGarreau/particles.js/master/demo/img/stars.png') repeat top center;
     animation: animStar 150s linear infinite;
     opacity: 0.2;
   }
   
   @keyframes animStar {
     from { background-position: 0 0; }
     to { background-position: 0 1000px; }
   }
   
   /* ============================
      PAGE BASE
      ============================ */
   .page {
     position: absolute;
     top: 0; left: 0;
     width: 100%;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     transition: opacity 1s ease, transform 1s ease;
     z-index: 2;
   }
   
   .page.hidden {
     opacity: 0;
     pointer-events: none;
     transform: scale(0.98);
   }
   
   .page.active {
     opacity: 1;
     pointer-events: all;
     transform: scale(1);
   }
   
   /* ============================
      CONTENT
      ============================ */
   .content {
     max-width: 90%;
     padding: 20px;
     text-align: center;
     z-index: 3;
   }
   
   .title {
     font-family: 'Great Vibes', cursive;
     font-size: 3em;
     color: #ffb6c1;
     text-shadow: 0 0 25px #ff80ab;
     margin-bottom: 10px;
   }
   
   .subtitle {
     font-size: 1.3em;
     margin-bottom: 25px;
     color: #ffe6f0;
   }
   
   /* ============================
      BUTTONS
      ============================ */
   button {
     background: linear-gradient(45deg, #ff80ab, #ff4081);
     border: none;
     color: white;
     font-size: 1.1em;
     padding: 12px 25px;
     border-radius: 30px;
     cursor: pointer;
     transition: transform 0.3s, box-shadow 0.3s;
     box-shadow: 0 4px 15px rgba(255, 64, 129, 0.3);
   }
   
   button:hover {
     transform: scale(1.1);
     box-shadow: 0 8px 25px rgba(255, 64, 129, 0.5);
   }
   
   /* ============================
      TYPING TEXT
      ============================ */
   .typing-text {
     font-size: 1.3em;
     color: #ff80ab;
     margin-bottom: 25px;
     white-space: pre-line;
     line-height: 1.6em;
     min-height: 120px;
   }
   
   /* ============================
      GALLERY
      ============================ */
   .gallery-container h2 {
     margin-bottom: 20px;
     color: #ffb6c1;
   }
   
   .gallery {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 15px;
   }
   
   .gallery img,
   .gallery video {
     width: 150px;
     height: 150px;
     object-fit: cover;
     border-radius: 15px;
     box-shadow: 0 6px 15px rgba(255,255,255,0.1);
     transition: transform 0.5s ease, box-shadow 0.5s ease;
   }
   
   .gallery img:hover,
   .gallery video:hover {
     transform: scale(1.1) rotate(2deg);
     box-shadow: 0 8px 25px rgba(255,105,180,0.5);
   }
   
   /* ============================
      SURPRISE PAGE
      ============================ */
   .gift-box {
     font-size: 4em;
     cursor: pointer;
     transition: transform 0.5s ease;
   }
   
   .gift-box:hover {
     transform: scale(1.2) rotate(10deg);
   }
   
   #finalMsg {
     color: #ff80ab;
     font-family: 'Great Vibes', cursive;
     font-size: 2em;
     margin-top: 25px;
     animation: fadeIn 2s ease forwards;
   }
   
   .hidden {
     display: none;
   }
   
   /* ============================
      FLOATING HEARTS 💖
      ============================ */
   .floating-hearts::before,
   .floating-hearts::after {
     content: "💖";
     position: absolute;
     animation: floatHearts 6s linear infinite;
     font-size: 1.5em;
     opacity: 0.8;
   }
   .floating-hearts::before { left: 20%; animation-delay: 1s; }
   .floating-hearts::after { left: 70%; animation-delay: 2s; }
   
   @keyframes floatHearts {
     0% { bottom: -20px; opacity: 0; transform: scale(0.5); }
     50% { opacity: 1; }
     100% { bottom: 100%; opacity: 0; transform: scale(1.5); }
   }
   
   /* ============================
      BASIC ANIMATIONS
      ============================ */
   @keyframes fadeIn {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   /* ============================
      RESPONSIVE 💫
      ============================ */
   @media (max-width: 768px) {
     .title {
       font-size: 2.2em;
     }
   
     .subtitle {
       font-size: 1.1em;
     }
   
     .gallery img,
     .gallery video {
       width: 120px;
       height: 120px;
     }
   
     button {
       padding: 10px 20px;
       font-size: 1em;
     }
   
     .typing-text {
       font-size: 1.1em;
     }
   }
   
   @media (max-width: 480px) {
     .gallery img,
     .gallery video {
       width: 100px;
       height: 100px;
     }
   }