body {
            margin: 0;
            background-image: url("./src/background_kerst.png");
            height: 100vh;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-family: 'Fredoka', sans-serif;
        }

        /* disable parent fade when we do letter-by-letter */
        .mededeling.letter-cascade {
            animation: none !important;
            opacity: 1 !important;
        }

        .mededeling {
            font-family: 'Fredoka', sans-serif;
            font-size: 55px;
            max-width: 80vw;
            margin-bottom: 2rem;
            opacity: 0;
            animation: fadeIn 1s ease-in-out forwards;
            z-index: 100;
            color: #dec489; /* Fallback color */
            overflow-wrap: normal;
            word-break: normal;
            hyphens: none;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeOut {
            from { opacity: 1; transform: translateY(0); }
            to   { opacity: 0; transform: translateY(-20px); }
        }

        .mededeling.enter-fade {
            animation: fadeIn 0.25s ease-out forwards; /* korte, subtiele fade-in */
        }

        .mededeling.exit-fade {
            animation: fadeOut 0.6s ease-in forwards !important; /* altijd winnen */
        }

        .word{
            display:inline-block;   /* keeps the whole word on one line */
            white-space: nowrap;
        }
        /* Apply single color to words (not emoji-only) */
        .word:not(.emoji-only) {
            color: #dec489;
        }
        /* Emoji-only words keep their original color */
        .word.emoji-only {
            color: inherit;
        }
        .char{
            display:inline-block;
            opacity:0;
            transform: translateY(30px);
            animation-name: flyUp;
            animation-duration: 0.5s;
            animation-timing-function: cubic-bezier(0.68,-0.6,0.32,1.6);
            animation-fill-mode: both;
        }

        @keyframes flyUp {
            from { opacity:0; transform: translateY(30px); }
            to   { opacity:1; transform: translateY(0);    }
        }

        /* Image layout styles */
        .mededeling-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            width: 100%;
            max-width: 90vw;
        }

        .mededeling-content.has-image-text {
            flex-direction: row;
        }

        .mededeling-content.image-only {
            justify-content: center;
        }

        .mededeling-image {
            max-width: 40vw;
            max-height: 60vh;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .mededeling-content.image-only .mededeling-image {
            max-width: 80vw;
            max-height: 80vh;
        }

        .mededeling-text {
            flex: 1;
            min-width: 0;
            color: #dec489;
        }

        /* Responsive: stack on smaller screens */
        @media (max-width: 768px) {
            .mededeling-content.has-image-text {
                flex-direction: column !important;
            }

            .mededeling-image {
                max-width: 80vw;
                max-height: 50vh;
            }
        }