/* =====================================
   MEMORY CARD ENTRANCE
===================================== */

.memory-card{

    opacity:0;

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity 1s cubic-bezier(.22,1,.36,1),
        transform 1s cubic-bezier(.22,1,.36,1);
}

.story-scene.visible .memory-card{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}

/* =====================================
   STORY CONTENT
===================================== */
.story{
    max-width:1100px;
    margin:auto;
    padding-left:20px;
    padding-right:20px;
}

.story-divider{

    display:flex;
    justify-content:center;
    align-items:center;

    margin:40px 0;
}

.story-divider-icon{

    width:180px;
    max-width:60%;

    height:auto;

    display:block;
}

.section-divider{
    display:flex;
    justify-content:center;
    align-items:center;

    margin:40px 0;
}

.section-divider-icon{
    width:320px;
    max-width:80%;
    height:auto;

    display:block;
}

.divider-line{

    width:90px;
    height:1px;

    background:#B57D97;

    opacity:.45;
}

.story-divider{
    opacity:0;
    transform:translateY(10px);
    transition:
        opacity .8s ease .3s,
        transform .8s ease .3s;
}

.story-divider.visible{
    opacity:1;
    transform:translateY(0);
}

.story-date,
.story-text{

    opacity:0;

    transform:translateY(8px);

    transition:
    opacity .6s cubic-bezier(.22,1,.36,1),
    transform .6s cubic-bezier(.22,1,.36,1);

}

.story-scene.visible .story-date{

    opacity:1;

    transform:translateY(0);

    transition-delay:.20s;

}

.story-scene.visible .story-text{

    opacity:1;

    transform:translateY(0);

    transition-delay:.40s;

}

.story-divider{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:18px;

    margin:48px 0;
}

.divider-line{
    width:90px;
    height:1px;

    background:#B57D97;

    opacity:.45;
}

.divider-icon{
    display:block;
     width:120px;
    height:120px;
    object-fit:contain;
}