:root{
    --maroon:#5C0F1F; --maroon2:#7A1B2E; --beige:#E7D3AC; --cream:#FBF3E3;
    --gold:#C9A227; --gold-light:#E6C158; --ink:#2A140C;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{ scroll-behavior:smooth; }
  body{ font-family:'Poppins', sans-serif; color:var(--ink); overflow-x:hidden; cursor:none; background:var(--cream); }
  @media (hover:none){ body{ cursor:auto; } }
  ::selection{ background:var(--gold); color:var(--maroon); }

  #trailCanvas{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:9999; }
  #dot{
    position:fixed; width:9px; height:9px; border-radius:50%; background:var(--gold-light);
    pointer-events:none; z-index:10000; transform:translate(-50%,-50%); transition:transform .2s ease;
    box-shadow:0 0 8px 2px rgba(230,193,88,.6);
  }
  @media (hover:none){ #dot{ display:none; } }

  section{ position:relative; width:100%; padding:6vw; display:flex; flex-direction:column; align-items:center; }

  /* ---------- hero / opening sequence ---------- */
  #hero{
    min-height:100svh; justify-content:center; align-items:center; text-align:center;
    background:radial-gradient(circle at 50% 30%, var(--maroon2), var(--maroon) 75%);
    color:var(--cream); overflow:hidden; position:relative;
  }
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0); } }
  .intro{ position:relative; width:100%; height:100svh; display:flex; align-items:center; justify-content:center; }
  .intro > *{ position:absolute; opacity:0; pointer-events:none; }
  .intro > *.show{ opacity:1; pointer-events:auto; }

  .intro-loading{
    font-family:'Cormorant Garamond'; font-style:italic; font-size:clamp(1.1rem,2.6vw,1.5rem);
    color:var(--gold-light); letter-spacing:.05em; transition:opacity .6s ease;
  }
  .intro-loading .dots span{ animation:dotblink 1.4s ease-in-out infinite; }
  .intro-loading .dots span:nth-child(2){ animation-delay:.2s; }
  .intro-loading .dots span:nth-child(3){ animation-delay:.4s; }
  @keyframes dotblink{ 0%,100%{ opacity:.2; } 50%{ opacity:1; } }

  .intro-gift{
    font-size:5rem; cursor:pointer; transition:opacity .5s ease, transform .2s ease;
    display:flex; flex-direction:column; align-items:center; gap:1rem;
  }
  .intro-gift.show{ animation:giftshake 1.1s ease-in-out infinite; }
  .intro-gift:active{ transform:scale(.92); }
  @keyframes giftshake{
    0%,100%{ transform:rotate(0deg);} 20%{ transform:rotate(-8deg);} 40%{ transform:rotate(8deg);}
    60%{ transform:rotate(-6deg);} 80%{ transform:rotate(6deg);}
  }
  .gift-hint{
    font-family:'Cormorant Garamond'; font-style:italic; font-size:.95rem; color:var(--gold-light);
  }

  .thread-half{
    width:38vw; max-width:320px; height:2px; background:linear-gradient(90deg, transparent, var(--gold-light));
    top:50%; transition:transform 1s cubic-bezier(.2,.8,.2,1);
  }
  .thread-left{ left:0; transform:translateX(-100%); }
  .thread-left.show{ transform:translateX(0); }
  .thread-right{ right:0; background:linear-gradient(270deg, transparent, var(--gold-light)); transform:translateX(100%); }
  .thread-right.show{ transform:translateX(0); }

  .intro-rakhi{
    width:min(38vw, 160px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
    transform:scale(.4) translateY(0);
  }
  .intro-rakhi.show{ opacity:1; transform:scale(1) translateY(0); }
  .intro-rakhi.settled{ transform:scale(.85) translateY(70px); }

  .intro-wrist{ top:62%; width:min(46vw, 190px); transition:opacity .7s ease; }

  .intro-letter{
    width:min(84vw, 380px); background:var(--cream); border-radius:14px; border:1px solid var(--gold);
    padding:2.2rem 1.8rem; box-shadow:0 20px 60px -18px rgba(0,0,0,.5);
    transform:scaleY(0); transform-origin:top center; transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
  }
  .intro-letter.show{ transform:scaleY(1); }
  .letter-text{
    font-family:'Yatra One'; font-size:1.15rem; line-height:1.7; color:var(--maroon);
    opacity:0; transition:opacity .6s ease .4s;
  }
  .intro-letter.show .letter-text{ opacity:1; }

  .intro-finale{ display:flex; flex-direction:column; align-items:center; gap:.5rem; transition:opacity .8s ease; }
  .finale-heart{ font-size:2.4rem; }
  .finale-title{
    font-family:'Yatra One'; font-size:clamp(2rem,6vw,3rem); color:var(--cream); text-shadow:0 3px 0 var(--gold);
  }
  .finale-hindi{ font-family:'Noto Serif Devanagari'; font-weight:600; color:var(--gold-light); font-size:1.1rem; }

  .intro-scrollcue{
    bottom:6vh; top:auto; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-light);
    transition:opacity .8s ease;
  }

  /* ---------- rakhi showcase ---------- */
  #showcase{ background:var(--cream); padding-top:6rem; padding-bottom:6rem; text-align:center; }
  .rakhi-slot{ width:min(60vw, 260px); margin:0 auto; animation:sway 4.5s ease-in-out infinite; transform-origin:top center; }
  @keyframes sway{ 0%,100%{ transform:rotate(-3deg);} 50%{ transform:rotate(3deg);} }
  .showcase-caption{ margin-top:2rem; font-family:'Cormorant Garamond'; font-style:italic; font-size:1.2rem; color:var(--maroon2); }

  /* ---------- tie interaction ---------- */
  #tie{ background:var(--gold-light); min-height:100svh; justify-content:center; text-align:center; padding:6rem 6vw; }
  .tie-title{ font-family:'Yatra One'; font-size:clamp(1.8rem,4.4vw,2.7rem); color:var(--maroon); margin-bottom:.5rem; }
  .tie-sub{ font-family:'Cormorant Garamond'; font-style:italic; opacity:.75; margin-bottom:2.8rem; font-size:1.05rem; }
  .tie-stage{
    position:relative; width:min(90vw, 460px); height:340px;
    background:var(--cream); border-radius:24px; border:1px solid rgba(92,15,31,.15);
    box-shadow:0 20px 50px -20px rgba(92,15,31,.35);
    display:flex; align-items:center; justify-content:center; touch-action:none;
  }
  #wrist{ width:170px; opacity:.9; }
  #dragRakhi{ position:absolute; width:110px; cursor:grab; touch-action:none; transition:transform .25s ease; }
  #dragRakhi.tied{ animation:settle .5s ease forwards; }
  @keyframes settle{ 0%{ transform:scale(1.08);} 60%{ transform:scale(.92);} 100%{ transform:scale(1);} }
  .drop-zone{ position:absolute; width:140px; height:140px; border-radius:50%; border:2px dashed rgba(92,15,31,.3); }
  .hint{ margin-top:1.6rem; font-family:'Cormorant Garamond'; font-style:italic; font-size:1.05rem; color:var(--maroon2); }
  .hint.done{ color:var(--maroon); font-weight:600; }

  /* ---------- name + card thread column ---------- */
  #card-section{
    background:linear-gradient(180deg, var(--maroon) 0%, var(--maroon2) 38%, var(--beige) 100%);
    min-height:100svh; padding:6rem 6vw 5rem;
    opacity:1; transform:translateY(24px); pointer-events:none;
    transition:opacity .8s ease, transform .8s ease;
  }
  #card-section.unlocked{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .card-title{ font-family:'Yatra One'; font-size:clamp(1.8rem,4.2vw,2.5rem); color:var(--cream); margin-bottom:.4rem; text-align:center; }
  .card-sub{ font-family:'Cormorant Garamond'; font-style:italic; color:var(--gold-light); margin-bottom:1rem; text-align:center; }

  .thread-column{ position:relative; display:flex; flex-direction:column; align-items:center; }
  .thread-column::before{
    content:''; position:absolute; top:0; bottom:0; left:50%; width:2px;
    background:linear-gradient(180deg, var(--gold-light), var(--gold) 60%, transparent);
    transform:translateX(-50%); z-index:0;
  }
  .thread-bead{
    width:14px; height:14px; border-radius:50%; background:var(--gold-light);
    box-shadow:0 0 10px 2px rgba(230,193,88,.5); margin:1.4rem 0; position:relative; z-index:1;
  }

  .name-input{ text-align:center; position:relative; z-index:1; background:var(--maroon2); padding:1.2rem 2rem; border-radius:100px; border:1px solid var(--gold); }
  .name-input label{ display:block; font-size:.68rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold-light); margin-bottom:.5rem; }
  .name-input input{
    font-family:'Yatra One'; font-size:1.3rem; text-align:center; color:var(--cream);
    background:transparent; border:none; border-bottom:2px solid var(--gold); padding:.3rem .5rem;
    width:min(70vw, 240px); outline:none;
  }
  .name-input input::placeholder{ color:rgba(251,243,227,.4); font-family:'Poppins'; font-size:.95rem; }

  .flip-card{
    width:min(94vw, 460px); height:420px; perspective:1800px; cursor:pointer; position:relative; z-index:1;
    margin-top:1.6rem;
  }
  .flip-inner{
    position:relative; width:100%; height:100%; transition:transform 1s cubic-bezier(.2,.8,.2,1);
    transform-style:preserve-3d;
  }
  .flip-card.flipped .flip-inner{ transform:rotateY(180deg); }
  .face{
    position:absolute; inset:0; backface-visibility:hidden; border-radius:20px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:2.4rem; text-align:center; box-shadow:0 26px 60px -20px rgba(0,0,0,.5);
    overflow:hidden;
  }
  .face.front{
    background:radial-gradient(circle at 30% 20%, var(--maroon2), var(--maroon) 70%);
    border:1px solid var(--gold);
  }
  .face.front::after{
    content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(230,193,88,.25), transparent);
    animation:shine 3.2s ease-in-out infinite;
  }
  @keyframes shine{ 0%{ left:-60%; } 50%,100%{ left:120%; } }
  .face.front .rakhi-mini{ width:100px; margin-bottom:1.4rem; }
  .face.front p{ font-family:'Yatra One'; font-size:1.5rem; color:var(--cream); }
  .face.front .tap{ margin-top:1.8rem; font-family:'Cormorant Garamond'; font-style:italic; font-size:.85rem; color:var(--gold-light); }
  .face.back{ background:var(--cream); transform:rotateY(180deg); border:1px solid var(--gold); }
  .face.back .msg{ font-family:'Yatra One'; font-size:1.3rem; line-height:1.75; color:var(--maroon); }
  .face.back .sign{ margin-top:1.6rem; font-family:'Cormorant Garamond'; font-style:italic; font-size:.95rem; color:var(--maroon2); opacity:.8; }

  /* ---------- gifts finale ---------- */
  #finale{
    background:var(--maroon); min-height:70vh; justify-content:center; text-align:center;
    overflow:hidden; padding:5rem 6vw 3rem;
  }
  .finale-text{ font-family:'Yatra One'; font-size:clamp(1.6rem,4vw,2.3rem); color:var(--cream); z-index:2; }
  .finale-sub{ font-family:'Cormorant Garamond'; font-style:italic; color:var(--gold-light); margin-top:.7rem; z-index:2; }
  .gift{
    position:absolute; bottom:-40px; font-size:1.8rem; opacity:.9;
    animation:floatUp linear infinite;
  }
  @keyframes floatUp{
    0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
    10%{ opacity:.9; }
    90%{ opacity:.7; }
    100%{ transform:translateY(-70vh) translateX(var(--drift,20px)) rotate(20deg); opacity:0; }
  }

  footer{
    background:var(--maroon); padding:0 6vw 3rem; text-align:center;
    font-family:'Cormorant Garamond'; font-style:italic; font-size:.9rem; color:rgba(251,243,227,.6);
  }

  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- personal letter ---------- */

