/**
 * Fichier  : /pages/homepage/section-5/assets/css/cta.css
 * Fonction : navigation vers les expertises Sport Business
 */


/* ==================================================
   SECTION
================================================== */

.business-cta {
    position: relative;
    z-index: 10;
}

.business-cta {
    --business-cta-overlap: 6em;
}

.business-cta {
    box-sizing: border-box;
}

.business-cta {
    margin-bottom: calc(var(--business-cta-overlap) * -1);
}

.business-cta {
    padding: 0 var(--page-padding, clamp(40px, 6vw, 100px));
}

.business-cta {
    background: var(--gradient-primary);
}


/* ==================================================
   INTRO
================================================== */

.business-cta .intro {
    position: absolute;
    top: calc((var(--business-cta-overlap) * -1) - 3.8em);
    right: var(--page-padding, clamp(40px, 6vw, 100px));
    left: var(--page-padding, clamp(40px, 6vw, 100px));
    z-index: 3;
}

.business-cta .intro {
    max-width: 1320px;
}

.business-cta .intro {
    margin: 0 auto;
}

.business-cta .intro {
    display: flex;
    align-items: center;
    gap: 1.35em;
}


/* ==================================================
   INTRO LABEL
================================================== */

.business-cta .intro .label {
    flex: 0 0 auto;
}

.business-cta .intro .label {
    display: flex;
    align-items: center;
    gap: 1.35em;
}

.business-cta .intro .label {
    font-family: 'bold-font';
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--color-primary);
}


/* ==================================================
   INTRO LINE
================================================== */

.business-cta .intro .label::after {
    content: "";
}

.business-cta .intro .label::after {
    width: 30px;
    height: 1px;
}

.business-cta .intro .label::after {
    display: block;
}

.business-cta .intro .label::after {
    background: rgba(255, 255, 255, .28);
}


/* ==================================================
   INTRO TEXT
================================================== */

.business-cta .intro p {
    max-width: 520px;
}

.business-cta .intro p {
    margin: 0;
}

.business-cta .intro p {
    font-family: 'content-font';
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .58);
}


/* ==================================================
   LINKS
================================================== */

.business-cta .links {
    position: relative;
    z-index: 2;
}

.business-cta .links {
    width: min(100%, 1320px);
}

.business-cta .links {
    margin: 0 auto;
}

.business-cta .links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1em;
}

.business-cta .links {
    transform: translateY(calc(var(--business-cta-overlap) * -1));
}


/* ==================================================
   CARD
================================================== */

.business-cta .link {
    position: relative;
}

.business-cta .link {
    box-sizing: border-box;
}

.business-cta .link {
    padding: clamp(2.2em, 3vw, 3.4em);
}

.business-cta .link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1em;
}

.business-cta .link {
    isolation: isolate;
    overflow: hidden;
}

.business-cta .link {
    background: #111;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.business-cta .link {
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
}

.business-cta .link {
    text-decoration: none;
    color: #fff;
}

.business-cta .link {
    cursor: pointer;
}

