/* =========================================================
   PEP HERO — BASE
   ========================================================= */

.pep-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background-color: #1b2530;
    color: #fff;
    font-family: Roboto, Arial, sans-serif;
    outline: none;
}

    .pep-hero:focus-visible {
        outline: 3px solid #2d3e50;
        outline-offset: -3px;
    }


/* =========================================================
   SLIDES CONTAINER
   ========================================================= */

.pep-hero__slides {
    position: relative;
    width: 100%;
    height: clamp(520px, 40vw, 760px);
    overflow: hidden;
}


/* =========================================================
   INDIVIDUAL SLIDE
   ========================================================= */

.pep-hero__slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

    .pep-hero__slide.is-active {
        z-index: 3;
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
    }

    .pep-hero__slide.is-entering-from-right {
        z-index: 4;
        transform: translate3d(100%, 0, 0);
        transition: none;
    }

    .pep-hero__slide.is-entering-from-left {
        z-index: 4;
        transform: translate3d(-100%, 0, 0);
        transition: none;
    }

    .pep-hero__slide.is-exiting-left {
        z-index: 2;
        transform: translate3d(-100%, 0, 0);
    }

    .pep-hero__slide.is-exiting-right {
        z-index: 2;
        transform: translate3d(100%, 0, 0);
    }


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

.pep-hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
    transition: transform 7s ease-out;
    will-change: transform;
}

.pep-hero__slide.is-active .pep-hero__image {
    transform: scale(1.055);
}


/* =========================================================
   GENERAL IMAGE SHADE
   ========================================================= */

.pep-hero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient( 90deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.02) 36%, rgba(0, 0, 0, 0.08) 62%, rgba(0, 0, 0, 0.16) 100% );
}


/* =========================================================
   RED TRANSPARENT CURTAIN
   ========================================================= */

.pep-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

    .pep-hero__shade::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--hero-curtain-width);
        background: linear-gradient( 90deg, rgba(139, 15, 190, 0.48) 0%, rgba(159, 24, 213, 0.54) 48%, rgba(176, 45, 225, 0.49) 100% );
        clip-path: polygon( var(--hero-curtain-top-clip) 0, 100% 0, 100% 100%, 0 100% );
        opacity: 0;
        transform: translate3d(110%, 0, 0);
        will-change: transform, opacity;
    }