#letter-section{
  min-height:100svh;
  background:linear-gradient(180deg,var(--cream),var(--beige));
  justify-content:center;
  text-align:center;
  padding:6rem 6vw;
  color:var(--maroon);
}

.letter-glow{
  font-size:3rem;
  margin-bottom:1rem;
  animation:heartPulse 1.8s ease-in-out infinite;
}

@keyframes heartPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.12);}
}

.letter-kicker{
  font-family:'Cormorant Garamond';
  font-style:italic;
  color:var(--gold);
  font-size:1.1rem;
}

#letter-section h2{
  font-family:'Yatra One';
  font-size:clamp(2rem,5vw,3rem);
  margin:.5rem 0 2rem;
}

.personal-letter{
  width:min(90vw,620px);
  background:rgba(251,243,227,.9);
  border:1px solid var(--gold);
  border-radius:24px;
  padding:3rem 2.2rem;
  box-shadow:0 25px 70px -25px rgba(92,15,31,.45);
}

.personal-letter p{
  font-family:'Cormorant Garamond';
  font-size:1.25rem;
  line-height:1.8;
  color:var(--maroon);
}

.personal-letter p + p{
  margin-top:1.3rem;
}

.letter-sign{
  margin-top:2rem;
  font-family:'Cormorant Garamond';
  font-style:italic;
  color:var(--maroon2);
}

