/* ==========================================
   SOFTLYSTUDIOS — PREMIUM LOGO ANIMATION
   ========================================== */

   .ss-animated-brand {
    --ss-icon-size: 48px;
    --ss-wordmark-width: 145px;
    --ss-brand-gap: 9px;

    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ss-brand-gap);

    width: auto;
    max-width: 100%;
    min-width: 0;
    height: auto;

    text-decoration: none;
    overflow: visible;
    isolation: isolate;
}

/* CIRCULAR ICON */

.ss-animated-brand .ss-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--ss-icon-size);
    height: var(--ss-icon-size);
    flex: 0 0 var(--ss-icon-size);

    transform-origin: center;
    backface-visibility: hidden;

    animation: ssIconEntrance 2.3s
        cubic-bezier(.22, 1, .36, 1) both;
}

.ss-animated-brand .ss-brand-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

/* WHITE WORDMARK */

.ss-animated-brand .ss-brand-wordmark {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: var(--ss-wordmark-width);
    max-width: 100%;
    min-width: 0;

    opacity: 0;
    transform: translateX(20px);
    filter: blur(5px);

    animation: ssWordmarkReveal 1.05s
        cubic-bezier(.22, 1, .36, 1)
        1.65s forwards;
}

.ss-animated-brand .ss-brand-wordmark img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 54px;
    object-fit: contain;
    object-position: left center;
}

/* ICON ENTERS, ROTATES, THEN SETTLES LEFT */

@keyframes ssIconEntrance {
    0% {
        opacity: 0;
        transform: translateX(65px)
                   scale(.55)
                   rotate(0deg);
    }

    15% {
        opacity: 1;
        transform: translateX(65px)
                   scale(.9)
                   rotate(0deg);
    }

    65% {
        opacity: 1;
        transform: translateX(65px)
                   scale(1)
                   rotate(360deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0)
                   scale(1)
                   rotate(360deg);
    }
}

/* WORDMARK REVEAL */

