/* ===========================================================
   HAPPY BIRTHDAY WEBSITE
   Style Utama
   Author : Indra Lesmana
=========================================================== */

/* =========================
   GOOGLE FONT
========================= */

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

html{

    scroll-behavior:smooth;

}

body{
font-family:'Poppins',sans-serif;
background:#05162F;
color:white;
overflow-x:hidden;
overflow-y:auto;
}

/* =========================
   ROOT COLOR
========================= */

:root{

    --primary:#8FCBFF;

    --secondary:#D9F2FF;

    --white:#FFFFFF;

    --pink:#FFD5E5;

    --glass:rgba(255,255,255,.12);

    --shadow:0 10px 40px rgba(0,0,0,.35);

    --radius:25px;

}

/* =========================
   SECTION
========================= */

section{
width:100%;
height:100vh;
position:absolute;
top:0;
left:0;
}

/* =========================
   BACKGROUND
========================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:url("assets/images/background.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    z-index:-10;
    animation:zoomBackground 30s linear infinite alternate;

}

/* Lapisan gelap */

body::after{

    content:"";

    position:fixed;

    inset:0;

    background:linear-gradient(
        rgba(5,22,47,.65),
        rgba(5,22,47,.75)
    );

    z-index:-9;

}

/* =========================
   JUDUL
========================= */

.main-title{
font-family:"Great Vibes",cursive;
font-size:50px;
font-weight:400;
color:#fff;
text-align:center;
margin-bottom:15px;
text-shadow:0 0 12px rgba(255,255,255,.9),0 0 35px rgba(165,210,255,.8),0 0 65px rgba(130,180,255,.6);
}

/* =========================
   SUBTITLE
========================= */

.subtitle{
max-width:720px;
margin:35px auto;
font-size:10px;
line-height:1;
font-weight:300;
text-align:center;
color:#eef4ff;
letter-spacing:.3px;
}
/* =========================
   BUTTON
========================= */

.btn{
padding:10px 30px;
border:none;
border-radius:30px;
font-size:15px;
font-weight:300;
cursor:pointer;
color:#fff;
background:linear-gradient(135deg,#ff8bc5,#8c8cff);
box-shadow:0 0 25px rgba(255,140,200,.5),0 0 45px rgba(120,170,255,.45);
transition:.35s;
}
.btn:hover{
transform:translateY(-5px) scale(1.05);
box-shadow:0 0 35px rgba(255,140,200,.8),0 0 70px rgba(120,170,255,.6);
}

/* =========================
   GLASS CARD
========================= */

.glass{
position:relative;
width:min(900px,92%);
padding:45px 55px;
background:linear-gradient(180deg,rgba(46,63,105,.88),rgba(39,50,82,.82));
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.18);
border-radius:38px;
box-shadow:0 0 60px rgba(110,150,255,.15),0 25px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.05);
overflow:hidden;
}
.glass::before{
content:"";
position:absolute;
inset:0;
border-radius:38px;
padding:1px;
background:linear-gradient(135deg,#ffd7ea,#9ddcff,#ffd7ea);
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:.65;
pointer-events:none;
}

.glass::after{
content:"";
position:absolute;
width:350px;
height:350px;
background:radial-gradient(circle,rgba(155,215,255,.18),transparent 70%);
left:50%;
bottom:-180px;
transform:translateX(-50%);
pointer-events:none;
}
/* =========================
   IMAGE
========================= */

img{

    max-width:100%;

    user-select:none;

}

/* =========================
   LINK
========================= */

a{

    text-decoration:none;

}

/* =========================
   LIST
========================= */

ul{

    list-style:none;

}
/* ==========================================
   OPENING PREMIUM
========================================== */

.opening-content{
    margin-top:40px;

    width:100%;

    max-width:900px;

    margin:auto;

    padding:30px;
padding-top:40px;
padding-bottom:45px;

    text-align:center;

    border-radius:30px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.18);

}

.opening-small{

    color:#B9E8FF;

    font-size:10px;

    margin-bottom:25px;

    letter-spacing:2px;

}

.opening-name{

    margin-top:20px;

    margin-bottom:20px;

    color:#FFD9EA;

    font-size:15px;

    font-weight:600;

    letter-spacing:1px;

}
#opening-screen{

    background:transparent;

}
/* ===================================
WELCOME
=================================== */

.welcome-box{
width:min(900px,92%);
margin:60px auto;
padding:60px 50px;
background:rgba(40,55,95,.45);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.2);
border-radius:35px;
box-shadow:0 25px 60px rgba(0,0,0,.35);
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
height:auto;
min-height:auto;
}

/* ===============================
FADE OUT
=============================== */

.fade-out{

    animation:fadeOut 1.5s forwards;

}
/* ===================================================
   EFFECT LAYER
=================================================== */

#stars,
#flowers,
#bubbles{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    pointer-events:none;

    overflow:hidden;

    z-index:-1;

}
/* ===================================
STAR
=================================== */

.star{

    position:absolute;

    width:3px;

    height:3px;

    background:white;

    border-radius:50%;

    animation:twinkle 2s infinite alternate;

}
/* ===================================
FLOWER
=================================== */

.flower{

    position:absolute;

    width:70px;

    animation:fall linear infinite;

}
/**********************************/

.bubble{

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

    background:rgba(255,255,255,.25);

    backdrop-filter:blur(5px);

    animation:up linear infinite;

}
/* ===================================================
   SCENE ENGINE
=================================================== */

.scene{
display:none;
justify-content:center;
align-items:flex-start;
min-height:100vh;
padding:40px 20px;
overflow-y:auto;
}

.scene.active{
display:flex;
opacity:1;
visibility:visible;
}
/* ==========================================
   PREMIUM BUTTON
========================================== */

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:120%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.6),

        transparent

    );

}

.btn:hover::before{

    animation:shine 1s;

}
/* ==========================================
TITLE GLOW
========================================== */

.main-title{

    animation:titleGlow 3s infinite alternate;

}
/* ==========================================
MOON
========================================== */

.moon{

    position:fixed;

    top:70px;

    right:20px;

    width:90px;

    height:90px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        #FFFCE6,

        #F9F3C8

    );

    box-shadow:

    0 0 30px #FFF8C2,

    0 0 80px rgba(255,255,210,.45);

    animation:moonFloat 8s ease-in-out infinite;

    z-index:-2;

}
/* ==========================================
FOG
========================================== */

.fog{

    position:fixed;

    bottom:-50px;

    left:-20%;

    width:140%;

    height:250px;

    background:radial-gradient(

        ellipse,

        rgba(255,255,255,.18),

        transparent

    );

    filter:blur(45px);

    animation:fogMove 25s linear infinite;

    z-index:-3;

}
/* ==========================================
STORY PROGRESS
========================================== */

.story-progress{

    display:inline-block;

    margin-bottom:30px;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.2);

    color:#D9F4FF;

    font-size:14px;

    letter-spacing:2px;

}
/* ==========================================
TYPEWRITER
========================================== */

.typing{
display:inline-block;
border-right:2px solid white;
animation:cursor .7s infinite;
}
/* ==========================================
OPENING CARD HOVER
========================================== */

.opening-content{

    transition:.5s;

}

.opening-content:hover{

    transform:translateY(-6px);

    box-shadow:

    0 20px 60px rgba(0,0,0,.45);

}
/* ==========================================
TYPING NAME
========================================== */

.typing-name{

    margin-top:20px;

    margin-bottom:10px;

    color:#FFD7E6;

    font-size:20px;

    font-weight:700;

    line-height:1.4;

    opacity:0;

    transform:translateY(20px);

    animation:showName 1.2s ease forwards;

    animation-delay:1.5s;

}
.btn:disabled{

    opacity:.6;

    cursor:not-allowed;

}
/* ==========================================
WELCOME CARD
========================================== */

.glass{

transition:.4s;

}

.glass:hover{

transform:translateY(-8px);

box-shadow:

0 25px 70px rgba(0,0,0,.45);

}
.btn::after{

content:"";

position:absolute;

top:0;

left:-120%;

width:120%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.5),

