/**
 * Fichier  : /pages/homepage/section-5/assets/css/ecosystem.css
 * Fonction : schéma Média + Diffusion = Sport Business
 */


/* ==================================================
   ECOSYSTEM
================================================== */

.business .ecosystem {
    position: relative;
}

.business .ecosystem {
    min-height: 560px;
}

.business .ecosystem {
    overflow: hidden;
}

.business .ecosystem {
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}


/* ==================================================
   SOURCES
================================================== */

.business .ecosystem > .sources {
    position: relative;
    z-index: 5;
}

.business .ecosystem > .sources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* ==================================================
   SOURCE ITEM
================================================== */

.business .ecosystem
> .sources
> .item {

    position: relative;
}

.business .ecosystem
> .sources
> .item {

    min-height: 190px;
}

.business .ecosystem
> .sources
> .item {
    box-sizing: border-box;
}

.business .ecosystem
> .sources
> .item {
    padding: 3.2em 4em 2.8em;
}

.business .ecosystem
> .sources
> .item {

    display: flex;
    align-items: flex-start;
}

.business .ecosystem
> .sources
> .item.media {

    justify-content: flex-start;
}

.business .ecosystem
> .sources
> .item.diffusion {

    justify-content: flex-end;
}


/* ==================================================
   SOURCE CONTENT
================================================== */

.business .ecosystem
> .sources
> .item
.content {

    position: relative;
    z-index: 3;
}

.business .ecosystem
> .sources
> .item
.content {

    width: min(100%, 360px);
}

.business .ecosystem
> .sources
> .item.diffusion
.content {

    text-align: right;
}


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

.business .ecosystem
> .sources
> .item h3 {

    margin: 0;
}

.business .ecosystem
> .sources
> .item h3 {

    font-family: 'bold-font';
    font-size: clamp( 32px, 3.4vw, 50px );
    font-weight: 400;
    line-height: .95em;
    text-transform: uppercase;
    letter-spacing: -.045em;
    color: rgba( 255, 255, 255, .45 );
}

.business .ecosystem
> .sources
> .item h3 {
    opacity: 0;
}

.business .ecosystem
> .sources
> .item h3 {
    transform: translateY(14px);
}

