/* =========================================================
   MAAMVERSE PRIVATE WISH
   DEMO-BASED LAMP LOGIN V46.4
   MOBILE RETURN LAMP FIX
========================================================= */


:root {
    --bg-color: #121417;

    --lamp-matte: #e8e2d9;
    --lamp-shade: #f5f0e6;
    --lamp-base: #d1ccc2;

    --glow-color: rgba(255, 214, 110, 0.30);

    --accent-color: #d4a373;

    --purple: #9b82ff;

    --on: 0;

    --transition:
        0.5s
        cubic-bezier(
            0.4,
            0,
            0.2,
            1
        );
}


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


html,
body {
    min-height: 100%;
}


body {
    min-height: 100vh;
    min-height: 100svh;

    position: relative;

    display: grid;
    place-items: center;

    overflow-x: hidden;

    color: #ffffff;

    background: var(--bg-color);

    font-family:
        "Inter",
        "Noto Sans Bengali",
        system-ui,
        -apple-system,
        sans-serif;

    transition:
        background
        var(--transition);

    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   ROOM LIGHT
========================================================= */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -2;

    background:
        radial-gradient(
            circle at 50% 42%,
            var(--glow-color),
            transparent 69%
        );

    opacity: var(--on);

    transition:
        opacity
        var(--transition);

    pointer-events: none;
}


body::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -3;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(80, 69, 52, calc(var(--on) * .14)),
            transparent 55%
        );

    pointer-events: none;
}


/* =========================================================
   BRAND
========================================================= */

.wish-brand {
    position: fixed;

    left:
        max(
            28px,
            env(safe-area-inset-left)
        );

    top:
        max(
            24px,
            env(safe-area-inset-top)
        );

    z-index: 20;

    display: flex;
    align-items: center;

    gap: 12px;

    color: #ffffff;

    text-decoration: none;

    opacity: .90;

    transition:
        opacity .45s ease;
}


.wish-brand img {
    width: 48px;
    height: 48px;

    object-fit: contain;
}


.wish-brand div {
    display: flex;
    flex-direction: column;
}


.wish-brand strong {
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 4px;
}


.wish-brand span {
    margin-top: 3px;

    color: #797b83;

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

    letter-spacing: 3px;
}


/* =========================================================
   MAIN — DESKTOP DEMO LAYOUT
========================================================= */

.wish-shell {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1000px;

    min-height: 100vh;
    min-height: 100svh;

    padding:
        90px
        24px
        40px;

    display: flex;

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

    gap: 8vmin;
}


/* =========================================================
   LAMP SIDE
========================================================= */

.lamp-side {
    display: flex;

    flex-direction: column;

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

    transition:
        opacity .55s ease,
        transform .55s ease,
        top .55s ease;
}


/* =========================================================
   LAMP — SAME DEMO GEOMETRY
========================================================= */

.lamp-wrapper {
    position: relative;

    width: 280px;
    height: 400px;

    display: flex;

    justify-content: center;

    outline: none;

    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;

    touch-action: manipulation;
}


.lamp-wrapper:focus-visible {
    border-radius: 28px;

    box-shadow:
        0 0 0 2px
        rgba(212, 163, 115, .30);
}


.lamp-svg {
    width: 100%;
    height: 100%;

    overflow: visible;
}


/* =========================================================
   SHADE
========================================================= */

.lamp-shade {
    fill: var(--lamp-shade);

    transition:
        fill
        var(--transition),
        filter
        var(--transition);
}


[data-on="true"] .lamp-shade {
    fill: #ffffff;

    filter:
        drop-shadow(
            0 0 30px
            rgba(255, 255, 200, 0.4)
        );
}


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

.lamp-base {
    fill: var(--lamp-base);
}


/* =========================================================
   LIGHT
========================================================= */

.inner-glow {
    fill: #ffdb8a;

    opacity: 0;

    filter: blur(15px);

    transition:
        opacity
        var(--transition);
}


[data-on="true"] .inner-glow {
    opacity: 0.6;
}


/* =========================================================
   CORD
========================================================= */

.cord-line {
    stroke: #555555;

    stroke-width: 2;

    stroke-linecap: round;
}


.cord-bead {
    fill: var(--accent-color);
}


.cord-hit {
    cursor: ns-resize;

    touch-action: none;
}


/* =========================================================
   BILINGUAL HINT
========================================================= */

