🎁 Una sorpresa para ti
Toca el regalo para descubrirla
🎉 Recuerdos de nuestra amistad
Toca una foto para descubrir un mensaje
Un recuerdo especial ✨
Momentos inolvidables
Siempre hay algo que recordar
Un bonito recuerdo
Por muchos momentos más
🎂
¡Feliz Cumpleaños, Marla! 🎉
Gracias Marla,
¡muchos años más! 🥂He conocido a muchas personas
a lo largo de mi vida,
pero tú eres especial.
========================================================= */#marla-cumple{
position:relative;
width:100%;
height:100vh;
min-height:650px;
overflow:hidden;
background:#050505;
font-family:Arial,Helvetica,sans-serif;
color:#fff;
}/* =========================================================
PANTALLA DEL REGALO
========================================================= */#marla-cumple .pantalla-regalo{
position:absolute;
inset:0;
z-index:500;
display:flex;
justify-content:center;
align-items:center;background:
radial-gradient(
circle at center,
#fff 0%,
#fff4f8 42%,
#eadbe1 100%
);transition:
opacity 1s ease,
transform 1s ease;
}#marla-cumple .pantalla-regalo.oculta{
opacity:0;
transform:scale(1.15);
pointer-events:none;
}#marla-cumple .intro-regalo{
position:absolute;
top:10%;
left:20px;
right:20px;
text-align:center;
color:#b20b61;
}#marla-cumple .intro-regalo h2{
margin:0;
font-size:clamp(25px,7vw,44px);
font-weight:800;
}#marla-cumple .intro-regalo p{
margin:10px 0 0;
color:#555;
font-size:clamp(14px,4vw,18px);
}/* =========================================================
CAJA DE REGALO
========================================================= */#marla-cumple .regalo{
position:relative;
width:240px;
height:240px;
cursor:pointer;
transform:translateY(30px);filter:
drop-shadow(
0 25px 25px rgba(0,0,0,.25)
);transition:.25s ease;
}#marla-cumple .regalo:hover{
transform:
translateY(20px)
scale(1.04);
}#marla-cumple .caja{
position:absolute;
left:25px;
right:25px;
bottom:10px;
height:130px;border-radius:
5px
5px
13px
13px;background:
linear-gradient(
90deg,
#a91e40,
#e44766 50%,
#a91e40
);box-shadow:
inset 0 8px rgba(255,255,255,.08),
inset 0 -15px 20px rgba(0,0,0,.18);
}#marla-cumple .tapa{
position:absolute;left:10px;
right:10px;
top:67px;height:50px;border-radius:7px;z-index:8;background:
linear-gradient(
90deg,
#b52445,
#e84b68 50%,
#b52445
);box-shadow:
0 8px 15px rgba(0,0,0,.2);transform-origin:center bottom;transition:
transform .8s cubic-bezier(.2,.8,.2,1);
}/* =========================================================
LISTONES
========================================================= */#marla-cumple .liston-v{
position:absolute;top:0;
bottom:0;
left:50%;width:38px;transform:translateX(-50%);z-index:10;background:
linear-gradient(
90deg,
#d49e1f,
#ffe77c,
#d49e1f
);
}#marla-cumple .liston-h{
position:absolute;left:0;
right:0;
top:42%;height:31px;z-index:11;background:
linear-gradient(
90deg,
#d49e1f,
#ffe77c,
#d49e1f
);
}/* =========================================================
MOÑO
========================================================= */#marla-cumple .mono{
position:absolute;top:17px;
left:50%;width:110px;
height:68px;transform:translateX(-50%);z-index:20;transition:
.7s ease;
}#marla-cumple .lazo{
position:absolute;top:5px;width:57px;
height:47px;background:#ffdd65;border:7px solid #d49e1f;
}#marla-cumple .lazo.izq{
left:0;border-radius:
80%
20%
70%
30%;transform:rotate(-25deg);
}#marla-cumple .lazo.der{
right:0;border-radius:
20%
80%
30%
70%;transform:rotate(25deg);
}#marla-cumple .nudo{
position:absolute;left:50%;
top:17px;width:29px;
height:29px;transform:translateX(-50%);border-radius:50%;background:#d49e1f;
}/* =========================================================
ANIMACIÓN DE APERTURA
========================================================= */#marla-cumple .regalo.abrir{
animation:
temblar-regalo .7s ease;
}#marla-cumple .regalo.abrir .tapa{
transform:
translate(-15px,-70px)
rotate(-18deg);
}#marla-cumple .regalo.abrir .mono{
transform:
translateX(-50%)
translateY(-75px)
scale(.55);opacity:0;
}@keyframes temblar-regalo{0%,100%{
transform:
translateY(30px)
rotate(0);
}15%{
transform:
translateY(30px)
rotate(-6deg);
}30%{
transform:
translateY(30px)
rotate(6deg);
}45%{
transform:
translateY(30px)
rotate(-5deg);
}60%{
transform:
translateY(30px)
rotate(5deg);
}75%{
transform:
translateY(30px)
rotate(-2deg);
}
}/* =========================================================
EXPLOSIÓN
========================================================= */#marla-cumple .explosion{
position:absolute;
inset:0;z-index:600;pointer-events:none;
}#marla-cumple .particula{
position:absolute;left:50%;
top:50%;width:12px;
height:12px;border-radius:3px;opacity:0;
}#marla-cumple .explosion.activa .particula{
animation:
explosion-particula
1.6s
cubic-bezier(.1,.7,.2,1)
forwards;
}.p1{--x:-320px;--y:-280px;background:#ff4d91}
.p2{--x:-220px;--y:-370px;background:#fff}
.p3{--x:-100px;--y:-410px;background:#ff365e}
.p4{--x:50px;--y:-390px;background:#ff80bd}
.p5{--x:190px;--y:-340px;background:#fff}
.p6{--x:310px;--y:-250px;background:#ff365e}
.p7{--x:-370px;--y:-100px;background:#ff80bd}
.p8{--x:370px;--y:-60px;background:#fff}
.p9{--x:-360px;--y:100px;background:#ff365e}
.p10{--x:350px;--y:130px;background:#ff80bd}
.p11{--x:-270px;--y:250px;background:#fff}
.p12{--x:-100px;--y:330px;background:#ff365e}
.p13{--x:70px;--y:340px;background:#ff80bd}
.p14{--x:220px;--y:280px;background:#fff}
.p15{--x:280px;--y:-140px;background:#ff365e}
.p16{--x:-170px;--y:-240px;background:#ff80bd}
.p17{--x:140px;--y:-270px;background:#fff}
.p18{--x:-300px;--y:40px;background:#ff365e}
.p19{--x:300px;--y:50px;background:#ff80bd}
.p20{--x:0;--y:-350px;background:#fff}
.p21{--x:-60px;--y:250px;background:#ff4d91}
.p22{--x:170px;--y:190px;background:#fff}
.p23{--x:-190px;--y:170px;background:#ff80bd}
.p24{--x:100px;--y:-180px;background:#ff365e}@keyframes explosion-particula{0%{
opacity:1;transform:
translate(-50%,-50%)
scale(.2)
rotate(0);
}100%{
opacity:0;transform:
translate(-50%,-50%)
translate(var(--x),var(--y))
scale(1.4)
rotate(720deg);
}
}/* =========================================================
GALERÍA
========================================================= */#marla-cumple .galeria{
position:absolute;
inset:0;z-index:50;overflow:hidden;background:
radial-gradient(
ellipse at center,
#39152b 0%,
#0b0609 52%,
#000 100%
);opacity:0;transform:scale(.9);transition:
opacity 1s ease,
transform 1s ease;pointer-events:none;
}#marla-cumple .galeria.visible{
opacity:1;transform:scale(1);pointer-events:auto;
}/* =========================================================
CORAZONES
========================================================= */#marla-cumple .corazones{
position:absolute;
inset:0;overflow:hidden;pointer-events:none;z-index:80;
}#marla-cumple .corazon{
position:absolute;top:-60px;animation:
caer-corazon
linear
infinite;opacity:.85;
}#marla-cumple .c1{
left:3%;
font-size:18px;
animation-duration:7s;
}#marla-cumple .c2{
left:12%;
font-size:28px;
animation-duration:9s;
animation-delay:-3s;
}#marla-cumple .c3{
left:22%;
font-size:16px;
animation-duration:6s;
animation-delay:-5s;
}#marla-cumple .c4{
left:34%;
font-size:24px;
animation-duration:10s;
animation-delay:-1s;
}#marla-cumple .c5{
left:47%;
font-size:18px;
animation-duration:7s;
animation-delay:-4s;
}#marla-cumple .c6{
left:60%;
font-size:29px;
animation-duration:8s;
animation-delay:-2s;
}#marla-cumple .c7{
left:73%;
font-size:17px;
animation-duration:6s;
animation-delay:-6s;
}#marla-cumple .c8{
left:85%;
font-size:25px;
animation-duration:9s;
animation-delay:-3s;
}#marla-cumple .c9{
left:94%;
font-size:18px;
animation-duration:7s;
animation-delay:-5s;
}@keyframes caer-corazon{0%{
transform:
translateY(-60px)
rotate(0deg);opacity:0;
}10%{
opacity:.9;
}50%{
transform:
translateY(55vh)
translateX(35px)
rotate(180deg);
}100%{
transform:
translateY(115vh)
translateX(-35px)
rotate(360deg);opacity:0;
}
}/* =========================================================
ENCABEZADO GALERÍA
========================================================= */#marla-cumple .titulo{
position:absolute;top:24px;left:20px;
right:20px;text-align:center;z-index:100;
}#marla-cumple .titulo h2{
margin:0;font-size:
clamp(18px,4vw,28px);font-weight:700;text-shadow:
0 2px 10px #000;
}#marla-cumple .titulo p{
margin:7px 0;font-size:13px;opacity:.75;
}/* =========================================================
ESCENARIO 3D
========================================================= */#marla-cumple .escenario{
position:absolute;left:50%;
top:49%;width:100%;
height:430px;transform:
translate(-50%,-50%)
perspective(1200px);
}/* =========================================================
POLAROIDS
========================================================= */#marla-cumple .polaroid{
position:absolute;left:50%;
top:50%;width:205px;
height:270px;padding:
9px
9px
42px;background:#f8f8f8;border-radius:4px;box-shadow:
0 20px 50px rgba(0,0,0,.65);cursor:pointer;color:#222;transition:
transform .75s cubic-bezier(.2,.8,.2,1),
opacity .6s ease,
filter .5s ease;transform-style:preserve-3d;user-select:none;
}#marla-cumple .polaroid img{
width:100%;
height:100%;display:block;object-fit:cover;
}/* =========================================================
POSICIONES
========================================================= */#marla-cumple .polaroid.pos-2{
transform:
translate(-290px,-50%)
rotateY(28deg)
rotateZ(-6deg)
scale(.75);opacity:.45;filter:brightness(.65);z-index:1;
}#marla-cumple .polaroid.pos-1{
transform:
translate(-205px,-50%)
rotateY(18deg)
rotateZ(-4deg)
scale(.87);opacity:.78;z-index:3;
}#marla-cumple .polaroid.pos0{
transform:
translate(-50%,-50%)
rotateY(0)
rotateZ(0)
scale(1);opacity:1;z-index:10;
}#marla-cumple .polaroid.pos1{
transform:
translate(5px,-50%)
rotateY(-18deg)
rotateZ(4deg)
scale(.87);opacity:.78;z-index:3;
}#marla-cumple .polaroid.pos2{
transform:
translate(85px,-50%)
rotateY(-28deg)
rotateZ(6deg)
scale(.75);opacity:.45;filter:brightness(.65);z-index:1;
}/* =========================================================
TEXTO POLAROID
========================================================= */#marla-cumple .pie{
position:absolute;bottom:9px;left:8px;
right:8px;text-align:center;color:#333;font-family:
"Comic Sans MS",
"Segoe Print",
cursive;font-size:10px;
}/* =========================================================
CARTA / MENSAJE
========================================================= */#marla-cumple .mensaje{
position:absolute;left:50%;
bottom:80px;width:
min(92%,530px);transform:
translateX(-50%)
translateY(30px)
scale(.95);opacity:0;z-index:300;text-align:center;pointer-events:none;transition:
opacity .55s ease,
transform .55s ease;
}#marla-cumple .mensaje.visible{
opacity:1;transform:
translateX(-50%)
translateY(0)
scale(1);pointer-events:auto;
}#marla-cumple .mensaje-contenido{
position:relative;padding:
27px
24px
22px;border-radius:25px;background:
linear-gradient(
145deg,
rgba(255,255,255,.98),
rgba(255,238,247,.98)
);border:
2px solid rgba(255,255,255,.9);box-shadow:
0 20px 65px rgba(0,0,0,.65);color:#333;
}#marla-cumple .mensaje-corazon{
font-size:38px;margin-bottom:6px;
}#marla-cumple .mensaje-titulo{
font-size:
clamp(22px,5vw,31px);font-weight:800;color:#b20b61;margin-bottom:15px;
}#marla-cumple .mensaje-texto{
font-size:
clamp(14px,3.8vw,17px);line-height:1.6;color:#444;
}#marla-cumple .frase-especial{
display:block;margin-top:13px;font-style:italic;color:#7c3158;
}/* =========================================================
BOTÓN CERRAR
========================================================= */#marla-cumple .boton-cerrar{
margin-top:20px;border:0;border-radius:30px;padding:
11px
27px;background:#b20b61;color:#fff;font-size:14px;font-weight:bold;cursor:pointer;box-shadow:
0 7px 20px rgba(178,11,97,.35);transition:
transform .2s ease,
background .2s ease;
}#marla-cumple .boton-cerrar:hover{
transform:scale(1.05);background:#8f084d;
}/* =========================================================
CONTROLES
========================================================= */#marla-cumple .controles{
position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:180;display:flex;align-items:center;gap:22px;
}#marla-cumple .flecha{
width:40px;
height:40px;border-radius:50%;border:
1px solid rgba(255,255,255,.35);background:#a50862;color:#fff;font-size:25px;line-height:1;cursor:pointer;transition:.2s ease;
}#marla-cumple .flecha:hover{
transform:scale(1.1);background:#cf0878;
}#marla-cumple .contador{
min-width:40px;text-align:center;font-size:13px;font-weight:bold;
}/* =========================================================
CORAZONES AL SELECCIONAR
========================================================= */#marla-cumple .corazon-click{
position:absolute;pointer-events:none;z-index:400;animation:
subir-corazon
1.4s
ease
forwards;
}@keyframes subir-corazon{0%{
opacity:1;transform:
translate(-50%,-50%)
scale(.5);
}40%{
opacity:1;transform:
translate(-50%,-100px)
scale(1.2);
}100%{
opacity:0;transform:
translate(-50%,-210px)
scale(.7);
}
}/* =========================================================
CELULAR
========================================================= */@media(max-width:600px){#marla-cumple{
min-height:620px;
}#marla-cumple .regalo{
width:215px;
height:215px;
}#marla-cumple .escenario{
top:47%;
height:400px;
}#marla-cumple .polaroid{
width:170px;
height:225px;padding:
7px
7px
36px;
}#marla-cumple .polaroid.pos-2{
transform:
translate(-220px,-50%)
rotateY(25deg)
rotateZ(-5deg)
scale(.67);
}#marla-cumple .polaroid.pos-1{
transform:
translate(-145px,-50%)
rotateY(17deg)
rotateZ(-4deg)
scale(.77);
}#marla-cumple .polaroid.pos0{
transform:
translate(-50%,-50%)
scale(1);
}#marla-cumple .polaroid.pos1{
transform:
translate(0,-50%)
rotateY(-17deg)
rotateZ(4deg)
scale(.77);
}#marla-cumple .polaroid.pos2{
transform:
translate(75px,-50%)
rotateY(-25deg)
rotateZ(5deg)
scale(.67);
}#marla-cumple .pie{
font-size:8px;
}#marla-cumple .mensaje{
bottom:78px;
}#marla-cumple .mensaje-contenido{
width:
calc(100vw - 30px);padding:
22px
17px
18px;
}#marla-cumple .mensaje-texto{
font-size:14px;
}}/* =========================================================
CELULARES MUY PEQUEÑOS
========================================================= */@media(max-width:380px){#marla-cumple .polaroid{
width:150px;
height:200px;
}#marla-cumple .polaroid.pos-1{
transform:
translate(-125px,-50%)
rotateY(15deg)
scale(.68);
}#marla-cumple .polaroid.pos1{
transform:
translate(-18px,-50%)
rotateY(-15deg)
scale(.68);
}}
🎁 Una sorpresa para ti
Toca el regalo para descubrirla
♥
♥
♥
♥
♥
♥
♥
♥
♥
💗 Recuerdos de nuestra amistad
Toca una foto para descubrir un mensaje
Un recuerdo especial 💗
Momentos inolvidables ✨
Siempre hay algo que recordar 💕
Un bonito recuerdo 🌸
Por muchos momentos más ❤️
🎂💗
¡Feliz Cumpleaños, Marla! 🎉
Gracias Marla,
¡muchos años más! 🥂He conocido a muchas personas
a lo largo de mi vida,
pero tú eres especial.