transparent

);

}

.btn:hover::after{

animation:buttonLight 1s;

}
.main-title{

user-select:none;

}

.opening-name{

user-select:none;

}

.typing-name{

user-select:none;

}
/* =======================================================
TIMELINE
======================================================= */

.timeline-wrapper{

width:100%;

max-width:1000px;

margin:auto;

padding:60px 50px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.15);

border-radius:35px;

position:relative;

overflow:hidden;

}

.timeline-heading{
font-family:"Great Vibes",cursive;
font-size:60px;
margin-bottom:15px;
text-align:center;
color:#ffd9ef;
}

.timeline-subheading{

text-align:center;

color:#E8F2FF;

font-size:18px;

line-height:1.8;

margin-bottom:50px;

opacity:.9;

}
.timeline-item{
display:flex;
justify-content:space-between;
align-items:flex-start;
position:relative;
margin:90px 0;
}

.timeline-item.left{
flex-direction:row;
}

.timeline-item.right{
flex-direction:row-reverse;
}

.timeline-dot{
position:absolute;
left:50%;
top:28px;
transform:translateX(-50%);
width:18px;
height:18px;
background:#fff;
border:4px solid #ffb8dd;
border-radius:50%;
box-shadow:0 0 15px #ffb8dd;
z-index:100;
}

.timeline-content{
width:38%;
padding:10px 20px;
}

.timeline-content h2{

font-size:17px;

margin-bottom:12px;

color:white;

font-weight:700;

}

.timeline-content p{
font-size:10px;
line-height:1.8;
color:#F3F8FF;
text-align:justify;
text-justify:inter-word;
}

.year-badge{

display:inline-block;

padding:8px 18px;

background:#ffb8ea;

border-radius:30px;

margin-bottom:20px;

font-size:15px;

font-weight:bold;

color:#24395f;

}
.timeline-footer{
margin-top:40px;
text-align:center;
}

.timeline-footer .btn{
display:block;
margin:35px auto 0;
}

/* =======================================================
   POLAROID
======================================================= */

.polaroid{
position:relative;
width:250px;
background:#fff;
padding:12px 12px 55px;
border-radius:8px;
box-shadow:0 18px 40px rgba(0,0,0,.28);
overflow:hidden;
transition:.4s;
}

.timeline-item.right .polaroid{

transform:rotate(3deg);

animation:floatCardRight 6s ease-in-out infinite;

}

.polaroid:hover{

    transform:rotate(0deg) scale(1.05);

}

.polaroid img{
width:100%;
height:310px;
object-fit:cover;
border-radius:4px;
display:block;
}
.tape{

    position:absolute;

    width:90px;

    height:24px;

    top:-10px;

    left:50%;

    transform:translateX(-50%) rotate(-4deg);

    opacity:.9;

    border-radius:3px;

}

.tape.pink{

    background:#ffd0e6;

}

.tape.blue{

    background:#cfefff;

}

.tape.purple{

    background:#ddd3ff;

}
/* ==========================================
FLOWER DECORATION
========================================== */

.polaroid::before{

content:"🌸";

position:absolute;

top:10px;

left:10px;

font-size:24px;

}

.polaroid::after{

content:"💖";

position:absolute;

bottom:18px;

right:18px;

font-size:20px;

}
/* ==========================================
FLOAT
========================================== */

.polaroid{

animation:floatCard 6s ease-in-out infinite;

}
@keyframes floatCardRight{

0%{

transform:translateY(0px) rotate(3deg);

}

50%{

transform:translateY(-10px) rotate(2deg);

}

100%{

transform:translateY(0px) rotate(3deg);

}

}
.timeline-item{

opacity:0;

transform:translateY(40px);

animation:fadeTimeline .8s ease forwards;

}

.timeline-item:nth-child(1){

animation-delay:.2s;

}

.timeline-item:nth-child(2){

animation-delay:.4s;

}

.timeline-item:nth-child(3){

animation-delay:.6s;

}

.timeline-item:nth-child(4){

animation-delay:.8s;

}
.timeline-page{
overflow-y:auto;
align-items:flex-start;
}
.love-line{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
margin:18px 0 28px;
font-size:22px;
color:#ffd4e9;
}
.love-line span{
width:150px;
height:1px;
background:linear-gradient(90deg,transparent,#ffd4e9,transparent);
}
.bottom{
margin-top:10px;
margin-bottom:25px;
}
.message-bubble{
text-align:center;
opacity:0;
transform:translateY(20px) scale(.9);
transition:.8s;
background:rgba(255,255,255,.12);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.18);
padding:14px 20px;
border-radius:22px;
color:#fff;
font-size:10px;
line-height:1;
width:max-content;
margin:25px auto;
box-shadow:0 10px 30px rgba(0,0,0,.25);
pointer-events:none;
}

.message-bubble.show{
opacity:1;
transform:translateY(0) scale(1);
animation:bubbleFloat 2s ease-in-out infinite;
}

@keyframes bubbleFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-8px);}
}

.timeline-line{
position:relative;
}

.timeline-line::before{
content:"";
position:absolute;
left:50%;
top:0;
transform:translateX(-50%);
width:4px;
height:100%;
background:linear-gradient(to bottom,#ffd7ea,#9fd9ff,#ffd7ea);
border-radius:50px;
box-shadow:0 0 12px rgba(255,190,220,.6);
}

.timeline-item.left .polaroid{
margin-right:70px;
transform:rotate(-4deg);
}

.timeline-item.right .polaroid{
margin-left:70px;
transform:rotate(4deg);
}

.video-card{
padding:10px;
}

.timeline-video{
width:100%;
height:100%;
display:block;
object-fit:cover;
background:#000;
border-radius:8px;
}

/*==================================================
GALERI
==================================================*/
.gallery-page{
padding:70px 20px;
overflow-y:auto;
}
.gallery-wrapper{
max-width:1150px;
margin:auto;
padding:50px;
border-radius:35px;
text-align:center;
}
.gallery-title{
font-family:"Great Vibes",cursive;
font-size:72px;
color:#fff;
text-shadow:0 0 20px rgba(255,255,255,.8);
margin-bottom:10px;
}
.gallery-subtitle{
font-size:20px;
color:#fff;
opacity:.9;
margin-bottom:25px;
}
.gallery-line{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
margin-bottom:35px;
font-size:28px;
color:#ff8ac6;
}
.gallery-line span{
width:130px;
height:2px;
background:#ffb6da;
}
.gallery-filter{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:18px;
margin-bottom:45px;
}
.filter-btn{
padding:13px 28px;
border:none;
border-radius:30px;
background:rgba(255,255,255,.08);
color:#fff;
font-size:16px;
cursor:pointer;
transition:.35s;
backdrop-filter:blur(10px);
}
.filter-btn:hover,
.filter-btn.active{
background:linear-gradient(45deg,#ff8ac6,#ffb6da);
transform:translateY(-3px);
box-shadow:0 10px 20px rgba(255,105,180,.35);
}
.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:45px;
justify-items:center;
justify-content:center;
}
.polaroid{
background:#fff;
padding:14px 14px 55px;
border-radius:6px;
position:relative;
box-shadow:0 20px 40px rgba(0,0,0,.35);
transition:.4s;
}
.polaroid:nth-child(odd){
transform:rotate(-4deg);
}
.polaroid:nth-child(even){
transform:rotate(4deg);
}
.polaroid:hover{
transform:scale(1.08) rotate(0deg);
z-index:10;
}
.polaroid img,
.gallery-video{
width:100%;
height:320px;
object-fit:cover;
display:block;
border-radius:5px;
background:#000;
}
.polaroid p{
margin-top:16px;
font-family:"Great Vibes",cursive;
font-size:31px;
color:#444;
}
.tape{
position:absolute;
top:-12px;
left:50%;
transform:translateX(-50%) rotate(-4deg);
width:95px;
height:22px;
border-radius:4px;
opacity:.92;
}
.tape.pink{
background:#ffc5e1;
}
.tape.blue{
background:#bfe7ff;
}
.tape.yellow{
background:#ffe39d;
}
.tape.purple{
background:#dcc6ff;
}
.gallery-footer{
margin:55px 0 30px;
font-size:17px;
color:#fff;
opacity:.9;
}

/*==================================================
GALERI STICKER
==================================================*/
.sticker,.paperclip,.heart-float{
position:absolute;
z-index:20;
user-select:none;
}
.sticker{
top:12px;
left:12px;
font-size:28px;
animation:stickerFloat 3s ease-in-out infinite;
}
.sticker.star{
right:15px;
left:auto;
}
.sticker.heart{
bottom:18px;
right:18px;
top:auto;
left:auto;
}
.paperclip{
top:-18px;
right:18px;
font-size:38px;
transform:rotate(15deg);
}

.paperclip.blue{
color:#8ED7FF;
right:22px;
}

.paperclip.pink{
color:#FFC5DA;
}
.paperclip.purple{
color:#E3B8FF;
left:18px;
right:auto;
transform:rotate(-18deg);
}

.heart-float{
right:12px;
bottom:15px;
font-size:24px;
animation:heartBeat 2s infinite;
}

@keyframes stickerFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-6px);}
}

