/* =========================================================
   HOME — HEADER LOGO + ANIMATION (DESKTOP ≥769px)
   ========================================================= */

@media (min-width: 769px) {
    /* ---------------------------------------------
       0. No-JS fallback (visible immediately)
       --------------------------------------------- */
    .no-js .home .logo-text-ai,
    .no-js .home .logo-text-innovation,
    .no-js .home .logo-text-lab {
        opacity: 1 !important;
        filter: none !important;
        transition: none !important;
    }

    /* ---------------------------------------------
       1. Default state (hidden, no transitions yet)
       --------------------------------------------- */
    .home .logo-text-ai,
    .home .logo-text-innovation,
    .home .logo-text-lab {
        opacity: 0;
        filter: blur(12px);
        transition: none;
    }

    /* ---------------------------------------------
       2. JS applies .animate-logo → transitions allowed
       --------------------------------------------- */
    .home.animate-logo .logo-text-ai,
    .home.animate-logo .logo-text-innovation,
    .home.animate-logo .logo-text-lab {
        transition:
            opacity 0.9s ease-out,
            filter 1.2s ease-out;
    }

    /* ---------------------------------------------
       3. Final visible states (staggered)
       --------------------------------------------- */
    .home.animate-logo .logo-text-ai {
        opacity: 1;
        filter: blur(0);
        transition-delay: 0.2s;
    }

    .home.animate-logo .logo-text-innovation {
        opacity: 1;
        filter: blur(0);
        transition-delay: 0.6s;
    }

    .home.animate-logo .logo-text-lab {
        opacity: 1;
        filter: blur(0);
        transition-delay: 1s;
    }

    /* ---------------------------------------------
       4. Reduced Motion = never animate
       --------------------------------------------- */
    @media (prefers-reduced-motion: reduce) {
        .home .logo-text-ai,
        .home .logo-text-innovation,
        .home .logo-text-lab {
            opacity: 1 !important;
            filter: none !important;
            transition: none !important;
        }
    }
}


/* =========================================================
   HOME — CARD + ICON FIXES
   ========================================================= */

body.home .row > .primary {
    margin-bottom: 0;
}

body.home .home-stakeholder-cards svg {
    width: 20px;
    min-width: 20px;
    height: 22px;
    display: inline-block;
}

body.home .home-stakeholder-cards svg path {
    fill: gray;
}

body.home .home-stakeholder-cards .arrow-title-row {
    gap: 5px;
}

/* =========================================================
   HOME — QUOTE SECTION
   ========================================================= */

body.home .quote-container {
    margin: calc(var(--wp--preset--spacing--70) * 1.5) 0;
}

@media (max-width: 768px) {
    body.home .quote-wrapper {
        margin-top: -2em !important;
    }

    body.home .quote-container figure{
        width: 100%;
    }

    body.home .quote-container figure img{
        width: 100%!important;
    }
}

@media (max-width: 920px) {
    body.home .quote-wrapper p {
        font-size: 1.25em !important;
    }

    body.home .quote-container {
        margin-bottom: 2em;
    }
}

@media (min-width: 920px) {
    body.home .quote-container {
        position: relative;
        margin: calc(var(--wp--preset--spacing--70) * 2.5) 0;
    }

    body.home .quote-wrapper {
        position: absolute;
        max-width: 500px;
        right: 0;
        box-shadow:
            rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
            rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    }

    body.home .quote-container img {
        min-width: 500px;
    }
}

@media (min-width: 768px) and (max-width: 920px) {
    body.home .quote-container{
        gap: 2em;
    }
    
    body.home .quote-container figure {
        margin-left: 0;
        min-width: 300px;
    }
}

@media (min-width: 920px) {
    body.home .quote-wrapper {
        position: absolute;
        max-width: 800px;
        left: 500px;
        right: 50px;
    }
    
    body.home .quote-container figure {
        margin-left: 150px;
    }
}