@keyframes ssWordmarkReveal {
    0% {
        opacity: 0;
        transform: translateX(20px);
        filter: blur(5px);
    }

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

/* HEADER SIZING */

.ss-brand-header {
    --ss-icon-size: 44px;
    --ss-wordmark-width: 140px;
    --ss-brand-gap: 7px;
}

/* FOOTER SIZING */

.ss-brand-footer {
    --ss-icon-size: 58px;
    --ss-wordmark-width: 178px;
    --ss-brand-gap: 10px;
}

/* TABLET */

@media (max-width: 1024px) {
    .ss-brand-header {
        --ss-icon-size: 39px;
        --ss-wordmark-width: 116px;
        --ss-brand-gap: 5px;
    }

    .ss-brand-footer {
        --ss-icon-size: 50px;
        --ss-wordmark-width: 150px;
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .ss-brand-header {
        --ss-icon-size: 33px;
        --ss-wordmark-width: 96px;
        --ss-brand-gap: 4px;
    }

    .ss-brand-footer {
        --ss-icon-size: 45px;
        --ss-wordmark-width: 136px;
        --ss-brand-gap: 7px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .ss-animated-brand .ss-brand-icon,
    .ss-animated-brand .ss-brand-wordmark {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
}


/* ============================================
   SOFTLYSTUDIOS — FINAL HEADER LOGO FIX
   Preserve original icon colors
   Fix white wordmark sizing
   ============================================ */

/* Header logo container */
.site-header.ss-one-header
.ss-one-logo.ss-animated-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 188px !important;
    width: 188px !important;
    min-width: 188px !important;
    max-width: 188px !important;

    height: 54px !important;
    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
    background: transparent !important;
}

/* Icon and wordmark sizes */
.site-header.ss-one-header .ss-brand-header {
    --ss-icon-size: 44px;
    --ss-wordmark-width: 136px;
    --ss-brand-gap: 8px;
}

/* IMPORTANT: Remove old white filter */
.site-header.ss-one-header
.ss-one-logo.ss-animated-brand
.ss-brand-icon img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    filter: none !important;
    border-radius: 50%;

    animation: none !important;
    clip-path: none !important;
}

/* White wordmark — no extra recoloring */
.site-header.ss-one-header
.ss-one-logo.ss-animated-brand
.ss-brand-wordmark img {
    display: block !important;
    width: 100% !important;
    height: auto !important;

    max-width: none !important;
    max-height: 54px !important;

    object-fit: contain !important;
    object-position: left center !important;

    filter: none !important;
    animation: none !important;
    clip-path: none !important;
}

/* Disable old shimmer effect */
.site-header.ss-one-header
.ss-one-logo.ss-animated-brand::after {
    content: none !important;
}

/* Avoid old hover animation fighting the new animation */
.site-header.ss-one-header
.ss-one-logo.ss-animated-brand:hover img {
    transform: none !important;
}

/* Ensure wordmark is not clipped */
.site-header.ss-one-header
.ss-one-logo.ss-animated-brand
.ss-brand-wordmark {
    display: flex !important;
    align-items: center !important;

    flex: 0 0 var(--ss-wordmark-width);
    width: var(--ss-wordmark-width);
    min-width: 0;

    overflow: visible !important;
}

/* Medium desktop: keep navigation comfortable */
@media (min-width: 1121px) and (max-width: 1450px) {
    .site-header.ss-one-header
    .ss-one-logo.ss-animated-brand {
        flex-basis: 168px !important;
        width: 168px !important;
        min-width: 168px !important;
        max-width: 168px !important;
    }

    .site-header.ss-one-header .ss-brand-header {
        --ss-icon-size: 39px;
        --ss-wordmark-width: 121px;
        --ss-brand-gap: 8px;
    }
}

/* Tablet */
@media (max-width: 1120px) {
    .site-header.ss-one-header
    .ss-one-logo.ss-animated-brand {
        flex-basis: 180px !important;
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }

    .site-header.ss-one-header .ss-brand-header {
        --ss-icon-size: 42px;
        --ss-wordmark-width: 130px;
        --ss-brand-gap: 8px;
    }
}

/* Mobile */
@media (max-width: 650px) {
    .site-header.ss-one-header
    .ss-one-logo.ss-animated-brand {
        flex-basis: 135px !important;
        width: 135px !important;
        min-width: 135px !important;
        max-width: 135px !important;
        height: 42px !important;
    }

    .site-header.ss-one-header .ss-brand-header {
        --ss-icon-size: 34px;
        --ss-wordmark-width: 95px;
        --ss-brand-gap: 6px;
    }
}

/* Very small phones */
@media (max-width: 390px) {
    .site-header.ss-one-header
    .ss-one-logo.ss-animated-brand {
        flex-basis: 122px !important;
        width: 122px !important;
        min-width: 122px !important;
        max-width: 122px !important;
    }

    .site-header.ss-one-header .ss-brand-header {
        --ss-icon-size: 31px;
        --ss-wordmark-width: 85px;
        --ss-brand-gap: 6px;
    }
}



/* ============================================
   SOFTLYSTUDIOS — FOOTER ICON & LOGO FIX
   ============================================ */

   .ssf-footer .ssf-logo.ss-animated-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;
    width: 245px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 64px !important;

    overflow: visible !important;
    background: transparent !important;
}

/* Original green-and-gold circular icon */

.ssf-footer .ssf-logo.ss-animated-brand .ss-brand-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;

    opacity: 1;
    overflow: visible !important;
}

.ssf-footer .ssf-logo.ss-animated-brand .ss-brand-icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    border-radius: 50%;

    /* Preserve original icon colors */
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
}

/* White SoftlyStudios wordmark */

.ssf-footer .ssf-logo.ss-animated-brand .ss-brand-wordmark {
    display: flex !important;
    align-items: center !important;

    flex: 0 0 175px !important;
    width: 175px !important;
    height: auto !important;

    overflow: visible !important;
}

.ssf-footer .ssf-logo.ss-animated-brand .ss-brand-wordmark img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: 62px !important;

    object-fit: contain !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
}

/* Mobile footer sizing */

@media (max-width: 600px) {
    .ssf-footer .ssf-logo.ss-animated-brand {
        width: 195px !important;
        height: 52px !important;
        gap: 8px !important;
    }

    .ssf-footer .ssf-logo.ss-animated-brand .ss-brand-icon {
        flex-basis: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    .ssf-footer .ssf-logo.ss-animated-brand .ss-brand-wordmark {
        flex-basis: 140px !important;
        width: 140px !important;
    }
}