/**
 * Fichier  : /pages/sport-business/event/assets/css/intro.css
 * Fonction : introduction immersive et manifeste de l'offre Événementiel
 */


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

.event .intro {
    position: relative;
    overflow: hidden;
}

.event .intro {
    width: 100%;
}

.event .intro {
    background: #080808;
}

.event .intro {
    color: #fff;
}

.event .intro {
    --intro-parallax: 0px;
}


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

.event .intro > .background {
    position: absolute;
    inset: -5% 0;
    z-index: 0;
}

.event .intro > .background {
    background-image: var(--event-intro-image);
    background-position: center calc(50% + var(--intro-parallax));
    background-repeat: no-repeat;
    background-size: cover;
}

.event .intro > .background {
    pointer-events: none;
}

.event .intro > .background {
    will-change: background-position;
}


/* ==================================================
   OVERLAY
================================================== */

.event .intro > .overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.event .intro > .overlay {
    pointer-events: none;
}

.event .intro > .overlay {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .10) 0%,
            rgba(0, 0, 0, .16) 35%,
            rgba(0, 0, 0, .42) 58%,
            rgba(0, 0, 0, .76) 76%,
            rgba(0, 0, 0, .92) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, .82) 0%,
            rgba(0, 0, 0, .28) 35%,
            rgba(0, 0, 0, .08) 65%,
            rgba(0, 0, 0, .16) 100%
        ),
        radial-gradient(
            circle at 82% 28%,
            rgba(0, 0, 0, .36) 0%,
            rgba(0, 0, 0, .22) 30%,
            transparent 58%
        );
}


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

.event .intro-main {
    position: relative;
    z-index: 2;
}

.event .intro-main {
    min-height: clamp(720px, 88vh, 960px);
}

.event .intro-main {
    box-sizing: border-box;
    padding:
        clamp(5em, 8vw, 8em)
        var(--event-padding-inline)
        clamp(5em, 8vw, 8em);
}

.event .intro-main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* ==================================================
   COPY
================================================== */

.event .intro .copy {
    width: min(560px, 48vw);
}


/* ==================================================
   EYEBROW
================================================== */

.event .intro .eyebrow {
    margin-bottom: clamp(3em, 5vw, 5em);
}

.event .intro .eyebrow {
    display: flex;
    align-items: center;
    gap: 1em;
}

.event .intro .eyebrow {
    font-family: 'bold-font';
    font-size: 8px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .72);
}

.event .intro .eyebrow i {
    flex: 0 0 auto;
}

.event .intro .eyebrow i {
    width: 28px;
    height: 1px;
}

.event .intro .eyebrow i {
    background: var(--color-primary);
}


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

.event .intro h2 {
    max-width: 600px;
    margin: 0;
}

.event .intro h2 {
    font-family: 'bold-font';
    font-size: 3.5em;
    font-weight: 400;
    line-height: .88;
    text-transform: uppercase;
    letter-spacing: -.055em;
    color: #fff;
}

.event .intro h2 span {
    display: block;
}

.event .intro h2 span {
    color: var(--color-primary);
}


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

.event .intro .copy > p {
    max-width: 470px;
}

.event .intro .copy > p {
    margin: 2.4em 0 2.5em;
}

.event .intro .copy > p {
    font-family: 'content-font';
    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;
    color: rgba(255, 255, 255, .88);
}


/* ==================================================
   FACTS
================================================== */

.event .intro .facts {
    width: min(440px, 100%);
    margin-top: 4em;
}

.event .intro .facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.event .intro .facts {
    border-top: 1px solid rgba(255, 255, 255, .25);
}

.event .intro .fact {
    box-sizing: border-box;
    padding: 1.5em 1.5em 0 0;
}

.event .intro .fact + .fact {
    padding-left: 1.8em;
}

.event .intro .fact + .fact {
    border-left: 1px solid rgba(255, 255, 255, .20);
}

.event .intro .fact strong {
    display: block;
}

.event .intro .fact strong {
    margin-bottom: .25em;
}

.event .intro .fact strong {
    font-family: 'bold-font';
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    color: #fff;
}

.event .intro .fact span {
    display: block;
}

.event .intro .fact span {
    max-width: 150px;
}

.event .intro .fact span {
    font-family: 'bold-font';
    font-size: 7px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .72);
}


/* ==================================================
   MANIFESTO
================================================== */

.event .intro .manifesto {
    position: relative;
    z-index: 2;
}

.event .intro .manifesto {
    margin: 0 5em;
}

