/*
 * v21 detail polish.
 * Keeps the photographed desktop composition while fixing the language hover
 * bridge, product-card hierarchy, globe/cloud proportions, and carousel edges.
 */

/* The menu used to sit 8px below the trigger, so the parent lost :hover while
 * the pointer crossed the empty strip. This transparent bridge keeps the
 * complete route from trigger to menu interactive without changing its look. */
html body .site-lang--dropdown::after {
    content: "";
    position: absolute;
    z-index: 39;
    top: 100%;
    right: 0;
    width: max(100%, 112px);
    height: 12px;
    pointer-events: auto;
}

html body .site-lang__menu {
    z-index: 40 !important;
}

/* Keep the requested overlay completely absent. The washed-out look came
 * from the video filter itself, so restore the photographed blue-grey tone
 * without putting a colour layer back over the hero. */
html body.page-home #section-1 .panel-intro__video[data-video-index="0"] {
    filter: contrast(1.06) saturate(1.04) brightness(.98) !important;
}

/* The source artwork was photographed with the earth virtually unchanged,
 * but both cloud layers visibly larger than the previous frozen override. */
@media (min-width: 1181px) {
    html body.page-home #section-2 .company-overview__earth {
        transform: translateX(10px) scale(1.48) !important;
        animation: finf-earth-bob 10s ease-in-out infinite !important;
    }

    html body.page-home #section-2 .company-overview__cloud--one {
        transform: translate(-97px, -84px) scale(1.62) !important;
        animation: finf-cloud-back-float 13s ease-in-out infinite !important;
    }

    html body.page-home #section-2 .company-overview__cloud--two {
        transform: translate(9px, 2px) scale(1.62) !important;
        animation: finf-cloud-front-float 15s ease-in-out infinite !important;
    }

    html body.page-home #section-7 .products-showcase {
        max-width: 1428px !important;
    }

    html body.page-home #section-7 .product-card.product-card--summary {
        /* Photo 004 lands at roughly 490px including the rendered border.
         * 486px here produces that visual height at the desktop scale used by
         * the page, while keeping all three cards on one baseline. */
        min-height: 486px !important;
    }
}

/* Animate the independent translate property so the exact reference scale
 * and anchoring above remain fixed. This avoids the old transform animation
 * overriding the carefully matched cloud positions. */
@keyframes finf-earth-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

@keyframes finf-cloud-back-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 8px -7px; }
}

@keyframes finf-cloud-front-float {
    0%, 100% { translate: 0 0; }
    50% { translate: -7px -6px; }
}

/* Keep the continuous three-card loop, but soften the hard crop as a card
 * enters and leaves the viewport so it never looks accidentally cut off. */
html body.page-home #section-6 .business-safety__trust {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}

/* Keep enough room inside the clipped carousel viewport for the card shadow.
 * Previously the viewport and card had the exact same height, so the lower
 * 28px shadow was visibly cut off. */
html body.page-home #section-6 .business-safety__trust-track {
    padding: 4px 0 32px !important;
}

/* Language changes rebuild the home markup. Make the restarted track win over
 * localized and reduced-motion cascade rules so all four languages keep the
 * same continuous leftward motion. */
html body.page-home #section-6 .business-safety__trust-track.is-running {
    animation: finf-safety-card-flow 12s linear infinite !important;
    animation-play-state: running !important;
}

/* Match photo 004: sourcing badge first, icon second, then title/content. */
html body.page-home #section-7 .product-card__availability {
    order: -3 !important;
    align-self: flex-start !important;
    margin: 0 0 14px !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(37, 99, 235, .16) !important;
    border-radius: 999px !important;
    background: #eaf1ff !important;
    color: var(--primary) !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

html body.page-home #section-7 .product-card__icon {
    order: -2 !important;
    margin-bottom: 22px !important;
}

html body.page-home #section-7 .product-card__badge {
    display: none !important;
}

html body.page-home #section-7 .product-card__footer {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: auto !important;
}

html body.page-home #section-7 .product-card__footer b {
    justify-self: end;
    text-align: right;
}

/* The disabled right-hand card has a restrained blue wash in the reference. */
html body.page-home #section-7 .product-card.product-card--locked {
    background:
        linear-gradient(145deg, rgba(251, 253, 255, .94) 0%, rgba(235, 243, 255, .76) 57%, rgba(245, 249, 255, .92) 100%) !important;
    border-color: rgba(201, 217, 243, .66) !important;
    box-shadow: 0 13px 25px rgba(39, 92, 182, .085) !important;
    filter: grayscale(.18) saturate(.75) !important;
    opacity: var(--product-locked-opacity, .90) !important;
}

/* The legacy locked state placed a 28% white veil over the entire card. It
 * erased the faint blue wash and made the lock icon look grey. */
html body.page-home #section-7 .product-card.product-card--locked::before {
    background: rgba(255, 255, 255, .10) !important;
}

/* The photographed locked card has no availability pill, so its icon/title
 * rhythm is intentionally a little more open than the two active cards. */
html body.page-home #section-7 .product-card.product-card--locked .product-card__icon {
    margin-bottom: 29px !important;
    background: rgba(238, 244, 255, .92) !important;
}

html body.page-home #section-7 .product-card.product-card--locked .product-card__icon img {
    opacity: .80 !important;
}

html body.page-home #section-7 .product-card.product-card--locked h3 {
    margin: 16px 0 20px !important;
    color: #59626e !important;
}

html body.page-home #section-7 .product-card.product-card--locked p,
html body.page-home #section-7 .product-card.product-card--locked .product-card__footer {
    color: #6f7985 !important;
}

html body.page-home #section-7 .product-card.product-card--locked .product-card__footer {
    border-top-color: rgba(187, 205, 235, .12) !important;
}

@media (max-width: 860px) {
    html body.page-home #section-6 .business-safety__trust {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    }

    html body.page-home #section-7 .product-card__availability {
        margin-bottom: 12px !important;
    }
}

/* The user-facing "Challenges" panel uses the same restrained blue glass
 * wash as the Core Values panel. The three inner cards keep their own style. */
html body.page-home #section-3 .vision-challenges:not(.vision-challenges--text) {
    background: linear-gradient(145deg, rgba(255, 255, 255, .62) 0%, rgba(232, 240, 255, .28) 52%, rgba(255, 255, 255, .22) 100%) !important;
    border-color: rgba(255, 255, 255, .44) !important;
    box-shadow: 0 8px 20px rgba(30, 94, 255, .10), 0 2px 8px rgba(47, 52, 58, .08), inset 0 1px 0 rgba(255, 255, 255, .64) !important;
    backdrop-filter: blur(12px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
}

/* The page uses mandatory vertical snap. The legacy rule removed the footer
 * from the snap list, so the browser always pulled the viewport back to the
 * final contact panel. Aligning the short footer to the viewport bottom makes
 * the true document end a stable, reachable snap position. */
html.page-home .site-footer {
    scroll-snap-align: end !important;
    scroll-snap-stop: always !important;
}