/* 🌹 Romantic Edition by ChatGPT 💖 */
*{margin:0;padding:0;box-sizing:border-box}
body,html{height:100%;scroll-behavior:smooth;}

/* 💞 Elegant Pink + Gold Wave Background */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  background: linear-gradient(
    135deg,
    #f9cdd6 0%,   /* soft light pink */
    #f3a8c2 25%,  /* medium rose pink */
    #eba7b7 50%,  /* pastel pink */
    #f2b6c8 75%,  /* lighter pink highlight */
    #f8c9d6 100%  /* faded blush */
  );
  background-attachment: fixed;
  overflow-y: auto;
  position: relative;
}


/* ✨ subtle gold shimmer overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    120deg,
    rgba(212,175,55,0.15) 0px,
    rgba(212,175,55,0.15) 2px,
    transparent 2px,
    transparent 20px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* 🌹❤️ Falling hearts & roses animation */
@keyframes fall {
  0% { transform: translateY(-10%) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0.9; }
}

.falling {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.falling span {
  position: absolute;
  top: -10%;
  font-size: 26px;
  animation: fall linear infinite;
  color: #ff0033;
  text-shadow: 0 0 10px rgba(255,0,0,0.8);
}

.falling span:nth-child(1){left:5%;animation-duration:10s;animation-delay:0s;}
.falling span:nth-child(2){left:15%;animation-duration:12s;animation-delay:2s;}
.falling span:nth-child(3){left:25%;animation-duration:9s;animation-delay:4s;}
.falling span:nth-child(4){left:35%;animation-duration:11s;animation-delay:1s;}
.falling span:nth-child(5){left:45%;animation-duration:13s;animation-delay:3s;}
.falling span:nth-child(6){left:55%;animation-duration:10s;animation-delay:5s;}
.falling span:nth-child(7){left:65%;animation-duration:12s;animation-delay:2s;}
.falling span:nth-child(8){left:75%;animation-duration:9s;animation-delay:4s;}
.falling span:nth-child(9){left:85%;animation-duration:14s;animation-delay:1s;}
.falling span:nth-child(10){left:95%;animation-duration:10s;animation-delay:3s;}

.falling span.rose{color:#ff3366;text-shadow:0 0 10px rgba(255,60,120,0.8);}
.falling span.heart{color:#ff0000;text-shadow:0 0 10px rgba(255,0,0,0.9);}



/* ✅ Rest of your original file */
#share-toggle {display:none;}
.share-btn {
  position: fixed;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 1100;
}
.share-btn img {
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 50px;
  transition: .3s;
}
.close-icon {display:none;}
#share-toggle:checked + label .open-icon {display:none;}
#share-toggle:checked + label .close-icon {display:block;}

.sidebar {
  position: fixed;
  top: -500px;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 2px solid black;
  background: rgba(255,175,190,1);
  backdrop-filter: blur(6px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition: top .4s cubic-bezier(.2,.9,.3,1);
  z-index: 1000;
}
#share-toggle:checked ~ .sidebar {top:0;}

.social-row {
  display:flex;
  gap: 30px;
  overflow-x:auto;
  padding: 15px;
  scroll-behavior:smooth;
}
.social-row::-webkit-scrollbar {display:none;}
.social-row {-ms-overflow-style:none;scrollbar-width:none;}

.social-item {
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#fff;
  font-size:13px;
  opacity:0.9;
  text-decoration:none;
}
.social-item img {
  width:36px;
  height:36px;
  border-radius: 10px;
  transition: transform .25s;
}
.social-item:hover img {transform: translateY(-6px)}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(0px);
  border-radius: 24px;
  margin: 20px;
  padding: 40px 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  z-index: 1;
}

section:hover {
  transform: scale(1.02);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
}

h1 { font-size: 2.5rem; margin-bottom: 16px; color: #fff; }
h2 { font-size: 1.8rem; margin: 20px 0; color: #fffa; }
h3 { font-size: 1.2rem; margin-bottom: 20px; color: #fffd; }

.logo img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.socials {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 20px 0;
}
.socials img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  padding: 6px;
  transition: 0.3s;
  cursor: pointer;
}
.socials img:hover {
  background: rgba(255,255,255,0.3);
  transform: translateY(-5px);
}

.buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  width: 100%;
  margin-top: 20px;
}

.buttons button {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-size:15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  text-align: center;
}

.buttons button::before,
.buttons button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 3px solid yellow;
  pointer-events: none;
  box-sizing: border-box;
  animation: spin-border 4s linear infinite;
}
.buttons button::after {
  border-color: red;
  animation-delay: 2s;
}
@keyframes spin-border {
  0% { clip-path: inset(0 100% 0 0); }
  25% { clip-path: inset(0 0 100% 0); }
  50% { clip-path: inset(0 0 0 100%); }
  75% { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}
.buttons button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.1);
  opacity: 0.95;
}

nav {
  position: fixed;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1000;
}

nav a {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
  transition: 0.3s;
  text-indent: -9999px;
  position: relative;
}

nav a:hover::after {
  content: attr(data-label);
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 0.8rem;
}

nav a:hover,
nav a.active {
  opacity: 1;
  transform: scale(1.3);
}