* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    background: #f8f1e5;
}

.paper {
    position: relative;

    width: 100vw;
    height: 100vh;
    height: 100svh;

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

    padding: 28px;

    background:
        radial-gradient(circle at 50% 45%, rgba(255, 250, 239, 0.95) 0%, rgba(248, 241, 229, 0.98) 62%, rgba(231, 218, 198, 1) 100%);
}

.paper::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.38;

    background-image:
        linear-gradient(90deg, rgba(120, 93, 72, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(120, 93, 72, 0.028) 1px, transparent 1px);

    background-size: 18px 18px;
    mix-blend-mode: multiply;
}

.paper::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.5), transparent 28%),
        radial-gradient(circle at 85% 80%, rgba(164, 121, 91, 0.10), transparent 32%);
}

.message-wrap {
    position: relative;
    z-index: 2;

    max-width: 92vw;

    text-align: center;

    opacity: 1;
}

.message {
    min-height: 2.35em;

    font-family: "Caveat", cursive;
    font-size: clamp(52px, 13vw, 96px);
    font-weight: 500;
    line-height: 1.05;

    color: #5c443b;

    letter-spacing: 0.01em;

    text-shadow:
        0.4px 0.4px 0 rgba(92, 68, 59, 0.22),
        -0.3px 0.2px 0 rgba(92, 68, 59, 0.12);

    filter: url("#none");
}

.message .char {
    opacity: 0;

    display: inline-block;

    transform: translateY(5px) rotate(-1deg);
    filter: blur(2px);

    animation: charIn 320ms ease forwards;
}

.message .space {
    display: inline-block;
    width: 0.32em;
}

.cursor {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 999px;

    background: rgba(92, 68, 59, 0.42);

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

    opacity: 0;

    box-shadow:
        0 0 12px rgba(92, 68, 59, 0.20),
        0 0 1px rgba(92, 68, 59, 0.8);

    transition:
        left 130ms ease,
        top 130ms ease,
        opacity 200ms ease;
}

.cursor.visible {
    opacity: 1;
}

@keyframes charIn {
    0% {
        opacity: 0;
        transform: translateY(7px) rotate(-2deg) scale(0.98);
        filter: blur(3px);
    }

    60% {
        opacity: 0.92;
        filter: blur(0.5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
        filter: blur(0);
    }
}

@media (orientation: landscape) {
    .message {
        font-size: clamp(42px, 8vw, 76px);
    }
}

.message-wrap.fade-out {
    animation: messageFadeOut 1.8s ease forwards;
}

.bouquet-wrap {
    position: absolute;
    z-index: 3;

    inset: 0;

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

    padding: 28px;

    opacity: 0;
    transform: translateY(18px) scale(0.97);

    pointer-events: none;
}

.bouquet-wrap.visible {
    animation: bouquetAppear 2.4s ease forwards;
}

.bouquet-placeholder img {
    width: min(82vw, 430px);
    height: auto;

    filter:
        drop-shadow(0 20px 25px rgba(80, 50, 40, 0.12));
}

@keyframes messageFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-14px) scale(0.985);
        filter: blur(8px);
    }
}

@keyframes bouquetAppear {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.96);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}