/* ======================================================================
   Advanced Slider — Digitech Miner
   ----------------------------------------------------------------------
   This stylesheet never references a theme's class names. The script tags
   the elements it finds (via the selectors under Settings > Advanced
   Slider) with av-el-* classes, and everything below targets only those,
   plus the av-slide-* classes the renderer puts on each slide.

   Every rule is opt-in: it applies only when a value has been chosen in
   admin. A slider with nothing configured renders exactly as its theme
   intended.

   Progressive enhancement: captions are VISIBLE by default and are only
   hidden for animation once the script adds .av-anim-ready, so a script
   that fails to load cannot blank a hero.
   ====================================================================== */

/* --- image overlays --------------------------------------------------- */
.av-slide-overlay-none   .av-el-overlay { background-image: none; }
.av-slide-overlay-light  .av-el-overlay { background-image: linear-gradient(89.88deg, rgba(255,255,255,.05) 10%, rgba(0,0,0,.35) 90%); }
.av-slide-overlay-dark   .av-el-overlay { background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.55)); }
.av-slide-overlay-left   .av-el-overlay { background-image: linear-gradient(270.12deg, rgba(255,255,255,.1) 10%, rgba(0,0,0,.7) 90%); }
.av-slide-overlay-bottom .av-el-overlay { background-image: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 60%); }

/* --- text position ----------------------------------------------------
   Held above 480px: most themes centre the caption full width on phones,
   and overriding that tends to make it worse, not better. */
@media (min-width: 481px) {
    .av-slide-align-left .av-el-caption {
        right: auto;
        left: 5%;
        text-align: left;
    }

    .av-slide-align-center .av-el-caption {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }

    .av-slide-align-right .av-el-caption {
        left: auto;
        right: 5%;
        text-align: right;
    }
}

/* --- second call-to-action: ghost, so the primary keeps the lead ------ */
.av-el-caption .explore-btn--secondary,
.av-el-caption .av-el-button.av-btn-secondary {
    background-color: transparent;
    border: 1px solid currentColor;
    margin-left: 10px;
}

.av-el-caption .explore-btn--secondary:hover,
.av-el-caption .av-el-button.av-btn-secondary:hover {
    background-color: rgba(255, 255, 255, .15);
}

@media (max-width: 480px) {
    .av-el-caption .explore-btn--secondary,
    .av-el-caption .av-el-button.av-btn-secondary {
        margin-left: 6px;
    }
}

/* ======================================================================
   Caption entrance animations
   ====================================================================== */

/* The gate: only once the script marks the track ready do animated slides
   hide their caption. Without the script, everything stays visible. */
.av-anim-ready .av-slide-animated .av-el-title,
.av-anim-ready .av-slide-animated .av-el-subtitle,
.av-anim-ready .av-slide-animated .av-el-button {
    opacity: 0;
    will-change: transform, opacity;
}

.av-anim-ready .av-slide-animated.av-anim-run .av-el-title,
.av-anim-ready .av-slide-animated.av-anim-run .av-el-subtitle,
.av-anim-ready .av-slide-animated.av-anim-run .av-el-button {
    animation-duration: .7s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.25, .46, .45, .94);
}

/* Stagger: heading, then subtitle, then the buttons. */
.av-anim-ready .av-slide-animated.av-anim-run .av-el-title    { animation-delay: calc(var(--av-anim-delay, 0ms) + 0ms); }
.av-anim-ready .av-slide-animated.av-anim-run .av-el-subtitle { animation-delay: calc(var(--av-anim-delay, 0ms) + 140ms); }
.av-anim-ready .av-slide-animated.av-anim-run .av-el-button   { animation-delay: calc(var(--av-anim-delay, 0ms) + 280ms); }

.av-anim-ready [data-av-animation="fade-up"].av-anim-run    .av-el-title,
.av-anim-ready [data-av-animation="fade-up"].av-anim-run    .av-el-subtitle,
.av-anim-ready [data-av-animation="fade-up"].av-anim-run    .av-el-button    { animation-name: avFadeUp; }

.av-anim-ready [data-av-animation="fade-down"].av-anim-run  .av-el-title,
.av-anim-ready [data-av-animation="fade-down"].av-anim-run  .av-el-subtitle,
.av-anim-ready [data-av-animation="fade-down"].av-anim-run  .av-el-button  { animation-name: avFadeDown; }

.av-anim-ready [data-av-animation="fade-left"].av-anim-run  .av-el-title,
.av-anim-ready [data-av-animation="fade-left"].av-anim-run  .av-el-subtitle,
.av-anim-ready [data-av-animation="fade-left"].av-anim-run  .av-el-button  { animation-name: avFadeLeft; }

.av-anim-ready [data-av-animation="fade-right"].av-anim-run .av-el-title,
.av-anim-ready [data-av-animation="fade-right"].av-anim-run .av-el-subtitle,
.av-anim-ready [data-av-animation="fade-right"].av-anim-run .av-el-button { animation-name: avFadeRight; }

