body{
background:#f2e6d0;
font-family:'Handlee', cursive;
text-align:center;
margin:0;
}

/* TITLE */
h1{
margin-top:20px;
}

/* SCROLL */
.scroll{
width:92%;
max-width:420px;
margin:30px auto;
padding:25px;
border-radius:15px;
box-shadow:0 20px 40px rgba(0,0,0,0.4);
position:relative;

background:
linear-gradient(#d8a76c, #c28d52),
url("https://www.transparenttextures.com/patterns/paper.png");

background-blend-mode:multiply;

animation:openScroll 1.5s ease forwards;
transform-origin:top;
}

/* RODS */
.rod{
position:absolute;
left:50%;
transform:translateX(-50%);
width:110%;
height:18px;
background:linear-gradient(#8b5a2b,#5a3a1a);
border-radius:20px;
box-shadow:0 6px 12px rgba(0,0,0,0.6);
}

.top-rod{ top:-12px; }
.bottom-rod{ bottom:-12px; }

/* OPEN */
@keyframes openScroll{
0%{transform:scaleY(0.1); opacity:0;}
100%{transform:scaleY(1); opacity:1;}
}

/* FRIENDS */
.friends{
position:relative;
height:160px;
}

/* AVATAR */
.girl{
width:90px;
position:absolute;
bottom:0;
cursor:pointer;
}

.left{ left:-120px; }
.right{ right:-120px; }

/* ANIMATION */
.show.left{
animation:moveRight 1.8s forwards;
}
.show.right{
animation:moveLeft 1.8s forwards;
}

@keyframes moveRight{
to{ left:90px; }
}

@keyframes moveLeft{
to{ right:90px; }
}

/* HEART */
.heart{
position:absolute;
left:50%;
top:10px;
transform:translateX(-50%);
font-size:26px;
opacity:0;
}

.show.heart{
animation:heartShow 1.5s forwards;
animation-delay:1s;
}

@keyframes heartShow{
from{opacity:0; transform:translateX(-50%) scale(0.5);}
to{opacity:1; transform:translateX(-50%) scale(1);}
}

/* TEXT */
.dear{
text-align:left;
margin-top:10px;
font-size:18px;
}

/* LOVE */
.love{
position:relative;
margin-top:18px;
font-size:18px;
text-align:right;
padding-right:20px;
}

.love span{
display:block;
margin-bottom:4px;
position:relative;
right:10px;
}

.love input{
display:block;
margin-left:auto;
border:none;
border-bottom:2px solid #333;
background:transparent;
font-size:16px;
outline:none;
width:160px;
text-align:right;
}

/* INPUT */
input{
border:none;
border-bottom:2px solid #333;
background:transparent;
font-size:15px;
outline:none;
}

/* TEXTAREA */
textarea{
width:100%;
height:110px;
margin-top:10px;
padding:10px;
font-size:15px;
border-radius:8px;
border:2px solid #b68b55;
background:#f5e2c8;
resize:none;
box-sizing:border-box;
}

/* BUTTON */
button{
margin-top:15px;
padding:10px 20px;
background:black;
color:white;
border:none;
font-size:14px;
cursor:pointer;
border-radius:6px;
min-width:120px;
}

button:hover{
background:#333;
}

/* WhatsApp button */
.wa-btn{
min-width:unset !important;
width:46px;
height:46px;
padding:0;
display:inline-flex;
align-items:center;
justify-content:center;
background:#25D366;
border-radius:50%;
vertical-align:middle;
margin-left:8px;
}

.wa-btn:hover{
background:#1ebe5d;
}

#actions{
margin-top:10px;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

/* Hint */
.hint{
font-size:14px;
color:#333;
margin-top:6px;
margin-bottom:10px;
opacity:1;
transition:opacity 1s ease;
}

.hint.hide{
opacity:0;
visibility:hidden;
}

/* Toast */
#toast{
position:fixed;
bottom:40px;
left:50%;
transform:translateX(-50%) translateY(20px);
background:#222;
color:#fff;
padding:12px 24px;
border-radius:30px;
font-size:15px;
opacity:0;
pointer-events:none;
transition:opacity 0.3s ease, transform 0.3s ease;
z-index:999;
}

#toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}

/* MOBILE */
@media screen and (max-width:480px){

body{
overflow-x:hidden;
}

h1{
font-size:32px !important;
margin:14px 0 !important;
}

.scroll{
width:88vw !important;
max-width:88vw !important;
margin:20px auto !important;
padding:14px !important;
box-sizing:border-box !important;
}

.top-rod,
.bottom-rod{
width:calc(100% + 28px) !important;
left:50% !important;
transform:translateX(-50%) !important;
}

.friends{
    height:170px !important;
    position:relative;
  }

  .girl{
    width:88px !important;
  }

  .heart{
    top:8px !important;
    font-size:34px !important;
    z-index:2;
  }

  .show.left{
    animation:moveRightMobile 1.8s forwards !important;
  }

  .show.right{
    animation:moveLeftMobile 1.8s forwards !important;
  }

  @keyframes moveRightMobile{
    from{ left:-120px; }
    to{ left:22%; }
  }

  @keyframes moveLeftMobile{
    from{ right:-120px; }
    to{ right:22%; }
  }



.dear,
.love{
font-size:18px !important;
}

.love{
margin-top:14px !important;
padding-right:10px !important;
}

input,
textarea{
font-size:16px !important;
}

textarea{
height:130px !important;
}

button{
font-size:15px !important;
padding:10px 16px !important;
}

.wa-btn{
width:44px !important;
height:44px !important;
padding:0 !important;
}

#actions{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-wrap:wrap;
}
}