@-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing) {
    /* Your existing rules for text color/shadow and background image */
    .click-target-container *, .top-sites-list * {
        color: #fff !important;
        text-shadow: 2px 2px 2px #222 !important;
    }

    body::before {
        content: "";
        z-index: -1;
        position: fixed;
        top: 0;
        left: 0;
        background: #f9a no-repeat url(img/Black01NoShip.png) center;
        background-size: cover;
        width: 100vw;
        height: 100vh;
    }

    /* --- LOGO & WORDMARK CUSTOMIZATION --- */

    /* Hide the original Firefox wordmark */
    .logo-and-wordmark-wrapper .wordmark {
        display: none !important;
    }

    /* Center the logo horizontally within its wrapper */
    .logo-and-wordmark-wrapper {
        display: flex !important;
        justify-content: center !important; /* Centers children horizontally */
        align-items: center !important; /* Centers children vertically if needed */
        height: auto !important; /* Allow height to adjust to logo */
        margin-bottom: 20px !important; /* Adjust space below logo if needed */
    }

    /* Change Firefox Logo to Nightly Logo (using local file path) */
    .logo-and-wordmark-wrapper .logo {
        /* IMPORTANT: Ensure 'nightly-logo.svg' matches the exact filename you placed in the 'img' folder */
        background-image: url("img/Firefox Nightly logo.svg") !important;

        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        width: 100px !important; /* Adjust logo width if needed */
        height: 100px !important; /* Adjust logo height if needed (maintain aspect ratio) */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* --- ANIMATED TEXT CUSTOMIZATION --- */

    /* Hide any children within the search wrapper to ensure the original search input/button are gone */
    .search-inner-wrapper > * {
        display: none !important;
    }

    /* Target the container for the animated text */
    .search-inner-wrapper {
        position: relative !important;
        display: block !important;
        height: 60px !important; /* Adjust height for your text size */
        margin-top: 15px !important; /* Adjust spacing from the logo */
        margin-bottom: 15px !important; /* Adjust spacing below */
        overflow: hidden !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Common styles for both animated text elements */
    .search-inner-wrapper::before,
    .search-inner-wrapper::after {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        color: white !important;
        /* Using system-ui, sans-serif. If you found a specific font from Browser Toolbox,
           replace this line with your exact font-family stack. */
        font-family: system-ui, sans-serif !important;
        font-size: 2.2em !important;
        font-weight: 500 !important;
        text-align: center !important;
        line-height: 1.2 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    /* First Text Element */
    .search-inner-wrapper::before {
        content: "firstPhrasePlaceholder"; /* Your first phrase */
        animation: textFadeA 8s forwards; /* Increased total duration to 8s */
    }

    /* Second Text Element */
    .search-inner-wrapper::after {
        content: "secondPhrasePlaceholder"; /* Your second phrase (ellipses removed) */
        animation: textFadeB 8s forwards; /* Increased total duration to 8s */
    }

    /* Keyframes for the first text (Text A) */
    @keyframes textFadeA {
        0% { opacity: 1; }
        50% { opacity: 1; } /* Stays visible for ~4s (50% of 8s) */
        75% { opacity: 0; }    /* Fades out by ~6s (1s transition) */
        100% { opacity: 0; }   /* Stays hidden for the rest */
    }

    /* Keyframes for the second text (Text B) */
    @keyframes textFadeB {
        0% { opacity: 0; }     /* Stays hidden for the first ~5s */
        62.5% { opacity: 0; }
        75% { opacity: 1; }    /* Fades in to visible by ~6s */
        100% { opacity: 1; }   /* Stays visible for the rest of the animation */
    }
}