/* ---------- secret message ---------- */

#secret-section{
  min-height:100svh;
  background:radial-gradient(circle at 50% 30%,var(--maroon2),var(--maroon) 75%);
  justify-content:center;
  text-align:center;
  color:var(--cream);
}

.secret-card{
  width:min(90vw,600px);
}

.secret-icon{
  font-size:4rem;
  margin-bottom:1rem;
  animation:giftshake 2s ease-in-out infinite;
}

.secret-kicker{
  font-family:'Cormorant Garamond';
  font-style:italic;
  color:var(--gold-light);
  font-size:1.1rem;
}

.secret-card h2{
  font-family:'Yatra One';
  font-size:clamp(1.8rem,5vw,2.8rem);
  margin:.5rem 0 2rem;
}

#secretBtn{
  border:1px solid var(--gold-light);
  background:transparent;
  color:var(--gold-light);
  padding:.9rem 2rem;
  border-radius:100px;
  font-family:'Cormorant Garamond';
  font-size:1.1rem;
  cursor:pointer;
  transition:.3s ease;
}

#secretBtn:hover{
  background:var(--gold-light);
  color:var(--maroon);
  transform:translateY(-3px);
}

#secretMessage{
  display:none;
  margin-top:2.5rem;
  padding:2.5rem 2rem;
  background:var(--cream);
  color:var(--maroon);
  border:1px solid var(--gold);
  border-radius:24px;
  box-shadow:0 25px 70px -20px rgba(0,0,0,.5);
  animation:fadeUp .8s ease forwards;
}

