:root{
  --paper:#f6ede2;
  --blue:#a9cdf2;
  --blue-deep:#5f93d6;
  --pink:#f5b8cf;
  --pink-deep:#e07ba1;
  --ink:#4a4458;
  --ink-soft:#8b8398;
  --cream-overlay: 246,237,226;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{ width:100%; height:100%; }
body{
  font-family:'Quicksand', sans-serif;
  color:var(--ink);
  background:var(--paper);
}

/* ---------- scroll mechanics ---------- */
.scroll-container{
  height:100vh;
  overflow-y:scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior:smooth;
}
.slide{
  height:100vh;
  width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* ---------- slide 1: hero ---------- */
.hero-bg{
  position:absolute; inset:0;
  background-image:url('assets/hands-watercolor.webp');
  background-size:cover;
  background-position:center 28%;
  transform:scale(1.04);
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,28,0.12) 0%, rgba(20,16,28,0.04) 35%, rgba(20,16,28,0.22) 100%);
}
.hero-content{
  position:relative; z-index:2;
  text-align:center;
  padding:0 24px;
  animation: heroFadeIn 1.6s ease-out both;
}
@keyframes heroFadeIn{
  from{ opacity:0; transform:translateY(18px);}
  to{ opacity:1; transform:translateY(0);}
}
.hero-title{
  font-family:'Alex Brush', cursive;
  font-size:clamp(58px, 13vw, 110px);
  color:#fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.35);
  line-height:1;
}
.hero-sub{
  margin-top:10px;
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(13px, 2vw, 16px);
  letter-spacing:0.05em;
  color:rgba(255,255,255,0.92);
  text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}
.scroll-cue{
  position:absolute;
  bottom:34px; left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:rgba(255,255,255,0.85);
  animation: cueBounce 2.4s ease-in-out infinite;
}
.scroll-cue span{
  width:1px; height:28px;
  background:rgba(255,255,255,0.7);
}
.scroll-cue i{ font-size:18px; }
@keyframes cueBounce{
  0%,100%{ transform:translate(-50%, 0); opacity:0.7;}
  50%{ transform:translate(-50%, 8px); opacity:1;}
}

/* ---------- slide 2: counter ---------- */
.counter-bg{
  position:absolute; inset:0;
  background-image:url('assets/hands-watercolor-2.webp');
  background-size:cover;
  background-position:center 32%;
}
.counter-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(246,237,226,0.18) 0%,
    rgba(246,237,226,0.12) 40%,
    rgba(246,237,226,0.30) 100%);
}

.blob{
  position:absolute;
  border-radius:50%;
  opacity:0.16;
  filter:blur(6px);
  z-index:1;
}
.b1{ width:260px; height:170px; background:var(--blue); top:-40px; left:-60px; animation:float1 9s ease-in-out infinite;}
.b2{ width:200px; height:140px; background:var(--pink); top:6%; right:-50px; animation:float2 11s ease-in-out infinite;}
.b3{ width:220px; height:150px; background:var(--pink); bottom:-30px; left:6%; animation:float1 10s ease-in-out infinite reverse;}
.b4{ width:180px; height:120px; background:var(--blue); bottom:4%; right:8%; animation:float2 8s ease-in-out infinite;}
@keyframes float1{ 0%,100%{transform:translateY(0px) translateX(0px);} 50%{transform:translateY(14px) translateX(8px);} }
@keyframes float2{ 0%,100%{transform:translateY(0px) translateX(0px);} 50%{transform:translateY(-12px) translateX(-10px);} }

.sparkle{
  position:absolute;
  font-size:14px;
  color:var(--pink-deep);
  opacity:0.7;
  z-index:1;
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:0.2; transform:scale(0.8);} 50%{opacity:0.9; transform:scale(1.1);} }

.content{
  position:relative; z-index:2;
  max-width:600px; width:100%;
  text-align:center;
  padding:24px;
}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.94);
  border:1.5px solid var(--pink);
  color:var(--pink-deep);
  font-size:12px; font-weight:600;
  letter-spacing:0.04em;
  padding:7px 16px;
  border-radius:999px;
  margin-bottom:22px;
  box-shadow: 0 2px 12px -2px rgba(0,0,0,0.12);
}
.title{
  font-family:'Alex Brush', cursive;
  font-weight:400;
  font-size:clamp(40px, 8vw, 60px);
  color:var(--pink-deep);
  margin-bottom:2px;
  line-height:1;
  text-shadow: 0 2px 16px rgba(255,255,255,0.9), 0 1px 4px rgba(255,255,255,0.8);
}
.since{
  font-size:14px;
  color:var(--ink);
  font-weight:500;
  margin-bottom:34px;
  text-shadow: 0 1px 10px rgba(255,255,255,0.85);
}

.counter-card{
  background:rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border:2px solid rgba(243,233,224,0.9);
  border-radius:32px;
  padding:30px 22px;
  box-shadow: 0 12px 0 0 rgba(251,234,239,0.9), 0 24px 50px -12px rgba(60,40,50,0.32);
}
.grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:8px;
}
@media (max-width:640px){
  .grid{ grid-template-columns:repeat(3, 1fr); row-gap:16px;}
}
.unit{
  display:flex; flex-direction:column; align-items:center;
  padding:10px 4px;
  border-radius:18px;
}
.unit:nth-child(odd){ background:#eef5fc; }
.unit:nth-child(even){ background:#fdeef3; }
.num{
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:clamp(22px, 4.6vw, 34px);
  line-height:1;
  font-variant-numeric: tabular-nums;
}
.unit:nth-child(odd) .num{ color:var(--blue-deep); }
.unit:nth-child(even) .num{ color:var(--pink-deep); }
.label{
  margin-top:6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.footer-note{
  margin-top:22px;
  font-size:13px;
  color:var(--ink-soft);
  font-weight:500;
}

/* ---------- music toggle ---------- */
.music-toggle{
  position:fixed;
  bottom:24px; right:24px;
  z-index:50;
  width:52px; height:52px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(8px);
  color:var(--pink-deep);
  font-size:20px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow: 0 6px 20px -4px rgba(150,100,120,0.35);
  transition: transform 0.2s ease, background 0.2s ease;
}
.music-toggle:hover{ transform:scale(1.06); }
.music-toggle:active{ transform:scale(0.96); }
.music-toggle.playing{
  animation: musicPulse 1.6s ease-in-out infinite;
}
@keyframes musicPulse{
  0%,100%{ box-shadow: 0 6px 20px -4px rgba(150,100,120,0.35), 0 0 0 0 rgba(224,123,161,0.4); }
  50%{ box-shadow: 0 6px 20px -4px rgba(150,100,120,0.35), 0 0 0 10px rgba(224,123,161,0); }
}