.av-anim-ready [data-av-animation="zoom-in"].av-anim-run    .av-el-title,
.av-anim-ready [data-av-animation="zoom-in"].av-anim-run    .av-el-subtitle,
.av-anim-ready [data-av-animation="zoom-in"].av-anim-run    .av-el-button    { animation-name: avZoomIn; }

.av-anim-ready [data-av-animation="zoom-out"].av-anim-run   .av-el-title,
.av-anim-ready [data-av-animation="zoom-out"].av-anim-run   .av-el-subtitle,
.av-anim-ready [data-av-animation="zoom-out"].av-anim-run   .av-el-button   { animation-name: avZoomOut; }

.av-anim-ready [data-av-animation="rise"].av-anim-run       .av-el-title,
.av-anim-ready [data-av-animation="rise"].av-anim-run       .av-el-subtitle,
.av-anim-ready [data-av-animation="rise"].av-anim-run       .av-el-button   { animation-name: avRise; animation-duration: 1.1s; }

@keyframes avFadeUp    { from { opacity: 0; transform: translateY(28px); }  to { opacity: 1; transform: none; } }
@keyframes avFadeDown  { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes avFadeLeft  { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes avFadeRight { from { opacity: 0; transform: translateX(36px); }  to { opacity: 1; transform: none; } }
@keyframes avZoomIn    { from { opacity: 0; transform: scale(.86); }        to { opacity: 1; transform: none; } }
@keyframes avZoomOut   { from { opacity: 0; transform: scale(1.14); }       to { opacity: 1; transform: none; } }
@keyframes avRise      { from { opacity: 0; transform: translateY(48px) scale(.97); } to { opacity: 1; transform: none; } }

/* ======================================================================
   Slide transition effects
   Slick natively does fade and slide only. These ride on slide mode and
   transform the incoming slide while Slick moves the track.
   ====================================================================== */
.av-effect-zoom .slick-slide                  { transition: transform .6s ease, opacity .6s ease; transform: scale(1.08); opacity: .4; }
.av-effect-zoom .slick-slide.slick-active     { transform: scale(1); opacity: 1; }

.av-effect-zoom-out .slick-slide              { transition: transform .6s ease, opacity .6s ease; transform: scale(.92); opacity: .4; }
.av-effect-zoom-out .slick-slide.slick-active { transform: scale(1); opacity: 1; }

.av-effect-blur .slick-slide                  { transition: filter .6s ease, opacity .6s ease; filter: blur(9px); opacity: .5; }
.av-effect-blur .slick-slide.slick-active     { filter: none; opacity: 1; }

.av-effect-flip                               { perspective: 1600px; }
.av-effect-flip .slick-slide                  { transition: transform .7s ease, opacity .7s ease; transform: rotateY(28deg); opacity: .35; backface-visibility: hidden; }
.av-effect-flip .slick-slide.slick-active     { transform: none; opacity: 1; }

/* ======================================================================
   Respect the visitor's motion preference.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
    .av-anim-ready .av-slide-animated .av-el-title,
    .av-anim-ready .av-slide-animated .av-el-subtitle,
    .av-anim-ready .av-slide-animated .av-el-button {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }

    .av-effect-zoom .slick-slide,
    .av-effect-zoom-out .slick-slide,
    .av-effect-blur .slick-slide,
    .av-effect-flip .slick-slide {
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}

/* ======================================================================
   Video slides
   ----------------------------------------------------------------------
   The media element is injected as the slide's first child, so it sits
   underneath the caption and the overlay without any theme markup change.
   The slide keeps its background image, which therefore acts as the poster
   while the video loads and as the permanent fallback when it cannot play.
   ====================================================================== */

.av-slide-has-video {
    position: relative;
    overflow: hidden;
}

.av-slide-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    pointer-events: none;   /* clicks belong to the caption's buttons */
    z-index: 0;
}

/* An embed cannot be object-fit, so scale it to cover the slide instead and
   let the overflow be clipped. 16:9 is the ratio both providers letterbox to. */
.av-slide-video--embed {
    top: 50%;
    left: 50%;
    width: 177.78vh;        /* 100vh * 16/9 */
    min-width: 100%;
    height: 56.25vw;        /* 100vw * 9/16 */
    min-height: 100%;
    transform: translate(-50%, -50%);
}

/* With controls on, the visitor needs to be able to reach them. */
.av-slide-video[controls] {
    pointer-events: auto;
    z-index: 1;
}

/* Keep the caption and the overlay above the media. */
.av-slide-has-video .av-el-overlay,
.av-slide-has-video .slide {
    position: relative;
    z-index: 1;
}

.av-slide-has-video .av-el-caption {
    z-index: 2;
}

/* Falling back to the poster: nothing to do but make sure no empty element
   is taking up space. */
.av-slide-video-poster .av-slide-video {
    display: none;
}