/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }

/* BASE */
html, body { width:100%; min-height:100%; font-family:'Poppins',sans-serif; background:#0f0f11; overflow-x:hidden; }

/* PASSWORD SCREEN */
#lockScreen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; background: radial-gradient(circle at top, rgba(255,158,181,0.18), rgba(15,15,17,0.95)); backdrop-filter: blur(10px); z-index:9999; }

/* floating kisses */
#lockScreen{
position:relative;
overflow:hidden;
background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
}

#lockScreen::before{
content:"";
position:absolute;
width:400px;
height:400px;
background: radial-gradient(circle, rgba(255,158,181,0.18), transparent 70%);
top:20%;
left:50%;
transform:translateX(-50%);
animation: luxuryFloat 12s ease-in-out infinite;
filter: blur(40px);
}

#lockScreen::after{
content:"";
position:absolute;
width:300px;
height:300px;
background: radial-gradient(circle, rgba(255,111,145,0.12), transparent 70%);
bottom:10%;
left:50%;
transform:translateX(-50%);
animation: luxuryFloatReverse 16s ease-in-out infinite;
filter: blur(50px);
}

@keyframes luxuryFloat{
0%,100%{
transform:translateX(-50%) translateY(0px);
}
50%{
transform:translateX(-50%) translateY(-30px);
}
}

@keyframes luxuryFloatReverse{
0%,100%{
transform:translateX(-50%) translateY(0px);
}
50%{
transform:translateX(-50%) translateY(30px);
}
}
/* LOCK BOX */
.lock-box { width:90%; max-width:320px; text-align:center; padding:28px 22px 30px; border-radius:26px; background:rgba(20,20,24,0.85); box-shadow:0 20px 50px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05); z-index:1; }
.lock-title { color:#fff; font-size:18px; letter-spacing:0.4px; margin-bottom:20px; }
.lock-box input { width:100%; padding:14px; border-radius:18px; border:none; outline:none; background:rgba(0,0,0,0.6); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08); color:#fff; font-size:16px; text-align:center; margin-bottom:16px; }
.lock-box input:focus { box-shadow:0 0 0 2px rgba(255,158,181,0.6), inset 0 0 0 1px rgba(255,255,255,0.1); }
.lock-box button { width:100%; padding:14px; border-radius:999px; border:none; background:linear-gradient(135deg,#ff9eb5,#ff6f91); color:#111; font-weight:600; cursor:pointer; box-shadow:0 10px 30px rgba(255,111,145,0.45), inset 0 -2px 0 rgba(0,0,0,0.2); transition:transform 0.15s ease; }
.lock-box button:active { transform:scale(0.96); }

/* CARD */
.card { max-width:420px; margin:32px auto; padding:26px 22px 30px; border-radius:28px; position:relative; overflow:hidden; text-align:center; color:#fff; background:linear-gradient(120deg,#ff6f91,#ff9eb5,#ffd1dd,#ff9eb5,#ff6f91); background-size:500% 500%; animation:FLOW 12s linear infinite; box-shadow:0 18px 55px rgba(255,111,145,0.45); z-index:1; }
.card::before { content:""; position:absolute; inset:0; background:rgba(10,10,14,0.7); backdrop-filter:blur(6px); z-index:0; }
.card>* { position:relative; z-index:1; }
@keyframes FLOW { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

/* VIDEO */
.flower-frame { position:relative; padding:4px; border-radius:22px; margin-bottom:22px; overflow:hidden; }
.flower-frame::before { content:""; position:absolute; inset:-30%; background:linear-gradient(90deg, transparent,#ff9eb5,#2e2e2e,#ff6f91,transparent); animation:TRAIN 14s linear infinite; }
.flower-frame video { width:100%; height:260px; object-fit:cover; border-radius:18px; position:relative; z-index:1; background:#000; display:block; }
@keyframes TRAIN { 0%{transform:translateX(-40%) rotate(0deg);} 100%{transform:translateX(40%) rotate(360deg);} }

/* TEXT */
.subtitle{ font-size:17px; color:#f5f5f5; margin-bottom:22px; }

/* MUSIC BUTTON */
.music-btn{ width:100%; padding:14px; margin-bottom:20px; border-radius:999px; border:none; cursor:pointer; background:linear-gradient(135deg,#ff9eb5,#ff6f91); color:#111; font-weight:600; box-shadow:0 8px 22px rgba(255,111,145,0.55); transition:transform 0.15s ease; }
.music-btn:active{ transform:scale(0.96); }

/* LINKS */
.card a{ display:block; margin:10px 0; padding:13px; border-radius:26px; background:rgba(0,0,0,0.45); color:#ffd0dc; text-decoration:none; font-size:15px; transition:background 0.25s ease, color 0.25s ease; }
.card a:hover{ background:#ff6f91; color:#111; }

/* MESSAGE CARD */
.message-card{ padding:24px 22px; border-radius:24px; margin-top:26px; background:linear-gradient(120deg, rgba(255,158,181,0.35), rgba(255,111,145,0.25)); box-shadow:0 14px 40px rgba(255,111,145,0.25); }
.message-text{ font-size:16px; line-height:1.6; color:#f6f6f6; letter-spacing:0.3px; }

#presentBtn{
display:none;
margin-top:20px;
padding:14px;
border-radius:22px;
background:#ff9eb5;
color:#111;
text-decoration:none;
font-weight:600;
}

#presentBtn:hover{
background:#ff6f91;
}

.luxury-title{
font-family: 'Cinzel', serif;
font-size: 34px;
letter-spacing: 2px;
}