@keyframes heartBeat{
0%{transform:scale(1);}
25%{transform:scale(1.2);}
50%{transform:scale(1);}
75%{transform:scale(1.2);}
100%{transform:scale(1);}
}

/*==================================================
KUCING INTERAKTIF
==================================================*/
.cat-area{
position:relative;
width:100%;
height:120px;
margin:30px 0;
overflow:hidden;
}

.cat-character{
position:absolute;
left:-80px;
bottom:10px;
font-size:50px;
cursor:pointer;
animation:catWalk 18s linear infinite;
transition:.3s;
user-select:none;
}

.cat-character:hover{
transform:scale(1.15);
}

.cat-bubble{
position:absolute;
left:50%;
bottom:75px;
transform:translateX(-50%);
background:rgba(255,255,255,.15);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.2);
padding:14px 20px;
border-radius:18px;
color:#fff;
font-size:10px;
line-height:1;
text-align:center;
min-width:250px;
max-width:340px;
white-space:normal;
word-break:break-word;
box-shadow:0 8px 20px rgba(0,0,0,.25);
opacity:0;
transition:.4s;
pointer-events:none;
}

.cat-bubble.show{
opacity:1;
}

@keyframes catWalk{
0%{left:-80px;}
45%{left:45%;}
55%{left:45%;}
100%{left:110%;}
}

/*==================================================
GALLERY MODAL
==================================================*/
.gallery-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.88);
backdrop-filter:blur(12px);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
animation:fadeModal .35s;
}

.gallery-modal.active{
display:flex;
}

.gallery-modal-content{
width:min(92vw,950px);
max-height:88vh;
display:flex;
justify-content:center;
align-items:center;
}

.gallery-modal img,
.gallery-modal video{
max-width:100%;
max-height:88vh;
border-radius:18px;
box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.close-gallery{
position:absolute;
top:25px;
right:35px;
width:55px;
height:55px;
border:none;
border-radius:50%;
background:#ff75b5;
color:#fff;
font-size:28px;
cursor:pointer;
transition:.3s;
}

.close-gallery:hover{
transform:rotate(90deg) scale(1.15);
}

.gallery-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:60px;
height:60px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.18);
color:white;
font-size:34px;
cursor:pointer;
transition:.3s;
backdrop-filter:blur(10px);
}

.gallery-arrow:hover{
background:#ff75b5;
}

.gallery-arrow.left{
left:25px;
}

.gallery-arrow.right{
right:25px;
}

@keyframes fadeModal{
from{
opacity:0;
}
to{
opacity:1;
}
}

.cute-filter{
display:flex;
flex-direction:column;
align-items:center;
cursor:pointer;
transition:.35s;
user-select:none;
}

.cute-filter span{
margin-top:8px;
color:white;
font-size:15px;
}

.cute-icon{
font-size:42px;
animation:floatIcon 2.5s ease-in-out infinite;
}

.cute-filter:hover .cute-icon{
transform:scale(1.25);
}

.cute-filter.active .cute-icon{
transform:scale(1.35);
filter:drop-shadow(0 0 12px #fff);
}

@keyframes floatIcon{
0%,100%{
transform:translateY(0px);
}
50%{
transform:translateY(-10px);
}
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:45px;
transition:.5s;
}

.polaroid{
opacity:1;
transform:scale(1);
transition:all .45s ease;
}

.polaroid.hide{
opacity:0;
transform:scale(.8) rotate(8deg);
pointer-events:none;
}

.polaroid.show{
opacity:1;
transform:scale(1);
}

.polaroid:hover{
transform:translateY(-18px) rotate(0deg) scale(1.08)!important;
box-shadow:0 30px 60px rgba(0,0,0,.4);
z-index:100;
}

.paperclip{
transition:.4s;
}

.polaroid:hover .paperclip{
transform:rotate(20deg) scale(1.15);
}

.cute-filter.clicked .cute-icon{
animation:popFilter .5s;
}

@keyframes popFilter{
0%{transform:scale(1);}
30%{transform:scale(1.45) rotate(-10deg);}
60%{transform:scale(.9);}
100%{transform:scale(1);}
}

@keyframes paperclipSwing{

0%{
transform:rotate(-8deg);
}

25%{
transform:rotate(6deg);
}

50%{
transform:rotate(-4deg);
}

75%{
transform:rotate(5deg);
}

100%{
transform:rotate(-8deg);
}

}

/*==================================================
FLOWER PETALS
==================================================*/

#galleryPetals{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
pointer-events:none;
z-index:2;
}

.gallery-petal{
position:absolute;
top:-100px;
font-size:22px;
opacity:.9;
animation:petalFall linear forwards;
filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));
}

@keyframes petalFall{
0%{
transform:translateY(-80px) translateX(0px) rotate(0deg);
opacity:0;
}
10%{
opacity:1;
}
25%{
transform:translateY(200px) translateX(-15px) rotate(90deg);
}
50%{
transform:translateY(450px) translateX(20px) rotate(180deg);
}
75%{
transform:translateY(700px) translateX(-18px) rotate(270deg);
opacity:.9;
}
100%{
transform:translateY(900px) translateX(15px) rotate(360deg);
opacity:0;
}
}

/*==================================================
GAME CARI HATI
==================================================*/

.game-wrapper{
max-width:1100px;
margin:auto;
padding:50px 30px;
border-radius:35px;
text-align:center;
position:relative;
overflow:hidden;
}
.game-wrapper .btn{
display:block;
margin:35px 0px 0px;
}
.game-title{
font-family:"Great Vibes",cursive;
font-size:40px;
color:#fff;
margin-bottom:10px;
text-shadow:0 0 15px rgba(255,255,255,.6);
}

.game-subtitle{
font-size:10px;
color:#fff;
opacity:.9;
margin-bottom:25px;
}

.game-progress{
display:inline-flex;
align-items:center;
gap:8px;
padding:12px 30px;
border-radius:30px;
background:rgba(255,255,255,.1);
backdrop-filter:blur(12px);
color:#fff;
font-size:15px;
font-weight:600;
margin-bottom:35px;
}

.heart-area{
position:relative;
width:100%;
height:300px;
border-radius:25px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
overflow:hidden;
}

.heart-item{
position:absolute;
width:20px;
height:20px;
display:flex;
justify-content:center;
align-items:center;
font-size:20px;
cursor:pointer;
user-select:none;
transition:left .8s linear,top .8s linear,transform .25s;
animation:heartFloat 3s ease-in-out infinite;
}

