/* ==========================================================
   REALDEEN PREMIUM HERO CAROUSEL V1
   ========================================================== */

.masthead.rd-hero-carousel{
    display:block !important;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    min-height:clamp(355px,22vw,430px);
    background:#103326;
    border-radius:10px;
    color:#f3efde;
}

.rd-hero-stage{
    position:relative;
    min-height:inherit;
    overflow:hidden;
}

.rd-hero-slide{
    --rd-tone:#103326;

    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:1.04fr .96fr;

    background:var(--rd-tone);
    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .95s cubic-bezier(.22,.61,.36,1),
        visibility .95s;
}

.rd-hero-slide.is-active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    z-index:2;
}

/* COPY */

.masthead.rd-hero-carousel .rd-hero-copy{
    position:relative;
    z-index:4;
    padding:
        clamp(38px,3vw,57px)
        clamp(34px,3vw,58px)
        clamp(56px,4vw,72px)
        clamp(42px,3.4vw,66px);
}

.rd-hero-slide .eyebrow,
.rd-hero-slide h1,
.rd-hero-slide h2,
.rd-hero-slide .masthead-description,
.rd-hero-slide .masthead-stats{
    opacity:0;
    transform:translateY(15px);
}

.rd-hero-slide.is-active .eyebrow{
    animation:rdHeroText .72s .12s both cubic-bezier(.22,.61,.36,1);
}

.rd-hero-slide.is-active h1,
.rd-hero-slide.is-active h2{
    animation:rdHeroText .78s .20s both cubic-bezier(.22,.61,.36,1);
}

.rd-hero-slide.is-active .masthead-description{
    animation:rdHeroText .78s .31s both cubic-bezier(.22,.61,.36,1);
}

.rd-hero-slide.is-active .masthead-stats{
    animation:rdHeroText .78s .41s both cubic-bezier(.22,.61,.36,1);
}

@keyframes rdHeroText{
    from{
        opacity:0;
        transform:translateY(15px);
        filter:blur(2px);
    }
    to{
        opacity:1;
        transform:none;
        filter:none;
    }
}

/* ART */

.rd-hero-art{
    position:relative;
    min-height:100%;
    background-size:cover;
    background-repeat:no-repeat;
    overflow:hidden;
    transform-origin:center;
    will-change:transform;
}

.rd-hero-art:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            90deg,
            var(--rd-tone) 0%,
            rgba(0,0,0,.12) 20%,
            transparent 42%
        );
}

.rd-hero-art:after{
    content:"";
    position:absolute;
    inset:-20%;
    z-index:2;
    pointer-events:none;

    background:
        linear-gradient(
            110deg,
            transparent 25%,
            rgba(229,204,145,.08) 47%,
            transparent 66%
        );

    opacity:0;
    transform:translateX(-30%);
}

.rd-hero-slide.is-active .rd-hero-art:after{
    animation:rdHeroLight 5.8s .5s ease-out both;
}

@keyframes rdHeroLight{
    0%{
        opacity:0;
        transform:translateX(-32%);
    }
    30%{
        opacity:.7;
    }
    100%{
        opacity:0;
        transform:translateX(35%);
    }
}

/* CINEMATIC IMAGE MOTIONS */

.rd-hero-slide.is-active[data-effect="zoom"] .rd-hero-art{
    animation:rdHeroZoom 8s ease-out both;
}

.rd-hero-slide.is-active[data-effect="pan-left"] .rd-hero-art{
    animation:rdHeroPanLeft 8s ease-out both;
}

.rd-hero-slide.is-active[data-effect="pan-right"] .rd-hero-art{
    animation:rdHeroPanRight 8s ease-out both;
}

.rd-hero-slide.is-active[data-effect="drift"] .rd-hero-art{
    animation:rdHeroDrift 8s ease-out both;
}

@keyframes rdHeroZoom{
    from{transform:scale(1.015)}
    to{transform:scale(1.075)}
}

@keyframes rdHeroPanLeft{
    from{transform:scale(1.075) translateX(1.5%)}
    to{transform:scale(1.105) translateX(-1.5%)}
}

@keyframes rdHeroPanRight{
    from{transform:scale(1.075) translateX(-1.5%)}
    to{transform:scale(1.105) translateX(1.5%)}
}

@keyframes rdHeroDrift{
    from{transform:scale(1.055) translateY(1%)}
    to{transform:scale(1.10) translateY(-1%)}
}

