*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:'Fredoka',sans-serif;

    background:linear-gradient(
        180deg,
        #ffe4ef,
        #fff8f3
    );

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}

#welcome-screen h1{

    font-size:60px;

    color:#6D4C41;

}

#welcome-screen p{

    margin-top:20px;

    font-size:24px;

    color:#555;

}

#startBtn{

    margin-top:40px;

    padding:18px 45px;

    border:none;

    border-radius:50px;

    font-size:22px;

    cursor:pointer;

    background:#ff8db6;

    color:white;

    transition:.3s;

    box-shadow:var(--shadow);

}

#startBtn:hover{

    transform:scale(1.08);

}

/* =======================================
   LOADING SCREEN
======================================= */

#loading-screen{

    position:fixed;

    inset:0;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999;

}

.loading-bg{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

}

.moon{

    position:absolute;

    top:45px;

    right:60px;

    width:90px;

    opacity:.9;

}

.cloud{

    position:absolute;

    bottom:160px;

    width:320px;

}

.bear{

    position:absolute;

    bottom:175px;

    width:230px;

    z-index:2;

}

.loading-panel{

    position:absolute;

    bottom:60px;

    width:400px;

    text-align:center;

}

.loading-panel h2{

    color:white;

    margin-bottom:20px;

    text-shadow:0 2px 8px rgba(0,0,0,.4);

}

.loading-bar{

    width:100%;

    height:20px;

    background:white;

    border-radius:30px;

    overflow:hidden;

}

#loading-fill{

    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        #ffb3d9,
        #ffe47a
    );

    border-radius:30px;

}

#loading-text{

    color:white;

    margin-top:15px;

}

/* =======================================
   SCENE 1 v1.2
======================================= */

.loading-bg{

    animation:bgZoom 8s ease-in-out infinite alternate;

}

@keyframes bgZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.05);

    }

}


.cloud{

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

}

@keyframes cloudFloat{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(20px);

    }

    100%{

        transform:translateX(0);

    }

}


.bear{

    animation:bearSleep 3s ease-in-out infinite;

}

@keyframes bearSleep{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* =======================================
   SCENE 1 VERSION 1.3
======================================= */

#panda{

    position:absolute;

    bottom:175px;

    right:-250px;

    width:180px;

    z-index:3;

    transition:all 2s ease;

}

#speechBubble{

    position:absolute;

    top:120px;

    left:50%;

    transform:translateX(-50%);

    background:white;

    border-radius:25px;

    padding:18px 28px;

    min-width:260px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.2);

    opacity:0;

    transition:.6s;

    z-index:20;

}

#speechBubble::after{

    content:"";

    position:absolute;

    bottom:-12px;

    left:50%;

    transform:translateX(-50%);

    border-left:12px solid transparent;

    border-right:12px solid transparent;

    border-top:12px solid white;

}

#speechText{

    font-size:22px;

    color:#6D4C41;

}

/* =======================================
   SCENE 2 : WELCOME
======================================= */

#welcome-screen{

    position:fixed;

    top:0;

    left:0;

    width:100vw;

    height:100vh;

    display:none;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    z-index:900;

}

.welcome-bg{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

}

.balloon{

    position:absolute;

    top:70px;

    left:12%;

    width:120px;

}

.butterfly{

    position:absolute;

    top:180px;

    right:20%;

    width:70px;

}

.welcome-bear{

    position:absolute;

    bottom:110px;

    left:14%;

    width:240px;

}

.welcome-panda{

    position:absolute;

    bottom:110px;

    right:14%;

    width:240px;

}

.welcome-ui{

    position:relative;

    z-index:10;

    text-align:center;

}

#welcomeTitle{

    font-size:72px;

    color:#6D4C41;

    text-shadow:0 5px 15px rgba(255,255,255,.6);

}

#welcomeSubtitle{

    margin-top:18px;

    font-size:28px;

    color:#6D4C41;

}

#adventureBtn{

    margin-top:45px;

    padding:20px 55px;

    border:none;

    border-radius:60px;

    font-size:24px;

    cursor:pointer;

    color:white;

    background:#ff8db6;

    box-shadow:0 12px 25px rgba(0,0,0,.18);

    transition:.3s;

}

#adventureBtn:hover{

    transform:scale(1.08);

}

#adventureBtn:active{

    transform:scale(.95);

}

/* ==================================================
   SCENE 2 — COMPANION BUBBLE
   PREMIUM POLISH
================================================== */

#scene2-companion-bubble{

    position:absolute;

    left:50%;

    top:55px;

    transform:
        translateX(-50%)
        translateY(18px)
        scale(.96);

    width:min(500px, 65vw);

    padding:
        16px 26px 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(255,245,250,.96)
        );

    border:
        2px solid
        rgba(255,190,215,.65);

    border-radius:26px;

    text-align:center;

    box-shadow:

        0 14px 35px
        rgba(70,40,70,.14),

        0 0 22px
        rgba(255,205,225,.28),

        inset 0 1px 0
        rgba(255,255,255,.95);

    backdrop-filter:
        blur(10px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:

        opacity .45s ease,

        transform .45s
        cubic-bezier(.22,.8,.3,1);

    z-index:3000;

}


/* ==================================================
   BUBBLE VISIBLE
================================================== */

#scene2-companion-bubble.show{

    opacity:1;

    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);

}


/* ==================================================
   COMPANION NAME
================================================== */

.scene2-companion-name{

    position:relative;

    display:inline-block;

    margin-bottom:7px;

    padding:
        4px 12px;

    border-radius:999px;

    background:
        rgba(255,220,235,.65);

    color:#c96f94;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

}


/* ==================================================
   COMPANION TEXT
================================================== */

#scene2-companion-text{

    margin:0;

    color:#624c52;

    font-size:21px;

    line-height:1.45;

    font-weight:500;

    letter-spacing:.1px;

}


/* ==================================================
   SMALL DECORATIVE SPARKLE
================================================== */

#scene2-companion-bubble::before{

    content:"✦";

    position:absolute;

    top:8px;

    left:15px;

    font-size:13px;

    color:rgba(226,145,180,.75);

    animation:
        companionSparkle 2.4s
        ease-in-out infinite;

}


#scene2-companion-bubble::after{

    content:"✦";

    position:absolute;

    right:16px;

    bottom:9px;

    font-size:11px;

    color:rgba(226,145,180,.55);

    animation:
        companionSparkle 2.8s
        ease-in-out infinite
        reverse;

}


/* ==================================================
   SPARKLE ANIMATION
================================================== */

@keyframes companionSparkle{

    0%,
    100%{

        opacity:.35;

        transform:
            scale(.8)
            rotate(0deg);

    }

    50%{

        opacity:1;

        transform:
            scale(1.15)
            rotate(15deg);

    }

}

/* ==================================================
   SCENE 2 — COMPANION CHARACTERS
   DESKTOP
================================================== */

#welcome-screen .welcome-panda,
#welcome-screen .welcome-bear{

    z-index:3001;

    position:absolute;

    top:165px;

    transform:
        translateX(0)
        scale(1.15);

}


/* =======================================
   SCENE 2 VERSION 1.1
======================================= */

#welcomeTitle{

    animation:titlePop 1s ease;

}

@keyframes titlePop{

    0%{

        transform:scale(.5);

        opacity:0;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

#welcomeSubtitle{

    animation:subtitleFade 2s ease;

}

@keyframes subtitleFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

#adventureBtn{

    animation:buttonPulse 2s infinite;

}

@keyframes buttonPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

.butterfly{

    animation:butterflyFly 5s ease-in-out infinite alternate;

}

@keyframes butterflyFly{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(-80px,-40px);

    }

}

.balloon{

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

}

@keyframes balloonFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-25px);

    }

    100%{

        transform:translateY(0);

    }

}

.welcome-bear,
.welcome-panda{

    animation:characterIdle 3s ease-in-out infinite;

}

@keyframes characterIdle{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* =======================================
   SCENE 2 VERSION 1.2
======================================= */

.fade-out{

    animation:fadeOutScene .8s forwards;

}

@keyframes fadeOutScene{

    from{

        opacity:1;
        transform:scale(1);

    }

    to{

        opacity:0;
        transform:scale(1.05);

    }

}

.button-click{

    transform:scale(.92)!important;

    transition:.2s;

}

/* =======================================
   SCENE 3 VERSION 1.0
======================================= */

#game-screen{

    position:fixed;

    inset:0;

    display:none;

    overflow:hidden;

}

.game-bg{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

}

.game-top{

    position:absolute;

    top:25px;

    left:50%;

    transform:translateX(-50%);

    width:90%;

    display:flex;

    justify-content:space-between;

    z-index:20;

}

#scoreBox,
#timerBox{

    background:white;

    padding:15px 30px;

    border-radius:40px;

    font-size:26px;

    color:#6D4C41;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.game-message{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    background:white;

    padding:18px 35px;

    border-radius:40px;

    font-size:24px;

    color:#6D4C41;

    z-index:20;

}

.game-bear{

    position:absolute;

    left:60px;

    bottom:60px;

    width:220px;

}

.game-panda{

    position:absolute;

    right:60px;

    bottom:60px;

    width:220px;

}

#game-area{

    position:absolute;

    inset:0;

}

/* ==================================================
   SCENE 3 : MINI GAME
================================================== */

#game-screen{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    display:none;

    overflow:hidden;

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

    z-index:950;

}

/* ==========================
   Background
========================== */

.game-bg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

}

/* ==========================
   HUD
========================== */

.game-hud{

    position:absolute;

    top:25px;

    left:50%;

    transform:translateX(-50%);

    width:92%;

    display:flex;

    justify-content:space-between;

    z-index:20;

}

.hud-card{

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

    padding:16px 28px;

    border-radius:50px;

    font-size:24px;

    font-weight:bold;

    color:#6D4C41;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    min-width:180px;

    text-align:center;

}

.hud-card span{

    display:block;

    margin-top:6px;

    font-size:34px;

}

/* ==========================
   Characters
========================== */

.game-bear{

    position:absolute;

    left:50px;

    bottom:40px;

    width:230px;

    z-index:10;

    animation:gameIdle 3s ease-in-out infinite;

}

.game-panda{

    position:absolute;

    right:50px;

    bottom:40px;

    width:230px;

    z-index:10;

    animation:gameIdle 3s ease-in-out infinite;

}

/* ==================================================
   SCENE 3 — COMPANION SYSTEM
   #14A
================================================== */

.game-bear,
.game-panda{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .45s ease,
        transform .45s ease;

}


/* ==========================================
   COMPANION BUBBLE
========================================== */

#scene3-companion-bubble{

    position:absolute;

    top:105px;

    left:50%;

    transform:
        translateX(-50%)
        translateY(18px)
        scale(.96);

    width:min(520px,70vw);

    padding:
        15px 25px 17px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(255,245,250,.97)
        );

    border:
        2px solid
        rgba(255,190,215,.65);

    border-radius:26px;

    text-align:center;

    box-shadow:

        0 14px 35px
        rgba(70,40,70,.14),

        0 0 22px
        rgba(255,205,225,.28);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .45s ease,
        transform .45s
        cubic-bezier(.22,.8,.3,1);

    z-index:40;

}


/* ==========================================
   BUBBLE ACTIVE
========================================== */

#scene3-companion-bubble.show{

    opacity:1;

    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);

}


/* ==========================================
   COMPANION NAME
========================================== */

#scene3-companion-name{

    display:inline-block;

    margin-bottom:6px;

    padding:4px 12px;

    border-radius:999px;

    background:
        rgba(255,220,235,.65);

    color:#c96f94;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

}


/* ==========================================
   COMPANION TEXT
========================================== */

#scene3-companion-text{

    margin:0;

    color:#624c52;

    font-size:21px;

    line-height:1.45;

    font-weight:500;

}


/* ==========================================
   ACTIVE CHARACTER
========================================== */

.game-bear.companion-visible,
.game-panda.companion-visible{

    opacity:1;

    visibility:visible;

}


/* ==========================================
   SCENE 3 COMPANION POSITION
========================================== */