.heart-item:hover{
transform:scale(1.35) rotate(12deg);
filter:drop-shadow(0 0 15px #fff);
}

.game-message{
position:absolute;
top:260px;
left:50%;
bottom:25px;
transform:translateX(-50%);
width:90%;
text-align:center;
font-size:14px;
font-weight:700;
color:#FFD7F1;
text-shadow:0 0 12px rgba(255,255,255,.6);
z-index:100;
pointer-events:none;
}


@keyframes heartFloat{
0%{
transform:translateY(0px) scale(1);
}
50%{
transform:translateY(-15px) scale(1.08);
}
100%{
transform:translateY(0px) scale(1);
}
}

.sparkle{
position:absolute;
font-size:22px;
pointer-events:none;
animation:sparkleAnim .8s forwards;
}

@keyframes sparkleAnim{
0%{
opacity:1;
transform:scale(.5);
}
100%{
opacity:0;
transform:translateY(-50px) scale(1.8);
}
}

.shake{
animation:shakeGame .45s;
}

@keyframes shakeGame{

0%{
transform:translateX(-50%);
}

15%{
transform:translateX(calc(-50% - 5px));
}

30%{
transform:translateX(calc(-50% + 5px));
}

45%{
transform:translateX(calc(-50% - 4px));
}

60%{
transform:translateX(calc(-50% + 4px));
}

75%{
transform:translateX(calc(-50% - 2px));
}

100%{
transform:translateX(-50%);
}

}
/*==================================================
GAME TANGKAP MILY
==================================================*/

.cat-game-area{
position:relative;
width:100%;
height:300px;
margin-top:30px;
border-radius:25px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
overflow:hidden;
}

#mily{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) scaleX(1);
font-size:20px;
cursor:pointer;
user-select:none;
transition:left .45s linear,top .45s linear;
z-index:5;
animation:milyRun .45s infinite alternate;
filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

#mily:hover{
transform:translate(-50%,-50%) scale(1.15);
}

@keyframes milyRun{
0%{
margin-top:0;
transform:translate(-50%,-50%) rotate(-5deg);
}
50%{
margin-top:-6px;
transform:translate(-50%,-50%) rotate(4deg);
}
100%{
margin-top:0;
transform:translate(-50%,-50%) rotate(-5deg);
}
}


#milyBubble{
position:absolute;
top:39%;
left:50%;
transform:translateX(-50%);
padding:5px 25px;
background:rgba(255,255,255,.18);
backdrop-filter:blur(15px);
border-radius:25px;
color:#fff;
font-size:10px;
font-weight:600;
text-align:center;
opacity:0;
transition:.4s;
pointer-events:none;
white-space:nowrap;
box-shadow:0 0 25px rgba(255,180,220,.4);
z-index:10;
min-width:170px;
display:flex;
justify-content:center;
align-items:center;
}

#milyBubble.show{
opacity:1;
}

/*==================================================
JEJAK KAKI MILY
==================================================*/

.paw{
position:absolute;
font-size:18px;
pointer-events:none;
opacity:.9;
animation:pawFade 1.8s forwards;
z-index:2;
}

@keyframes pawFade{
0%{
opacity:1;
transform:scale(.6) rotate(0deg);
}
100%{
opacity:0;
transform:scale(1.2) rotate(25deg);
}
}
.dust{
position:absolute;
font-size:18px;
pointer-events:none;
animation:dustAnim .7s forwards;
opacity:.9;
z-index:1;
}

@keyframes dustAnim{
0%{
transform:scale(.5);
opacity:1;
}
100%{
transform:translateY(-15px) scale(1.8);
opacity:0;
}
}

/*==================================================
MILY ENDING
==================================================*/

.show-end{
animation:showEnding 1s forwards;
}

@keyframes showEnding{
0%{
opacity:0;
transform:translate(-50%,-50%) scale(.5);
}
100%{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
}

/*==================================================
GIFT BUTTON
==================================================*/

.gift-button{
position:absolute;
left:50%;
top:48%;
transform:translate(-50%,-50%);
display:none;
justify-content:center;
align-items:center;
cursor:pointer;
z-index:300;
}

.gift-icon{
font-size:40px;
animation:giftBounce 1.8s infinite;
filter:drop-shadow(0 0 20px rgba(255,120,180,.5));
}

.gift-button p{
margin-top:8px;
font-size:10px;
font-weight:800;
color:white;
text-shadow:0 0 15px rgba(255,255,255,.4);
}

.gift-button:hover .gift-icon{
transform:scale(1.15) rotate(-8deg);
}

.gift-button:hover p{
color:#FFD7EA;
}

@keyframes giftBounce{
0%{
transform:translateY(0) rotate(-6deg);
}
25%{
transform:translateY(-10px) rotate(6deg);
}
50%{
transform:translateY(0) rotate(-6deg);
}
75%{
transform:translateY(-6px) rotate(4deg);
}
100%{
transform:translateY(0) rotate(-6deg);
}
}


@keyframes giftFloat{

0%{
translate:0 0;
}

50%{
translate:0 -10px;
}

100%{
translate:0 0;
}

}

@keyframes giftAppear{

0%{
opacity:0;
transform:translateX(-50%) scale(.4);
}

70%{
transform:translateX(-50%) scale(1.12);
}

100%{
opacity:1;
transform:translateX(-50%) scale(1);
}

}

#mily img{
width:95px;
height:auto;
pointer-events:none;
user-select:none;
transition:.35s;
animation:milyHappy 2s ease-in-out infinite;
filter:drop-shadow(0 0 18px rgba(255,180,220,.45));
}

#mily:hover img{
transform:scale(2.12);
}

@keyframes milyHappy{

0%{
transform:translateY(0) rotate(-3deg);
}

25%{
transform:translateY(-6px) rotate(3deg);
}

50%{
transform:translateY(0) rotate(-3deg);
}

75%{
transform:translateY(-6px) rotate(3deg);
}

100%{
transform:translateY(0) rotate(-3deg);
}

}

/*==========================================
GIFT EXPLOSION
==========================================*/


#giftExplosion{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
background:#000;
opacity:0;
visibility:hidden;
overflow:hidden;
z-index:99999;
transition:
opacity .9s ease,
visibility .9s;
pointer-events:none;
}

#giftExplosion.active{
opacity:1;
visibility:visible;
}


.gift-flash{
position:absolute;
left:50%;
top:50%;
width:20px;
height:20px;
border-radius:50%;
transform:translate(-50%,-50%);
background:#fff;
opacity:0;
box-shadow:
0 0 30px #fff,
0 0 80px #ffffff,
0 0 160px #ffd4f2,
0 0 280px #ffd4f2;
}

.gift-flash.boom{
animation:giftFlashBoom .8s ease forwards;
}

@keyframes giftFlashBoom{

0%{
opacity:0;
transform:translate(-50%,-50%) scale(.2);
}

20%{
opacity:1;
}

100%{
opacity:0;
transform:translate(-50%,-50%) scale(45);
}

}

.flower-container{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
}

.gift-image{
width: 200%;
height:200%;
object-fit:contain;
cursor:pointer;
filter:
drop-shadow(0 0 20px rgba(255,170,220,.5))
drop-shadow(0 0 35px rgba(255,180,220,.3));
animation:
giftFloat 2.2s ease-in-out infinite,
giftPulse 2.8s ease-in-out infinite;
transition:.35s;
}

@keyframes giftPulse{

0%{
transform:scale(1.30);
}

50%{
transform:scale(1.70);
}

100%{
transform:scale(1.30);
}

}

.gift-image.opening{

animation:giftOpening .9s ease forwards;

}
@keyframes giftOpening{

0%{
transform:scale(1) rotate(0deg);
}

10%{
transform:scale(1.02) rotate(-5deg);
}

20%{
transform:scale(1.04) rotate(5deg);
}

30%{
transform:scale(1.06) rotate(-6deg);
}

40%{
transform:scale(1.10) rotate(6deg);
}

50%{
transform:scale(1.15) rotate(-7deg);
}

60%{
transform:scale(1.22) rotate(7deg);
}

70%{
transform:scale(1.35) rotate(-8deg);
}

80%{
transform:scale(1.55) rotate(8deg);
}

90%{
transform:scale(1.85) rotate(0deg);
opacity:1;
}

100%{
transform:scale(2.8);
opacity:0;
}

}

