/*
MCM Stories plugin: Highlight Reel page.
Full-screen crossfade of one image per project.
*/

.reel
{
    position         : relative;
    overflow         : hidden;
    width            : 100vw;
    height           : 100vh;
    height           : 100svh;
    background-color : #0d1927;
}

.reel__slide
{
    position        : absolute;
    inset           : 0;
    display         : block;
    opacity         : 0;
    transition      : opacity 1.6s ease;
    pointer-events  : none;
    text-decoration : none;
}

.reel__slide--active
{
    opacity        : 1;
    pointer-events : auto;
    z-index        : 1;
}

.reel__image
{
    display         : block;
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    transform       : scale(1.04);
    transition      : transform 8s ease-out;
}

.reel__slide--active .reel__image
{
    transform : scale(1);
}

.reel__mask
{
    position   : absolute;
    inset      : 0;
    background : linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .25) 100%);
}

.reel__caption
{
    position       : absolute;
    bottom         : 64px;
    left           : 70px;
    display        : flex;
    flex-direction : column;
    align-items    : flex-start;
    opacity        : 0;
    transform      : translateY(16px);
    transition     : opacity .9s ease .5s, transform .9s ease .5s;
}

.reel__slide--active .reel__caption
{
    opacity   : 1;
    transform : translateY(0);
}

.reel__title
{
    font-family             : "Chronicle Display", "GT Super Display", serif;
    font-size               : 56px;
    font-weight             : 200;
    line-height             : 64px;
    color                   : #ffffff;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
}

.reel__link
{
    font-family    : "GoodSans", sans-serif;
    font-size      : 11px;
    line-height    : 16px;
    position       : relative;
    margin-top     : 14px;
    letter-spacing : .5px;
    color          : rgba(255, 255, 255, .85);
}

.reel__link__line
{
    position   : absolute;
    bottom     : -4px;
    left       : 0;
    width      : 0;
    border-top : 1px solid #ffffff;
    transition : width .5s ease;
}

.reel__slide:hover .reel__link__line
{
    width : 100%;
}

.reel__counter
{
    position       : absolute;
    z-index        : 2;
    right          : 70px;
    bottom         : 70px;
    display        : flex;
    align-items    : center;
    font-family    : "GoodSans", sans-serif;
    font-size      : 11px;
    letter-spacing : 1px;
    color          : rgba(255, 255, 255, .85);
}

.reel__counter__sep
{
    display      : inline-block;
    width        : 32px;
    margin       : 0 12px;
    border-top   : 1px solid rgba(255, 255, 255, .5);
}

.reel__dots
{
    position  : absolute;
    z-index   : 2;
    bottom    : 36px;
    left      : 70px;
    display   : flex;
    gap       : 10px;
}

.reel__dot
{
    width            : 6px;
    height           : 6px;
    padding          : 0;
    cursor           : pointer;
    border           : 1px solid rgba(255, 255, 255, .8);
    border-radius    : 50%;
    background-color : transparent;
    transition       : background-color .3s;
}

.reel__dot--active
{
    background-color : #ffffff;
}

.reel__sentinel
{
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 1px;
    height   : calc(100% - 50px);
    pointer-events : none;
}

/* Header over the reel: no background, white logo and menu button */
body.reel-over .header__background
{
    opacity : 0;
}

body.reel-over .header__logo .svg__path
{
    fill : #ffffff;
}

body.reel-over .menu-button span
{
    border-top-color : #ffffff;
}

@media screen and (max-width : 1200px)
{
    .reel__caption { left : 40px; bottom : 60px; }
    .reel__counter { right : 40px; }
    .reel__dots    { left : 40px; }
    .reel__title   { font-size : 44px; line-height : 52px; }
}

@media screen and (max-width : 750px)
{
    .reel__caption { left : 20px; right : 20px; bottom : 64px; }
    .reel__counter { display : none; }
    .reel__dots    { left : 20px; bottom : 28px; }
    .reel__title   { font-size : 34px; line-height : 42px; }
}