/* page base */
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  background-color: #FFF7EF;
  background-image: url("https://images.unsplash.com/photo-1613268412996-696f6718ee3a?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

/* Floating musical notes */
.note {
  position: fixed;
  bottom: -1.5rem;              /* start slightly below viewport so they float up into view */
  font-size: 2rem;
  color: rgba(255, 150, 120, 0.85);
  pointer-events: none;
  z-index: 9999;
  /* animation will be set inline per-note via script for randomized durations */
  animation-name: floatUp;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-120vh) rotate(360deg);
    opacity: 0;
  }
}

/* Blurred overlay */
.bg-blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: cover;
  background-position: center bottom;
  filter: blur(10px) brightness(1.05);
  z-index: -1;
}

/* header, sections and other styles kept the same */
/* Soft Elegant Header */
.soft-header {
  background: linear-gradient(135deg, #FFE1CE, #FFC2A2);
  padding: 20px;
  text-align: center;
  color: #4B3B2F;
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.header-inner {
  max-width: 900px;
  margin: auto;
}

.soft-header h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 1px;
}

.tagline {
  font-size: 1.25rem;
  margin-top: 18px;
  opacity: 0.95;
  font-weight: 500;
}

.underline {
  width: 140px;
  height: 6px;
  background: #ffb48a;
  margin: 15px auto 0 auto;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(255,120,80,0.35);
}

/* Subtle floating notes around header */
.soft-header::before,
.soft-header::after {
  content: "♫";
  position: absolute;
  font-size: 2rem;
  color: rgba(255, 150, 120, 0.55);
  animation: floatHeaderNotes 6s linear infinite;
}

.soft-header::before {
  left: 12%;
  top: 20px;
  animation-delay: 0.8s;
}

.soft-header::after {
  right: 10%;
  bottom: 25px;
  animation-delay: 1.7s;
}

@keyframes floatHeaderNotes {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(-40px) rotate(40deg); opacity: 0; }
}

section { padding: 50px 20px; max-width: 900px; margin: auto; }

h2 { font-size: 1.9rem; margin-bottom: 20px; color: #8A5A44; }

.container { display:flex; flex-wrap:wrap; gap:20px; }

.card {
  background: #FFFFFF;
  padding: 25px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  border-radius: 15px;
  flex: 1;
  min-width: 260px;
  border: 1px solid #F3D4C2;
}

.card h3 { color: #A0654C; }

a.button, button.button {
  display: inline-block;
  background: #FFB48A;
  color: #4B3B2F;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  margin-top: 15px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

a.button:hover, button.button:hover { background: #FF9F6F; }

input, textarea {
  font-size: 1rem;
  background: #FFF;
  border: 1px solid #E7C8B4;
  padding: 12px;
  border-radius: 10px;
}

.contact-form {
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:400px;
  margin-top:25px;
  padding-bottom:150px;
}

footer {
  background: #FFB48A;
  color: #4B3B2F;
  text-align: center;
  padding: 20px 25px;
  font-weight: 600;
  margin-top: 0;
}

/* Fade animation */
.fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade.visible { opacity: 1; transform: translateY(0); }

/* Piano footer */
.piano-footer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 90px;
  background: #4B3B2F;
  margin: 0;
  padding: 0;
  transform: rotate(180deg);
}
.key { border: 1px solid #3a2e25; }
.white { width: 50px; height: 100%; background: white; }
.black { width: 30px; height: 60px; background: black; margin: 0 -15px; z-index: 2; border-radius: 0 0 4px 4px; }

@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;
    background-position: center top !important;
  }
}

/* Notebook-style note cards */
.note-card {
  background: white;
  padding: 35px 25px;
  margin: 45px auto;
  max-width: 900px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);
  position: relative;
  border: 1px solid #e1e1e1;

  /* lined notebook paper effect */
  background-image:
    repeating-linear-gradient(
      to bottom,
      #ffffff 0px,
      #ffffff 28px,
      #d8e6ff 29px
    );
}

/* Paper clip */
.note-card::before {
  content: "📎";
  position: absolute;
  top: -12px;
  right: 18px;
  font-size: 2rem;
  transform: rotate(12deg);
  opacity: 0.9;
}