#secretMessage.show{
  display:block;
}

#secretMessage span{
  font-size:2rem;
}

#secretMessage h3{
  font-family:'Yatra One';
  font-size:2rem;
  margin:.7rem 0 1rem;
}

#secretMessage p{
  font-family:'Cormorant Garamond';
  font-size:1.2rem;
  line-height:1.7;
}

#secretMessage strong{
  display:block;
  margin-top:1.5rem;
  color:var(--maroon2);
  font-family:'Yatra One';
}


/* =========================================================
   3D GIFT + NAME REVEAL SURPRISE
   ========================================================= */

#secret-section{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 35%, var(--maroon2), var(--maroon) 72%);
  overflow:hidden;
  position:relative;
}

.surprise-wrap{
  width:min(92vw,760px);
  position:relative;
  z-index:2;
}

.secret-kicker{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  color:var(--gold-light);
  font-size:1.25rem;
  margin-bottom:2rem;
}

.gift-hint{
  margin-top:1.5rem;
  color:var(--gold-light);
  font-family:'Cormorant Garamond',serif;
  font-size:1.15rem;
  transition:.4s ease;
}

/* 3D gift */
.gift-3d{
  width:150px;
  height:135px;
  margin:0 auto;
  position:relative;
  cursor:pointer;
  transform-style:preserve-3d;
  perspective:700px;
  transition:transform .5s ease;
}

