@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Poppins:wght@300;400;600&display=swap');

/* Prevent accidental selection */

*{

    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;

}

:root{
    --theme-bg:#fff8fc;
    --theme-bg-deep:#f7e9f1;
    --theme-accent:#ff5d91;
    --theme-accent-2:#f2a0c3;
    --theme-gold:#f0b84b;
    --theme-text:#5d3550;
    --theme-muted:#8a627a;
    --theme-panel:rgba(255,255,255,0.8);
}

body{
    background:
        radial-gradient(circle at top left, rgba(255,93,145,0.18) 0%, transparent 30%),
        radial-gradient(circle at bottom right, rgba(240,184,75,0.18) 0%, transparent 26%),
        linear-gradient(135deg, var(--theme-bg) 0%, var(--theme-bg-deep) 55%, #f1dfe8 100%);
    color:var(--theme-text);
    opacity:0;
    transform:translateY(10px);
    transition:opacity .7s ease, transform .7s ease;
    overflow-x:hidden;
}

body.loaded{
    opacity:1;
    transform:none;
}

body.page-transitioning{
    opacity:0;
    transform:translateY(12px);
}

h1, h2, h3, h4, h5, h6, p, button, span, div{
    color:inherit;
}

.emoji {
    display: inline-block !important;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Android Emoji', 'Segoe UI Symbol', sans-serif !important;
    font-variant-emoji: emoji !important;
    color: inherit !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}

body, p, h1, h2, h3, h4, h5, h6, button, span, div {
    -webkit-text-fill-color: currentColor !important;
}

/* Allow typing */

input,
textarea{

    user-select:text;
    -webkit-user-select:text;

}

/* Toast */

#toast{

    position:fixed;

    left:50%;
    bottom:40px;

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

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

    backdrop-filter:blur(20px);

    color:var(--theme-text);

    padding:15px 30px;

    border-radius:40px;

    font-size:16px;

    z-index:999999;

    transition:.4s;

    opacity:0;

}

#toast.show{

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

    opacity:1;

}

/* Music Button (all pages) */

#musicBtn{

    position:fixed;

    top:20px;

    right:20px;

    width:55px;

    height:55px;

    border-radius:50%;

    border:none;

    cursor:pointer;

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

    color:var(--theme-text);

    font-size:22px;

    backdrop-filter:blur(10px);

    z-index:99999;

    transition:.3s;

}

#musicBtn:hover{

    transform:scale(1.1);

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

}

/* Journey progress */

.journey-progress{
    position:fixed;
    z-index:99998;
    top:21px;
    left:22px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    border:1px solid rgba(255,255,255,.62);
    border-radius:999px;
    background:rgba(255,255,255,.6);
    box-shadow:0 6px 18px rgba(93,53,80,.09);
    backdrop-filter:blur(12px);
}

.journey-progress__dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#e7bfd0;
    transition:transform .25s ease, background .25s ease;
}

.journey-progress__dot.is-complete{
    background:#f29abc;
}

.journey-progress__dot.is-current{
    background:#e24f82;
    transform:scale(1.45);
    box-shadow:0 0 0 3px rgba(226,79,130,.16);
}

.journey-progress__label{
    margin-left:4px;
    color:var(--theme-muted);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.03em;
    white-space:nowrap;
}

button,
a{
    touch-action:manipulation;
}

@media(max-width:768px){
    .journey-progress{
        top:13px;
        left:13px;
        gap:6px;
        padding:8px 10px;
    }

    .journey-progress__dot{
        width:6px;
        height:6px;
    }

    .journey-progress__label{
        font-size:.66rem;
    }

    button,
    a{
        min-height:44px;
    }
}