.pep-hero__slide.is-active .pep-hero__shade::before {
    animation: pepHeroCurtainIn 0.9s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pepHeroCurtainIn {
    from {
        opacity: 0;
        transform: translate3d(110%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}


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

.pep-hero__content {
    position: absolute;
    left: 50%;
    bottom: 8%;
    z-index: 10;
    width: min(590px, 40vw);
    max-width: 38%;
    color: #fff;
    text-align: left;
}


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

.pep-hero__eyebrow {
    position: absolute;
    top: -55px;
    left: 0;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 6px 8px;
    color: #fff;
    background-color: var(--sremac-bordo);
    font-family: "Roboto Slab", Georgia, serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    overflow-wrap: break-word;
    opacity: 0;
}


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

.pep-hero__title {
    position: relative;
    margin: 0;
    padding: 0 0 26px;
    color: #fff;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: clamp(43px, 3.55vw, 60px);
    font-weight: 500;
    line-height: 1.07;
    overflow-wrap: break-word;
    opacity: 0;
}

    .pep-hero__title::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.92);
    }

    .pep-hero__title a {
        color: inherit;
        text-decoration: none;
    }

        .pep-hero__title a:hover {
            color: inherit;
            text-decoration: none;
        }

        .pep-hero__title a:focus-visible {
            outline: 3px solid rgba(255, 255, 255, 0.95);
            outline-offset: 6px;
        }


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

.pep-hero__description {
    max-width: 100%;
    margin: 15px 0 0;
    padding: 0;
    color: #fff;
    font-family: Roboto, Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: break-word;
    opacity: 0;
}


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

.pep-hero__slide.is-active .pep-hero__eyebrow,
.pep-hero__slide.is-active .pep-hero__title {
    animation: pepHeroFadeInRight 0.6s 0.52s both;
}

.pep-hero__slide.is-active .pep-hero__description {
    animation: pepHeroFadeInRight 0.6s 0.62s both;
}

@keyframes pepHeroFadeInRight {
    from {
        opacity: 0;
        transform: translate3d(140px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}


/* =========================================================
   PREVIOUS / NEXT ARROWS
   ========================================================= */

.pep-hero__arrow {
    position: absolute;
    left: 18px;
    z-index: 30;
    width: 74px;
    height: 74px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background-color: rgba(247, 241, 232, 0.86);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.pep-hero__arrow--previous {
    top: calc(50% - 45px);
    transform: translateY(-50%);
}

.pep-hero__arrow--next {
    top: calc(50% + 45px);
    transform: translateY(-50%);
}

.pep-hero__arrow:hover {
    background-color: rgba(247, 241, 232, 0.98);
}

.pep-hero__arrow--previous:hover,
.pep-hero__arrow--next:hover {
    transform: translateY(-50%) scale(1.06);
}

.pep-hero__arrow:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

.pep-hero__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    border-top: 4px solid currentColor;
    border-right: 4px solid currentColor;
}

.pep-hero__arrow--previous::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.pep-hero__arrow--next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}


/* =========================================================
   DOT NAVIGATION
   ========================================================= */

.pep-hero__dots {
    position: absolute;
    right: 3%;
    bottom: 24px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 9px;
}

.pep-hero__dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    .pep-hero__dot:hover {
        transform: scale(1.2);
    }

    .pep-hero__dot.is-active {
        background-color: #fff;
    }

    .pep-hero__dot:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 4px;
    }


/* =========================================================
   VISUALLY HIDDEN
   ========================================================= */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =========================================================
   NARROWER DESKTOP
   ========================================================= */

@media (max-width: 1300px) {
    :root {
        --hero-curtain-width: 70%;
        --hero-curtain-left: 46.8%;
    }

    .pep-hero__slides {
        height: clamp(520px, 48vw, 700px);
    }

    .pep-hero__content {
        left: 48%;
        bottom: 9%;
        width: min(560px, 44vw);
        max-width: 44%;
    }

    .pep-hero__title {
        font-size: clamp(40px, 4vw, 54px);
    }

    .pep-hero__eyebrow {
        font-size: 21px;
    }

    .pep-hero__description {
        font-size: 17px;
    }

    .pep-hero__arrow {
        width: 64px;
        height: 64px;
    }

    .pep-hero__arrow--previous {
        top: calc(50% - 39px);
    }

    .pep-hero__arrow--next {
        top: calc(50% + 39px);
    }
}


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

@media (max-width: 900px) {
    .pep-hero__slides {
        height: 620px;
    }

    .pep-hero__slide::after {
        background: linear-gradient( 0deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.08) 55%, rgba(0, 0, 0, 0.02) 100% );
    }

    .pep-hero__shade::before {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 72%;
        clip-path: polygon( 0 18%, 100% 0, 100% 100%, 0 100% );
        background: linear-gradient( 180deg, rgba(159, 24, 213, 0.46) 0%, rgba(139, 15, 190, 0.64) 100% );
        transform: translate3d(0, 110%, 0);
    }

    .pep-hero__slide.is-active .pep-hero__shade::before {
        animation-name: pepHeroCurtainInMobile;
    }

    @keyframes pepHeroCurtainInMobile {
        from {
            opacity: 0;
            transform: translate3d(0, 110%, 0);
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    .pep-hero__content {
        right: 8%;
        bottom: 10%;
        left: 8%;
        width: auto;
        max-width: 760px;
    }

    .pep-hero__eyebrow {
        position: relative;
        top: auto;
        margin-bottom: 18px;
        font-size: 20px;
    }

    .pep-hero__title {
        max-width: 680px;
        font-size: clamp(39px, 6vw, 52px);
    }

    .pep-hero__description {
        max-width: 650px;
    }

    .pep-hero__arrow {
        left: 14px;
        width: 54px;
        height: 54px;
    }

    .pep-hero__arrow--previous {
        top: calc(42% - 34px);
    }

    .pep-hero__arrow--next {
        top: calc(42% + 34px);
    }

    .pep-hero__arrow::before {
        width: 15px;
        height: 15px;
        border-top-width: 3px;
        border-right-width: 3px;
    }

    .pep-hero__dots {
        right: 8%;
        bottom: 22px;
    }
}


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

@media (max-width: 600px) {
    .pep-hero__slides {
        height: min(680px, 155vw);
        min-height: 540px;
        max-height: 680px;
    }

    .pep-hero__shade::before {
        height: 76%;
        clip-path: polygon( 0 17%, 100% 5%, 100% 100%, 0 100% );
        background: linear-gradient( 180deg, rgba(159, 28, 210, 0.44) 0%, rgba(140, 17, 190, 0.68) 100% );
    }

    .pep-hero__content {
        right: 22px;
        bottom: 68px;
        left: 22px;
        width: auto;
        max-width: none;
    }

    .pep-hero__eyebrow {
        margin-bottom: 15px;
        padding: 6px 8px;
        font-size: 17px;
    }

    .pep-hero__title {
        padding-bottom: 18px;
        font-size: clamp(31px, 9vw, 42px);
        line-height: 1.08;
    }

    .pep-hero__description {
        display: -webkit-box;
        overflow: hidden;
        margin-top: 13px;
        font-size: 16px;
        line-height: 1.42;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .pep-hero__arrow {
        left: 10px;
        width: 46px;
        height: 46px;
        background-color: rgba(247, 241, 232, 0.82);
    }

    .pep-hero__arrow--previous {
        top: calc(37% - 29px);
    }

    .pep-hero__arrow--next {
        top: calc(37% + 29px);
    }

    .pep-hero__arrow::before {
        width: 13px;
        height: 13px;
        border-top-width: 2px;
        border-right-width: 2px;
    }

    .pep-hero__dots {
        right: auto;
        bottom: 23px;
        left: 50%;
        transform: translateX(-50%);
    }

    .pep-hero__dot {
        width: 10px;
        height: 10px;
    }

    .pep-hero__slide.is-active .pep-hero__eyebrow,
    .pep-hero__slide.is-active .pep-hero__title {
        animation-delay: 0.42s;
    }

    .pep-hero__slide.is-active .pep-hero__description {
        animation-delay: 0.5s;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {
    .pep-hero__slides {
        min-height: 520px;
    }

    .pep-hero__content {
        right: 18px;
        left: 18px;
    }

    .pep-hero__title {
        font-size: 30px;
    }

    .pep-hero__description {
        font-size: 15px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .pep-hero__slide,
    .pep-hero__image,
    .pep-hero__arrow,
    .pep-hero__dot {
        transition: none;
    }

        .pep-hero__slide.is-active .pep-hero__image {
            transform: none;
        }

        .pep-hero__slide.is-active .pep-hero__shade::before {
            animation: none;
            opacity: 1;
            transform: none;
        }

        .pep-hero__slide.is-active .pep-hero__eyebrow,
        .pep-hero__slide.is-active .pep-hero__title,
        .pep-hero__slide.is-active .pep-hero__description {
            animation: none;
            opacity: 1;
            transform: none;
        }
}