.game-bear.companion-visible{

    left:50%;

    bottom:auto;

    top:205px;

    transform:
        translateX(-50%)
        scale(1.05);

    z-index:39;

}


.game-panda.companion-visible{

    right:auto;

    left:50%;

    bottom:auto;

    top:205px;

    transform:
        translateX(-50%)
        scale(1.05);

    z-index:39;

}

@keyframes gameIdle{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================
   Game Area
========================== */

#game-area{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:15;

}

/* ==========================
   Message
========================== */

#game-message{

    position:absolute;

    left:50%;

    bottom:25px;

    transform:translateX(-50%);

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

    padding:18px 36px;

    border-radius:50px;

    color:#6D4C41;

    font-size:24px;

    font-weight:bold;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    z-index:20;

}

/* ==========================
   Birthday Cake
========================== */

.cake{

    position:absolute;

    width:100px;

    cursor:pointer;

    user-select:none;

    transition:transform .2s;

}

.cake:hover{

    transform:scale(1.08);

}

/* ==========================
   Fade In
========================== */

#game-screen.fade-in{

    animation:sceneFadeIn .8s ease;

}

@keyframes sceneFadeIn{

    from{

        opacity:0;

        transform:scale(1.03);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================================
   MODULE 3
========================================== */

.cake-pop{

    animation:cakePop .25s forwards;

}

@keyframes cakePop{

    0%{

        transform:scale(1);

        opacity:1;

    }

    100%{

        transform:scale(1.4);

        opacity:0;

    }

}

.score-popup{

    position:absolute;

    color:#FFD700;

    font-size:34px;

    font-weight:bold;

    text-shadow:2px 2px 6px rgba(0,0,0,.3);

    pointer-events:none;

    animation:scoreFly .8s forwards;

    z-index:999;

}

@keyframes scoreFly{

    from{

        transform:translateY(0);

        opacity:1;

    }

    to{

        transform:translateY(-60px);

        opacity:0;

    }

}

/* =====================================
RESULT OVERLAY
===================================== */

#result-overlay{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    z-index:9999;

}

.result-card{

    width:500px;

    max-width:90%;

    background:white;

    border-radius:30px;

    padding:45px;

    text-align:center;

    box-shadow:0 30px 80px rgba(0,0,0,.25);

}

.result-card h1{

    font-size:50px;

    color:#ff5fa2;

}

.result-card p{

    margin:30px 0;

    font-size:28px;

}

#resultButton{

    padding:18px 50px;

    border:none;

    border-radius:100px;

    background:#ff69b4;

    color:white;

    font-size:24px;

    cursor:pointer;

}

/* =====================================
SCENE 4 : MEMORY GALLERY
===================================== */

#gallery-screen{

    display:none;

    position:fixed;

    inset:0;

    overflow:hidden;

    justify-content:center;

    align-items:center;

}

.gallery-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.gallery-content{

    position:relative;

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.gallery-title{

    color:white;

    font-size:56px;

    font-weight:600;

    margin-bottom:-0.20px;

    text-shadow:0 5px 18px rgba(0,0,0,.35);

}

.photo-wrapper{

    position:relative;

    width:760px;

}

.photo-frame{

    width:100%;

    display:block;

    position:relative;

    z-index:5;

    pointer-events:none;

}

.photo-mask{

    position:absolute;

    top:16%;

    left:14%;

    right:14%;

    bottom:16%;

    overflow:hidden;

    border-radius:28px;

    z-index:1;

}

.memory-photo,
#gallery-video{

    width:100%;

    height:100%;

    object-fit:cover;

}

#gallery-caption{

    margin-top:-35px;

    width:760px;

    max-width:90%;

    text-align:center;

    color:white;

    font-size:25px;

    line-height:1.6;

    padding:18px 30px;

    border-radius:18px;

    background:rgba(90,60,30,.28);

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

    backdrop-filter:blur(10px);

}

/* ==================================================
   SCENE 4 : MEMORY GALLERY NAVIGATION
   NEXT + BACK BUTTON
================================================== */

.gallery-navigation{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin-top:10px;

}


.gallery-navigation button{

    box-sizing:border-box;

    width:250px;

    padding:18px 30px;

    border:none;

    border-radius:999px;

    background:#f2609a;

    color:white;

    font-size:24px;

    font-weight:600;

    line-height:1.2;

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

    box-shadow:
        0 10px 30px rgba(255,92,168,.35);

}


.gallery-navigation button:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 45px rgba(255,92,168,.50);

}


.gallery-navigation button:active{

    transform:translateY(-1px);

    box-shadow:
        0 8px 20px rgba(255,92,168,.30);

}

/* ==================================================
   SCENE 4 : MEMORY GALLERY COMPANION
   #15A
================================================== */

#scene4-companion{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:50;

}


/* ==================================================
   PANDA
================================================== */

#scene4-companion-panda{

    position:absolute;

    right:6%;
    bottom:35px;

    width:190px;

    height:auto;

    z-index:51;

    opacity:0;

    transform:
        translateY(25px)
        scale(.96);

    transition:

        opacity .5s ease,

        transform .5s
        cubic-bezier(.22,.8,.3,1);

}


/* ==================================================
   PANDA VISIBLE
================================================== */

#scene4-companion.show
#scene4-companion-panda{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}


/* ==================================================
   SCENE 4 : COMPANION BUBBLE
   DESKTOP FINAL POSITION
================================================== */

#scene4-companion-bubble{

    position:absolute;

    /*
       Panda:
       right:6%;
       bottom:35px;
       width:190px;

       Bubble diletakkan terus
       di atas kepala Panda.
    */

    right:5.5%;

    top:auto;

    bottom:225px;

    left:auto;

    width:330px;
    max-width:330px;

    padding:
        15px 22px 16px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(255,245,250,.96)
        );

    border:
        2px solid
        rgba(255,190,215,.65);

    border-radius:24px;

    text-align:center;

    box-shadow:

        0 14px 35px
        rgba(70,40,70,.14),

        0 0 22px
        rgba(255,205,225,.28);

    backdrop-filter:blur(10px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(15px)
        scale(.96);

    transition:
        opacity .5s ease,
        transform .5s
        cubic-bezier(.22,.8,.3,1);

    z-index:60;

}

/* ==================================================
   SCENE 4 : BUBBLE TAIL
================================================== */

#scene4-companion-bubble::after{

    content:"";

    position:absolute;

    right:-8px;

    bottom:24px;

    width:16px;

    height:16px;

    background:
        rgba(255,250,252,.98);

    border-top:
        2px solid
        rgba(255,190,215,.65);

    border-right:
        2px solid
        rgba(255,190,215,.65);

    transform:
        rotate(45deg);

}


/* ==================================================
   BUBBLE VISIBLE
================================================== */

#scene4-companion.show #scene4-companion-bubble{

    opacity:1;

    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);

}


/* ==================================================
   COMPANION NAME
================================================== */

#scene4-companion-name{

    display:inline-block;

    margin-bottom:7px;

    padding:4px 12px;

    border-radius:999px;

    background:
        rgba(255,220,235,.65);

    color:#c96f94;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

}


/* ==================================================
   COMPANION TEXT
================================================== */

#scene4-companion-text{

    margin:0;

    color:#624c52;

    font-size:21px;

    line-height:1.45;

    font-weight:500;

    letter-spacing:.1px;

}


/* ==================================================
   DECORATIVE SPARKLE
================================================== */

#scene4-companion-bubble::before{

    content:"✦";

    position:absolute;

    top:8px;
    left:15px;

    font-size:13px;

    color:
        rgba(226,145,180,.75);

    animation:
        scene4CompanionSparkle
        2.4s
        ease-in-out
        infinite;

}


/* ==================================================
   SPARKLE ANIMATION
================================================== */

@keyframes scene4CompanionSparkle{

    0%,
    100%{

        opacity:.35;

        transform:
            scale(.8)
            rotate(0deg);

    }

    50%{

        opacity:1;

        transform:
            scale(1.15)
            rotate(15deg);

    }

}

/* ==================================================
   SCENE 5 : BIRTHDAY LETTER COMPANION
================================================== */

#scene5-companion{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:50;

}


/* ==================================================
   PANDA
   SAME POSITION AS SCENE 4
================================================== */

#scene5-companion-panda{

    position:absolute;

    right:6%;

    bottom:35px;

    width:190px;

    height:auto;

    z-index:51;

    opacity:0;

    transform:
        translateY(25px)
        scale(.96);

    transition:

        opacity .5s ease,

        transform .5s
        cubic-bezier(.22,.8,.3,1);

}


/* ==================================================
   PANDA VISIBLE
================================================== */

#scene5-companion.show
#scene5-companion-panda{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}


/* ==================================================
   SCENE 5 : DIALOGUE BUBBLE
   SAME POSITION STYLE AS SCENE 4
================================================== */

#scene5-companion-bubble{

    position:absolute;

    right:6%;

    top:auto;

    bottom:205px;

    left:auto;

    width:330px;

    max-width:330px;

    padding:
        15px 22px 16px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(255,245,250,.96)
        );

    border:
        2px solid
        rgba(255,190,215,.65);

    border-radius:24px;

    text-align:center;

    box-shadow:

        0 14px 35px
        rgba(70,40,70,.14),

        0 0 22px
        rgba(255,205,225,.28);

    backdrop-filter:blur(10px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(15px)
        scale(.96);

    transition:

        opacity .5s ease,

        transform .5s
        cubic-bezier(.22,.8,.3,1);

    z-index:60;

}


/* ==================================================
   BUBBLE TAIL
================================================== */

#scene5-companion-bubble::after{

    content:"";

    position:absolute;

    right:-8px;

    bottom:24px;

    width:16px;

    height:16px;

    background:
        rgba(255,250,252,.98);

    border-top:
        2px solid
        rgba(255,190,215,.65);

    border-right:
        2px solid
        rgba(255,190,215,.65);

    transform:
        rotate(45deg);

}


/* ==================================================
   BUBBLE VISIBLE
================================================== */

#scene5-companion.show
#scene5-companion-bubble{

    opacity:1;

    visibility:visible;

    transform:
        translateY(0)
        scale(1);

}


/* ==================================================
   COMPANION NAME
================================================== */

#scene5-companion-name{

    display:inline-block;

    margin-bottom:7px;

    padding:4px 12px;

    border-radius:999px;

    background:
        rgba(255,220,235,.65);

    color:#c96f94;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

}


/* ==================================================
   COMPANION TEXT
================================================== */

#scene5-companion-text{

    margin:0;

    color:#624c52;

    font-size:21px;

    line-height:1.45;

    font-weight:500;

    letter-spacing:.1px;

}


/* ==================================================
   DECORATIVE SPARKLE
================================================== */

#scene5-companion-bubble::before{

    content:"✦";

    position:absolute;

    top:8px;

    left:15px;

    font-size:13px;

    color:
        rgba(226,145,180,.75);

    animation:
        scene5CompanionSparkle
        2.4s
        ease-in-out
        infinite;

}


/* ==================================================
   SPARKLE ANIMATION
================================================== */

@keyframes scene5CompanionSparkle{

    0%,
    100%{

        opacity:.35;

        transform:
            scale(.8)
            rotate(0deg);

    }

    50%{

        opacity:1;

        transform:
            scale(1.15)
            rotate(15deg);

    }

}

/* =====================================
   SCENE 5 : BIRTHDAY LETTER
===================================== */

#letter-screen{

    display:none;

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    overflow:hidden;

}

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

.letter-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:01;

}

/* =====================================
   CONTENT
===================================== */

.letter-content{

    position:relative;

    z-index:2;

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:30px 20px;

    box-sizing:border-box;

}

/* =====================================
   TITLE
===================================== */

.letter-title{

    margin:0 0 22px 0;

    color:white;

    font-size:50px;

    font-weight:700;

    text-align:center;

    text-shadow:0 5px 20px rgba(0,0,0,.4);

}

/* =====================================
   LETTER PAPER
===================================== */