/*==========================================
FLOWER CURTAIN
==========================================*/

.flower-curtain{
position:fixed;
top:-30px;
width:280px;
height:110vh;
pointer-events:none;
z-index:10000;
opacity:0;
transition:1.4s ease;
overflow:hidden;
}

/* Layer utama */
.flower-curtain,
.flower-curtain::before,
.flower-curtain::after{

content:"";
position:absolute;
top:0;
bottom:0;

background-repeat:repeat-y;
background-position:top center;

}

/* ===========================
BARIS 1 (BESAR)
=========================== */

.flower-curtain{

background-size:125px;

}

/* ===========================
BARIS 2 (SEDANG)
=========================== */

.flower-curtain::before{

left:70px;
width:100px;

background-size:95px;

}

/* ===========================
BARIS 3 (KECIL)
=========================== */

.flower-curtain::after{

left:135px;
width:85px;

background-size:70px;

}

/* ===========================
KIRI
=========================== */

.flower-curtain.left{

left:-145px;

background-image:url("assets/images/flower_big1.png");

}

.flower-curtain.left::before{

background-image:url("assets/images/flower_big2.png");

}

.flower-curtain.left::after{

background-image:url("assets/images/flower_big3.png");

}

/* ===========================
KANAN
=========================== */

.flower-curtain.right{

right:-145px;

transform:scaleX(-1);

background-image:url("assets/images/flower_big1.png");

}

.flower-curtain.right::before{

background-image:url("assets/images/flower_big2.png");

}

.flower-curtain.right::after{

background-image:url("assets/images/flower_big3.png");

}

/* ===========================
MUNCUL
=========================== */

.flower-curtain.show{
opacity:1;
}

.flower-curtain.left.show{
left:-120px;
}

.flower-curtain.right.show{
right:-120px;
}
/*==========================================
GIFT SECTION
==========================================*/

#gift-section{

position:fixed;

inset:0;

width:100%;

height:100vh;

display:none;

justify-content:center;

align-items:center;

padding:0;

overflow:hidden;

background:#000;

z-index:9000;


}

#gift-section.active{

display:flex;

}
.gift-content{

position:relative;

width:100%;

height:100%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background-image:url("assets/images/gift-bg.png");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

overflow:hidden;

opacity:0;

transition:1.2s;

}

.gift-content.show{
opacity:1;
}
.gift-content>*{

position:relative;

z-index:2;

}
.gift-content::before{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.35);

backdrop-filter:blur(2px);

z-index:1;

}

.gift-photo-wrap{
position:relative;
width:260px;
height:340px;

display:flex;
justify-content:center;
align-items:center;

margin:0 auto;
left:5px;
}

.gift-photo{
width:88%;
height:88%;
object-fit:cover;

border-radius:30px;

border:5px solid rgba(255,255,255,.85);

box-shadow:
0 0 10px #ffffff,
0 0 20px #ff7ad9,
0 0 35px #ff8cf3,
0 0 55px #9d8cff,
0 0 80px #69d6ff;

transform:scale(.2);

opacity:0;

transition:1.4s;

animation:
photoFloat 4s ease-in-out infinite,
photoNeon 5s linear infinite,
photoPulse 3s ease-in-out infinite;
}

.gift-photo.show{
opacity:1;
transform:scale(1);
}
@keyframes photoFloat{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0);
}

}

@keyframes photoPulse{

0%{
filter:brightness(1);
}

50%{
filter:brightness(1.08);
}

100%{
filter:brightness(1);
}

}

@keyframes photoNeon{

0%{

box-shadow:
0 0 10px #ffffff,
0 0 20px #ff5fa2,
0 0 40px #ff5fa2,
0 0 60px #ff5fa2;

}

25%{

box-shadow:
0 0 10px #ffffff,
0 0 20px #ffcc66,
0 0 40px #ffcc66,
0 0 60px #ffcc66;

}

50%{

box-shadow:
0 0 10px #ffffff,
0 0 20px #66ffb3,
0 0 40px #66ffb3,
0 0 60px #66ffb3;

}

75%{

box-shadow:
0 0 10px #ffffff,
0 0 20px #66b7ff,
0 0 40px #66b7ff,
0 0 60px #66b7ff;

}

100%{

box-shadow:
0 0 10px #ffffff,
0 0 20px #ff5fa2,
0 0 40px #ff5fa2,
0 0 60px #ff5fa2;

}
}
.photo-glow{
position:absolute;
inset:-20px;
border-radius:40px;
background:
radial-gradient(circle,
rgba(255,220,250,.55),
transparent 70%);
filter:blur(35px);
z-index:-1;
animation:photoGlow 3s ease infinite;
}

@keyframes photoGlow{

0%{
transform:scale(.9);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(.9);
}

}

/*==========================================
PHOTO FLOWERS
==========================================*/

.photo-flowers{
position:absolute;
inset:-200px;
pointer-events:none;
overflow:visible;
}

.photo-flower{
position:absolute;  
left:50%;
top:50%;

width:28px;
height:28px;

transform-origin:center;

animation:photoFlowerFloat 22s linear infinite;

will-change:transform;
}

.photo-flower img{
width:100%;
height:100%;
object-fit:contain;
filter:
drop-shadow(0 0 8px rgba(255,255,255,.45));
}

@keyframes photoFlowerFloat{

0%{
transform:
rotate(0deg)
translateX(180px)
rotate(0deg);
}

100%{
transform:
rotate(360deg)
translateX(250px)
rotate(-360deg);
}

}

/*==========================================
GIFT MESSAGE
==========================================*/

.gift-message{

position:relative;

z-index:5;

margin-top:45px;

text-align:center;

max-width:760px;

padding:0 25px;

}


#giftTitle{
font-size:15px;
font-weight:1000px;
color:#ffffff;
text-shadow:
0 0 12px rgba(255,170,220,.9),
0 0 35px rgba(255,170,220,.6);
margin-bottom:20px;
min-height:20px;
}

#giftSubtitle{
font-size:10px;
line-height:1.8;
color:#ffffff;
text-shadow:
0 0 10px rgba(255,255,255,.5);

max-width:220px;
margin:0 auto;

text-align:center;

min-height:90px;
}
/*==========================================
CAMERA ZOOM SAAT BOOM
==========================================*/

@keyframes cameraZoom{
0%{transform:scale(1);}
50%{transform:scale(1.08);}
100%{transform:scale(1);}
}

#giftExplosion.zoom{
animation:cameraZoom 1.2s ease-in-out;
}

/*==========================================
SPARKLE LAYAR PENUH (GIFT)
==========================================*/

.gift-sparkle{
position:fixed;
font-size:22px;
pointer-events:none;
z-index:99999;
animation:giftSparkleAnim 1.1s forwards;
}

@keyframes giftSparkleAnim{
0%{
opacity:0;
transform:scale(.3) rotate(0deg);
}
30%{
opacity:1;
}
100%{
opacity:0;
transform:scale(1.6) rotate(45deg) translateY(-40px);
}
}

#cake-section{
position:relative;
width:100%;
height:100vh;
padding:clamp(4px,2vh,10px) 20px;
overflow:hidden;
background-image:url("assets/images/cake-bg.png");
background-size:120% auto;
background-position:center top;
background-repeat:no-repeat;

}

#cake-section::before{
content:"";
position:absolute;
inset:0;
z-index:0;
}

#cake-section > *{
position:relative;
z-index:1;
}