.business .ecosystem
> .sources
> .item h3 {

    transition: opacity .6s ease, color .6s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   SOURCE TEXT
================================================== */

.business .ecosystem
> .sources
> .item p {

    margin: .7em 0 0;
}

.business .ecosystem
> .sources
> .item p {

    font-family: 'content-font';
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5em;
    color: rgba( 255, 255, 255, .34 );
}

.business .ecosystem
> .sources
> .item p {
    opacity: 0;
}

.business .ecosystem
> .sources
> .item p {
    transform: translateY(10px);
}

.business .ecosystem
> .sources
> .item p {

    transition: opacity .6s ease, color .6s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   SOURCE MARKER
================================================== */

.business .ecosystem
> .sources
> .item
.marker {

    position: absolute;
    bottom: -8px;
    z-index: 10;
}

.business .ecosystem
> .sources
> .item.media
.marker {

    left: 25%;
}

.business .ecosystem
> .sources
> .item.diffusion
.marker {

    right: 25%;
}


/* ==================================================
   SOURCE MARKER DOT
================================================== */

.business .ecosystem
> .sources
> .item
.marker i {

    position: relative;
}

.business .ecosystem
> .sources
> .item
.marker i {

    width: 16px;
    height: 16px;
}

.business .ecosystem
> .sources
> .item
.marker i {

    display: block;
}

.business .ecosystem
> .sources
> .item
.marker i {
    box-sizing: border-box;
}

.business .ecosystem
> .sources
> .item
.marker i {
    background: #0b0b0b;
    border: 2px solid rgba(233, 64, 27, .65);
    border-radius: 50%;
}

.business .ecosystem
> .sources
> .item
.marker i {

    box-shadow: 0 0 0 6px #0b0b0b;
}

.business .ecosystem
> .sources
> .item
.marker i {
    opacity: 0;
}

.business .ecosystem
> .sources
> .item
.marker i {
    transform: scale(.55);
}

.business .ecosystem
> .sources
> .item
.marker i {

    transition:
        opacity .45s ease,
        background .45s ease,
        border-color .45s ease,
        box-shadow .55s ease,
        transform .6s
        cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   SOURCE MARKER GLOW
================================================== */

.business .ecosystem
> .sources
> .item
.marker::before {

    content: "";
}

.business .ecosystem
> .sources
> .item
.marker::before {

    position: absolute;
    top: 50%;
    left: 50%;
}

.business .ecosystem
> .sources
> .item
.marker::before {

    width: 90px;
    height: 90px;
}

.business .ecosystem
> .sources
> .item
.marker::before {

    background:
        radial-gradient(
            circle,
            rgba(233, 64, 27, .18) 0%,
            rgba(233, 64, 27, .06) 35%,
            transparent 70%
        );
}

.business .ecosystem
> .sources
> .item
.marker::before {

    filter: blur(7px);
}

.business .ecosystem
> .sources
> .item
.marker::before {
    opacity: 0;
}

.business .ecosystem
> .sources
> .item
.marker::before {
    transform: translate(-50%, -50%) scale(.5);
}

.business .ecosystem
> .sources
> .item
.marker::before {

    transition: opacity .55s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   CONVERGENCE
================================================== */

.business .ecosystem
> .convergence {

    position: relative;
    z-index: 6;
}

.business .ecosystem
> .convergence {

    height: 240px;
}

.business .ecosystem
> .convergence {

    pointer-events: none;
}


/* ==================================================
   SVG
================================================== */

.business .ecosystem
> .convergence
> .streams {

    position: absolute;
    top: 0;
    left: 0;
}

.business .ecosystem
> .convergence
> .streams {

    width: 100%;
    height: 100%;
}

.business .ecosystem
> .convergence
> .streams {

    overflow: visible;
}


/* ==================================================
   STREAM BASE
================================================== */

.business .ecosystem
.stream-base {

    fill: none;
    stroke: rgba( 255, 255, 255, .055 );
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}


/* ==================================================
   ACTIVE STREAM
================================================== */

.business .ecosystem
.stream-active {

    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.business .ecosystem
.stream-active {

    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
}

.business .ecosystem
.stream-active {

    filter: drop-shadow( 0 0 5px rgba(233, 64, 27, .28) );
}

.business .ecosystem
.stream-active {

    transition: stroke-dashoffset .7s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   MEDIA ACTIVE
================================================== */

.business .ecosystem
.stream-active-media {

    transition-delay: .18s;
}


/* ==================================================
   DIFFUSION ACTIVE
================================================== */

.business .ecosystem
.stream-active-diffusion {

    transition-delay: .18s;
}


/* ==================================================
   OUTPUT ACTIVE
================================================== */

.business .ecosystem
.stream-active-output {

    transition-duration: .45s;
    transition-delay: .82s;
}


/* ==================================================
   CURRENT
================================================== */

.business .ecosystem
.stream-current {

    fill: none;
    stroke: rgba( 255, 255, 255, .92 );
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.business .ecosystem
.stream-current {

    stroke-dasharray: 5 20;
    stroke-dashoffset: 0;
}

.business .ecosystem
.stream-current {

    opacity: 0;
}

.business .ecosystem
.stream-current {

    filter: drop-shadow( 0 0 3px rgba(255, 255, 255, .8) ) drop-shadow( 0 0 8px rgba(233, 64, 27, .8) );
}


/* ==================================================
   CURRENT INPUTS
================================================== */

.business .ecosystem.is-current
.stream-current-media,

.business .ecosystem.is-current
.stream-current-diffusion {
    opacity: .85;
}

.business .ecosystem.is-current
.stream-current-media,

.business .ecosystem.is-current
.stream-current-diffusion {
    animation: ecosystem-current-input 1.1s linear infinite;
}


/* ==================================================
   CURRENT OUTPUT
================================================== */

.business .ecosystem.is-current
.stream-current-output {
    opacity: .95;
}

.business .ecosystem.is-current
.stream-current-output {
    animation: ecosystem-current-output .9s linear infinite;
}


/* ==================================================
   CURRENT ANIMATION
================================================== */

@keyframes ecosystem-current-input {

    from {

        stroke-dashoffset: 0;

    }

    to {

        stroke-dashoffset: -25;

    }

}

@keyframes ecosystem-current-output {

    from {

        stroke-dashoffset: 0;

    }

    to {

        stroke-dashoffset: -25;

    }

}


/* ==================================================
   JUNCTION
================================================== */

.business .ecosystem
> .convergence
> .junction {

    position: absolute;
    top: 52.08%;
    left: 50%;
    z-index: 8;
}

.business .ecosystem
> .convergence
> .junction {

    width: 6px;
    height: 6px;
}

.business .ecosystem
> .convergence
> .junction {

    transform: translate(-50%, -50%);
}


/* ==================================================
   JUNCTION LIGHT
================================================== */

.business .ecosystem
> .convergence
> .junction i {
    width: 100%;
    height: 100%;
}

.business .ecosystem
> .convergence
> .junction i {
    display: block;
}

.business .ecosystem
> .convergence
> .junction i {

    background: var(--color-primary);
    border-radius: 50%;
}

.business .ecosystem
> .convergence
> .junction i {
    opacity: 0;
}

.business .ecosystem
> .convergence
> .junction i {
    transform: scale(.2);
}

.business .ecosystem
> .convergence
> .junction i {

    box-shadow: 0 0 12px rgba(233, 64, 27, .8), 0 0 30px rgba(233, 64, 27, .35);
}

.business .ecosystem
> .convergence
> .junction i {

    transition: opacity .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   OUTPUT
================================================== */

.business .ecosystem
> .convergence
> .output {

    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 10;
}

.business .ecosystem
> .convergence
> .output {

    width: 20px;
    height: 20px;
}

.business .ecosystem
> .convergence
> .output {

    transform: translate(-50%, 50%);
}


/* ==================================================
   OUTPUT GLOW
================================================== */

.business .ecosystem
> .convergence
> .output::before {

    content: "";
}

.business .ecosystem
> .convergence
> .output::before {

    position: absolute;
    top: 50%;
    left: 50%;
}

.business .ecosystem
> .convergence
> .output::before {

    width: 150px;
    height: 150px;
}

.business .ecosystem
> .convergence
> .output::before {

    background:
        radial-gradient(
            circle,
            rgba(233, 64, 27, .25) 0%,
            rgba(233, 64, 27, .08) 34%,
            transparent 70%
        );
}

.business .ecosystem
> .convergence
> .output::before {

    filter: blur(9px);
}

.business .ecosystem
> .convergence
> .output::before {
    opacity: 0;
}

.business .ecosystem
> .convergence
> .output::before {
    transform: translate(-50%, -50%) scale(.5);
}

.business .ecosystem
> .convergence
> .output::before {

    transition: opacity .6s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   OUTPUT DOT
================================================== */

.business .ecosystem
> .convergence
> .output i {

    position: relative;
    z-index: 2;
}

.business .ecosystem
> .convergence
> .output i {
    width: 20px;
    height: 20px;
}

.business .ecosystem
> .convergence
> .output i {
    display: block;
}

.business .ecosystem
> .convergence
> .output i {
    box-sizing: border-box;
}

.business .ecosystem
> .convergence
> .output i {
    background: #0b0b0b;
    border: 2px solid rgba(233, 64, 27, .7);
    border-radius: 50%;
}

.business .ecosystem
> .convergence
> .output i {

    box-shadow: 0 0 0 9px #0b0b0b;
}

.business .ecosystem
> .convergence
> .output i {
    opacity: 0;
}

.business .ecosystem
> .convergence
> .output i {
    transform: scale(.5);
}

.business .ecosystem
> .convergence
> .output i {

    transition:
        opacity .45s ease,
        background .45s ease,
        border-color .45s ease,
        box-shadow .6s ease,
        transform .6s
        cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   SPORT BUSINESS
================================================== */

.business .ecosystem
> .sport-business {

    position: relative;
    z-index: 3;
}

.business .ecosystem
> .sport-business {

    min-height: 200px;
}

.business .ecosystem
> .sport-business {
    box-sizing: border-box;
}

.business .ecosystem
> .sport-business {
    padding: 3.7em 2em 3em;
}

.business .ecosystem
> .sport-business {

    display: flex;
    align-items: center;
    justify-content: center;
}

.business .ecosystem
> .sport-business {
    overflow: hidden;
}

.business .ecosystem
> .sport-business {
    text-align: center;
}


/* ==================================================
   SPORT BUSINESS BACKGROUND
================================================== */

.business .ecosystem
> .sport-business::before {

    content: "";
}

.business .ecosystem
> .sport-business::before {

    position: absolute;
    top: 0;
    left: 50%;
}

.business .ecosystem
> .sport-business::before {

    width: 72%;
    height: 120%;
}

.business .ecosystem
> .sport-business::before {

    background:
        radial-gradient(
            ellipse at top,
            rgba(233, 64, 27, .12) 0%,
            rgba(233, 64, 27, .035) 38%,
            transparent 72%
        );
}

.business .ecosystem
> .sport-business::before {
    opacity: 0;
}

.business .ecosystem
> .sport-business::before {
    transform: translateX(-50%);
}

.business .ecosystem
> .sport-business::before {

    transition: opacity .7s ease;
}


/* ==================================================
   SPORT BUSINESS CONTENT
================================================== */

.business .ecosystem
> .sport-business
.content {

    position: relative;
    z-index: 3;
}


/* ==================================================
   SPORT BUSINESS TITLE
================================================== */

.business .ecosystem
> .sport-business h3 {

    margin: 0;
}

.business .ecosystem
> .sport-business h3 {

    font-family: 'bold-font';
    font-size: clamp( 42px, 6vw, 78px );
    font-weight: 400;
    line-height: .88em;
    text-transform: uppercase;
    letter-spacing: -.055em;
    color: rgba( 255, 255, 255, .35 );
}

.business .ecosystem
> .sport-business h3 {
    opacity: 0;
}

.business .ecosystem
> .sport-business h3 {
    transform: translateY(20px) scale(.96);
}

.business .ecosystem
> .sport-business h3 {

    transition: opacity .65s ease, color .6s ease, transform .75s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   SPORT BUSINESS TEXT
================================================== */

.business .ecosystem
> .sport-business p {

    margin: 1.2em 0 0;
}

.business .ecosystem
> .sport-business p {

    font-family: 'content-font';
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55em;
    color: rgba( 255, 255, 255, .3 );
}

.business .ecosystem
> .sport-business p {
    opacity: 0;
}

.business .ecosystem
> .sport-business p {
    transform: translateY(12px);
}

.business .ecosystem
> .sport-business p {

    transition: opacity .6s ease, color .6s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   BACKGROUND WORD
================================================== */

.business .ecosystem
> .sport-business
.word {

    position: absolute;
    left: 50%;
    bottom: -.18em;
    z-index: 0;
}

.business .ecosystem
> .sport-business
.word {

    white-space: nowrap;
}

.business .ecosystem
> .sport-business
.word {

    font-family: 'bold-font';
    font-size: clamp( 90px, 14vw, 190px );
    font-weight: 400;
    line-height: .8em;
    text-transform: uppercase;
    letter-spacing: -.07em;
    color: rgba(233, 64, 27, .012);
}

.business .ecosystem
> .sport-business
.word {

    pointer-events: none;
    user-select: none;
}

.business .ecosystem
> .sport-business
.word {

    transform: translateX(-50%) scale(.96);
}

.business .ecosystem
> .sport-business
.word {

    transition: color .7s ease, transform .85s cubic-bezier(.22, 1, .36, 1);
}


/* ==================================================
   VISIBLE — SOURCES
================================================== */

.business .ecosystem.is-visible
> .sources
> .item h3,

.business .ecosystem.is-visible
> .sources
> .item p {
    opacity: 1;
}

.business .ecosystem.is-visible
> .sources
> .item h3,

.business .ecosystem.is-visible
> .sources
> .item p {
    transform: translateY(0);
}

.business .ecosystem.is-visible
> .sources
> .item h3 {

    color: rgba( 255, 255, 255, .82 );
}

.business .ecosystem.is-visible
> .sources
> .item p {

    color: rgba( 255, 255, 255, .5 );
}


/* ==================================================
   SOURCE DELAYS
================================================== */

.business .ecosystem.is-visible
> .sources
> .media h3 {

    transition-delay: 0s;
}

.business .ecosystem.is-visible
> .sources
> .media p {

    transition-delay: .04s;
}

.business .ecosystem.is-visible
> .sources
> .diffusion h3 {

    transition-delay: 0s;
}

.business .ecosystem.is-visible
> .sources
> .diffusion p {

    transition-delay: .04s;
}


/* ==================================================
   VISIBLE — SOURCE MARKERS
================================================== */

.business .ecosystem.is-visible
> .sources
> .item
.marker i {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 6px #0b0b0b, 0 0 18px rgba(233, 64, 27, .5);
}

.business .ecosystem.is-visible
> .sources
> .item
.marker i {
    opacity: 1;
}

.business .ecosystem.is-visible
> .sources
> .item
.marker i {
    transform: scale(1);
}

.business .ecosystem.is-visible
> .sources
> .item
.marker::before {
    opacity: 1;
}

.business .ecosystem.is-visible
> .sources
> .item
.marker::before {
    transform: translate(-50%, -50%) scale(1);
}

.business .ecosystem.is-visible
> .sources
> .item
.marker i,

.business .ecosystem.is-visible
> .sources
> .item
.marker::before {

    transition-delay: .1s;
}


/* ==================================================
   VISIBLE — INPUT STREAMS
================================================== */

.business .ecosystem.is-visible
.stream-active-media,

.business .ecosystem.is-visible
.stream-active-diffusion {

    stroke-dashoffset: 0;
}


/* ==================================================
   VISIBLE — JUNCTION
================================================== */

.business .ecosystem.is-visible
> .convergence
> .junction i {
    opacity: 1;
}

.business .ecosystem.is-visible
> .convergence
> .junction i {
    transform: scale(1);
}

.business .ecosystem.is-visible
> .convergence
> .junction i {

    transition-delay: .78s;
}


/* ==================================================
   VISIBLE — OUTPUT STREAM
================================================== */

.business .ecosystem.is-visible
.stream-active-output {

    stroke-dashoffset: 0;
}


/* ==================================================
   STREAMS — FINAL STATE
================================================== */

.business .ecosystem.is-current
.stream-active {

    stroke-dasharray: none;
    stroke-dashoffset: 0;
}


/* ==================================================
   VISIBLE — OUTPUT
================================================== */

.business .ecosystem.is-visible
> .convergence
> .output::before {
    opacity: 1;
}

.business .ecosystem.is-visible
> .convergence
> .output::before {
    transform: translate(-50%, -50%) scale(1);
}

.business .ecosystem.is-visible
> .convergence
> .output::before {
    transition-delay: 1.18s;
}

.business .ecosystem.is-visible
> .convergence
> .output i {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 9px #0b0b0b, 0 0 28px rgba(233, 64, 27, .65), 0 0 70px rgba(233, 64, 27, .2);
}

.business .ecosystem.is-visible
> .convergence
> .output i {
    opacity: 1;
}

.business .ecosystem.is-visible
> .convergence
> .output i {
    transform: scale(1.3);
}

.business .ecosystem.is-visible
> .convergence
> .output i {
    transition-delay: 1.15s;
}


/* ==================================================
   VISIBLE — SPORT BUSINESS
================================================== */

.business .ecosystem.is-visible
> .sport-business::before {
    opacity: 1;
}

.business .ecosystem.is-visible
> .sport-business::before {
    transition-delay: 1.16s;
}

.business .ecosystem.is-visible
> .sport-business h3 {
    color: var(--color-white);
}

.business .ecosystem.is-visible
> .sport-business h3 {
    opacity: 1;
}

.business .ecosystem.is-visible
> .sport-business h3 {
    transform: translateY(0) scale(1);
}

.business .ecosystem.is-visible
> .sport-business h3 {
    transition-delay: 1.2s;
}

.business .ecosystem.is-visible
> .sport-business p {
    color: rgba( 255, 255, 255, .62 );
}

.business .ecosystem.is-visible
> .sport-business p {
    opacity: 1;
}

.business .ecosystem.is-visible
> .sport-business p {
    transform: translateY(0);
}

.business .ecosystem.is-visible
> .sport-business p {
    transition-delay: 1.3s;
}

.business .ecosystem.is-visible
> .sport-business
.word {
    color: rgba( 233, 64, 27, .05 );
}

.business .ecosystem.is-visible
> .sport-business
.word {
    transform: translateX(-50%) scale(1);
}

.business .ecosystem.is-visible
> .sport-business
.word {
    transition-delay: 1.16s;
}


/* ==================================================
   CURRENT PULSE
================================================== */

.business .ecosystem.is-current
> .sources
> .item
.marker i {

    animation: ecosystem-source-pulse 2s ease-in-out infinite;
}

.business .ecosystem.is-current
> .convergence
> .output i {

    animation: ecosystem-output-pulse 2s ease-in-out infinite;
}


/* ==================================================
   PULSE ANIMATIONS
================================================== */

@keyframes ecosystem-source-pulse {

    0%,
    100% {

        box-shadow: 0 0 0 6px #0b0b0b, 0 0 12px rgba(233, 64, 27, .35);

    }

    50% {

        box-shadow: 0 0 0 6px #0b0b0b, 0 0 22px rgba(233, 64, 27, .7);

    }

}

@keyframes ecosystem-output-pulse {

    0%,
    100% {

        box-shadow: 0 0 0 9px #0b0b0b, 0 0 22px rgba(233, 64, 27, .45), 0 0 55px rgba(233, 64, 27, .12);

    }

    50% {

        box-shadow: 0 0 0 9px #0b0b0b, 0 0 34px rgba(233, 64, 27, .75), 0 0 85px rgba(233, 64, 27, .25);

    }

}


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

@media screen and (min-width: 1024px) {

    .business .ecosystem
    > .sources
    > .item:hover h3 {
        color: var(--color-white);
    }

.business .ecosystem
    > .sources
    > .item:hover h3 {
        transform: translateY(-3px);
    }

    .business .ecosystem
    > .sources
    > .item:hover p {

        color: rgba( 255, 255, 255, .72 );
    }

    .business .ecosystem
    > .sport-business:hover
    .word {

        color: rgba( 233, 64, 27, .075 );
    }

}


/* ==================================================
   RESPONSIVE
================================================== */

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

    /* ==================================================
       ECOSYSTEM
    ================================================== */

    .business .ecosystem {

        min-height: 0;
    }


    /* ==================================================
       SOURCES
    ================================================== */

    .business .ecosystem
    > .sources {

        grid-template-columns: repeat( 2, minmax(0, 1fr) );
    }


    /* ==================================================
       SOURCE ITEM
    ================================================== */

    .business .ecosystem
    > .sources
    > .item {
        min-height: 155px;
    }

.business .ecosystem
    > .sources
    > .item {
        padding: 2.2em 1.2em 2em;
    }


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

    .business .ecosystem
    > .sources
    > .item h3 {

        font-size: clamp( 22px, 7vw, 30px );
    }


    /* ==================================================
       SOURCE TEXT
    ================================================== */

    .business .ecosystem
    > .sources
    > .item p {

        font-size: 11px;
    }


    /* ==================================================
       CONVERGENCE
    ================================================== */

    .business .ecosystem
    > .convergence {

        height: 185px;
    }


    /* ==================================================
       STREAMS
    ================================================== */

    .business .ecosystem
    .stream-active {

        stroke-width: 1.6;
    }

    .business .ecosystem
    .stream-current {

        stroke-width: 1.6;
        stroke-dasharray: 5 22;
    }


    /* ==================================================
       SPORT BUSINESS
    ================================================== */

    .business .ecosystem
    > .sport-business {
        min-height: 185px;
    }

.business .ecosystem
    > .sport-business {
        padding: 3.3em 1.5em 2.8em;
    }

    .business .ecosystem
    > .sport-business h3 {

        font-size: clamp( 36px, 11vw, 50px );
    }

    .business .ecosystem
    > .sport-business p {

        font-size: 12px;
    }


    /* ==================================================
       WORD
    ================================================== */

    .business .ecosystem
    > .sport-business
    .word {

        font-size: clamp( 70px, 25vw, 110px );
    }

}


/* ==================================================
   ACCESSIBILITY
================================================== */

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

    .business .ecosystem
    .stream-current {
        opacity: 0;
    }

.business .ecosystem
    .stream-current {
        animation: none !important;
    }

    .business .ecosystem
    > .sources
    > .item
    .marker i,

    .business .ecosystem
    > .convergence
    > .output i {

        animation: none !important;
    }

    .business .ecosystem
    .stream-active {

        transition: none;
    }

}