.letter-paper{

    width:720px;

    max-width:88%;

    height:430px;

    padding:40px 55px;

    box-sizing:border-box;

    overflow-y:auto;

    background:rgba(255,250,240,.94);

    border-radius:28px;

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

    box-shadow:
        0 25px 70px rgba(0,0,0,.25),
        0 0 35px rgba(255,255,255,.18);

}

/* =====================================
   LETTER TEXT
===================================== */

#letterText{

    margin:0;

    color:#5a4050;

    font-size:21px;

    line-height:1.8;

    text-align:left;

    white-space:pre-line;

}

/* =====================================
   CONTINUE BUTTON
===================================== */

#letterNextBtn{

    margin-top:30px;

    padding:17px 60px;

    border:none;

    border-radius:999px;

    background:#ff5fa8;

    color:white;

    font-size:23px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    box-shadow:
        0 12px 30px rgba(255,95,168,.35);

}

#letterNextBtn:hover{

    transform:translateY(-4px);

    box-shadow:
        0 20px 40px rgba(255,95,168,.48);

}

/* ==========================================
   SCENE 6 : BIRTHDAY FINALE
========================================== */

#final-screen{

    display:none;

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    overflow:hidden;

}


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

.final-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:0;

}


/* ==========================================
   CONTENT
========================================== */

.final-content{

    position:relative;

    z-index:2;

    width:100%;

    height:100%;

    box-sizing:border-box;

    padding:40px 20px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}


/* ==========================================
   TITLE
========================================== */

.final-title{

    margin:0 0 30px 0;

    color:white;

    font-size:64px;

    font-weight:700;

    text-shadow:
        0 6px 25px rgba(0,0,0,.4);

}


/* ==========================================
   MAIN MESSAGE
========================================== */

.final-message{

    width:720px;

    max-width:88%;

    margin:0;

    padding:30px 45px;

    box-sizing:border-box;

    color:#5a4050;

    background:rgba(255,250,240,.94);

    border-radius:28px;

    font-size:25px;

    line-height:1.8;

    box-shadow:
        0 20px 60px rgba(0,0,0,.25);

}


/* ==========================================
   SUB MESSAGE
========================================== */

.final-submessage{

    margin:25px 0 0 0;

    color:white;

    font-size:22px;

    line-height:1.6;

    text-shadow:
        0 3px 12px rgba(0,0,0,.4);

}


/* ==========================================
   REPLAY BUTTON
========================================== */

#replayBtn{

    margin-top:30px;

    padding:17px 55px;

    border:none;

    border-radius:999px;

    background:#ff5fa8;

    color:white;

    font-size:22px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    box-shadow:
        0 15px 35px rgba(255,95,168,.35);

}


#replayBtn:hover{

    transform:translateY(-4px) scale(1.03);

    box-shadow:
        0 22px 45px rgba(255,95,168,.45);

}

/* ==========================================
   AUDIO CONTROL
========================================== */

#musicToggle{

    position:fixed;

    top:25px;

    right:25px;

    z-index:9999;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

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

    color:#713d58;

    font-size:24px;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

    backdrop-filter:blur(6px);

}


/* ==========================================
   HOVER
========================================== */

#musicToggle:hover{

    transform:
        scale(1.08);

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

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.25);

}


/* ==========================================
   CLICK
========================================== */

#musicToggle:active{

    transform:
        scale(.94);

}


/* ==========================================
   FOCUS
========================================== */

#musicToggle:focus-visible{

    outline:
        3px solid
        rgba(255,180,210,.8);

    outline-offset:3px;

}

/* ==========================================
   GLOBAL SCENE TRANSITION
========================================== */

#scene-transition{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    background:#fff;

    opacity:0;

    pointer-events:none;

    z-index:10000;

    transition:opacity .45s ease;

}

#scene-transition.active{

    opacity:1;

}

/* ==================================================
   SCENE 6 : PANDA COMPANION
================================================== */

#scene6-companion{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:50;

}


/* ==================================================
   PANDA
================================================== */

#scene6-companion-panda{

    position:absolute;

    right:6%;
    bottom:35px;

    width:190px;
    height:auto;

    z-index:51;

    opacity:0;

    transform:
        translateY(25px)
        scale(.96);

    transition:
        opacity .5s ease,
        transform .5s
        cubic-bezier(.22,.8,.3,1);

}


/* ==================================================
   PANDA VISIBLE
================================================== */

#scene6-companion.show
#scene6-companion-panda{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}


/* ==================================================
   DIALOGUE BUBBLE
================================================== */

#scene6-companion-bubble{

    position:absolute;

    right:6%;
    bottom:175px;

    width:330px;
    max-width:330px;

    padding:
        15px 22px 16px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(255,245,250,.96)
        );

    border:
        2px solid
        rgba(255,190,215,.65);

    border-radius:24px;

    text-align:center;

    box-shadow:
        0 14px 35px
        rgba(70,40,70,.14),

        0 0 22px
        rgba(255,205,225,.28);

    backdrop-filter:blur(10px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(15px)
        scale(.96);

    transition:
        opacity .5s ease,
        transform .5s
        cubic-bezier(.22,.8,.3,1);

    z-index:60;

}


/* ==================================================
   BUBBLE VISIBLE
================================================== */

#scene6-companion.show
#scene6-companion-bubble{

    opacity:1;

    visibility:visible;

    transform:
        translateY(0)
        scale(1);

}


/* ==================================================
   BUBBLE TAIL
================================================== */

#scene6-companion-bubble::after{

    content:"";

    position:absolute;

    right:-8px;
    bottom:24px;

    width:16px;
    height:16px;

    background:
        rgba(255,250,252,.98);

    border-top:
        2px solid
        rgba(255,190,215,.65);

    border-right:
        2px solid
        rgba(255,190,215,.65);

    transform:
        rotate(45deg);

}


/* ==================================================
   COMPANION NAME
================================================== */

#scene6-companion-name{

    display:inline-block;

    margin-bottom:7px;

    padding:
        4px 12px;

    border-radius:999px;

    background:
        rgba(255,220,235,.65);

    color:#c96f94;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

}


/* ==================================================
   COMPANION TEXT
================================================== */

#scene6-companion-text{

    margin:0;

    color:#624c52;

    font-size:21px;

    line-height:1.45;

    font-weight:500;

    letter-spacing:.1px;

}


/* ==================================================
   DECORATIVE SPARKLE
================================================== */

#scene6-companion-bubble::before{

    content:"✦";

    position:absolute;

    top:8px;
    left:15px;

    font-size:13px;

    color:
        rgba(226,145,180,.75);

}

/* ==========================================
   SCENE 6 : GIFT SELECTION
========================================== */

#gift-screen{

    display:none;

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    overflow:hidden;

}


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

.gift-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:0;

}


/* ==========================================
   CONTENT
========================================== */

.gift-content{

    position:relative;

    z-index:2;

    width:100%;

    height:100%;

    box-sizing:border-box;

    padding:35px 30px 45px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}


/* ==========================================
   TITLE
========================================== */

.gift-title{

    margin:0 0 12px;

    color:#ffffff;

    font-size:56px;

    font-weight:800;

    letter-spacing:.5px;

    text-shadow:
        0 3px 0 rgba(150,70,100,.35),
        0 6px 18px rgba(80,40,60,.45);

}


/* ==========================================
   INSTRUCTION
========================================== */

.gift-instruction{

    margin:0 0 32px;

    padding:10px 28px;

    border-radius:999px;

    background:rgba(145,45,90,.68);

    border:2px solid rgba(255,220,170,.85);

    color:#ffffff;

    font-size:21px;

    font-weight:600;

    line-height:1.5;

    text-shadow:
        0 2px 5px rgba(0,0,0,.35);

    box-shadow:
        0 8px 25px rgba(100,40,70,.25);

}


/* ==========================================
   GIFT CONTAINER
========================================== */

.gift-container{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:42px;

    width:100%;

    max-width:1050px;

}


/* ==========================================
   GIFT CARD
========================================== */

.gift-box{

    position:relative;

    width:245px;

    height:245px;

    padding:18px;

    border:2px solid rgba(255,225,180,.95);

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.72),
            rgba(255,240,245,.52)
        );

    backdrop-filter:blur(6px);

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;

    box-shadow:
        0 12px 30px rgba(80,40,60,.18);

}


/* ==========================================
   GIFT IMAGE
========================================== */

.gift-box img{

    width:88%;

    height:88%;

    object-fit:contain;

    display:block;

    pointer-events:none;

    filter:
        drop-shadow(
            0 10px 12px
            rgba(80,40,60,.18)
        );

}


/* ==========================================
   HOVER
========================================== */

.gift-box:hover{

    transform:
        translateY(-12px)
        scale(1.04);

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

    border-color:#ffd58f;

    box-shadow:
        0 22px 45px rgba(90,40,70,.28);

}


/* ==========================================
   ACTIVE / CLICK FEEDBACK
========================================== */

.gift-box:active{

    transform:
        translateY(-5px)
        scale(.98);

}


/* ==========================================
   SELECTION MESSAGE
========================================== */

.gift-selection-message{

    min-height:35px;

    margin:24px 0 0;

    padding:8px 25px;

    border-radius:999px;

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

    color:#a83e68;

    font-size:20px;

    font-weight:700;

    text-shadow:none;

    box-shadow:
        0 8px 20px rgba(80,40,60,.15);

}

/* ==========================================
   SELECTED GIFT
========================================== */

.gift-box.selected{

    transform:
        translateY(-15px)
        scale(1.07);

    border-color:#ffb6d5;

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

    box-shadow:
        0 0 0 4px rgba(255,190,220,.45),
        0 25px 55px rgba(100,40,70,.30);

}


/* Selected gift image */

.gift-box.selected img{

    filter:
        drop-shadow(
            0 0 18px
            rgba(255,190,220,.9)
        );

}

/* ==========================================
   SCENE 7 : GIFT REVEAL
========================================== */

#gift-reveal-screen{

    display:none;

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    overflow:hidden;

}


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

.gift-reveal-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:0;

}


/* ==========================================
   CONTENT
========================================== */

.gift-reveal-content{

    position:relative;

    z-index:2;

    width:100%;

    height:100%;

    box-sizing:border-box;

    padding:35px 20px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}


/* ==========================================
   TITLE
========================================== */

.gift-reveal-title{

    margin:0 0 8px;

    color:white;

    font-size:58px;

    font-weight:800;

    text-shadow:
        0 4px 0 rgba(130,60,90,.3),
        0 8px 22px rgba(60,30,50,.45);

}


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

.gift-reveal-subtitle{

    margin:0 0 18px;

    color:white;

    font-size:22px;

    font-weight:600;

    text-shadow:
        0 3px 12px rgba(0,0,0,.35);

}


/* ==========================================
   REVEALED GIFT
========================================== */

.revealed-gift{

    width:260px;

    height:230px;

    display:flex;

    justify-content:center;

    align-items:center;

}


/* Gift image */

.revealed-gift img{

    width:100%;

    height:100%;

    object-fit:contain;

    filter:
        drop-shadow(
            0 15px 20px
            rgba(70,30,60,.25)
        );

    animation:
        giftRevealPop .7s ease both;

}


/* ==========================================
   GIFT TITLE
========================================== */

#revealed-gift-title{

    margin:5px 0 12px;

    color:white;

    font-size:32px;

    font-weight:800;

    text-shadow:
        0 3px 12px rgba(0,0,0,.4);

}


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

.revealed-gift-message{

    width:min(650px,90%);

    box-sizing:border-box;

    padding:18px 28px;

    border-radius:22px;

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

    color:#713d58;

    font-size:21px;

    font-weight:600;

    line-height:1.6;

    box-shadow:
        0 15px 35px
        rgba(70,30,60,.18);

}


/* ==========================================
   CONTINUE BUTTON
========================================== */

#giftRevealContinueBtn{

    margin-top:22px;

    padding:15px 45px;

    border:none;

    border-radius:999px;

    background:#ff5ba7;

    color:white;

    font-size:21px;

    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 10px 25px
        rgba(80,30,60,.25);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


#giftRevealContinueBtn:hover{

    transform:
        translateY(-4px)
        scale(1.03);

    box-shadow:
        0 15px 35px
        rgba(80,30,60,.32);

}