.cake-container{
width:100%;
height:100%;
max-width:900px;
margin:auto;
padding:clamp(6px,2vh,20px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-evenly;
text-align:center;
overflow:hidden;
}

.cake-message{
font-family:"Great Vibes",cursive;
font-size:24px;
font-weight:400;
color:#ffe8f3;
margin:110px 0 40px;
line-height:1.5;
max-width:600px;
text-shadow:
0 0 12px rgba(255,255,255,.7),
0 0 30px rgba(255,170,220,.6);

opacity:0;
transform:translateX(-60px) rotate(-4deg);
animation:cakeMessageFadeIn 1.4s ease forwards;
animation-delay:.3s;
}

@keyframes cakeMessageFadeIn{
0%{
opacity:0;
transform:translateX(-60px) rotate(-4deg);
}
100%{
opacity:1;
transform:translateX(0) rotate(-5deg);
}
}

.cake-stage{
position:relative;
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:clamp(260px,38vh,420px);
margin:clamp(10px,3vh,30px) 0;
}

/* ============ GLOW DI BAWAH KUE ============ */

.cake-glow{
position:absolute;
bottom:100px;
left:50%;
transform:translateX(-50%);
width:300px;
height:90px;
border-radius:50%;
background:radial-gradient(circle,rgba(255,200,150,.4),transparent 70%);
filter:blur(30px);
z-index:1;
animation:cakeGlowPulse 3s ease-in-out infinite;
}

@keyframes cakeGlowPulse{
0%,100%{opacity:.6;transform:translateX(-50%) scale(1);}
50%{opacity:1;transform:translateX(-50%) scale(1.15);}
}

/* ============ KUE (2 BAGIAN) ============ */

.cake-wrapper{
position:relative;
top:50px;
width:200px;
height:250px;
z-index:5;
animation:cakeAppear 1.8s ease;
}

@keyframes cakeAppear{
0%{opacity:0;transform:translateY(40px) scale(.8);}
100%{opacity:1;transform:translateY(0) scale(1);}
}

.cake-half{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
transition:transform 1s ease;
}

.cake-half .cake-image{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:contain;
pointer-events:none;
user-select:none;
}

#cakeLeft{
clip-path:inset(0 50% 0 0);
}

#cakeRight{
clip-path:inset(0 0 0 50%);
}

#cakeLeft.split{
transform:translateX(-55px) rotate(-14deg);
}

#cakeRight.split{
transform:translateX(55px) rotate(14deg);
}

/* getar saat kena potong */

@keyframes cakeHitShake{
0%,100%{transform:translateX(0);}
25%{transform:translateX(-4px);}
50%{transform:translateX(4px);}
75%{transform:translateX(-3px);}
}

.cake-hit{
animation:cakeHitShake .35s;
}

/* garis panduan potong (untuk deteksi tabrakan pisau) */

#cakeCutLine{
position:absolute;
left:8%;
top:50%;
width:84%;
height:2px;
transform:translateY(-50%);
background:repeating-linear-gradient(90deg,rgba(255,255,255,.65) 0 10px,transparent 10px 20px);
z-index:6;
pointer-events:none;
animation:dashPulse 1.4s infinite;
}

@keyframes dashPulse{
0%,100%{opacity:.4;}
50%{opacity:1;}
}

/* ============ API LILIN ============ */

.cake-flames{
position:absolute;
top:-38px;
left:0;
width:100%;
height:40px;
z-index:7;
}

.flame{
position:absolute;
top:0;
width:18px;
height:27px;
background:radial-gradient(circle at 50% 30%,#fff5c2,#ffb347 60%,#ff6b35 100%);
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
box-shadow:0 0 12px #ffb347,0 0 25px rgba(255,140,50,.6);
animation:flameFlicker 1s ease-in-out infinite alternate;
transform-origin:bottom center;
transition:opacity .3s ease,transform .3s ease;
}

/* ATUR POSISI TIAP LILIN DI SINI (left = geser kanan-kiri, top = geser atas-bawah) */
#flame1{ left:62px; top:50px; }
#flame2{ left:90px; top:45px; }
#flame3{ left:120px; top:50px; }

@keyframes flameFlicker{
0%{transform:scale(1) rotate(-2deg);}
50%{transform:scale(1.08) rotate(2deg);}
100%{transform:scale(.96) rotate(-1deg);}
}

.flame.shake{
animation:flameShake .15s infinite;
}

@keyframes flameShake{
0%,100%{transform:translateX(0) rotate(0);}
50%{transform:translateX(3px) rotate(10deg);}
}

.flame.off{
opacity:0;
transform:scale(0);
box-shadow:none;
animation:none;
}

/* ============ ASAP ============ */

.smoke{
position:absolute;
width:10px;
height:10px;
border-radius:50%;
background:rgba(255,255,255,.55);
filter:blur(3px);
pointer-events:none;
animation:smokeRise 1.8s ease-out forwards;
z-index:8;
}

.smoke.big{
width:16px;
height:16px;
animation:smokeRise 3.2s ease-out forwards;
}

@keyframes smokeRise{
0%{transform:translateY(0) scale(1);opacity:.8;}
100%{transform:translateY(-70px) scale(2.2);opacity:0;}
}

/*==================================================
CAKE KNIFE
==================================================*/

.cake-knife{
position:absolute;
width:70px;
right:-160px;
top:20px;
cursor:grab;
z-index:20;
opacity:0;
pointer-events:none;
transform:rotate(18deg);
filter:drop-shadow(0 8px 15px rgba(0,0,0,.4));
transition:right 1s ease,opacity 1s ease;
}

.cake-knife.show{
opacity:1;
right:10px;
pointer-events:auto;
}

.cake-knife.dragging{
cursor:grabbing;
transition:none;
filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));
}

@keyframes knifeAppear{
0%{opacity:0;transform:translateY(-20px) rotate(18deg) scale(.5);}
60%{transform:translateY(6px) rotate(18deg) scale(1.1);}
100%{opacity:1;transform:translateY(0) rotate(18deg) scale(1);}
}

.cake-knife.dragging{
cursor:grabbing;
transition:none;
animation:none;
filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));
}

/* ============ AKSI / TOMBOL ============ */

.cake-action{
margin-top:20px;
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}
@keyframes knifeFloat{

0%{
transform:translateY(0) rotate(-3deg);
}

50%{
transform:translateY(-8px) rotate(3deg);
}

100%{
transform:translateY(0) rotate(-3deg);
}

}

@keyframes knifeGlow{

0%{

filter:
drop-shadow(0 0 8px rgba(255,255,255,.2));

}

50%{

filter:
drop-shadow(0 0 18px rgba(255,255,255,.6));

}

100%{

filter:
drop-shadow(0 0 8px rgba(255,255,255,.2));

}

}

/*==================================================
CAKE CUT LINE
==================================================*/

#cakeCutLine{

position:absolute;

left:50%;

top:40px;

transform:translateX(-50%);

width:8px;

height:150px;

/* sementara dibuat transparan */

background:transparent;

z-index:20;

pointer-events:none;

}

.cake-hit{

animation:cakeShake .45s;

}

@keyframes cakeShake{

0%{
transform:translateX(0);
}

20%{
transform:translateX(-6px);
}

40%{
transform:translateX(6px);
}

60%{
transform:translateX(-5px);
}

80%{
transform:translateX(5px);
}

100%{
transform:translateX(0);
}

}

/*==================================================
CAKE SPLIT
==================================================*/

.cake-half{

position:absolute;

left:0;
top:0;

width:200px;
height:250px;

overflow:hidden;

transition:transform 1.2s cubic-bezier(.18,.85,.2,1);

}

.cake-half img{

position:absolute;

left:0;
top:0;

width:200px;
height:auto;

display:block;

}

/* sisi kiri */

#cakeLeft{

clip-path:polygon(
0 0,
50% 0,
50% 100%,
0 100%
);

}

/* sisi kanan */

#cakeRight{

clip-path:polygon(
50% 0,
100% 0,
100% 100%,
50% 100%
);

}

/*==================================================
CAKE SPLIT ANIMATION
==================================================*/

#cakeLeft.split{

transform:
translateX(-45px)
rotate(-10deg);

}

#cakeRight.split{

transform:
translateX(45px)
rotate(10deg);

}

#cakeLeft,
#cakeRight{

transition:
transform 1.2s cubic-bezier(.18,.85,.2,1);

}