.lamp-hint {
    width: 330px;

    margin-top: -48px;

    text-align: center;

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


.lamp-hint strong {
    display: block;

    color: #c8c8cb;

    font-size: 11px;
    font-weight: 600;
}


.lamp-hint > span {
    display: block;

    margin-top: 6px;

    color: #878890;

    font-family:
        "Noto Sans Bengali",
        sans-serif;

    font-size: 10px;

    line-height: 1.55;
}


.lamp-hint small {
    display: inline-block;

    margin-top: 11px;

    color: #62646b;

    font-size: 7px;
}


.lamp-hint small b {
    margin: 0 5px;

    color: #44464d;
}


[data-on="true"] .lamp-hint {
    opacity: 0;

    transform:
        translateY(10px);

    pointer-events: none;
}


/* =========================================================
   LOGIN FORM — SAME DEMO IDEA
========================================================= */

.login-form {
    width: 340px;

    padding: 2.5rem;

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: 30px;

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

    box-shadow:
        0 20px 40px
        rgba(0, 0, 0, 0.3);

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

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(30px);

    transition:
        opacity
        0.36s
        cubic-bezier(
            0.175,
            0.885,
            0.32,
            1.275
        ),

        transform
        0.36s
        cubic-bezier(
            0.175,
            0.885,
            0.32,
            1.275
        );
}


.login-form.active {
    opacity: 1;

    transform:
        translateY(0);

    pointer-events: auto;
}


/* =========================================================
   LOGIN HEADING
========================================================= */

.login-heading {
    text-align: center;

    margin-bottom: 1.6rem;
}


.login-kicker {
    display: block;

    margin-bottom: 7px;

    color: var(--accent-color);

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

    letter-spacing: 3px;
}


.login-heading h1 {
    color: #ffffff;

    font-size: 1.5rem;
    font-weight: 500;
}


.login-heading p {
    margin-top: 7px;

    color: #83858c;

    font-family:
        "Noto Sans Bengali",
        sans-serif;

    font-size: .72rem;

    line-height: 1.55;
}


/* =========================================================
   FORM
========================================================= */

.form-group {
    margin-bottom: 1.2rem;
}


.form-group label {
    margin-bottom: .5rem;
    margin-left: 5px;

    display: flex;

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

    gap: 10px;
}


.form-group label span {
    color: #999999;

    font-size: .85rem;
}


.form-group label small {
    color: #686a71;

    font-family:
        "Noto Sans Bengali",
        sans-serif;

    font-size: .66rem;
}


.form-group > input,
.pin-field {
    width: 100%;

    border:
        1px solid
        transparent;

    border-radius: 15px;

    color: #ffffff;

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

    transition:
        .3s;
}


.form-group > input {
    padding: 14px 18px;

    outline: none;

    font-size: 1rem;
}


.form-group > input:focus {
    border-color:
        var(--accent-color);

    background:
        rgba(255, 255, 255, 0.12);
}


.form-group input::placeholder {
    color: #65676d;
}


/* =========================================================
   PIN
========================================================= */

.pin-field {
    position: relative;

    display: flex;
    align-items: center;
}


.pin-field:focus-within {
    border-color:
        var(--accent-color);

    background:
        rgba(255, 255, 255, 0.12);
}


.pin-field input {
    width: 100%;

    padding:
        14px
        48px
        14px
        18px;

    border: 0;
    outline: none;

    color: #ffffff;

    font-size: 1rem;

    background: transparent;
}


.pin-toggle {
    position: absolute;

    right: 8px;
    top: 50%;

    width: 36px;
    height: 36px;

    transform:
        translateY(-50%);

    border: 0;

    border-radius: 10px;

    color: #a2a2a4;

    background: transparent;

    cursor: pointer;
}


/* =========================================================
   STATUS
========================================================= */

.wish-status {
    min-height: 20px;

    margin:
        -2px
        0
        8px;

    color: #8f9096;

    font-size: .72rem;

    line-height: 1.45;

    text-align: center;
}


.wish-status.error,
.wish-status.is-error {
    color: #ff96aa;
}


.wish-status.success,
.wish-status.is-success {
    color: #83e0ba;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.login-btn {
    width: 100%;

    padding: 13px 15px;

    margin-top: 3px;

    display: flex;

    flex-direction: column;

    align-items: center;

    border: none;

    border-radius: 15px;

    cursor: pointer;

    color: #121417;

    background:
        linear-gradient(
            135deg,
            #bf953f,
            #fcf6ba,
            #b38728,
            #fcf6ba,
            #aa771c
        );

    transition: .3s;
}


.login-btn span {
    font-size: .95rem;
    font-weight: 600;
}


.login-btn small {
    margin-top: 3px;

    font-family:
        "Noto Sans Bengali",
        sans-serif;

    font-size: .68rem;
    font-weight: 600;

    opacity: .67;
}


.login-btn:hover {
    transform:
        scale(1.02);

    background:
        var(--lamp-shade);
}


.login-btn:disabled {
    cursor: wait;

    opacity: .65;

    transform: none;
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 700px) {

    body {
        place-items: stretch;
    }


    .wish-brand {
        left: 16px;
        top: 14px;
    }


    .wish-brand img {
        width: 38px;
        height: 38px;
    }


    .wish-brand strong {
        font-size: 9px;

        letter-spacing: 2.7px;
    }


    .wish-brand span {
        font-size: 5px;

        letter-spacing: 2.1px;
    }


    .wish-shell {
        min-height: 100svh;

        padding:
            70px
            14px
            24px;

        display: flex;

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


    .lamp-side {
        width: 100%;
    }


    .lamp-wrapper {
        width: 250px;
        height: 357px;
    }


    .lamp-hint {
        width:
            min(
                330px,
                92%
            );

        margin-top: -43px;
    }


    /* =====================================================
       MOBILE LOGIN
       Login comes to foreground.
       It does NOT stack underneath the lamp.
    ====================================================== */

    .login-form {
        position: fixed;

        z-index: 100;

        left: 50%;
        top: 59%;

        width:
            min(
                380px,
                calc(100% - 24px)
            );

        max-height:
            calc(
                100svh - 190px
            );

        margin: 0;

        padding:
            27px 22px;

        overflow-y: auto;

        visibility: hidden;

        opacity: 0;

        pointer-events: none;

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

        background:
            rgba(24, 25, 29, .91);

        box-shadow:
            0 28px 80px
            rgba(0, 0, 0, .50);

        transition:
            opacity .36s ease,
            transform .36s ease,
            visibility .36s ease;
    }


    .login-form.active {
        visibility: visible;

        opacity: 1;

        pointer-events: auto;

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


    /* =====================================================
       MOBILE RETURN LAMP

       IMPORTANT:
       Lamp remains visible and clickable above login.

       Tap / pull again:
       ON -> OFF
       Login hides
       Full lamp scene returns.
    ====================================================== */

    [data-on="true"] .lamp-side {
        position: fixed;

        z-index: 140;

        left: 50%;
        top: 53px;

        width: 250px;

        min-height: 0;

        opacity: 1;

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

        transform-origin:
            top center;

        pointer-events: auto;

        transition:
            opacity .45s ease,
            transform .55s ease,
            top .55s ease;
    }


    /*
       Opening hint is no longer needed
       while the login card is visible.
    */

    [data-on="true"] .lamp-hint {
        display: none;
    }


    /*
       Keep brand quiet while login is open.
    */

    [data-on="true"] .wish-brand {
        opacity: .25;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 430px) {

    .lamp-wrapper {
        width: 220px;
        height: 314px;
    }


    .lamp-hint {
        margin-top: -36px;
    }


    .lamp-hint strong {
        font-size: 10px;
    }


    .lamp-hint > span {
        font-size: 9px;
    }


    .lamp-hint small {
        font-size: 6.5px;
    }


    /*
       Login stays lower so the small return lamp
       remains clearly visible above it.
    */

    .login-form {
        top: 60%;

        padding:
            24px
            18px;

        max-height:
            calc(
                100svh - 165px
            );

        border-radius: 24px;
    }


    .login-heading {
        margin-bottom: 1.35rem;
    }


    .login-heading h1 {
        font-size: 1.38rem;
    }


    .form-group {
        margin-bottom: 1rem;
    }


    /*
       Small return lamp.
    */

    [data-on="true"] .lamp-side {
        top: 47px;

        width: 220px;

        transform:
            translateX(-50%)
            scale(.38);
    }

}


/* =========================================================
   SHORT PHONE
========================================================= */

@media
(max-width: 430px)
and
(max-height: 700px) {

    .lamp-wrapper {
        width: 190px;
        height: 271px;
    }


    .lamp-hint {
        margin-top: -31px;
    }


    .login-form {
        top: 61%;

        max-height:
            calc(
                100svh - 145px
            );

        padding:
            20px
            17px;
    }


    [data-on="true"] .lamp-side {
        top: 38px;

        width: 190px;

        transform:
            translateX(-50%)
            scale(.34);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}