/* ==========================================
   ANIMATION
========================================== */

@keyframes giftRevealPop{

    0%{

        opacity:0;

        transform:
            scale(.55)
            translateY(30px);

    }

    70%{

        transform:
            scale(1.08)
            translateY(-5px);

    }

    100%{

        opacity:1;

        transform:
            scale(1)
            translateY(0);

    }

}

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

.reveal-gift-btn{

    margin-top:12px;

    padding:14px 38px;

    border:none;

    border-radius:999px;

    background:#ff5ba7;

    color:white;

    font-size:19px;

    font-weight:800;

    cursor:pointer;

    opacity:0;

    pointer-events:none;

    transform:
        translateY(8px);

    transition:
        opacity .3s ease,
        transform .3s ease,
        box-shadow .25s ease;

    box-shadow:
        0 10px 25px
        rgba(80,30,60,.22);

}


.reveal-gift-btn.show{

    opacity:1;

    pointer-events:auto;

    transform:
        translateY(0);

}


.reveal-gift-btn:hover{

    transform:
        translateY(-3px)
        scale(1.03);

}

/* ==========================================
   SCENE 8 : ENDING CELEBRATION
========================================== */

#ending-screen{

    display:none;

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    overflow:hidden;

}


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

.ending-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:0;

}


/* ==========================================
   CONTENT
========================================== */

.ending-content{

    position:relative;

    z-index:2;

    width:100%;

    height:100%;

    box-sizing:border-box;

    padding:35px 20px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}


/* ==========================================
   TITLE
========================================== */

.ending-title{

    margin:0 0 18px;

    color:white;

    font-size:58px;

    font-weight:800;

    text-shadow:
        0 4px 12px
        rgba(70,30,60,.45);

}


/* ==========================================
   MEMORY PHOTO
========================================== */

.ending-memory{

    width:360px;

    height:270px;

    padding:10px;

    box-sizing:border-box;

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

    border-radius:20px;

    box-shadow:
        0 18px 40px
        rgba(70,30,60,.25);

    transform:
        rotate(-1deg);

}


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

.ending-memory img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:12px;

}


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

.ending-message{

    width:min(650px,90%);

    margin:22px 0 18px;

    color:white;

    font-size:23px;

    font-weight:600;

    line-height:1.6;

    text-shadow:
        0 3px 12px
        rgba(60,30,50,.4);

}


/* ==========================================
   PLAY AGAIN
========================================== */

#replayBtn{

    padding:15px 45px;

    border:none;

    border-radius:999px;

    background:#ff5ba7;

    color:white;

    font-size:21px;

    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 10px 25px
        rgba(70,30,60,.25);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


#replayBtn:hover{

    transform:
        translateY(-4px)
        scale(1.03);

    box-shadow:
        0 15px 35px
        rgba(70,30,60,.32);

}

/* ==========================================
   POLISH : GIFT SELECTION
========================================== */


/* Gift card */

.gift-box{

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;

}


/* Hover */

.gift-box:hover{

    transform:
        translateY(-10px)
        scale(1.04);

    box-shadow:
        0 18px 35px
        rgba(255, 120, 180, .28);

}


/* Gift image */

.gift-box img{

    transition:
        transform .3s ease,
        filter .3s ease;

}


/* Image hover */

.gift-box:hover img{

    transform:
        scale(1.08);

}


/* Selected gift */

.gift-box.selected{

    transform:
        translateY(-8px)
        scale(1.05);

    box-shadow:
        0 0 0 3px rgba(255, 190, 80, .55),
        0 18px 40px
        rgba(255, 100, 170, .35);

}


/* Selected image */

.gift-box.selected img{

    transform:
        scale(1.1);

    filter:
        drop-shadow(
            0 8px 15px
            rgba(255, 120, 180, .35)
        );

}


/* Reveal button */

.reveal-gift-btn{

    opacity:0;

    transform:
        translateY(15px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        box-shadow .3s ease;

}


/* Reveal button becomes visible */

.reveal-gift-btn.show{

    opacity:1;

    transform:
        translateY(0);

}


/* Reveal button hover */

.reveal-gift-btn:hover{

    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 12px 30px
        rgba(255, 90, 160, .35);

}

/* ==========================================
   POLISH : GIFT REVEAL
========================================== */


/* Gift reveal content */

.gift-reveal-content{

    animation:
        giftRevealEnter .8s ease forwards;

}


/* Main reveal animation */

@keyframes giftRevealEnter{

    from{

        opacity:0;

        transform:
            scale(.96)
            translateY(20px);

    }

    to{

        opacity:1;

        transform:
            scale(1)
            translateY(0);

    }

}


/* ==========================================
   REVEALED GIFT
========================================== */

.revealed-gift{

    animation:
        giftAppear 1s
        cubic-bezier(.2,.8,.2,1)
        .25s both;

}


/* Gift entrance */

@keyframes giftAppear{

    0%{

        opacity:0;

        transform:
            scale(.5)
            translateY(30px)
            rotate(-5deg);

    }

    60%{

        opacity:1;

        transform:
            scale(1.08)
            translateY(-5px)
            rotate(2deg);

    }

    100%{

        opacity:1;

        transform:
            scale(1)
            translateY(0)
            rotate(0);

    }

}


/* ==========================================
   GIFT IMAGE
========================================== */

#revealed-gift-image{

    transition:
        transform .35s ease,
        filter .35s ease;

}


#revealed-gift-image:hover{

    transform:
        scale(1.06);

    filter:
        drop-shadow(
            0 12px 20px
            rgba(255, 150, 200, .4)
        );

}


/* ==========================================
   TITLE
========================================== */

.gift-reveal-title{

    animation:
        revealText .7s ease
        .35s both;

}


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

.gift-reveal-subtitle{

    animation:
        revealText .7s ease
        .5s both;

}


/* ==========================================
   GIFT TITLE
========================================== */

#revealed-gift-title{

    animation:
        revealText .7s ease
        .65s both;

}


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

.revealed-gift-message{

    animation:
        revealText .7s ease
        .8s both;

}


/* ==========================================
   CONTINUE BUTTON
========================================== */

#giftRevealContinueBtn{

    animation:
        revealButton .7s ease
        1s both;

}


@keyframes revealText{

    from{

        opacity:0;

        transform:
            translateY(15px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes revealButton{

    from{

        opacity:0;

        transform:
            translateY(20px)
            scale(.95);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

/* ==========================================
   POLISH : ENDING CELEBRATION
========================================== */


/* ==========================================
   MAIN CONTENT
========================================== */

.ending-content{

    animation:
        endingEnter .9s ease forwards;

}


/* ==========================================
   SCENE ENTRANCE
========================================== */

@keyframes endingEnter{

    from{

        opacity:0;

        transform:
            scale(.97);

    }

    to{

        opacity:1;

        transform:
            scale(1);

    }

}


/* ==========================================
   TITLE
========================================== */

.ending-title{

    animation:
        endingTitle .8s ease
        .2s both;

}


@keyframes endingTitle{

    from{

        opacity:0;

        transform:
            translateY(-20px)
            scale(.95);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ==========================================
   MEMORY PHOTO
========================================== */

.ending-memory{

    animation:
        memoryAppear 1s
        cubic-bezier(.2,.8,.2,1)
        .45s both;

}


/* ==========================================
   MEMORY ENTRANCE
========================================== */

@keyframes memoryAppear{

    from{

        opacity:0;

        transform:
            translateY(30px)
            rotate(-4deg)
            scale(.9);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            rotate(-1deg)
            scale(1);

    }

}


/* ==========================================
   PHOTO HOVER
========================================== */

.ending-memory{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.ending-memory:hover{

    transform:
        translateY(-5px)
        rotate(0deg)
        scale(1.02);

    box-shadow:
        0 22px 45px
        rgba(70,30,60,.30);

}


/* ==========================================
   ENDING MESSAGE
========================================== */

.ending-message{

    animation:
        endingMessage .8s ease
        .85s both;

}


@keyframes endingMessage{

    from{

        opacity:0;

        transform:
            translateY(18px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* ==========================================
   PLAY AGAIN
========================================== */

#replayBtn{

    animation:
        replayAppear .8s ease
        1.2s both;

}


@keyframes replayAppear{

    from{

        opacity:0;

        transform:
            translateY(18px)
            scale(.95);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

/* =========================================================
   SCENE 0 : ENVELOPE OPENING
   CLEAN DESKTOP VERSION
   ========================================================= */

#opening-screen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;

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

    overflow: hidden;
    z-index: 10000;
}


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

.envelope-background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;
}

.envelope-bg {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   SPARKLES
   ========================================================= */

.opening-sparkle {
    position: absolute;
    z-index: 1;

    color: white;
    font-size: 28px;
    opacity: .8;

    pointer-events: none;

    animation:
        openingSparkle 2.5s ease-in-out infinite;
}

.sparkle-1 {
    top: 18%;
    left: 18%;
}

.sparkle-2 {
    top: 28%;
    right: 16%;
    animation-delay: .8s;
}

.sparkle-3 {
    bottom: 18%;
    left: 23%;
    animation-delay: 1.4s;
}

@keyframes openingSparkle {
    0%,
    100% {
        opacity: .35;
        transform: scale(.8) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) rotate(15deg);
    }
}


/* =========================================================
   ENVELOPE STAGE
   ========================================================= */

#opening-screen .envelope-stage {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 560px;
    height: 430px;

    margin: 0;

    transform: translate(-50%, -52%);

    z-index: 10;
}


/* =========================================================
   LETTER PAPER
   ========================================================= */

.envelope-paper {
    position: absolute;

    left: 50%;
    top: 30px;

    width: 360px;
    height: 250px;

    transform: translateX(-50%);

    z-index: 1;

    pointer-events: none;
}

.envelope-paper img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   ENVELOPE BODY
   ========================================================= */

.envelope-body {
    position: absolute;

    left: 50%;
    top: 80px;

    width: 560px;
    height: auto;

    transform: translateX(-50%);

    object-fit: contain;
    object-position: center;

    z-index: 3;

    pointer-events: none;
}


/* =========================================================
   ENVELOPE FLAP
   ========================================================= */

#opening-screen .envelope-flap-wrap {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 560px;
    height: 373px;

    transform: translate(-50%, -50%);

    z-index: 5;

    overflow: visible;

    perspective: 1200px;
}


/* =========================================================
   WAX SEAL
   ========================================================= */

.envelope-seal {
    position: absolute;

    left: 50%;
    top: 235px;

    width: 82px;
    height: 82px;

    transform: translate(-50%, -50%);

    z-index: 10;

    padding: 0;
    border: none;
    background: transparent;

    cursor: pointer;

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

.envelope-seal img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 14px
            rgba(90,40,60,.25)
        );

    animation:
        envelopeSealPulse 2.2s ease-in-out infinite;
}

@keyframes envelopeSealPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}


/* =========================================================
   OPENING TEXT
   ========================================================= */

.envelope-instruction {
    position: absolute;

    left: calc(50% + 480px);
    top: 48%;

    transform: translateY(-50%);

    width: 420px;

    text-align: center;

    z-index: 15;

    color: white;

    text-shadow:
        0 3px 12px
        rgba(60,30,50,.35);
}

.envelope-small-text {
    margin: 0 0 5px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 4px;

    opacity: .9;
}

.envelope-title {
    margin: 0;

    font-size: 42px;
    font-weight: 800;
}

.envelope-recipient {
    margin: 8px auto 0;

    max-width: 400px;

    font-size: 17px;
    line-height: 1.5;
    font-weight: 500;
}

.letter-hint {
    margin: 14px 0 0;

    font-size: 16px;
    font-weight: 700;

    animation:
        hintFloat 2s ease-in-out infinite;
}

@keyframes hintFloat {
    0%,
    100% {
        opacity: .7;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-4px);
    }
}


/* =========================================================
   DESKTOP — FLAP HINGE PERSPECTIVE
   ========================================================= */

@media screen and (min-width: 769px) {

    #opening-screen .envelope-flap-wrap {
        perspective: 1200px;
    }

    #opening-screen .envelope-flap {
        transform-origin: 50% 0%;
        backface-visibility: hidden;
    }

}

#opening-screen.opening-active .envelope-seal {
    animation:
        envelopeSealOpen .45s ease forwards;
}

@keyframes envelopeSealOpen {

    0% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -60%)
            scale(.7);
    }

}


