/* =========================================================
   FAST MOSAIC HERO CAROUSEL
   ========================================================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body{
    overflow-x:hidden;
    background:#000;
}


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

.hero-mosaic{
    --desktop-ratio: 2075 / 758;
    --mobile-ratio: 4 / 5;

    position:relative;
    width:100%;
    aspect-ratio:var(--desktop-ratio);

    overflow:hidden;
    background:#111;

    isolation:isolate;

    /* Prevent accidental text selection */
    user-select:none;
    -webkit-user-select:none;

    /* Prevent browser drag behavior */
    touch-action:pan-y;
}


/* =========================================================
   MAIN IMAGE LAYERS
   ========================================================= */

.hero-slide{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    opacity:0;
    visibility:hidden;

    pointer-events:none;
}

.hero-slide.is-active{
    opacity:1;
    visibility:visible;
}


/*
   Important:
   No transform / scale / zoom is applied.
   This helps avoid image shake.
*/
.hero-slide picture,
.hero-slide img{
    display:block;
    width:100%;
    height:100%;
}

.hero-slide img{
    object-fit:cover;
    object-position:center;

    transform:none !important;
    animation:none !important;

    -webkit-user-drag:none;
}


/* =========================================================
   MOSAIC TRANSITION LAYER
   ========================================================= */

.mosaic-layer{
    position:absolute;
    inset:0;
    z-index:10;

    display:grid;

    /* JS can change these */
    grid-template-columns:repeat(8, 1fr);
    grid-template-rows:repeat(4, 1fr);

    pointer-events:none;

    visibility:hidden;
}

.mosaic-layer.is-visible{
    visibility:visible;
}


.mosaic-tile{
    position:relative;
    overflow:hidden;

    opacity:0;
}


/*
   Each tile contains a full-size copy of the next image.
   JS calculates the exact position so all pieces form
   one seamless image.
*/
.mosaic-tile img{
    position:absolute;

    display:block;

    max-width:none;

    object-fit:cover;

    opacity:1;

    transform:none;
}


/* Reveal tile */
.mosaic-tile.reveal{
    animation:mosaicReveal .48s cubic-bezier(.22,.61,.36,1) forwards;
}


@keyframes mosaicReveal{

    0%{
        opacity:0;
        clip-path:inset(48% 48% 48% 48%);
    }

    45%{
        opacity:1;
    }

    100%{
        opacity:1;
        clip-path:inset(0 0 0 0);
    }

}


/* =========================================================
   ARROWS
   ========================================================= */

.hero-arrow{
    position:absolute;
    z-index:30;

    top:50%;
    transform:translateY(-50%);

    width:58px;
    height:78px;

    border:0;
    outline:0;

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

    cursor:pointer;

    color:#fff;

    background:rgba(0,0,0,.40);

    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);

    transition:
        background .25s ease,
        width .25s ease;

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


.hero-arrow:hover{
    background:rgba(0,0,0,.72);
    width:66px;
}


.hero-arrow:focus-visible{
    outline:3px solid rgba(255,255,255,.9);
    outline-offset:-5px;
}


.hero-arrow.prev{
    left:0;
    border-radius:0 12px 12px 0;
}


.hero-arrow.next{
    right:0;
    border-radius:12px 0 0 12px;
}


.hero-arrow svg{
    width:26px;
    height:26px;

    stroke:currentColor;
    stroke-width:2.4;

    fill:none;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   LOADING COVER
   ========================================================= */

.hero-loader{
    position:absolute;
    inset:0;

    z-index:50;

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

    background:#111;

    transition:opacity .25s ease,
               visibility .25s ease;
}


.hero-loader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}


.hero-spinner{
    width:38px;
    height:38px;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.18);
    border-top-color:#fff;

    animation:heroSpin .7s linear infinite;
}


@keyframes heroSpin{
    to{
        transform:rotate(360deg);
    }
}


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

@media (max-width:991.98px){

    .hero-mosaic{
        aspect-ratio:16 / 8;
    }

    .hero-arrow{
        width:48px;
        height:66px;
    }

    .hero-arrow:hover{
        width:54px;
    }

}


/* =========================================================
   MOBILE - SEPARATE PORTRAIT IMAGES
   ========================================================= */

@media (max-width:767.98px){

    .hero-mosaic{
        aspect-ratio:var(--mobile-ratio);
    }

    .hero-arrow{
        width:42px;
        height:58px;

        background:rgba(0,0,0,.36);
    }

    .hero-arrow:hover{
        width:46px;
    }

    .hero-arrow svg{
        width:21px;
        height:21px;
    }

}


/* Extra small mobile */
@media (max-width:420px){

    .hero-arrow{
        width:38px;
        height:54px;
    }

}


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

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

    .mosaic-tile.reveal{
        animation-duration:.01ms !important;
    }

    .hero-arrow,
    .hero-loader{
        transition:none !important;
    }

}