/* SMALL ART CAPTION */

.rd-hero-art-caption{
    position:absolute;
    left:13%;
    bottom:23px;
    z-index:4;

    color:rgba(231,211,166,.62);
    font-size:8px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
}

/* CONTROLS */

.rd-hero-controls{
    position:absolute;
    right:27px;
    bottom:20px;
    z-index:12;

    display:flex;
    align-items:center;
    gap:11px;
}

.rd-hero-arrow{
    width:34px;
    height:34px;
    padding:0;

    display:grid;
    place-items:center;

    color:#efe4c7;
    background:rgba(8,34,27,.62);

    border:1px solid rgba(222,197,139,.34);
    border-radius:50%;

    font-size:15px;
    line-height:1;

    backdrop-filter:blur(8px);
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.rd-hero-arrow:hover{
    background:rgba(211,184,119,.17);
    border-color:rgba(230,207,152,.65);
    transform:translateY(-1px);
}

.rd-hero-dots{
    display:flex;
    align-items:center;
    gap:5px;

    padding:8px 10px;
    border-radius:20px;

    background:rgba(8,34,27,.42);
    backdrop-filter:blur(8px);
}

.rd-hero-dot{
    display:block;

    width:17px;
    height:2px;
    min-width:0;
    min-height:0;

    padding:0;
    border:0;
    border-radius:10px;

    background:rgba(239,228,199,.35);

    transition:
        width .28s ease,
        background .28s ease;
}

.rd-hero-dot.is-active{
    width:34px;
    background:#d8bc7a;
}

/* BOTTOM PROGRESS */

.rd-hero-progress{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:2px;
    z-index:14;

    background:rgba(255,255,255,.06);
    overflow:hidden;
}

.rd-hero-progress span{
    display:block;
    width:100%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            rgba(214,184,112,.45),
            #e0c680
        );

    transform:scaleX(0);
    transform-origin:left;
}

.rd-hero-progress span.is-running{
    animation:rdHeroProgress 7s linear forwards;
}

@keyframes rdHeroProgress{
    from{transform:scaleX(0)}
    to{transform:scaleX(1)}
}

/* TABLET */

@media(max-width:800px){

    .rd-hero-slide{
        grid-template-columns:1.15fr .85fr;
    }

    .masthead.rd-hero-carousel .rd-hero-copy{
        padding:32px 28px 58px;
    }

    .rd-hero-controls{
        right:18px;
        bottom:16px;
    }

    .rd-hero-art-caption{
        display:none;
    }
}

/* MOBILE */

@media(max-width:520px){

    .masthead.rd-hero-carousel{
        min-height:390px;
        border-radius:7px;
    }

    .rd-hero-stage{
        min-height:390px;
    }

    .rd-hero-slide{
        display:block;
    }

    .rd-hero-art{
        position:absolute;
        inset:0;
        min-height:100%;

        opacity:.50;
        background-position:67% center !important;
    }

    .rd-hero-art:before{
        background:
            linear-gradient(
                90deg,
                rgba(13,48,37,.97) 0%,
                rgba(13,48,37,.86) 48%,
                rgba(13,48,37,.48) 100%
            );
    }

    .masthead.rd-hero-carousel .rd-hero-copy{
        position:relative;
        z-index:5;

        min-height:390px;

        padding:
            29px
            24px
            68px;

        background:
            linear-gradient(
                90deg,
                rgba(16,51,38,.38),
                transparent
            );
    }

    .rd-hero-controls{
        right:14px;
        bottom:14px;
        gap:8px;
    }

    .rd-hero-arrow{
        width:30px;
        height:30px;
        font-size:13px;
    }

    .rd-hero-dots{
        padding:7px 8px;
    }

    .rd-hero-dot{
        width:11px;
    }

    .rd-hero-dot.is-active{
        width:24px;
    }
}

/* ACCESSIBILITY */

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

    .rd-hero-slide,
    .rd-hero-slide *,
    .rd-hero-progress span{
        animation:none !important;
        transition:none !important;
    }

    .rd-hero-slide .eyebrow,
    .rd-hero-slide h1,
.rd-hero-slide h2,
    .rd-hero-slide .masthead-description,
    .rd-hero-slide .masthead-stats{
        opacity:1;
        transform:none;
        filter:none;
    }

    .rd-hero-art{
        transform:none !important;
    }
}