.event .intro .manifesto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event .intro .manifesto {
    border: 1px solid rgba(255, 255, 255, .22);
    border-bottom: 0;
}

.event .intro .manifesto {
    background:
        radial-gradient(
            ellipse 45% 70% at center,
            rgba(9, 9, 9, 0) 0%,
            rgba(9, 9, 9, .08) 22%,
            rgba(9, 9, 9, .35) 45%,
            rgba(9, 9, 9, .68) 68%,
            rgba(9, 9, 9, .88) 100%
        );
}


/* ==================================================
   MANIFESTO SIDE
================================================== */

.event .intro .manifesto .side {
    position: relative;
    z-index: 2;
}

.event .intro .manifesto .side {
    min-height: clamp(340px, 28vw, 420px);
}

.event .intro .manifesto .side {
    box-sizing: border-box;
    padding:
        clamp(3.5em, 5vw, 5em)
        var(--event-padding-inline);
}

.event .intro .manifesto .side {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event .intro .manifesto .side--left {
    border-right: 1px solid rgba(255, 255, 255, .22);
}


/* ==================================================
   MANIFESTO LABEL
================================================== */

.event .intro .manifesto .side > span {
    margin-bottom: 1.8em;
}

.event .intro .manifesto .side > span {
    font-family: 'bold-font';
    font-size: 8px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .76);
}


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

.event .intro .manifesto .side > strong {
    font-family: 'bold-font';
    font-size: clamp(42px, 4.4vw, 70px);
    font-weight: 400;
    line-height: .88;
    text-transform: uppercase;
    letter-spacing: -.05em;
    color: #fff;
}

.event .intro .manifesto .side > strong {
    text-shadow:
        0 3px 28px
        rgba(0, 0, 0, .50);
}

.event .intro .manifesto .side > strong em {
    display: block;
}

.event .intro .manifesto .side > strong em {
    font-style: normal;
    color: var(--color-primary);
}

.event .intro .manifesto .side > strong em {
    text-shadow:
        0 3px 24px
        rgba(0, 0, 0, .35);
}


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

.event .intro .manifesto .current {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 4;
}

.event .intro .manifesto .current {
    width: 1px;
}

.event .intro .manifesto .current {
    overflow: hidden;
}

.event .intro .manifesto .current {
    background: rgba(196, 18, 18, .30);
}

.event .intro .manifesto .current {
    pointer-events: none;
}

.event .intro .manifesto .current span {
    position: absolute;
    top: 0;
    left: 0;
}

.event .intro .manifesto .current span {
    width: 100%;
    height: 28%;
}

.event .intro .manifesto .current span {
    background:
        linear-gradient(
            180deg,
            transparent,
            var(--color-primary),
            #fff,
            var(--color-primary),
            transparent
        );
}

.event .intro .manifesto .current span {
    box-shadow:
        0 0 14px
        var(--color-primary);
}

.event .intro .manifesto .current span {
    animation:
        event-intro-current
        3.2s
        ease-in-out
        infinite;
}


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

@keyframes event-intro-current {

    0% {
        transform: translateY(-110%);
        opacity: 0;
    }

    15%,
    85% {
        opacity: 1;
    }

    100% {
        transform: translateY(460%);
        opacity: 0;
    }

}


/* ==================================================
   FOOTER
================================================== */

.event .intro > footer {
    position: relative;
    z-index: 2;
}

.event .intro > footer {
    box-sizing: border-box;
}

.event .intro > footer {
    margin: 0 5em;
}

.event .intro > footer {
    padding:
        clamp(2.2em, 3vw, 3em)
        var(--event-padding-inline)
        clamp(4em, 6vw, 6em);
}

.event .intro > footer {
    display: flex;
    justify-content: center;
}

.event .intro > footer {
    border-top: 1px solid rgba(255, 255, 255, .18);
}


/* ==================================================
   FOOTER TEXT
================================================== */

.event .intro > footer p {
    max-width: 760px;
    margin: 0;
}

.event .intro > footer p {
    text-align: center;
}

.event .intro > footer p {
    font-family: 'content-font';
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    color: rgba(255, 255, 255, .92);
}