/* =========================================================
   DESKTOP ONLY
   ========================================================= */

@media screen and (min-width: 769px) {

    #opening-screen {
        position: fixed;

        width: 100vw;
        height: 100vh;

        display: flex;

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

        overflow: hidden;
    }

.envelope-stage {
    left: 50%;
    top: 50%;

    width: 560px;
    height: 430px;

    transform:
        translate(-50%, -47%);
}

    .envelope-paper {
        left: 50%;
        top: 30px;

        width: 360px;
        height: 250px;

        transform:
            translateX(-50%);
    }

.envelope-body {
    left: 50%;
    top: 0px;

    width: 560px;
    height: auto;

    transform:
        translateX(-50%);
}

#opening-screen .envelope-flap-wrap {
    left: 50%;
    top: 62px;

    width: 560px;
    height: 360px;

    transform: translateX(-50%);

    z-index: 5;
}

.envelope-flap {
    left: 0;
    top: 0;

    width: 100%;
    height: auto;

    transform: none;
}

    .envelope-seal {
        left: 50%;
        top: 300px;

        width: 82px;
        height: 82px;

        transform:
            translate(-50%, -50%);
    }

    .envelope-instruction {
        left: 50%;
        bottom: 6%;

        transform:
            translateX(-50%);

        width: 520px;
    }

}

/* ==================================================
   DESKTOP — FINAL ENVELOPE INSTRUCTION POSITION
   ================================================== */

@media screen and (min-width: 769px) {

    #opening-screen .envelope-instruction {
        position: absolute !important;

        left: calc(35% + 520px) !important;
        top: 50% !important;
        bottom: auto !important;

        transform: translateY(-50%) !important;

        width: 420px !important;

        text-align: center !important;

        z-index: 50 !important;
    }

}


/* =========================================================
   FINAL FIX — REAL ENVELOPE FLAP OPENING
   Flap opens from the bottom hinge
========================================================= */

#opening-screen .envelope-stage {
    perspective: 1200px;
}

/* CLOSED STATE */
#opening-screen .envelope-flap {
    transform-origin: 50% 100%;
    transform: rotateX(0deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* OPEN STATE */
#opening-screen.opening-active .envelope-flap {
    animation:
        realEnvelopeFlapOpen
        1.15s
        cubic-bezier(.22,.61,.36,1)
        forwards;
}

/* REAL FLAP LIFT */
@keyframes realEnvelopeFlapOpen {

    0% {
        transform:
            rotateX(0deg);
    }

    35% {
        transform:
            rotateX(-35deg);
    }

    70% {
        transform:
            rotateX(-115deg);
    }

    100% {
        transform:
            rotateX(-170deg);
    }

}

/* =========================================================
   ENVELOPE FLAP — MASTER CONTROL
   FINAL VERSION
========================================================= */

#opening-screen .envelope-flap {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform-origin: 50% 100%;
    transform-style: preserve-3d;

    backface-visibility: hidden;

    z-index: 5;
}


/* CLOSED */

#opening-screen:not(.opening-active) .envelope-flap {
    transform: rotateX(0deg);
}


/* =========================================================
   SCENE 0 — REAL ENVELOPE FLAP OPENING
   FINAL MASTER ANIMATION
========================================================= */


/* ---------------------------------------------------------
   3D SPACE
--------------------------------------------------------- */

#opening-screen .envelope-stage {

    perspective: 1400px;

    perspective-origin:
        50% 45%;

}


/* ---------------------------------------------------------
   FLAP MASTER
--------------------------------------------------------- */

#opening-screen .envelope-flap {

    transform-origin:
        50% 100%;

    transform:
        rotateX(0deg);

    transform-style:
        preserve-3d;

    backface-visibility:
        visible;

    will-change:
        transform;

}


/* ---------------------------------------------------------
   CLOSED STATE
--------------------------------------------------------- */

#opening-screen:not(.opening-active)
.envelope-flap {

    transform:
        rotateX(0deg);

}


/* ---------------------------------------------------------
   OPEN STATE
--------------------------------------------------------- */

#opening-screen.opening-active
.envelope-flap {

    animation:
        birthdayEnvelopeFlapOpen
        1.35s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        )
        forwards;

}


/* ---------------------------------------------------------
   REAL HINGE MOVEMENT
--------------------------------------------------------- */

@keyframes birthdayEnvelopeFlapOpen {

    0% {

        transform:
            rotateX(0deg);

    }


    18% {

        transform:
            rotateX(-18deg);

    }


    42% {

        transform:
            rotateX(-62deg);

    }


    68% {

        transform:
            rotateX(-105deg);

    }


    86% {

        transform:
            rotateX(-118deg);

    }


    100% {

        transform:
            rotateX(-112deg);

    }

}

/* =========================================================
   SCENE 0 — ENVELOPE FLAP
   SINGLE MASTER ANIMATION
   DO NOT ADD ANOTHER FLAP ANIMATION BELOW THIS
========================================================= */


/* ---------------------------------------------------------
   FLAP BASE
--------------------------------------------------------- */

#opening-screen .envelope-flap {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform-origin: 50% 100%;

    transform:
        rotateX(0deg);

    transform-style:
        preserve-3d;

    backface-visibility:
        visible;

    will-change:
        transform;

    z-index: 5;
}


/* ---------------------------------------------------------
   CLOSED STATE
--------------------------------------------------------- */

#opening-screen:not(.opening-active)
.envelope-flap {

    transform:
        rotateX(0deg);

}


/* ---------------------------------------------------------
   OPEN STATE
--------------------------------------------------------- */

#opening-screen.opening-active
.envelope-flap {

    animation:
        envelopeFlapOpenMaster
        1.25s
        cubic-bezier(.22,.61,.36,1)
        forwards;

}


/* ---------------------------------------------------------
   MASTER FLAP ANIMATION
--------------------------------------------------------- */

@keyframes envelopeFlapOpenMaster {

    0% {

        transform:
            rotateX(0deg);

    }

    20% {

        transform:
            rotateX(-18deg);

    }

    45% {

        transform:
            rotateX(-60deg);

    }

    70% {

        transform:
            rotateX(-100deg);

    }

    88% {

        transform:
            rotateX(-116deg);

    }

    100% {

        transform:
            rotateX(-112deg);

    }

}


/* OPEN — ANGKAT FLAP KE ATAS */

#opening-screen.opening-active .envelope-flap {
    animation: realEnvelopeFlapOpen 1s ease-in-out forwards !important;
}


@keyframes realEnvelopeFlapOpen {

    0% {
        transform: rotateX(0deg);
    }

    100% {
        transform: rotateX(-90deg);
    }

}

/* ==================================================
   SCENE 0 — ENVELOPE INSTRUCTION PANEL
   DESKTOP + MOBILE
================================================== */

#opening-screen .envelope-instruction {

    position: relative;

    padding: 18px 24px 16px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.96),
            rgba(255,248,251,0.94)
        );

    border:
        2px solid rgba(238,181,202,0.85);

    border-radius: 18px;

    box-shadow:
        0 8px 24px rgba(105,70,85,0.16),
        inset 0 0 0 1px rgba(255,255,255,0.85);

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);

    overflow: visible;

    z-index: 20;

}


/* ==========================================
   INNER DECORATIVE BORDER
========================================== */

#opening-screen .envelope-instruction::before {

    content: "";

    position: absolute;

    inset: 7px;

    border:
        1px solid rgba(225,157,181,0.55);

    border-radius: 12px;

    pointer-events: none;

    z-index: 0;

}


/* ==========================================
   SMALL FLOWER DECORATION
========================================== */

#opening-screen .envelope-instruction::after {

    content: "✿";

    position: absolute;

    top: -13px;
    left: 18px;

    width: 30px;
    height: 30px;

    display: flex;

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

    font-size: 19px;

    color: #df8eaa;

    background:
        rgba(255,255,255,0.98);

    border:
        1px solid rgba(225,157,181,0.65);

    border-radius: 50%;

    box-shadow:
        0 3px 8px rgba(105,70,85,0.12);

    z-index: 3;

}


/* ==========================================
   KEEP TEXT ABOVE DECORATION
========================================== */

#opening-screen .envelope-instruction > * {

    position: relative;

    z-index: 2;

}

/* ==================================================
   SCENE 0 — ENVELOPE INSTRUCTION PANEL
   SHARED DESIGN — DESKTOP + MOBILE
================================================== */

#opening-screen .envelope-instruction {

    padding: 18px 24px 16px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.97),
            rgba(255, 248, 251, 0.95)
        );

    border:
        2px solid rgba(238, 181, 202, 0.9);

    border-radius: 18px;

    box-shadow:
        0 8px 24px rgba(105, 70, 85, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.85);

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);

    overflow: visible;

    z-index: 20;

}


/* ==========================================
   INNER DECORATIVE BORDER
========================================== */

#opening-screen .envelope-instruction::before {

    content: "";

    position: absolute;

    inset: 7px;

    border:
        1px solid rgba(225, 157, 181, 0.55);

    border-radius: 12px;

    pointer-events: none;

    z-index: 0;

}


/* ==========================================
   DECORATIVE FLOWER
========================================== */

#opening-screen .envelope-instruction::after {

    content: "✿";

    position: absolute;

    top: -13px;
    left: 18px;

    width: 30px;
    height: 30px;

    display: flex;

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

    font-size: 19px;

    color: #df8eaa;

    background:
        rgba(255, 255, 255, 0.98);

    border:
        1px solid rgba(225, 157, 181, 0.65);

    border-radius: 50%;

    box-shadow:
        0 3px 8px rgba(105, 70, 85, 0.12);

    z-index: 3;

}


/* ==========================================
   KEEP TEXT ABOVE DECORATION
========================================== */

#opening-screen .envelope-instruction > * {

    position: relative;

    z-index: 2;

}

/* ==================================================
   SCENE 0 — ENVELOPE TEXT
   SHARED TYPOGRAPHY — DESKTOP + MOBILE
================================================== */


/* ==========================================
   SMALL LABEL
========================================== */

#opening-screen .envelope-small-text {

    color: #c56d8d;

    text-shadow: none;

}


/* ==========================================
   MAIN TITLE
========================================== */

#opening-screen .envelope-title {

    color: #b94f76;

    text-shadow:
        0 1px 0 rgba(255,255,255,0.9);

}


/* ==========================================
   DESCRIPTION
========================================== */

#opening-screen .envelope-recipient {

    color: #8c5268;

    text-shadow: none;

}


/* ==========================================
   OPEN HINT
========================================== */

#opening-screen .letter-hint {

    color: #c45d83;

    text-shadow: none;

}

/* =========================================================
   SCENE 0 → WELCOME
   CLOUD ZOOM TRANSITION
========================================================= */

#scene0-cloud-transition {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    opacity: 0;

    z-index: 1000;

}


/* =========================================================
   CLOUD BASE
========================================================= */

.scene0-cloud {

    position: absolute;

    width: 520px;
    height: 230px;

    background:
        radial-gradient(
            circle at 25% 65%,
            rgba(255,255,255,.98) 0 30%,
            transparent 31%
        ),
        radial-gradient(
            circle at 48% 42%,
            rgba(255,255,255,.98) 0 38%,
            transparent 39%
        ),
        radial-gradient(
            circle at 70% 65%,
            rgba(255,255,255,.98) 0 32%,
            transparent 33%
        );

    filter:
        drop-shadow(
            0 12px 22px
            rgba(80,60,90,.08)
        );

}


/* =========================================================
   CLOUD POSITIONS
========================================================= */

.scene0-cloud-1 {

    left: -180px;
    top: 8%;

    transform:
        scale(.85);

}


.scene0-cloud-2 {

    right: -220px;
    top: 25%;

    transform:
        scale(1.1);

}


.scene0-cloud-3 {

    left: -260px;
    bottom: 20%;

    transform:
        scale(1.25);

}