.gift-3d:hover{
  transform:translateY(-8px) rotateY(-5deg);
}

.gift-box{
  position:absolute;
  width:120px;
  height:85px;
  left:15px;
  bottom:5px;
  background:linear-gradient(135deg,#e9a928,#f5c94d);
  border:2px solid var(--gold-light);
  border-radius:8px;
  box-shadow:0 18px 35px rgba(0,0,0,.3);
}

.gift-lid{
  position:absolute;
  width:138px;
  height:27px;
  left:6px;
  bottom:78px;
  z-index:4;
  background:linear-gradient(135deg,#f5c94d,#d9931e);
  border:2px solid var(--gold-light);
  border-radius:7px;
  transform-origin:left bottom;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

.gift-lid span{
  position:absolute;
  width:20px;
  height:27px;
  left:57px;
  top:-2px;
  background:#d83b45;
}

.gift-ribbon-v{
  position:absolute;
  width:20px;
  height:85px;
  left:50px;
  top:0;
  background:#d83b45;
}

.gift-ribbon-h{
  position:absolute;
  width:120px;
  height:18px;
  left:0;
  top:30px;
  background:#d83b45;
}

.gift-bow{
  position:absolute;
  left:50%;
  top:8px;
  width:50px;
  height:30px;
  transform:translateX(-50%);
  z-index:5;
}

.gift-bow i{
  position:absolute;
  width:29px;
  height:23px;
  background:#e13e49;
  border:2px solid #f06b70;
  border-radius:50% 50% 45% 45%;
}

.gift-bow i:first-child{
  left:0;
  transform:rotate(25deg);
}

.gift-bow i:last-child{
  right:0;
  transform:rotate(-25deg);
}

.gift-3d.opened .gift-lid{
  transform:rotate(-28deg) translate(-8px,-22px);
}

.gift-3d.opened{
  animation:giftOpen .7s ease;
}

@keyframes giftOpen{
  0%{transform:scale(1);}
  45%{transform:scale(1.12) rotate(-3deg);}
  100%{transform:scale(1);}
}

/* reveal */
.surprise-reveal{
  opacity:0;
  transform:translateY(30px) scale(.94);
  pointer-events:none;
  max-height:0;
  overflow:hidden;
  transition:
    opacity .8s ease,
    transform .8s ease,
    max-height 1s ease;
}

.surprise-reveal.show{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  max-height:900px;
  margin-top:2rem;
}

.reveal-small{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  color:var(--gold-light);
  font-size:1.2rem;
  margin-bottom:.5rem;
}

.name-reveal{
  margin:0;
  font-family:'Yatra One',serif;
  font-size:clamp(2.5rem,7vw,5rem);
  line-height:.95;
  color:var(--cream);
  text-shadow:0 8px 30px rgba(0,0,0,.25);
}

.name-reveal span{
  display:inline-block;
  opacity:0;
  transform:translateY(25px) scale(.7);
  animation:nameLetter .55s cubic-bezier(.2,.8,.2,1) forwards;
}

.name-reveal span:nth-child(1){animation-delay:.05s}
.name-reveal span:nth-child(2){animation-delay:.10s}
.name-reveal span:nth-child(3){animation-delay:.15s}
.name-reveal span:nth-child(4){animation-delay:.20s}
.name-reveal span:nth-child(5){animation-delay:.25s}
.name-reveal span:nth-child(6){animation-delay:.30s}
.name-reveal span:nth-child(7){animation-delay:.40s}
.name-reveal span:nth-child(8){animation-delay:.45s}
.name-reveal span:nth-child(9){animation-delay:.50s}
.name-reveal span:nth-child(10){animation-delay:.55s}
.name-reveal span:nth-child(11){animation-delay:.60s}

@keyframes nameLetter{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.reveal-line{
  width:110px;
  height:1px;
  background:var(--gold-light);
  margin:1.5rem auto;
}

.personal-message{
  width:min(90vw,580px);
  margin:0 auto;
  padding:2rem 2.2rem;
  background:var(--cream);
  border:1px solid var(--gold);
  border-radius:22px;
  box-shadow:0 25px 60px rgba(0,0,0,.25);
  color:var(--maroon);
}

.message-heart{
  font-size:2rem;
  margin-bottom:.5rem;
}

.personal-message p{
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;
  line-height:1.6;
  margin:0;
}

.message-sign{
  margin-top:1.2rem;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  color:var(--maroon2);
}

.replay-btn{
  margin-top:1.7rem;
  padding:.8rem 1.6rem;
  border:1px solid var(--gold-light);
  border-radius:100px;
  background:transparent;
  color:var(--gold-light);
  font-family:'Cormorant Garamond',serif;
  font-size:1.05rem;
  cursor:pointer;
  transition:.3s ease;
}

.replay-btn:hover{
  background:var(--gold-light);
  color:var(--maroon);
  transform:translateY(-3px);
}

@media(max-width:600px){
  .gift-3d{
    transform:scale(.85);
  }

  .gift-3d:hover{
    transform:scale(.85) translateY(-6px);
  }

  .personal-message{
    padding:1.5rem;
  }

  .personal-message p{
    font-size:1.15rem;
  }
}


/* ===== FORCE SURPRISE INITIAL STATE ===== */

#secret-section .surprise-reveal{
  display:block !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(35px) scale(.92) !important;
  max-height:0 !important;
  overflow:hidden !important;
}

#secret-section .surprise-reveal.show{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) scale(1) !important;
  max-height:1000px !important;
}

#secret-section .gift-3d{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

#secret-section .gift-box,
#secret-section .gift-lid,
#secret-section .gift-bow{
  visibility:visible !important;
  opacity:1 !important;
}

#secret-section .replay-btn{
  display:inline-block !important;
}


/* ===== LITTLE GIFTS ===== */

.little-gifts{
  width:min(92vw,720px);
  margin:0 auto 25px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.little-gift{
  padding:20px 14px;
  background:rgba(255,247,229,.97);
  border:1px solid #e8b82f;
  border-radius:18px;
  color:#671126;
  box-shadow:0 15px 35px rgba(0,0,0,.18);
  transform:translateY(20px);
  opacity:0;
  animation:littleGiftIn .6s ease forwards;
}

.little-gift:nth-child(1){animation-delay:.7s}
.little-gift:nth-child(2){animation-delay:.9s}
.little-gift:nth-child(3){animation-delay:1.1s}

.little-icon{
  font-size:38px;
  margin-bottom:8px;
  animation:littleFloat 2.5s ease-in-out infinite;
}

.little-gift h3{
  margin:5px 0 7px;
  font-family:Georgia,serif;
  font-size:18px;
}

.little-gift p{
  margin:0;
  font-family:Georgia,serif;
  font-size:14px;
  line-height:1.45;
}

@keyframes littleGiftIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes littleFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@media(max-width:650px){
  .little-gifts{
    grid-template-columns:1fr;
    width:min(88vw,400px);
  }

  .little-gift{
    padding:16px;
  }
}