/* ==========================================================
EDITORIAL ANIMATIONS
========================================================== */

.reveal-up,
.reveal-fade,
.reveal-scale,
.reveal-mask{
    opacity:0;
    transition:all .9s cubic-bezier(.16,1,.3,1);
}

.reveal-up{
    transform:translateY(80px);
}

.reveal-fade{
    transform:none;
}

.reveal-scale{
    transform:scale(.92);
}

.is-revealed{
    opacity:1;
    transform:none;
}


/* ==========================================================
IMAGE MASK
========================================================== */

.reveal-mask{

    position:relative;

    overflow:hidden;

}

.reveal-mask::after{

    content:"";

    position:absolute;

    inset:0;

    background:var(--bg-primary);

    transform:translateX(0);

    transition:transform 1.3s cubic-bezier(.77,0,.18,1);

    z-index:5;

}

.reveal-mask.is-revealed::after{

    transform:translateX(101%);

}



/* ==========================================================
DELAYS
========================================================== */

.delay-1{transition-delay:.12s;}
.delay-2{transition-delay:.24s;}
.delay-3{transition-delay:.36s;}
.delay-4{transition-delay:.48s;}
.delay-5{transition-delay:.60s;}



/* ==========================================================
BUTTON
========================================================== */

.btn-pill-dark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 34px;
    border-radius:999px;
    text-decoration:none;
    font-size:.9rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:all .4s ease;
    background:transparent;
    color:var(--color-text-light);
    border:1px solid var(--color-border-subtle);
}



/* ==========================================================
NAVIGATION
========================================================== */

.nav-desktop a{

    transition:color .35s;

}

.nav-desktop a::after{

    transition:width .45s cubic-bezier(.16,1,.3,1);

}



/* ==========================================================
GALLERY
========================================================== */

.grid-item{

    overflow:hidden;

}

.grid-item img{

    transition:
    transform 1.2s cubic-bezier(.16,1,.3,1),
    filter .8s;

}

.grid-item:hover img{

    transform:scale(1.08);

    filter:brightness(.94);

}



/* ==========================================================
FILM CARDS
========================================================== */

.film-card-item{

    transition:
    transform .55s,
    opacity .55s;

}

.film-card-item:hover{

    transform:translateY(-12px);

}

.film-card-image-wrap img{

    transition:transform 1.2s cubic-bezier(.16,1,.3,1);

}

.film-card-item:hover img{

    transform:scale(1.06);

}



/* ==========================================================
STORY CARDS
========================================================== */

.story-card{

    transition:transform .45s;

}

.story-card:hover{

    transform:translateY(-10px);

}



/* ==========================================================
HEADER
========================================================== */

.site-header{

    transition:
    background .45s,
    padding .45s,
    backdrop-filter .45s;

}



/* ==========================================================
CURSOR
========================================================== */

.custom-cursor-dot,
.custom-cursor-follower{

    position:fixed;

    left:0;

    top:0;

    pointer-events:none;

    border-radius:50%;

    z-index:99999;

}

.custom-cursor-dot{

    width:8px;

    height:8px;

    background:var(--color-text-light);

    mix-blend-mode:difference;

}

.custom-cursor-follower{

    width:38px;

    height:38px;

    border:1px solid var(--color-text-light-muted);

    transition:
    width .3s,
    height .3s,
    border .3s;

    mix-blend-mode:difference;

}



/* ==========================================================
SCROLL INDICATOR
========================================================== */

@keyframes scrollPulse{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(14px);

    }

}

.scroll-line{

    animation:scrollPulse 2.2s infinite;

}



/* ==========================================================
PAGE LOAD
========================================================== */

body{

    animation:pageFade .9s ease;

}

@keyframes pageFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.btn-pill-dark:hover{
    background:var(--color-text-light);
    color:var(--color-text-primary);
    transform:translateY(-2px);
}

.site-header.scrolled .btn-pill-dark{
    background:var(--color-text-primary);
    color:var(--color-text-light);
    border:none;
}

.site-header.scrolled .btn-pill-dark:hover{
    background:var(--color-bg-dark-soft);
}

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

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

    .reveal-up,
    .reveal-fade,
    .reveal-scale,
    .reveal-mask{
        opacity:1;
        transform:none;
    }

    .reveal-mask::after{
        transform:translateX(101%);
    }
}