.scene0-cloud-4 {

    right: -280px;
    bottom: -40px;

    transform:
        scale(1.45);

}


/* =========================================================
   CLOUD TRANSITION ACTIVE
========================================================= */

#opening-screen.cloud-transition-active
#scene0-cloud-transition {

    opacity: 1;

}


/* =========================================================
   ENVELOPE / WORLD ZOOM OUT
========================================================= */

#opening-screen.cloud-transition-active
.envelope-stage,

#opening-screen.cloud-transition-active
.envelope-instruction {

    animation:
        scene0WorldZoomOut
        1.8s
        cubic-bezier(.55,0,.45,1)
        forwards;

}


@keyframes scene0WorldZoomOut {

    0% {

        transform:
            translate(-50%, -47%)
            scale(1);

        opacity: 1;

    }

    100% {

        transform:
            translate(-50%, -47%)
            scale(.58);

        opacity: .25;

    }

}


/* =========================================================
   CLOUD MOVEMENT
========================================================= */

#opening-screen.cloud-transition-active
.scene0-cloud-1 {

    animation:
        scene0CloudMove1
        1.8s
        ease-in
        forwards;

}


#opening-screen.cloud-transition-active
.scene0-cloud-2 {

    animation:
        scene0CloudMove2
        1.8s
        ease-in
        forwards;

}


#opening-screen.cloud-transition-active
.scene0-cloud-3 {

    animation:
        scene0CloudMove3
        1.8s
        ease-in
        forwards;

}


#opening-screen.cloud-transition-active
.scene0-cloud-4 {

    animation:
        scene0CloudMove4
        1.8s
        ease-in
        forwards;

}


/* =========================================================
   CLOUD KEYFRAMES
========================================================= */

@keyframes scene0CloudMove1 {

    0% {

        transform:
            translateX(0)
            scale(.85);

        opacity: 0;

    }

    35% {

        opacity: 1;

    }

    100% {

        transform:
            translateX(55vw)
            scale(1.8);

        opacity: 1;

    }

}


@keyframes scene0CloudMove2 {

    0% {

        transform:
            translateX(0)
            scale(1.1);

        opacity: 0;

    }

    35% {

        opacity: 1;

    }

    100% {

        transform:
            translateX(-60vw)
            scale(2);

        opacity: 1;

    }

}


@keyframes scene0CloudMove3 {

    0% {

        transform:
            translateX(0)
            scale(1.25);

        opacity: 0;

    }

    30% {

        opacity: 1;

    }

    100% {

        transform:
            translateX(65vw)
            scale(2.2);

        opacity: 1;

    }

}


@keyframes scene0CloudMove4 {

    0% {

        transform:
            translateX(0)
            scale(1.45);

        opacity: 0;

    }

    30% {

        opacity: 1;

    }

    100% {

        transform:
            translateX(-65vw)
            scale(2.3);

        opacity: 1;

    }

}

/* =========================================================
   SCENE 0 → WELCOME
   CLOUD TRANSITION CONTROL
========================================================= */

#scene0-cloud-transition {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    opacity: 0;

    z-index: 1000;

}


/* =========================================================
   CLOUD BASE
========================================================= */

/* =========================================================
   SCENE 0 — CLOUD ASSET
========================================================= */

.scene0-cloud {

    position: absolute;

    width: 520px;
    height: 230px;

    background-image:
        url("../assets/effects/cloud.png");

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        contain;

    filter:
        drop-shadow(
            0 12px 22px
            rgba(80,60,90,.08)
        );

    pointer-events:
        none;

}


/* =========================================================
   CLOUD POSITIONS
========================================================= */

.scene0-cloud-1 {

    left: -180px;
    top: 8%;

    transform: scale(.85);

}

.scene0-cloud-2 {

    right: -220px;
    top: 25%;

    transform: scale(1.1);

}

.scene0-cloud-3 {

    left: -260px;
    bottom: 20%;

    transform: scale(1.25);

}

.scene0-cloud-4 {

    right: -280px;
    bottom: -40px;

    transform: scale(1.45);

}


/* =========================================================
   TRANSITION ACTIVE
========================================================= */

#opening-screen.cloud-transition-active
#scene0-cloud-transition {

    opacity: 1;

}


/* =========================================================
   WORLD ZOOM OUT
========================================================= */

#opening-screen.cloud-transition-active
.envelope-stage {

    animation:
        scene0WorldZoomOut
        2s
        cubic-bezier(.55,0,.45,1)
        forwards;

}


@keyframes scene0WorldZoomOut {

    0% {

        transform:
            translate(-50%, -47%)
            scale(1);

        opacity: 1;

    }

    100% {

        transform:
            translate(-50%, -47%)
            scale(.58);

        opacity: .2;

    }

}


/* =========================================================
   TEXT PANEL ALSO FADES BACK
========================================================= */

#opening-screen.cloud-transition-active
.envelope-instruction {

    animation:
        scene0InstructionZoomOut
        2s
        ease-in
        forwards;

}


@keyframes scene0InstructionZoomOut {

    0% {

        transform:
            translateX(-50%)
            scale(1);

        opacity: 1;

    }

    100% {

        transform:
            translateX(-50%)
            scale(.75);

        opacity: 0;

    }

}


/* =========================================================
   CLOUD MOVEMENT
========================================================= */

#opening-screen.cloud-transition-active
.scene0-cloud-1 {

    animation:
        scene0CloudMove1
        2s
        ease-in
        forwards;

}

#opening-screen.cloud-transition-active
.scene0-cloud-2 {

    animation:
        scene0CloudMove2
        2s
        ease-in
        forwards;

}

#opening-screen.cloud-transition-active
.scene0-cloud-3 {

    animation:
        scene0CloudMove3
        2s
        ease-in
        forwards;

}

#opening-screen.cloud-transition-active
.scene0-cloud-4 {

    animation:
        scene0CloudMove4
        2s
        ease-in
        forwards;

}


/* =========================================================
   CLOUD KEYFRAMES
========================================================= */

@keyframes scene0CloudMove1 {

    0% {

        transform:
            translateX(0)
            scale(.85);

        opacity: 0;

    }

    30% {

        opacity: 1;

    }

    100% {

        transform:
            translateX(55vw)
            scale(1.9);

        opacity: 1;

    }

}


@keyframes scene0CloudMove2 {

    0% {

        transform:
            translateX(0)
            scale(1.1);

        opacity: 0;

    }

    30% {

        opacity: 1;

    }

    100% {

        transform:
            translateX(-60vw)
            scale(2.1);

        opacity: 1;

    }

}


@keyframes scene0CloudMove3 {

    0% {

        transform:
            translateX(0)
            scale(1.25);

        opacity: 0;

    }

    30% {

        opacity: 1;

    }

    100% {

        transform:
            translateX(65vw)
            scale(2.3);

        opacity: 1;

    }

}


@keyframes scene0CloudMove4 {

    0% {

        transform:
            translateX(0)
            scale(1.45);

        opacity: 0;

    }

    30% {

        opacity: 1;

    }

    100% {

        transform:
            translateX(-65vw)
            scale(2.4);

        opacity: 1;

    }

}

/* =========================================================
   SCENE 0 — LETTER INSIDE ENVELOPE
   STEP #12A
========================================================= */


/* ---------------------------------------------------------
   LETTER CONTAINER
--------------------------------------------------------- */

/* =========================================================
   SCENE 0 — LETTER REVEAL
   STEP #12B
========================================================= */

#opening-screen .envelope-paper {

    position: absolute;

    left: 50%;
    top: 105px;

    width: 360px;
    height: 250px;

    transform:
        translateX(-50%);

    z-index: 2;

    pointer-events: none;

    overflow: visible;

    opacity: 0;

    will-change:
        transform,
        opacity;

}


/* =========================================================
   LETTER — CLOSED STATE
========================================================= */

#opening-screen:not(.opening-active) .envelope-paper {

    opacity: 0;

    transform:
        translateX(-50%)
        translateY(35px);

}


/* =========================================================
   LETTER — EMERGE FROM ENVELOPE
========================================================= */

#opening-screen.opening-active .envelope-paper {

    animation:
        envelopeLetterReveal
        0.8s
        cubic-bezier(.22,.61,.36,1)
        0.35s
        forwards;

}


/* =========================================================
   LETTER REVEAL ANIMATION
========================================================= */

@keyframes envelopeLetterReveal {

    0% {

        opacity: 0;

        transform:
            translateX(-50%)
            translateY(35px);

    }

    25% {

        opacity: 0.35;

        transform:
            translateX(-50%)
            translateY(15px);

    }

    60% {

        opacity: 0.85;

        transform:
            translateX(-50%)
            translateY(-45px);

    }

    100% {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(-95px);

    }

}

/* =========================================================
   SCENE 0 — LETTER READING FOCUS
========================================================= */

#opening-screen.letter-focus-active .envelope-paper {

    animation:
        envelopeLetterFocus
        1.2s
        cubic-bezier(.22,.61,.36,1)
        forwards;

}


/* ---------------------------------------------------------
   GENTLE ZOOM IN → ZOOM OUT
--------------------------------------------------------- */

@keyframes envelopeLetterFocus {

    0% {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(-95px)
            scale(1);

    }

    45% {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(-105px)
            scale(1.12);

    }

    70% {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(-100px)
            scale(1.12);

    }

    100% {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(-95px)
            scale(1);

    }

}

/* ---------------------------------------------------------
   LETTER PAPER IMAGE
--------------------------------------------------------- */

#opening-screen .envelope-paper img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

}


/* =========================================================
   SCENE 0 — LETTER TEXT FIT
========================================================= */

#opening-screen .envelope-letter-message {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 72%;

    transform:
        translate(-50%, -50%);

    text-align: center;

    color: #8f526c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    box-sizing: border-box;

}


/* ---------------------------------------------------------
   GREETING
--------------------------------------------------------- */

#opening-screen .envelope-letter-greeting {

    margin:
        0 0 8px;

    font-size:
        16px;

    line-height:
        1.25;

    font-weight:
        600;

}


/* ---------------------------------------------------------
   BODY
--------------------------------------------------------- */

#opening-screen .envelope-letter-body {

    margin:
        0 auto;

    max-width:
        100%;

    font-size:
        11px;

    line-height:
        1.45;

    font-weight:
        500;

}


/* ---------------------------------------------------------
   QUESTION
--------------------------------------------------------- */

#opening-screen .envelope-letter-question {

    margin:
        10px 0 0;

    font-size:
        11px;

    line-height:
        1.35;

    font-weight:
        600;

}


/* ---------------------------------------------------------
   GREETING
--------------------------------------------------------- */

#opening-screen .envelope-letter-greeting {

    margin: 0 0 10px;

    font-size: 18px;

    font-weight: 600;

}


/* ---------------------------------------------------------
   BODY
--------------------------------------------------------- */

#opening-screen .envelope-letter-body {

    margin: 0 auto;

    font-size: 14px;

    line-height: 1.55;

}


/* ---------------------------------------------------------
   QUESTION
--------------------------------------------------------- */

#opening-screen .envelope-letter-question {

    margin: 12px 0 0;

    font-size: 14px;

    font-weight: 600;

}

/* =========================================================
   SCENE 0 → SCENE 1
   FINAL CLOUD TRANSITION
   ---------------------------------------------------------
   Envelope disappears into a soft magical cloud transition.
========================================================= */


/* =========================================================
   CLOUD TRANSITION CONTAINER
========================================================= */

#scene0-cloud-transition{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;

    pointer-events:none;

    opacity:0;

    z-index:1000;

}


/* =========================================================
   CLOUD BASE
========================================================= */

#scene0-cloud-transition .scene0-cloud{

    position:absolute;

    width:520px;
    height:230px;

    background-image:
        url("../assets/effects/cloud.png");

    background-repeat:no-repeat;

    background-position:center;

    background-size:contain;

    opacity:0;

    pointer-events:none;

    filter:
        drop-shadow(
            0 12px 24px
            rgba(80,60,90,.10)
        );

}


/* =========================================================
   CLOUD STARTING POSITIONS
========================================================= */