.business-cta .link {
    transition:
        transform .7s cubic-bezier(.22, 1, .36, 1),
        box-shadow .7s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   IMAGE
================================================== */

.business-cta .link::before {
    content: "";
}

.business-cta .link::before {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.business-cta .link::before {
    width: 100%;
}

.business-cta .link::before {
    background-image: var(--card-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.business-cta .link::before {
    filter:
        saturate(.82)
        contrast(1.04)
        brightness(.96);
}

.business-cta .link::before {
    opacity: .92;
}

.business-cta .link::before {
    transform: scale(1.02);
}

.business-cta .link::before {
    transition:
        opacity .6s ease,
        transform 1s cubic-bezier(.22, 1, .36, 1),
        filter .6s ease;
}


/* ==================================================
   IMAGE FADE + GRID
================================================== */

.business-cta .link::after {
    content: "";
}

.business-cta .link::after {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.business-cta .link::after {
    background-image:

        /* GRID HORIZONTAL */
        linear-gradient(
            rgba(255, 255, 255, .04) 1px,
            transparent 1px
        ),

        /* GRID DIAGONAL */
        linear-gradient(
            120deg,
            rgba(255, 255, 255, .04) 1px,
            transparent 1px
        ),

        /* IMAGE FADE */
        linear-gradient(
            130deg,
            #111 0%,
            #111 26%,
            rgba(17, 17, 17, .98) 34%,
            rgba(17, 17, 17, .90) 44%,
            rgba(17, 17, 17, .70) 56%,
            rgba(17, 17, 17, .42) 70%,
            rgba(17, 17, 17, .18) 84%,
            rgba(17, 17, 17, .06) 100%
        );
}

.business-cta .link::after {
    background-size:
        42px 42px,
        42px 42px,
        100% 100%;
}

.business-cta .link::after {
    background-position:
        0 0,
        0 0,
        0 0;
}

.business-cta .link::after {
    background-repeat:
        repeat,
        repeat,
        no-repeat;
}

.business-cta .link::after {
    pointer-events: none;
}


/* ==================================================
   NUMBER
================================================== */

.business-cta .link .number {
    position: relative;
    z-index: 2;
}

.business-cta .link .number {
    margin-bottom: clamp(4.5em, 7vw, 7em);
}

.business-cta .link .number {
    display: block;
}

.business-cta .link .number {
    font-family: 'bold-font';
    font-size: 8px;
    line-height: 1;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .55);
}

.business-cta .link .number {
    transition:
        color .45s ease,
        transform .6s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   TITLE
================================================== */

.business-cta .link .title {
    position: relative;
    z-index: 2;
}

.business-cta .link .title {
    max-width: 82%;
}

.business-cta .link .title {
    display: flex;
    flex-direction: column;
    gap: 1.6em;
}


/* ==================================================
   RED ACCENT
================================================== */

.business-cta .link .title::before {
    content: "";
}

.business-cta .link .title::before {
    position: absolute;
    top: -2.2em;
    left: 0;
}

.business-cta .link .title::before {
    width: 24px;
    height: 2px;
}

.business-cta .link .title::before {
    background: var(--color-primary);
}

.business-cta .link .title::before {
    transform-origin: left center;
}

.business-cta .link .title::before {
    transition: width .7s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   TITLE STRONG
================================================== */

.business-cta .link .title strong {
    display: block;
}

.business-cta .link .title strong {
    font-family: 'bold-font';
    font-size: 2.4em;
    font-weight: 400;
    line-height: .92;
    text-transform: uppercase;
    letter-spacing: -.045em;
    color: #fff;
}

.business-cta .link .title strong {
    transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   PROMISE
================================================== */

.business-cta .link .title small {
    display: block;
}

.business-cta .link .title small {
    font-family: 'bold-font';
    font-size: clamp(9px, .75vw, 11px);
    line-height: 1.55;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: var(--color-primary);
}

.business-cta .link .title small {
    transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   DESCRIPTION
================================================== */

.business-cta .link > p {
    position: relative;
    z-index: 2;
}

.business-cta .link > p {
    max-width: 275px;
}

.business-cta .link > p {
    font-family: 'content-font';
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .68);
}

.business-cta .link > p {
    transition: color .45s ease;
}


/* ==================================================
   ACTION
================================================== */

.business-cta .link .action {
    position: relative;
    z-index: 2;
}

.business-cta .link .action {
    width: fit-content;
    height: var(--button-height);
}

.business-cta .link .action {
    box-sizing: border-box;
}

.business-cta .link .action {
    margin-top: 1em;
}

.business-cta .link .action {
    padding: 0 30px;
}

.business-cta .link .action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.2em;
    flex: 0 0 auto;
}

.business-cta .link .action {
    background: var(--gradient-primary);
    border-radius: var(--button-radius);
}

.business-cta .link .action {
    box-shadow:
        0 10px 26px rgba(233, 64, 27, .30),
        0 0 18px rgba(255, 123, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

.business-cta .link .action {
    transition:
        transform var(--transition-soft),
        box-shadow var(--transition-soft);
}


/* ==================================================
   ACTION LABEL
================================================== */

.business-cta .link .action > span {
    font-family: 'bold-font';
    font-size: 9px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: var(--color-white);
}


/* ==================================================
   ACTION ICON
================================================== */

.business-cta .link .action svg {
    width: 18px;
    height: 18px;
}

.business-cta .link .action svg {
    flex: 0 0 auto;
}

.business-cta .link .action svg {
    fill: none;
    stroke: var(--color-white);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.business-cta .link .action svg {
    transition: transform var(--transition-soft);
}


/* ==================================================
   CTA OBSERVER
================================================== */

.business-cta .cta-observe {
    transition: translate 1s cubic-bezier(.16, 1, .3, 1);
}


/* ==================================================
   CTA INTRO ANIMATION
================================================== */

.business-cta .cta-intro {
    translate: -70px 0;
}


/* ==================================================
   CTA CARD ANIMATION
================================================== */

.business-cta .cta-card {
    translate: 0 70px;
}


/* ==================================================
   CTA VISIBLE
================================================== */

.business-cta .cta-observe.cta-visible {
    translate: 0 0;
}


/* ==================================================
   DESKTOP HOVER
================================================== */

@media
    (hover: hover)
    and (pointer: fine) {

    .business-cta .link:hover {
        z-index: 4;
    }


    /* ==================================================
       IMAGE ZOOM
    ================================================== */

    .business-cta .link:hover::before {
        filter:
            saturate(.95)
            contrast(1.04)
            brightness(1);
    }

    .business-cta .link:hover::before {
        opacity: 1;
    }

    .business-cta .link:hover::before {
        transform: scale(1.08);
    }


    /* ==================================================
       ACCENT
    ================================================== */

    .business-cta .link:hover .title::before {
        width: 52px;
    }


    /* ==================================================
       NUMBER
    ================================================== */

    .business-cta .link:hover .number {
        color: var(--color-primary);
    }

    .business-cta .link:hover .number {
        transform: translateX(5px);
    }


    /* ==================================================
       TITLE
    ================================================== */

    .business-cta .link:hover .title strong {
        transform: translateX(5px);
    }

    .business-cta .link:hover .title small {
        transform: translateX(5px);
    }


    /* ==================================================
       DESCRIPTION
    ================================================== */

    .business-cta .link:hover > p {
        color: rgba(255, 255, 255, .88);
    }


    /* ==================================================
       ACTION
    ================================================== */

    .business-cta .link:hover .action {
        box-shadow:
            0 14px 32px rgba(233, 64, 27, .36),
            0 0 22px rgba(255, 123, 0, .20),
            inset 0 1px 0 rgba(255, 255, 255, .18);
    }

    .business-cta .link:hover .action {
        transform: translateY(-2px);
    }

    .business-cta .link:hover .action svg {
        transform: translateX(4px);
    }

}


/* ==================================================
   TABLET
================================================== */

@media screen and (max-width: 1000px) {

    .business-cta {
        --business-cta-overlap: 90px;
    }


    /* ==================================================
       INTRO
    ================================================== */

    .business-cta .intro {
        top: calc((var(--business-cta-overlap) * -1) - 3.8em);
    }


    /* ==================================================
       LINKS
    ================================================== */

    .business-cta .links {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }


    /* ==================================================
       CARD
    ================================================== */

    .business-cta .link {
        min-height: auto;
    }


    /* ==================================================
       THIRD CARD IMAGE
    ================================================== */

    .business-cta .link:nth-child(3)::before {
        width: 100%;
    }


    /* ==================================================
       THIRD CARD FADE + GRID
    ================================================== */

    .business-cta .link:nth-child(3)::after {
        background-image:

            /* GRID HORIZONTAL */
            linear-gradient(
                rgba(255, 255, 255, .04) 1px,
                transparent 1px
            ),

            /* GRID DIAGONAL */
            linear-gradient(
                120deg,
                rgba(255, 255, 255, .04) 1px,
                transparent 1px
            ),

            /* IMAGE FADE */
            linear-gradient(
                130deg,
                #111 0%,
                #111 26%,
                rgba(17, 17, 17, .98) 34%,
                rgba(17, 17, 17, .90) 44%,
                rgba(17, 17, 17, .70) 56%,
                rgba(17, 17, 17, .42) 70%,
                rgba(17, 17, 17, .18) 84%,
                rgba(17, 17, 17, .06) 100%
            );
    }

    .business-cta .link:nth-child(3)::after {
        background-size:
            42px 42px,
            42px 42px,
            100% 100%;
    }

    .business-cta .link:nth-child(3)::after {
        background-position:
            0 0,
            0 0,
            0 0;
    }

    .business-cta .link:nth-child(3)::after {
        background-repeat:
            repeat,
            repeat,
            no-repeat;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media screen and (max-width: 700px) {

    .business-cta {
        --business-cta-overlap: 50px;
    }

    .business-cta {
        padding: 0 var(--page-padding, 1.4em) 0;
    }


    /* ==================================================
       INTRO
    ================================================== */

    .business-cta .intro {
        top: calc((var(--business-cta-overlap) * -1) - 4.5em);
        right: var(--page-padding, 1.4em);
        left: var(--page-padding, 1.4em);
    }

    .business-cta .intro {
        display: block;
    }


    /* ==================================================
       INTRO LABEL
    ================================================== */

    .business-cta .intro .label {
        margin-bottom: .75em;
    }

    .business-cta .intro .label {
        font-size: 9px;
    }

    .business-cta .intro .label::after {
        width: 20px;
    }


    /* ==================================================
       INTRO TEXT
    ================================================== */

    .business-cta .intro p {
        max-width: 290px;
    }

    .business-cta .intro p {
        font-size: 12px;
        line-height: 1.5;
        color: rgba(255, 255, 255, .58);
    }


    /* ==================================================
       LINKS
    ================================================== */

    .business-cta .links {
        grid-template-columns: 1fr;
        gap: 1em;
    }


    /* ==================================================
       CARD
    ================================================== */

    .business-cta .link,
    .business-cta .link:nth-child(3) {
        padding: 2.2em;
    }

    .business-cta .link,
    .business-cta .link:nth-child(3) {
        grid-column: auto;
    }


    /* ==================================================
       CTA INTRO ANIMATION
    ================================================== */

    .business-cta .cta-intro {
        translate: -45px 0;
    }


    /* ==================================================
       CTA CARD ANIMATION
    ================================================== */

    .business-cta .cta-card {
        translate: 0 65px;
    }

    .business-cta .cta-card {
        transition-delay: 0ms;
    }


    /* ==================================================
       IMAGE
    ================================================== */

    .business-cta .link::before,
    .business-cta .link:nth-child(3)::before {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .business-cta .link::before,
    .business-cta .link:nth-child(3)::before {
        width: 100%;
        height: 70%;
    }

    .business-cta .link::before,
    .business-cta .link:nth-child(3)::before {
        background-position: center 35%;
    }

    .business-cta .link::before,
    .business-cta .link:nth-child(3)::before {
        filter:
            saturate(.82)
            contrast(1.04)
            brightness(.92);
    }

    .business-cta .link::before,
    .business-cta .link:nth-child(3)::before {
        opacity: .90;
    }

    .business-cta .link::before,
    .business-cta .link:nth-child(3)::before {
        transform: scale(1.02);
    }


    /* ==================================================
       VERTICAL FADE + GRID
    ================================================== */

    .business-cta .link::after,
    .business-cta .link:nth-child(3)::after {
        background-image:

            /* GRID HORIZONTAL */
            linear-gradient(
                rgba(255, 255, 255, .035) 1px,
                transparent 1px
            ),

            /* GRID DIAGONAL */
            linear-gradient(
                120deg,
                rgba(255, 255, 255, .035) 1px,
                transparent 1px
            ),

            /* IMAGE FADE */
            linear-gradient(
                160deg,
                #111 0%,
                #111 30%,
                rgba(17, 17, 17, .98) 40%,
                rgba(17, 17, 17, .88) 52%,
                rgba(17, 17, 17, .60) 66%,
                rgba(17, 17, 17, .26) 82%,
                rgba(17, 17, 17, .04) 100%
            );
    }

    .business-cta .link::after,
    .business-cta .link:nth-child(3)::after {
        background-size:
            36px 36px,
            36px 36px,
            100% 100%;
    }

    .business-cta .link::after,
    .business-cta .link:nth-child(3)::after {
        background-position:
            0 0,
            0 0,
            0 0;
    }

    .business-cta .link::after,
    .business-cta .link:nth-child(3)::after {
        background-repeat:
            repeat,
            repeat,
            no-repeat;
    }


    /* ==================================================
       NUMBER
    ================================================== */

    .business-cta .link .number {
        margin-bottom: 3.5em;
    }


    /* ==================================================
       TITLE
    ================================================== */

    .business-cta .link .title {
        max-width: 100%;
    }

    .business-cta .link .title {
        gap: 1.3em;
    }

    .business-cta .link .title::before {
        display: none;
    }

    .business-cta .link .title strong {
        font-size: clamp(30px, 9vw, 42px);
    }

    .business-cta .link .title small {
        font-size: 9px;
    }


    /* ==================================================
       DESCRIPTION
    ================================================== */

    .business-cta .link > p {
        max-width: 260px;
    }

    .business-cta .link > p {
        font-size: 11px;
        color: rgba(255, 255, 255, .72);
    }


    /* ==================================================
       ACTION
    ================================================== */

    .business-cta .link .action {
        height: var(--button-height);
    }

    .business-cta .link .action {
        margin-top: 0;
    }

    .business-cta .link .action {
        padding: 0 30px;
    }

    .business-cta .link .action > span {
        font-size: 10px;
    }

    .business-cta .link .action svg {
        width: 17px;
        height: 17px;
    }

}


/* ==================================================
   ACCESSIBILITÉ
================================================== */

@media (prefers-reduced-motion: reduce) {

    .business-cta .cta-observe {
        opacity: 1;
    }

    .business-cta .cta-observe {
        translate: 0 0;
    }

    .business-cta .cta-observe {
        transition: none !important;
    }

    .business-cta .link,
    .business-cta .link::before,
    .business-cta .link::after,
    .business-cta .link .number,
    .business-cta .link .title strong,
    .business-cta .link .title small,
    .business-cta .link .title::before,
    .business-cta .link > p,
    .business-cta .link .action,
    .business-cta .link .action > span,
    .business-cta .link .action svg {
        transition: none !important;
    }

    .business-cta .link,
    .business-cta .link::before,
    .business-cta .link::after,
    .business-cta .link .number,
    .business-cta .link .title strong,
    .business-cta .link .title small,
    .business-cta .link .title::before,
    .business-cta .link > p,
    .business-cta .link .action,
    .business-cta .link .action > span,
    .business-cta .link .action svg {
        animation: none !important;
    }

}