:root {
    --base: #ffffff;
    --text: #3a3236;
    --red: #d7141e;
    --crimson: #a0102a;
    --rose: #c2456b;
    --thorn: #b8506e;
    --lilac: #b7a3c4;
    --ribbon: #4a4448;
}

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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: var(--base) url("bg.webp") left center / cover no-repeat;
    color: var(--text);
    font-family: Arial, sans-serif;
    overflow: hidden;
    position: relative;
    user-select: none;
    cursor: pointer;
}

.jumping-text {
    position: absolute;
    z-index: 2;
    display: flex;
    font-size: 6vw;
    font-weight: bold;
    white-space: nowrap;
    color: var(--crimson);
    text-shadow: 0 0 12px #fff, 0 0 4px #fff;
}

.jumping-text span {
    display: inline-block;
    animation: jump 0.3s infinite alternate ease-in-out;
}

@keyframes jump {
    from { transform: translateY(0); }
    to   { transform: translateY(-0.8em); }
}

.marquee-row {
    position: absolute;
    left: 0;
    width: 100vw;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
}

.marquee-text {
    display: inline-block;
    padding-left: 100vw;
    font-weight: bold;
    animation: marquee linear infinite;
}

@keyframes marquee {
    from { transform: translateX(30%); }
    to   { transform: translateX(-100%); }
}

.pop-text {
    position: absolute;
    z-index: 3;
    font-size: 1.5vw;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: float-away 1s ease-out forwards;
}

@keyframes float-away {
    from { opacity: 1; transform: translate(-50%, -50%); }
    to   { opacity: 0; transform: translate(-50%, calc(-50% - 150px)); }
}

@media (prefers-reduced-motion: reduce) {
    .jumping-text span,
    .marquee-text {
        animation: none;
    }
}