#scene0-cloud-transition .scene0-cloud-1{

    left:-160px;
    top:5%;

    transform:
        scale(.8);

}


#scene0-cloud-transition .scene0-cloud-2{

    right:-180px;
    top:20%;

    transform:
        scale(.9);

}


#scene0-cloud-transition .scene0-cloud-3{

    left:-220px;
    bottom:12%;

    transform:
        scale(1);

}


#scene0-cloud-transition .scene0-cloud-4{

    right:-220px;
    bottom:-30px;

    transform:
        scale(1.1);

}


/* =========================================================
   TRANSITION ACTIVE
========================================================= */

#opening-screen.cloud-transition-active
#scene0-cloud-transition{

    opacity:1;

}


/* =========================================================
   CLOUD 1
========================================================= */

#opening-screen.cloud-transition-active
#scene0-cloud-transition .scene0-cloud-1{

    animation:
        scene0CloudExpand1
        1.6s
        cubic-bezier(.22,.61,.36,1)
        forwards;

}


/* =========================================================
   CLOUD 2
========================================================= */

#opening-screen.cloud-transition-active
#scene0-cloud-transition .scene0-cloud-2{

    animation:
        scene0CloudExpand2
        1.6s
        cubic-bezier(.22,.61,.36,1)
        forwards;

}


/* =========================================================
   CLOUD 3
========================================================= */

#opening-screen.cloud-transition-active
#scene0-cloud-transition .scene0-cloud-3{

    animation:
        scene0CloudExpand3
        1.6s
        cubic-bezier(.22,.61,.36,1)
        forwards;

}


/* =========================================================
   CLOUD 4
========================================================= */

#opening-screen.cloud-transition-active
#scene0-cloud-transition .scene0-cloud-4{

    animation:
        scene0CloudExpand4
        1.6s
        cubic-bezier(.22,.61,.36,1)
        forwards;

}


/* =========================================================
   CLOUD ANIMATION 1
========================================================= */

@keyframes scene0CloudExpand1{

    0%{

        opacity:0;

        transform:
            translate(-20vw, -5vh)
            scale(.8);

    }

    25%{

        opacity:1;

    }

    100%{

        opacity:1;

        transform:
            translate(35vw, 10vh)
            scale(4);

    }

}


/* =========================================================
   CLOUD ANIMATION 2
========================================================= */

@keyframes scene0CloudExpand2{

    0%{

        opacity:0;

        transform:
            translate(20vw, -5vh)
            scale(.9);

    }

    25%{

        opacity:1;

    }

    100%{

        opacity:1;

        transform:
            translate(-35vw, 5vh)
            scale(4.2);

    }

}


/* =========================================================
   CLOUD ANIMATION 3
========================================================= */

@keyframes scene0CloudExpand3{

    0%{

        opacity:0;

        transform:
            translate(-15vw, 10vh)
            scale(1);

    }

    25%{

        opacity:1;

    }

    100%{

        opacity:1;

        transform:
            translate(30vw, -10vh)
            scale(4.5);

    }

}


/* =========================================================
   CLOUD ANIMATION 4
========================================================= */

@keyframes scene0CloudExpand4{

    0%{

        opacity:0;

        transform:
            translate(15vw, 10vh)
            scale(1.1);

    }

    25%{

        opacity:1;

    }

    100%{

        opacity:1;

        transform:
            translate(-30vw, -5vh)
            scale(4.7);

    }

}


/* =========================================================
   ENVELOPE DISAPPEARS
========================================================= */

#opening-screen.cloud-transition-active
.envelope-stage{

    animation:
        scene0EnvelopeDisappear
        1.2s
        cubic-bezier(.55,0,.45,1)
        forwards;

}


/* =========================================================
   INSTRUCTION DISAPPEARS
========================================================= */

#opening-screen.cloud-transition-active
.envelope-instruction{

    animation:
        scene0InstructionDisappear
        .8s
        ease
        forwards;

}


/* =========================================================
   ENVELOPE ANIMATION
========================================================= */

@keyframes scene0EnvelopeDisappear{

    0%{

        opacity:1;

        transform:
            translate(-50%, -50%)
            scale(1);

    }

    100%{

        opacity:0;

        transform:
            translate(-50%, -50%)
            scale(.82);

    }

}


/* =========================================================
   INSTRUCTION ANIMATION
========================================================= */

@keyframes scene0InstructionDisappear{

    0%{

        opacity:1;

    }

    100%{

        opacity:0;

    }

}

/* =========================================================
   SCENE 0 → SCENE 1
   CLOUD → WHITE FADE
========================================================= */

#opening-screen.scene0-fade-white::after {

    content: "";

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background: #fff;

    opacity: 0;

    z-index: 2000;

    pointer-events: none;

    animation:
        scene0CloudToWhite
        0.65s
        ease
        forwards;

}


/* =========================================================
   CLOUD → WHITE
========================================================= */

@keyframes scene0CloudToWhite {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}

/* ==================================================
   #13B.2A : PANDA VISUAL COMPANION
   DESKTOP
================================================== */

#companion-moment{

    position:absolute;

    left:50%;

    bottom:28px;

    transform:
        translateX(-50%)
        translateY(30px);

    width:min(520px, 82vw);

    min-height:150px;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:10px;

    opacity:0;

    pointer-events:none;

    z-index:50;

    transition:
        opacity .6s ease,
        transform .6s ease;

}


/* ==================================================
   ACTIVE
================================================== */

#companion-moment.companion-active{

    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);

}


/* ==================================================
   #13B.2C : COMPANION CHARACTER SIZE
   DESKTOP
================================================== */

#companion-character{

    position:relative;

    width:170px;

    min-width:170px;

    height:185px;

    display:flex;

    align-items:flex-end;

    justify-content:center;

}


/* ==================================================
   CHARACTER IMAGE
================================================== */

#companion-image{

    display:block;

    width:auto;

    height:180px;

    max-width:170px;

    object-fit:contain;

    object-position:
        center bottom;

    filter:
        drop-shadow(
            0 8px 12px
            rgba(70,40,70,.18)
        )
        drop-shadow(
            0 0 8px
            rgba(255,220,235,.35)
        );

    animation:
        companionFloat
        3s ease-in-out
        infinite;

}


/* ==================================================
   CHARACTER FLOAT
================================================== */

@keyframes companionFloat{

    0%,
    100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-5px);

    }

}


/* ==================================================
   #13B.2A : MAGICAL COMPANION BUBBLE
================================================== */

.companion-card{

    position:relative;

    width:300px;

    max-width:300px;

    padding:
        17px 22px 18px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.97),
            rgba(255,241,248,.94)
        );

    border:
        2px solid
        rgba(255,183,211,.55);

    box-shadow:
        0 12px 30px
        rgba(130,70,100,.15),

        inset 0 0 0 1px
        rgba(255,255,255,.8);

    backdrop-filter:
        blur(10px);

    text-align:center;

    overflow:visible;

}

.companion-card::after{

    content:"✦";

    position:absolute;

    top:-10px;

    right:16px;

    font-size:18px;

    color:#f5b6d0;

    text-shadow:
        0 0 8px
        rgba(255,190,220,.8);

    animation:
        companionSparkle 2.4s
        ease-in-out infinite;

}

@keyframes companionSparkle{

    0%,
    100%{

        opacity:.45;

        transform:
            scale(.85)
            rotate(0deg);

    }

    50%{

        opacity:1;

        transform:
            scale(1.15)
            rotate(15deg);

    }

}

/* ==================================================
   BUBBLE TAIL
================================================== */

.companion-card::before{

    content:"";

    position:absolute;

    left:-8px;

    bottom:24px;

    width:17px;

    height:17px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fff2f8
        );

    transform:
        rotate(45deg);

    border-left:
        2px solid
        rgba(255,183,211,.45);

    border-bottom:
        2px solid
        rgba(255,183,211,.45);

}


/* ==================================================
   CHARACTER NAME
================================================== */

.companion-name{

    margin-bottom:4px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.04em;

    color:#e68aaa;

}


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

#companion-text{

    margin:0;

    font-size:17px;

    line-height:1.4;

    color:#6d4c41;

}


/* ==================================================
   HIDE IMAGE UNTIL JS SETS IT
================================================== */

#companion-image[src=""]{

    display:none;

}

/* ==================================================
   #13C.0 — SCENE 0 PANDA COMPANION
   DESKTOP
================================================== */

#scene0-companion{

    position:absolute;

    left:50%;

    bottom:170px;

    transform:
        translateX(-50%)
        translateY(25px);

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:8px;

    z-index:40;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .6s ease,
        transform .6s ease;

}


/* ==================================================
   ACTIVE
================================================== */

#opening-screen.scene0-companion-active
#scene0-companion{

    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);

}


/* ==================================================
   PANDA
================================================== */

#scene0-companion-image{

    width:auto;

    height:145px;

    max-width:130px;

    object-fit:contain;

    object-position:
        center bottom;

    filter:
        drop-shadow(
            0 8px 12px
            rgba(70,40,70,.18)
        )
        drop-shadow(
            0 0 8px
            rgba(255,220,235,.35)
        );

    animation:
        scene0CompanionFloat
        3s ease-in-out
        infinite;

}


/* ==================================================
   PANDA FLOAT
================================================== */

@keyframes scene0CompanionFloat{

    0%,
    100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-5px);

    }

}


/* ==================================================
   SPEECH BUBBLE
================================================== */

#scene0-companion-bubble{

    position:relative;

    width:310px;

    max-width:310px;

    padding:
        15px 20px;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.97),
            rgba(255,241,248,.95)
        );

    border:
        2px solid
        rgba(255,183,211,.55);

    box-shadow:

        0 12px 30px
        rgba(100,50,80,.15),

        inset 0 0 0 1px
        rgba(255,255,255,.8);

    backdrop-filter:
        blur(10px);

    text-align:center;

}


/* ==================================================
   SPEECH TAIL
================================================== */

#scene0-companion-bubble::before{

    content:"";

    position:absolute;

    left:-9px;

    bottom:24px;

    width:17px;

    height:17px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fff2f8
        );

    transform:
        rotate(45deg);

    border-left:
        2px solid
        rgba(255,183,211,.45);

    border-bottom:
        2px solid
        rgba(255,183,211,.45);

}


/* ==================================================
   TEXT
================================================== */

#scene0-companion-text{

    margin:0;

    font-size:16px;

    line-height:1.45;

    color:#6D4C41;

}

#welcome-screen .welcome-panda,
#welcome-screen .welcome-bear{

    opacity:1 !important;

    visibility:visible !important;
}

/* ==================================================
   SCENE 7 : COMPANION
================================================== */

#scene7-companion{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:50;

}


/* ==================================================
   SCENE 7 : CHARACTER
================================================== */

#scene7-companion-character{

    position:absolute;

    right:6%;
    bottom:35px;

    width:230px;
    height:auto;

    z-index:51;

    opacity:0;

    transform:
        translateY(25px)
        scale(.96);

    transition:
        opacity .5s ease,
        transform .5s
        cubic-bezier(.22,.8,.3,1);

}


/* ==================================================
   COMPANION VISIBLE
================================================== */

#scene7-companion.show
#scene7-companion-character{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}


/* ==================================================
   DIALOGUE BUBBLE
================================================== */

#scene7-companion-bubble{

    position:absolute;

    right:6%;

    bottom:175px;

    width:380px;
    max-width:380px;

    padding:
        17px 25px 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(255,245,250,.96)
        );

    border:
        2px solid
        rgba(255,190,215,.65);

    border-radius:24px;

    text-align:center;

    box-shadow:
        0 14px 35px
        rgba(70,40,70,.14),

        0 0 22px
        rgba(255,205,225,.28);

    backdrop-filter:
        blur(10px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(15px)
        scale(.96);

    transition:
        opacity .5s ease,
        transform .5s
        cubic-bezier(.22,.8,.3,1);

    z-index:60;

}


/* ==================================================
   BUBBLE VISIBLE
================================================== */

#scene7-companion.show
#scene7-companion-bubble{

    opacity:1;

    visibility:visible;

    transform:
        translateY(0)
        scale(1);

}


