/* ==========================================================
   L'ATELIER 8 SENS
   INSTAGRAM / REELS
   ========================================================== */


.atelier-insta-reels{

    --slide-desktop:clamp(205px,18vw,300px);
    --slide-tablet:230px;
    --slide-mobile:68vw;

    --active-scale:1.16;

    --gap:18px;

    width:100%;
    max-width:100%;

    position:relative;

    padding:10px 0 42px;

    margin:0;

    overflow:hidden;

    background:transparent!important;

    color:inherit;
}


.atelier-insta-reels *,
.atelier-insta-reels *::before,
.atelier-insta-reels *::after{

    box-sizing:border-box;
}


/* ==========================================================
   CARRUSEL
   ========================================================== */

.atelier-insta-reels__carousel{

    position:relative;

    width:100%;

    margin:0 auto;
}


/* ==========================================================
   VIEWPORT
   ========================================================== */

.atelier-insta-reels__viewport{

    position:relative;

    width:100%;

    overflow:hidden;

    padding:8px 0 78px;

    cursor:grab;

    touch-action:pan-y;

    user-select:none;

    -webkit-user-select:none;
    -moz-user-select:none;

    -webkit-tap-highlight-color:transparent;
}


.atelier-insta-reels__viewport.is-dragging{

    cursor:grabbing;
}


/* ==========================================================
   TRACK
   ========================================================== */

.atelier-insta-reels__track{

    position:relative;

    display:flex;

    flex-flow:row nowrap;

    align-items:flex-start;

    gap:var(--gap);

    width:max-content;

    min-width:100%;

    margin:0;
    padding:0;

    transform:translate3d(0,0,0);

    transition:
        transform
        .46s
        cubic-bezier(.22,.61,.36,1);

    will-change:transform;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;
}


.atelier-insta-reels__track.is-no-transition,
.atelier-insta-reels__track.is-dragging{

    transition:none!important;
}


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

.atelier-insta-reels__slide{

    position:relative;

    display:block;

    flex:
        0
        0
        var(--slide-desktop);

    width:
        var(--slide-desktop);

    min-width:
        var(--slide-desktop);

    max-width:
        var(--slide-desktop);

    padding:0 0 14px;

    margin:0;

    opacity:.94;

    transform:
        translateZ(0)
        scale(.90);

    transform-origin:center top;

    transition:
        transform .38s cubic-bezier(.22,.61,.36,1),
        opacity .25s ease;

    z-index:1;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;
}


/* ==========================================================
   ACTIVO
   ========================================================== */

.atelier-insta-reels__slide.is-active{

    opacity:1;

    transform:
        translateZ(0)
        scale(var(--active-scale));

    z-index:10;
}


/* ==========================================================
   CAJA VÍDEO
   ========================================================== */

.atelier-insta-reels__video-box{

    position:relative;

    display:block;

    width:100%;

    height:0;

    padding-bottom:177.7777778%;

    overflow:hidden;

    background:#000;

    border-radius:8px;

    box-shadow:none!important;

    transform:translateZ(0);

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

    clip-path:inset(0 round 8px);

    -webkit-clip-path:
        inset(0 round 8px);
}


@supports (aspect-ratio:9 / 16){

    .atelier-insta-reels__video-box{

        height:auto;

        padding-bottom:0;

        aspect-ratio:9 / 16;
    }
}


/* ==========================================================
   VÍDEO
   ========================================================== */

.atelier-insta-reels__video{

    position:absolute;

    inset:0;

    display:block;

    width:100%!important;
    height:100%!important;

    min-width:100%;
    min-height:100%;

    max-width:none;

    margin:0;
    padding:0;

    border:0;

    background:#000;

    object-fit:cover;

    object-position:center;

    pointer-events:none;

    transform:translateZ(0);

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;
}


/* ==========================================================
   mientras carga

   Dejamos el fondo negro, pero al estar preload="auto"
   el primer frame debería aparecer muy rápido.
   ========================================================== */

.atelier-insta-reels__video.is-loaded,
.atelier-insta-reels__video.is-ready{

    opacity:1;
}


/* ==========================================================
   FLECHAS
   ========================================================== */