/* ============ EFEK CAHAYA SAAT PISAU KENA GARIS ============ */

.cut-flash{
position:fixed;
width:16px;
height:16px;
border-radius:50%;
background:#fff;
box-shadow:0 0 25px #fff,0 0 60px #ffe6b8,0 0 100px #ffcf8f;
transform:translate(-50%,-50%) scale(.3);
opacity:1;
pointer-events:none;
z-index:9500;
animation:cutFlashAnim .6s ease forwards;
}

@keyframes cutFlashAnim{
0%{transform:translate(-50%,-50%) scale(.3);opacity:1;}
100%{transform:translate(-50%,-50%) scale(6);opacity:0;}
}

/* ============ REMAH KUE ============ */

.crumb{
position:absolute;
width:6px;
height:6px;
border-radius:2px;
background:#c98b4f;
pointer-events:none;
z-index:9;
animation:crumbFall 1.1s ease-in forwards;
}

@keyframes crumbFall{
0%{transform:translateY(0) rotate(0deg);opacity:1;}
100%{transform:translateY(90px) rotate(240deg);opacity:0;}
}

/* ============ CONFETTI BUNGA SAAT KUE TERBELAH ============ */

.cake-confetti-particle{
position:absolute;
left:50%;
top:40%;
pointer-events:none;
z-index:15;
}

.cake-confetti-particle img{
width:100%;
height:100%;
object-fit:contain;
}

/*==================================================
PANAH PENUNJUK POTONG
==================================================*/

.cut-arrow{
position:absolute;
left:50%;
top:20px;
transform:translateX(-50%);
font-size:30px;
z-index:25;
opacity:0;
pointer-events:none;
filter:drop-shadow(0 0 10px rgba(255,255,255,.9)) drop-shadow(0 0 20px rgba(255,180,220,.6));
transition:opacity .5s ease;
}

.cut-arrow.show{
opacity:1;
animation:arrowBounce 1.2s ease-in-out infinite;
}

@keyframes arrowBounce{
0%{ transform:translateX(-50%) translateY(0); opacity:.4; }
50%{ transform:translateX(-50%) translateY(70px); opacity:1; }
100%{ transform:translateX(-50%) translateY(0); opacity:.4; }
}

/*==================================================
CAKE CELEBRATION EXTRA
==================================================*/

.cake-screen-flash{
position:fixed;
inset:0;
background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,180,220,.4) 40%,transparent 70%);
opacity:0;
pointer-events:none;
z-index:9600;
animation:cakeScreenFlash 1s ease forwards;
}

@keyframes cakeScreenFlash{
0%{opacity:0;}
15%{opacity:1;}
100%{opacity:0;}
}

.emoji-confetti{
position:absolute;
left:50%;
top:45%;
pointer-events:none;
z-index:16;
}

.cake-balloon{
position:fixed;
bottom:-60px;
font-size:34px;
pointer-events:none;
z-index:9550;
animation:balloonRise linear forwards;
filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

@keyframes balloonRise{
0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:1; }
100%{ transform:translateY(-110vh) translateX(var(--drift,20px)) rotate(15deg); opacity:0; }
}

.cake-info-pop{
animation:cakeInfoPop .6s ease;
}

@keyframes cakeInfoPop{
0%{ transform:scale(.5); opacity:0; }
60%{ transform:scale(1.25); opacity:1; }
100%{ transform:scale(1); }
}

/*==================================================
TEKS DOA DI ATAS KUE
==================================================*/

.cake-doa{
position:absolute;
top:-38px;
left:50%;
transform:translateX(-50%);
width:78%;
max-width:270px;
text-align:center;
font-size:12px;
font-weight:500;
color:#ffe8f3;
padding:8px 18px;
border-radius:20px;
background:rgba(255,255,255,.1);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 10px 30px rgba(0,0,0,.25);
text-shadow:0 0 10px rgba(255,255,255,.4);
z-index:12;
min-height:16px;
transition:.3s;
}

/*==================================================
TOMBOL TIUP - IKON ANGIN MENGAMBANG (KANAN KUE)
==================================================*/

.blow-btn{
position:absolute;
right:-64px;
top:50%;
width:62px;
height:62px;
border-radius:50%;
border:none;
cursor:pointer;
background:linear-gradient(135deg,#ff8bc5,#8c8cff);
box-shadow:0 0 22px rgba(255,140,200,.55),0 0 40px rgba(120,170,255,.4);
display:flex;
justify-content:center;
align-items:center;
z-index:20;
animation:blowFloat 3s ease-in-out infinite;
transition:transform .3s ease,opacity .3s ease;
}

.blow-btn .blow-icon{
font-size:26px;
filter:drop-shadow(0 0 6px rgba(255,255,255,.6));
}

.blow-btn:hover{
transform:translateY(-50%) scale(1.12);
}

.blow-btn:disabled{
opacity:.45;
cursor:not-allowed;
animation:none;
}

@keyframes blowFloat{
0%,100%{ transform:translateY(-50%) translateX(0) rotate(-6deg); }
50%{ transform:translateY(-58%) translateX(5px) rotate(6deg); }
}

@media(max-width:640px){
.blow-btn{
right:-6px;
width:52px;
height:52px;
}
.blow-btn .blow-icon{
font-size:22px;
}
}

/*==========================================
TEKS "POTONG KUE YU"
==========================================*/

.gift-cut-text{
position:fixed;
left:50%;
bottom:40px;
max-width:200px;
transform:translateX(-50%) translateY(0);
padding:12px 26px;
border-radius:30px;
background:rgba(255,255,255,.12);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.25);
color:#fff;
font-size:10px;
font-weight:600;
text-align:center;
text-shadow:0 0 10px rgba(255,255,255,.5);
box-shadow:0 10px 30px rgba(0,0,0,.3);
opacity:0;
pointer-events:none;
z-index:9700;
transition:opacity .6s ease;
}

.gift-cut-text.show{
opacity:1;
animation:cutTextPulse 1.6s ease-in-out infinite;
}

@keyframes cutTextPulse{
0%,100%{ transform:translateX(-50%) translateY(0) scale(1); }
50%{ transform:translateX(-50%) translateY(-8px) scale(1.05); }
}

/*==========================================
TOMBOL IKON CAKE MELAYANG (MENUJU HALAMAN CAKE)
==========================================*/

