/* =========================
   Cute Kawaii Styles
========================= */

/* Fonts & Body */
body {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  background-color: #ffe6f2;
  color: #7a3b67;
  cursor: url('https://cdn-icons-png.flaticon.com/512/616/616408.png'), auto;
  overflow-x: hidden;
}

/* Header */
.header {
  background-color: #ff9ad5;
  color: #ffffff;
  text-align: center;
  padding: 1.5rem;
  border-bottom: 3px solid #ffbde9;
  font-family: 'Baloo 2', cursive;
}
.header h1 { font-size: 2.8rem; margin: 0; }
.header nav a { color: #ffffff; margin: 0 1rem; text-decoration: none; font-weight: bold; transition: transform .2s; }
.header nav a:hover { transform: scale(1.1); }

/* Hero */
.hero {
  background: linear-gradient(180deg, #ffc2e8, #ffe6f2);
  text-align: center;
  padding: 6rem 1rem;
  position: relative;
  border-radius: 0 0 50% 50% / 20%;
}
.hero h2 { color: #ff9ad5; font-family: 'Baloo 2', cursive; font-size: 3rem; margin-bottom: 1rem; }
.hero p { color: #7a3b67; font-size: 1.3rem; max-width: 700px; margin: 0 auto; }

/* About Me */
.about {
  background-color: #fff0f7;
  margin: 2rem auto;
  padding: 2rem;
  max-width: 800px;
  border-radius: 20px;
  box-shadow: 0 8px 15px rgba(122, 59, 103, 0.1);
}
.about h2 { font-family: 'Baloo 2', cursive; color: #ff9ad5; text-align: center; margin-bottom: 1rem; }
.about p { font-size: 1.1rem; line-height: 1.6rem; }

/* Blog */
.blog { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
.blog h2 { color: #ff9ad5; font-family: 'Baloo 2', cursive; text-align: center; margin-bottom: 2rem; }
.post {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 20px;
  margin-bottom: 2rem;
  box-shadow: 0 8px 15px rgba(122, 59, 103, 0.2);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s, opacity .8s;
  opacity: 0;
}
.post img { width: 100%; height: 220px; object-fit: cover; border-bottom: 3px dashed #ffbde9; }
.post div { padding: 1.5rem; }
.post h3 { color: #ff9ad5; font-family: 'Baloo 2', cursive; font-size: 1.8rem; margin-bottom: 0.5rem; }
.post p { color: #7a3b67; font-size: 1.1rem; line-height: 1.5rem; }
.post:hover { transform: scale(1.03); box-shadow: 0 12px 20px rgba(122, 59, 103, 0.3); }

/* Fade-in animation */
.fade-in.visible { opacity: 1; }

/* Comments */
.comments-section {
  background-color: #ffbde9;
  padding: 2rem;
  border-radius: 20px;
  margin-top: 3rem;
}
.comments-section h2 { color: #ff9ad5; font-family: 'Baloo 2', cursive; font-size: 1.8rem; margin-bottom: 1rem; }
#commentForm input,
#commentForm textarea {
  padding: 1rem;
  border-radius: 12px;
  border: 2px solid #ffbde9;
  font-family: 'Nunito', sans-serif;
  background-color: #ffffff;
  color: #7a3b67;
  width: 100%;
  margin-bottom: 1rem;
}
#commentForm button {
  background-color: #ff9ad5;
  color: #ffffff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  font-size: 1.1rem;
  transition: background .3s, transform .2s;
}
#commentForm button:hover { background-color: #ffbde9; transform: scale(1.05); }
.comment {
  background-color: #ffffff;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 15px;
  border: 1px solid #ffbde9;
  color: #7a3b67;
  font-size: 1rem;
}
.comment strong { color: #ff9ad5; }

/* Footer */
footer {
  background-color: #ff9ad5;
  color: #ffffff;
  text-align: center;
  padding: 1.5rem;
  margin-top: 3rem;
  border-top: 3px solid #ffbde9;
  font-family: 'Baloo 2', cursive;
  font-size: 1.2rem;
}

/* Sparkle Trail */
.sparkle {
  position: fixed;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #ff9ad5, transparent);
  border-radius: 50%;
  pointer-events: none;
  animation: fade 1s linear forwards;
}
@keyframes fade { 0% { opacity:1; transform: scale(1);} 100% { opacity:0; transform: scale(0);} }

/* Floating Hearts */
.heart {
  position: fixed;
  width: 20px;
  height: 20px;
  background-color: #ff9ad5;
  clip-path: polygon(50% 0%, 61% 16%, 98% 35%, 86% 70%, 50% 100%, 14% 70%, 2% 35%, 39% 16%);
  pointer-events: none;
  opacity: 0.7;
  animation: floatUp 3s ease-in forwards;
}
@keyframes floatUp { 0% { transform: translateY(0) scale(0.8);} 100% { transform: translateY(-200px) scale(1.2); opacity:0;} }

/* Responsive */
@media (min-width: 700px) {
  .post { flex-direction: row; }
  .post img { width: 40%; border-bottom: none; border-right: 3px dashed #ffbde9; }
  .post div { width: 60%; }
}