/*==================================================
MAISON CINNAMONN
BASE
==================================================*/

/* RESET */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    font-family:var(--font-sans);

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

}

/* IMAGES */

img{

    display:block;
    width:100%;
    height:auto;

}

/* LINKS */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

/* LISTS */

ul,
ol{

    list-style:none;

}

/* BUTTONS */

button{

    border:none;

    background:none;

    cursor:pointer;

    font:inherit;

}

/* FORMS */

input,
textarea,
select{

    font:inherit;

    border:none;

    outline:none;

}

/* SELECTION */

::selection{

    background:var(--color-accent);

    color:var(--color-white);

}

/* MAIN */

main{

    position:relative;

    background:var(--color-background);

}

/*==================================================
MAISON CINNAMONN
EDITORIAL REVEAL ANIMATIONS
==================================================*/

/*------------------------------------------
Base Animation
------------------------------------------*/

.reveal{

    opacity:0;

    transform:translate3d(0,50px,0);

    transition:

        opacity 1.4s cubic-bezier(.2,.65,.2,1),

        transform 1.4s cubic-bezier(.2,.65,.2,1);

    will-change:opacity,transform;

}

.reveal.visible{

    opacity:1;

    transform:translate3d(0,0,0);

}

/*------------------------------------------
Delay Utilities
------------------------------------------*/

.delay-1{

    transition-delay:.15s;

}

.delay-2{

    transition-delay:.30s;

}

.delay-3{

    transition-delay:.45s;

}

.delay-4{

    transition-delay:.60s;

}

/*------------------------------------------
Images
------------------------------------------*/

.reveal img{

    transform:scale(1.08);

    transition:

        transform 8s cubic-bezier(.2,.65,.2,1);

    will-change:transform;

}

.reveal.visible img{

    transform:scale(1);

}

/*------------------------------------------
Large Editorial Images
------------------------------------------*/

.collection-image,

.chapter-image,

.philosophy-image,

.collections-hero-image{

    overflow:hidden;

}

/*------------------------------------------
Fade only
------------------------------------------*/

.fade{

    opacity:0;

    transition:opacity 1.6s ease;

}

.fade.visible{

    opacity:1;

}

/*------------------------------------------
Left Reveal
------------------------------------------*/

.reveal-left{

    opacity:0;

    transform:translateX(-60px);

    transition:

        opacity 1.2s ease,

        transform 1.2s ease;

}

.reveal-left.visible{

    opacity:1;

    transform:none;

}

/*------------------------------------------
Right Reveal
------------------------------------------*/

.reveal-right{

    opacity:0;

    transform:translateX(60px);

    transition:

        opacity 1.2s ease,

        transform 1.2s ease;

}

.reveal-right.visible{

    opacity:1;

    transform:none;

}

/*------------------------------------------
Reduced Motion
------------------------------------------*/

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

.reveal,
.fade,
.reveal-left,
.reveal-right{

opacity:1;

transform:none;

transition:none;

}

.reveal img{

transform:none;

transition:none;

}

}