.floating-cake-btn{
position:fixed;
width:58px;
height:58px;
border-radius:50%;
display:none;
justify-content:center;
align-items:center;
font-size:28px;
background:linear-gradient(135deg,#ff8bc5,#8c8cff);
box-shadow:0 0 20px rgba(255,140,200,.6),0 0 40px rgba(120,170,255,.45);
cursor:pointer;
z-index:9700;
left:50%;
top:50%;
transition:left .3s linear,top .3s linear;
animation:cakeBtnBob .6s ease-in-out infinite;
}

.floating-cake-btn.show{
display:flex;
}

@keyframes cakeBtnBob{
0%,100%{ transform:translateY(0) rotate(-8deg) scale(1); }
50%{ transform:translateY(-12px) rotate(8deg) scale(1.08); }
}

/*==========================================
TRANSISI GIFT -> CAKE (SMOOTH, TIRAI BUNGA PENUH)
==========================================*/

.cake-transition-overlay{
position:fixed;
inset:0;
z-index:9900;
pointer-events:none;
background:rgba(15,4,10,0);
transition:background 1.4s ease;
}

.cake-transition-overlay.show{
background:rgba(15,4,10,.4);
}

.ct-flower{
position:fixed;
top:0;
left:0;
pointer-events:none;
z-index:9915;
opacity:0;
object-fit:contain;
filter:drop-shadow(0 8px 16px rgba(0,0,0,.32));
transform:translate(-50%,-50%) translateX(var(--start-x,0)) rotate(var(--start-r,0deg)) scale(.35);
transition:transform 2.2s cubic-bezier(.65,0,.35,1),opacity 1.4s ease;
will-change:transform;
}

.ct-flower.show{
opacity:1;
transform:translate(-50%,-50%) translateX(0) rotate(var(--r,0deg)) scale(1);
}

.choco-drip,
.straw-drip{
position:fixed;
top:-100px;
width:30px;
height:52px;
border-radius:50% 50% 50% 50% / 65% 65% 35% 35%;
z-index:9920;
opacity:0;
animation:dripFallSoft ease-in-out forwards;
}

.choco-drip{
background:linear-gradient(180deg,#8a5a3a,#4b2a15);
box-shadow:0 0 14px rgba(80,40,20,.55);
}

.straw-drip{
background:linear-gradient(180deg,#ff85a1,#d81e5b);
box-shadow:0 0 14px rgba(216,30,91,.55);
}

@keyframes dripFallSoft{
0%{
transform:translateY(0) scale(.4) rotate(0deg);
opacity:0;
}
15%{
opacity:.9;
}
100%{
transform:translateY(115vh) scale(1.15) rotate(18deg);
opacity:0;
}
}

.cake-soft-glow{
position:fixed;
inset:0;
background:radial-gradient(circle,rgba(255,235,245,.55),transparent 65%);
opacity:0;
pointer-events:none;
z-index:9905;
animation:cakeSoftGlowPulse 2.4s ease forwards;
}

@keyframes cakeSoftGlowPulse{
0%{opacity:0;}
30%{opacity:1;}
100%{opacity:0;}
}

/*==================================================
ENDING SECTION
==================================================*/

#ending-section{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
background:#000;
padding:0;
}

/* ============ SEMPROTAN BUNGA MEMBESAR ============ */

.ending-flower-burst{
position:fixed;
inset:0;
z-index:9910;
pointer-events:none;
overflow:hidden;
}

.eb-flower{
position:fixed;
top:50%;
left:50%;
width:60px;
pointer-events:none;
opacity:0;
filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));
}

.ending-black{
position:fixed;
inset:0;
background:#000;
opacity:0;
z-index:9920;
pointer-events:none;
transition:opacity 1.8s ease;
}

.ending-black.show{
opacity:1;
}

/* ============ CREDITS SCROLL (GAYA FILM) ============ */

.credits-scroll{
position:fixed;
inset:0;
background:#000;
overflow:hidden;
z-index:9930;
display:none;
}

.credits-scroll.show{
display:block;
}

.credits-track{
position:absolute;
left:0;
width:100%;
top:100vh;
display:flex;
flex-direction:column;
align-items:center;
gap:60px;
padding-bottom:220px;
transform:translateY(0);
}

/* vignette gelap di tepi layar */

.credits-scroll::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.78) 100%);
z-index:5;
pointer-events:none;
}

/* efek grain / kedip film lama */

.credits-scroll::after{
content:"";
position:absolute;
inset:0;
background:repeating-linear-gradient(
0deg,
rgba(255,255,255,.035) 0px,
rgba(255,255,255,.035) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode:overlay;
z-index:6;
pointer-events:none;
animation:filmFlicker .15s steps(2) infinite;
}

@keyframes filmFlicker{
0%{opacity:.55;}
50%{opacity:.85;}
100%{opacity:.6;}
}

/* bingkai foto/video */

.credit-media-frame{
position:relative;
background:#111;
padding:10px;
border-radius:4px;
z-index:4;
opacity:0;
box-shadow:0 15px 40px rgba(0,0,0,.6);
transform:translateY(60px) scale(.92) rotate(var(--tilt,0deg));
transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.22,.9,.3,1),box-shadow .6s ease;
}

.credit-media-frame.in-view{
opacity:1;
transform:translateY(0) scale(1) rotate(var(--tilt,0deg));
animation:creditFloat 5.5s ease-in-out infinite,frameGlow 3s ease-in-out infinite;
animation-delay:.3s,0s;
}

@keyframes creditFloat{
0%{transform:translateY(0) scale(1) rotate(var(--tilt,0deg));}
25%{transform:translateY(-14px) scale(1.015) rotate(calc(var(--tilt,0deg) + 1.5deg));}
50%{transform:translateY(2px) scale(1) rotate(var(--tilt,0deg));}
75%{transform:translateY(-8px) scale(1.01) rotate(calc(var(--tilt,0deg) - 1.5deg));}
100%{transform:translateY(0) scale(1) rotate(var(--tilt,0deg));}
}

@keyframes frameGlow{
0%,100%{box-shadow:0 15px 40px rgba(0,0,0,.6);}
50%{box-shadow:0 15px 55px rgba(255,255,255,.2),0 15px 40px rgba(0,0,0,.6);}
}

@keyframes filmJitter{
0%,100%{transform:translate(0,0) rotate(var(--tilt,0deg));}
20%{transform:translate(1px,-1px) rotate(var(--tilt,0deg));}
40%{transform:translate(-1px,1px) rotate(var(--tilt,0deg));}
60%{transform:translate(1px,1px) rotate(var(--tilt,0deg));}
80%{transform:translate(-1px,-1px) rotate(var(--tilt,0deg));}
}

.credit-media-frame img,
.credit-media-frame video{
display:block;
width:340px;
max-width:80vw;
height:auto;
filter:grayscale(1) contrast(1.15) brightness(.9) sepia(.12);
border-radius:2px;
}

/* sticky note doa */
.credit-note{
background:#fdf3c4;
color:#3a2e12;
font-family:"Great Vibes",cursive;
font-size:22px;
line-height:1.4;
text-align:center;
padding:22px 26px;
width:240px;
box-shadow:0 10px 25px rgba(0,0,0,.5);
position:relative;
z-index:4;
opacity:0;
transform:translateY(60px) scale(.92) rotate(var(--tilt,0deg));
transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.22,.9,.3,1);
}

.credit-note.in-view{
opacity:1;
transform:translateY(0) scale(1) rotate(var(--tilt,0deg));
animation:noteSway 4.5s ease-in-out infinite;
animation-delay:.2s;
}

.credit-note::before{
content:"";
position:absolute;
top:-10px;
left:50%;
transform:translateX(-50%);
width:34px;
height:14px;
background:rgba(255,255,255,.55);
opacity:.8;
}

.credit-note::after{
content:"✨";
position:absolute;
bottom:-16px;
right:8px;
font-size:16px;
opacity:0;
animation:noteSparkle 3s ease-in-out infinite;
}

@keyframes noteSway{
0%{transform:translateY(0) rotate(var(--tilt,0deg));}
30%{transform:translateY(-9px) rotate(calc(var(--tilt,0deg) + 3deg));}
60%{transform:translateY(5px) rotate(calc(var(--tilt,0deg) - 3deg));}
100%{transform:translateY(0) rotate(var(--tilt,0deg));}
}

@keyframes noteSparkle{
0%{opacity:0;transform:translateY(0) scale(.6);}
30%{opacity:1;}
100%{opacity:0;transform:translateY(-26px) scale(1.2);}
}

/* surat penutup */

.credit-letter{
background:#fffdf6;
color:#2c2418;
font-family:"Great Vibes",cursive;
font-size:40px;
text-align:center;
padding:70px 50px;
width:420px;
max-width:85vw;
box-shadow:0 20px 60px rgba(0,0,0,.7);
border:1px solid rgba(0,0,0,.08);
margin-top:80px;
margin-bottom:220px;
opacity:0;
transform:translateY(60px) scale(.9);
transition:opacity 1.4s ease,transform 1.4s cubic-bezier(.22,.9,.3,1);
}

.credit-letter.in-view{
opacity:1;
transform:translateY(0) scale(1);
animation:letterGlow 3.5s ease-in-out infinite;
}

@keyframes letterGlow{
0%,100%{box-shadow:0 20px 60px rgba(0,0,0,.7);}
50%{box-shadow:0 20px 85px rgba(255,220,240,.45),0 20px 60px rgba(0,0,0,.7);}
}

.credit-letter small{
display:block;
margin-top:25px;
font-size:20px;
opacity:.8;
}