/* ==================================================
   BUBBLE TAIL
================================================== */

#scene7-companion-bubble::after{

    content:"";

    position:absolute;

    right:-8px;
    bottom:24px;

    width:16px;
    height:16px;

    background:
        rgba(255,250,252,.98);

    border-top:
        2px solid
        rgba(255,190,215,.65);

    border-right:
        2px solid
        rgba(255,190,215,.65);

    transform:
        rotate(45deg);

}


/* ==================================================
   COMPANION NAME
================================================== */

#scene7-companion-name{

    display:inline-block;

    margin-bottom:7px;

    padding:
        4px 12px;

    border-radius:999px;

    background:
        rgba(255,220,235,.65);

    color:#c96f94;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

}


/* ==================================================
   COMPANION TEXT
================================================== */

#scene7-companion-text{

    margin:0;

    color:#624c52;

    font-size:21px;

    line-height:1.45;

    font-weight:500;

    letter-spacing:.1px;

}


/* ==================================================
   DECORATIVE SPARKLE
================================================== */

#scene7-companion-bubble::before{

    content:"✦";

    position:absolute;

    top:8px;
    left:15px;

    font-size:13px;

    color:
        rgba(226,145,180,.75);

}

/* ==================================================
   SCENE 8 : COMPANION
   FINAL ENDING
================================================== */

#scene8-companion{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:50;

}


/* ==================================================
   CHARACTER
================================================== */

#scene8-companion-character{

    position:absolute;

    right:6%;
    bottom:35px;

    width:230px;
    height:auto;

    z-index:51;

    opacity:0;

    transform:
        translateY(25px)
        scale(.96);

    transition:
        opacity .5s ease,
        transform .5s
        cubic-bezier(.22,.8,.3,1);

}


/* ==================================================
   CHARACTER VISIBLE
================================================== */

#scene8-companion.show
#scene8-companion-character{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}


/* ==================================================
   DIALOGUE BUBBLE
================================================== */

#scene8-companion-bubble{

    position:absolute;

    right:6%;

    bottom:175px;

    width:380px;
    max-width:380px;

    padding:
        17px 25px 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(255,245,250,.96)
        );

    border:
        2px solid
        rgba(255,190,215,.65);

    border-radius:24px;

    text-align:center;

    box-shadow:
        0 14px 35px
        rgba(70,40,70,.14),

        0 0 22px
        rgba(255,205,225,.28),

        inset 0 1px 0
        rgba(255,255,255,.95);

    backdrop-filter:
        blur(10px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(15px)
        scale(.96);

    transition:
        opacity .5s ease,
        transform .5s
        cubic-bezier(.22,.8,.3,1);

    z-index:60;

}


/* ==================================================
   BUBBLE VISIBLE
================================================== */

#scene8-companion.show
#scene8-companion-bubble{

    opacity:1;

    visibility:visible;

    transform:
        translateY(0)
        scale(1);

}


/* ==================================================
   BUBBLE TAIL
================================================== */

#scene8-companion-bubble::after{

    content:"";

    position:absolute;

    right:-8px;
    bottom:24px;

    width:16px;
    height:16px;

    background:
        rgba(255,250,252,.98);

    border-top:
        2px solid
        rgba(255,190,215,.65);

    border-right:
        2px solid
        rgba(255,190,215,.65);

    transform:
        rotate(45deg);

}


/* ==================================================
   COMPANION NAME
================================================== */

#scene8-companion-name{

    display:inline-block;

    margin-bottom:7px;

    padding:
        4px 12px;

    border-radius:999px;

    background:
        rgba(255,220,235,.65);

    color:#c96f94;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

}


/* ==================================================
   COMPANION TEXT
================================================== */

#scene8-companion-text{

    margin:0;

    color:#624c52;

    font-size:21px;

    line-height:1.45;

    font-weight:500;

    letter-spacing:.1px;

}


/* ==================================================
   DECORATIVE SPARKLE
================================================== */

#scene8-companion-bubble::before{

    content:"✦";

    position:absolute;

    top:8px;
    left:15px;

    font-size:13px;

    color:
        rgba(226,145,180,.75);

}

/* ==================================================
   GLOBAL VOICE SKIP
================================================== */

#voiceSkipBtn{

    position:fixed;

    right:28px;
    bottom:28px;

    z-index:9999;

    display:none;

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

    padding:
        10px 18px;

    min-width:105px;

    border:none;

    border-radius:999px;

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

    color:#b85f86;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    box-shadow:
        0 8px 24px
        rgba(70,40,70,.16),

        0 0 18px
        rgba(255,205,225,.30);

    backdrop-filter:
        blur(10px);

    cursor:pointer;

    opacity:0;

    transform:
        translateY(8px)
        scale(.96);

    transition:
        opacity .25s ease,
        transform .25s ease,
        background .2s ease;

    pointer-events:none;

}


/* ==========================================
   SHOW
========================================== */

#voiceSkipBtn.show{

    display:flex;

    opacity:1;

    transform:
        translateY(0)
        scale(1);

    pointer-events:auto;

}


/* ==========================================
   HOVER
========================================== */

#voiceSkipBtn:hover{

    background:
        rgba(255,245,250,.98);

    transform:
        translateY(-1px)
        scale(1.02);

}


/* ==========================================
   ACTIVE
========================================== */

#voiceSkipBtn:active{

    transform:
        scale(.97);

}

/* ==================================================
   SCENE 3 — DESKTOP COMPANION POSITION
   A2 DESKTOP POLISH — REVISION 1
   ================================================== */

@media screen and (min-width: 769px){

    /* ==========================================
       CHARACTER
       ========================================== */

    .game-bear.companion-visible,
    .game-panda.companion-visible{

        left:auto !important;
        right:6% !important;

        top:auto !important;
        bottom:35px !important;

        width:300px !important;
        max-width:none !important;

        transform:
            translateX(0)
            scale(1) !important;

        z-index:39;
    }


    /* ==========================================
       SCENE 3 BUBBLE
       ========================================== */

    #scene3-companion-bubble{

        position:absolute !important;

        left:auto !important;
        right:6% !important;

        top:auto !important;
        bottom:235px !important;

        width:330px !important;
        max-width:330px !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        box-sizing:border-box;

        display:block !important;

        padding:
            15px 20px 17px !important;

        overflow:visible;

        transform:
            translateY(18px)
            scale(.96);
    }


    /* ==========================================
       BUBBLE ACTIVE
       ========================================== */

    #scene3-companion-bubble.show{

        height:auto !important;

        min-height:0 !important;

        transform:
            translateY(0)
            scale(1);
    }


    /* ==========================================
       BUBBLE TEXT
       ========================================== */

    #scene3-companion-text{

        margin:0;

        font-size:18px;

        line-height:1.45;

        white-space:normal;

        overflow:visible;
    }

}

/* ==================================================
   SCENE 4 — DESKTOP COMPANION
   MATCH SCENE 6
   ================================================== */

@media screen and (min-width:769px){

    /* ==========================================
       CHARACTER
       Sama saiz + kedudukan Scene 6
       ========================================== */

    #scene4-companion-panda{

        right:6% !important;
        bottom:35px !important;

        width:190px !important;
        height:auto !important;

        left:auto !important;

        z-index:51;
    }


    /* ==========================================
       BUBBLE
       Sama saiz + kedudukan Scene 6
       ========================================== */

    #scene4-companion-bubble{

        right:6% !important;
        bottom:175px !important;

        left:auto !important;
        top:auto !important;

        width:330px !important;
        max-width:330px !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        box-sizing:border-box;

        z-index:60;
    }


    /* ==========================================
       BUBBLE ACTIVE
       Buang translateX(-50%)
       ========================================== */

    #scene4-companion.show
    #scene4-companion-bubble{

        transform:
            translateY(0)
            scale(1) !important;
    }

}

/* ==================================================
   SCENE 5 — DESKTOP COMPANION
   MATCH SCENE 6
   ================================================== */

@media screen and (min-width:769px){

    /* ==========================================
       CHARACTER
       ========================================== */

    #scene5-companion-panda{

        right:6% !important;
        bottom:35px !important;

        width:190px !important;
        height:auto !important;

        left:auto !important;

        z-index:51;
    }


    /* ==========================================
       BUBBLE
       ========================================== */

    #scene5-companion-bubble{

        right:6% !important;
        bottom:175px !important;

        left:auto !important;
        top:auto !important;

        width:330px !important;
        max-width:330px !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        box-sizing:border-box;

        z-index:60;
    }


    /* ==========================================
       BUBBLE ACTIVE
       ========================================== */

    #scene5-companion.show
    #scene5-companion-bubble{

        transform:
            translateY(0)
            scale(1) !important;
    }

}

/* ==================================================
   SCENE 7 — DESKTOP COMPANION
   MATCH SCENE 6
   ================================================== */

@media screen and (min-width:769px){

    /* ==========================================
       CHARACTER
       Sama saiz + kedudukan Scene 6
       ========================================== */

    #scene7-companion-character{

        right:6% !important;
        bottom:35px !important;

        width:190px !important;
        height:auto !important;

        left:auto !important;

        z-index:51;
    }


    /* ==========================================
       BUBBLE
       Sama saiz + kedudukan Scene 6
       ========================================== */

    #scene7-companion-bubble{

        right:6% !important;
        bottom:175px !important;

        left:auto !important;
        top:auto !important;

        width:330px !important;
        max-width:330px !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        box-sizing:border-box;

        z-index:60;
    }


    /* ==========================================
       BUBBLE ACTIVE
       ========================================== */

    #scene7-companion.show
    #scene7-companion-bubble{

        transform:
            translateY(0)
            scale(1) !important;
    }

}

/* ==================================================
   SCENE 8 — DESKTOP COMPANION
   FINAL ENDING
   MATCH SCENE 6 + SCENE 7
================================================== */

@media screen and (min-width:769px){

    /* ==========================================
       CHARACTER
       ========================================== */

    #scene8-companion-character{

        right:6% !important;
        bottom:35px !important;

        width:190px !important;
        height:auto !important;

        left:auto !important;

        z-index:51;
    }


    /* ==========================================
       DIALOGUE BUBBLE
       ========================================== */

    #scene8-companion-bubble{

        right:6% !important;
        bottom:175px !important;

        left:auto !important;
        top:auto !important;

        width:330px !important;
        max-width:330px !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        box-sizing:border-box;

        z-index:60;
    }


    /* ==========================================
       BUBBLE ACTIVE
       ========================================== */

    #scene8-companion.show
    #scene8-companion-bubble{

        transform:
            translateY(0)
            scale(1) !important;
    }

}

/* ==================================================
   SCENE 0 — DESKTOP COMPANION
   PANDA AT OUTER LEFT
   BUBBLE TOWARD CENTER
================================================== */

@media screen and (min-width:769px){

    /* ==========================================
       COMPANION CONTAINER
       ========================================== */

    #scene0-companion{

        position:absolute !important;

        left:4% !important;
        right:auto !important;

        bottom:35px !important;
        top:auto !important;

        width:500px !important;
        height:230px !important;

        display:block !important;

        transform:none !important;

        z-index:50;
    }


    /* ==========================================
       PANDA
       OUTER LEFT POSITION
       ========================================== */

    #scene0-companion-panda{

        position:absolute !important;

        left:0 !important;
        right:auto !important;

        bottom:0 !important;

        width:230px !important;
        height:auto !important;

        flex:none !important;

        z-index:51;
    }


    /* ==========================================
       DIALOGUE BUBBLE
       TOWARD CENTER
       ========================================== */

    #scene0-companion-bubble{

        position:absolute !important;

        left:145px !important;
        right:auto !important;

        bottom:95px !important;
        top:auto !important;

        width:330px !important;
        max-width:330px !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        box-sizing:border-box;

        z-index:60;

        transform:
            translateY(15px)
            scale(.96);
    }


    /* ==========================================
       BUBBLE VISIBLE
       ========================================== */

    #scene0-companion.show
    #scene0-companion-bubble{

        transform:
            translateY(0)
            scale(1) !important;
    }

}