.event .intro > footer p {
    text-shadow:
        0 2px 18px
        rgba(0, 0, 0, .45);
}


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

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

    .event .intro-main {
        min-height: 760px;
    }

    .event .intro > .background {
        background-position: 40% calc(50% + var(--intro-parallax));
    }

    .event .intro .copy {
        width: min(560px, 66vw);
    }

    .event .intro h2 {
        font-size: clamp(56px, 8vw, 78px);
    }

    .event .intro .manifesto {
        margin: 0 2.5em;
    }

    .event .intro .manifesto .side {
        min-height: 340px;
    }

    .event .intro .manifesto .side {
        padding:
            3.5em
            clamp(2.5em, 5vw, 4em);
    }

    .event .intro .manifesto .side > strong {
        font-size: clamp(42px, 5vw, 62px);
    }

    .event .intro > footer {
        margin: 0 2.5em;
    }

}


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

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

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

    .event .intro > .background {
        inset: 0;
    }

    .event .intro > .background {
        background-image:
            var(--event-intro-image-mobile);

        background-position: 28% center;
    }


    /* ==================================================
       OVERLAY
    ================================================== */

    .event .intro > .overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, .34) 0%,
                rgba(0, 0, 0, .52) 48%,
                rgba(0, 0, 0, .80) 100%
            ),
            linear-gradient(
                0deg,
                rgba(0, 0, 0, .90) 0%,
                rgba(0, 0, 0, .46) 48%,
                rgba(0, 0, 0, .26) 100%
            );
    }


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

    .event .intro-main {
        min-height: 720px;
    }

    .event .intro-main {
        padding-top: 4.5em;
        padding-bottom: 4em;
    }

    .event .intro-main {
        align-items: stretch;
        justify-content: center;
    }

    .event .intro .copy {
        width: 100%;
    }

    .event .intro .eyebrow {
        margin-bottom: 3em;
    }

    .event .intro h2 {
        max-width: 100%;
    }

    .event .intro h2 {
        font-size: 2.6em;
    }

    .event .intro .copy > p {
        max-width: 420px;
    }

    .event .intro .copy > p {
        font-size: 12px;
    }

    .event .intro .facts {
        width: 100%;
        margin-top: 3.5em;
    }

    .event .intro .fact {
        padding-right: 1em;
    }

    .event .intro .fact + .fact {
        padding-left: 1.2em;
    }

    .event .intro .fact strong {
        font-size: 27px;
    }


    /* ==================================================
       MANIFESTO
    ================================================== */

    .event .intro .manifesto {
        margin: 0 1.4em;
    }

    .event .intro .manifesto {
        grid-template-columns: 1fr;
    }

    .event .intro .manifesto {
        border-color: rgba(255, 255, 255, .18);
        border-bottom: 0;
    }


    /* ==================================================
       MANIFESTO SIDE
    ================================================== */

    .event .intro .manifesto .side {
        min-height: 260px;
    }

    .event .intro .manifesto .side {
        padding: 3.5em 2em;
    }

    .event .intro .manifesto .side--left {
        border-right: 0;
    }


    /* ==================================================
       MANIFESTO LABEL
    ================================================== */

    .event .intro .manifesto .side > span {
        margin-bottom: 1.4em;
    }

    .event .intro .manifesto .side > span {
        font-size: 7px;
    }


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

    .event .intro .manifesto .side > strong {
        max-width: 80%;
    }

    .event .intro .manifesto .side > strong {
        font-size: 2.5em;
        line-height: .90;
    }


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

    .event .intro .manifesto .current {
        top: 260px;
        right: 0;
        bottom: auto;
        left: 0;
    }

    .event .intro .manifesto .current {
        width: auto;
        height: 1px;
    }

    .event .intro .manifesto .current span {
        width: 28%;
        height: 100%;
    }

    .event .intro .manifesto .current span {
        background:
            linear-gradient(
                90deg,
                transparent,
                var(--color-primary),
                #fff,
                var(--color-primary),
                transparent
            );
    }

    .event .intro .manifesto .current span {
        animation:
            event-intro-current-mobile
            3.2s
            ease-in-out
            infinite;
    }


    /* ==================================================
       FOOTER
    ================================================== */

    .event .intro > footer {
        margin: 0 1.4em;
    }

    .event .intro > footer {
        padding:
            2.2em
            1.4em
            4em;
    }

    .event .intro > footer p {
        max-width: 520px;
    }

    .event .intro > footer p {
        font-size: 12px;
        line-height: 1.7;
        color: rgba(255, 255, 255, .94);
    }

}


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

@keyframes event-intro-current-mobile {

    0% {
        transform: translateX(-110%);
        opacity: 0;
    }

    15%,
    85% {
        opacity: 1;
    }

    100% {
        transform: translateX(460%);
        opacity: 0;
    }

}


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

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

    .event .intro > .background {
        background-position: center center !important;
    }

    .event .intro .manifesto .current span {
        animation: none !important;
    }

}