.atelier-insta-reels__arrow{

    position:absolute;

    top:46%;

    z-index:50;

    display:flex;

    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    padding:0;

    border:
        1px solid rgba(0,0,0,.08);

    border-radius:999px;

    background:
        rgba(255,255,255,.90);

    color:inherit;

    cursor:pointer;

    opacity:0;

    transform:
        translateY(-50%)
        scale(.96);

    transition:
        opacity .2s ease,
        transform .2s ease,
        background .2s ease,
        color .2s ease;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.12);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.atelier-insta-reels__arrow svg{

    width:19px;
    height:19px;

    display:block;

    fill:none;

    stroke:currentColor;

    stroke-width:2.2;

    stroke-linecap:round;

    stroke-linejoin:round;

    pointer-events:none;
}


.atelier-insta-reels__carousel:hover
.atelier-insta-reels__arrow{

    opacity:1;

    transform:
        translateY(-50%)
        scale(1);
}


.atelier-insta-reels__arrow:hover{

    background:#2A1719;

    color:#fff;
}


.atelier-insta-reels__arrow:hover svg{

    stroke:#fff;
}


.atelier-insta-reels__arrow--prev{

    left:34px;
}


.atelier-insta-reels__arrow--next{

    right:34px;
}


/* ==========================================================
   PUNTOS
   ========================================================== */

.atelier-insta-reels__dots{

    position:absolute;

    left:50%;

    bottom:8px;

    z-index:20;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    transform:
        translateX(-50%);
}


.atelier-insta-reels__dot{

    display:block;

    width:6px;
    height:6px;

    flex:0 0 6px;

    margin:0;
    padding:0;

    border:0;

    border-radius:50%;

    background:currentColor;

    opacity:.25;

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.atelier-insta-reels__dot.is-active{

    opacity:1;

    transform:scale(1.1);
}


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

@media(max-width:1024px){

    .atelier-insta-reels{

        --slide-desktop:
            var(--slide-tablet);

        --active-scale:1.04;

        padding-bottom:36px;
    }


    .atelier-insta-reels__viewport{

        padding-bottom:68px;
    }


    .atelier-insta-reels__arrow--prev{

        left:16px;
    }


    .atelier-insta-reels__arrow--next{

        right:16px;
    }
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media(max-width:767px){

    .atelier-insta-reels{

        --slide-desktop:
            var(--slide-mobile);

        --active-scale:1;

        --gap:12px;

        padding:
            6px
            0
            30px;
    }


    .atelier-insta-reels__viewport{

        padding:
            6px
            0
            54px;
    }


    .atelier-insta-reels__slide{

        padding-bottom:10px;

        transform:
            translateZ(0)
            scale(.94);
    }


    .atelier-insta-reels__slide.is-active{

        transform:
            translateZ(0)
            scale(1);
    }


    .atelier-insta-reels__arrow{

        width:34px;
        height:34px;

        opacity:1;
    }


    .atelier-insta-reels__arrow svg{

        width:17px;
        height:17px;
    }


    .atelier-insta-reels__arrow--prev{

        left:8px;
    }


    .atelier-insta-reels__arrow--next{

        right:8px;
    }


    .atelier-insta-reels__dots{

        bottom:5px;
    }
}


/* ==========================================================
   MÓVIL PEQUEÑO
   ========================================================== */

@media(max-width:390px){

    .atelier-insta-reels{

        --slide-mobile:66vw;
    }
}


/* ==========================================================
   DISPOSITIVOS TÁCTILES
   ========================================================== */

@media(hover:none){

    .atelier-insta-reels__arrow{

        opacity:1;
    }
}


/* ==========================================================
   REDUCIR MOVIMIENTO
   ========================================================== */

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

    .atelier-insta-reels__track,
    .atelier-insta-reels__slide,
    .atelier-insta-reels__arrow,
    .atelier-insta-reels__dot{

        transition-duration:.01ms!important;
    }
}

/* ==========================================================
   ENLACE NATIVO DEL REEL
   ========================================================== */

.atelier-insta-reels__video-link{
    display:block;
    width:100%;
    color:inherit!important;
    text-decoration:none!important;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    -webkit-user-drag:none;
}

.atelier-insta-reels__video-link:focus{
    outline:none;
}

.atelier-insta-reels__video-link:focus-visible{
    outline:2px solid currentColor;
    outline-offset:4px;
    border-radius:8px;
}