/**
 * Styles the native sustainability hero slider that replaces the exported slider.
 * Depends on the shared scroll cue module and sustainability image assets.
 */

:root {
    --sustainability-slider-grid-width: 1240px;
    --sustainability-slider-grid-height: 900px;
    --sustainability-slider-card-radius: 70px;
    --sustainability-slider-text: #ffffff;
    --sustainability-slider-shadow: rgba(0, 0, 0, 0.4);
    --sustainability-slider-card-overlay: rgba(0, 0, 0, 0.25);
    --sustainability-slider-font: 'Montserrat', sans-serif;
    --sustainability-slider-layer-duration: 1000ms;
    --sustainability-slider-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
    --sustainability-slider-scale-ease: cubic-bezier(0.45, 0, 0.2, 1);
    --sustainability-slider-cue-z-index: 15;
}

.sustainability-slider {
    background-color: transparent;
    height: min(var(--sustainability-slider-grid-height), calc(100vw * 0.72580645));
    max-height: var(--sustainability-slider-grid-height);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.sustainability-slider__stage {
    height: 100%;
    left: 50%;
    max-width: var(--sustainability-slider-grid-width);
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: min(100vw, var(--sustainability-slider-grid-width));
}

.sustainability-slider__card {
    background-image:
        linear-gradient(var(--sustainability-slider-card-overlay), var(--sustainability-slider-card-overlay)),
        url("../images/sust1-1.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 0 var(--sustainability-slider-card-radius) 0 var(--sustainability-slider-card-radius);
    height: 95%;
    left: 2.5%;
    position: absolute;
    top: 0;
    width: 95%;
    z-index: 1;
}

.sustainability-slider__layer {
    color: var(--sustainability-slider-text);
    display: block;
    font-family: var(--sustainability-slider-font);
    opacity: 0;
    position: absolute;
    z-index: 2;
}

.sustainability-slider__layer--heading {
    font-weight: 700;
    text-align: center;
    text-shadow: 3px 2px 3px var(--sustainability-slider-shadow);
    text-transform: uppercase;
}

.sustainability-slider__layer--copy {
    font-weight: 500;
    text-shadow: 2px 1px 3px var(--sustainability-slider-shadow);
    text-transform: uppercase;
}

.sustainability-slider__layer--from-left {
    animation: sustainability-slider-from-left var(--sustainability-slider-layer-duration) var(--sustainability-slider-ease) forwards;
}

.sustainability-slider__layer--from-right {
    animation: sustainability-slider-from-right var(--sustainability-slider-layer-duration) var(--sustainability-slider-ease) forwards;
}

.sustainability-slider__layer--scale-in {
    animation: sustainability-slider-scale-in var(--sustainability-slider-layer-duration) var(--sustainability-slider-scale-ease) forwards;
}

.sustainability-slider__layer--cuidamos {
    animation-delay: 4600ms;
    font-size: min(51px, 4.11290323vw);
    left: 12.82258065%;
    line-height: min(63px, 5.08064516vw);
    top: 3.66666667%;
    z-index: 8;
}

.sustainability-slider__layer--planeta {
    animation-delay: 5100ms;
    font-size: min(61px, 4.91935484vw);
    left: 6.0483871%;
    line-height: min(76px, 6.12903226vw);
    top: 10.44444444%;
    width: 37.74193548%;
    z-index: 9;
}

.sustainability-slider__layer--copy-intro {
    animation-delay: 5100ms;
    font-size: min(23px, 1.85483871vw);
    left: 8.87096774%;
    line-height: min(28px, 2.25806452vw);
    top: 38.88888889%;
    z-index: 5;
}

.sustainability-slider__layer--copy-strong {
    animation-delay: 6300ms;
    font-size: min(23px, 1.85483871vw);
    font-weight: 700;
    left: 8.87096774%;
    line-height: min(29px, 2.33870968vw);
    top: 46.22222222%;
    z-index: 4;
}

.sustainability-slider__layer--circle {
    animation-delay: 4100ms;
    height: 59.44444444%;
    left: 40.44354839%;
    top: 14.05555556%;
    width: 43.14516129%;
    z-index: 6;
}

.sustainability-slider__layer--logo {
    animation-delay: 4600ms;
    height: 7.11111111%;
    left: 49.83870968%;
    top: 39.88888889%;
    width: 24.19354839%;
    z-index: 7;
}

.sustainability-slider__layer--cert-text {
    animation-delay: 7440ms;
    font-size: min(20px, 1.61290323vw);
    font-weight: 600;
    left: 9.35483871%;
    line-height: min(25px, 2.01612903vw);
    text-align: center;
    top: 62.44444444%;
    z-index: 3;
}

.sustainability-slider__layer--certs {
    animation-delay: 8540ms;
    height: 14%;
    left: 9.35483871%;
    top: 71%;
    width: 20.24193548%;
    z-index: 2;
}

.sustainability-slider > .simil-scroll-cue {
    bottom: 0;
    left: 50%;
    position: absolute;
    z-index: var(--sustainability-slider-cue-z-index);
}

@keyframes sustainability-slider-from-left {
    from {
        opacity: 1;
        transform: translateX(-175%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes sustainability-slider-from-right {
    from {
        opacity: 1;
        transform: translateX(175%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes sustainability-slider-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media screen and (max-width: 778px) {
    .sustainability-slider {
        --sustainability-slider-card-radius: 22px;
    }

    .sustainability-slider > .simil-scroll-cue {
        display: none;
    }
}