/* ==========================================
   REFLECTION
========================================== */

.reflection-section{

    position:relative;

    overflow:hidden;

    padding:90px 0;

    background:linear-gradient(
        135deg,
        #FFF9EF 0%,
        #F7F3EA 45%,
        #EDF6FF 100%
    );

}

.reflection-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:-180px;

    top:-180px;

    background:radial-gradient(circle,rgba(255,255,255,.45),transparent 70%);

    animation:reflectionFloat 18s ease-in-out infinite alternate;

}

.reflection-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-120px;

    bottom:-180px;

    background:radial-gradient(circle,rgba(212,170,89,.12),transparent 70%);

    animation:reflectionFloatReverse 22s ease-in-out infinite alternate;

}

@keyframes reflectionFloat{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-35px);

    }

}

@keyframes reflectionFloatReverse{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(35px);

    }

}

.reflection-content{

    position:relative;

    z-index:2;

    max-width:780px;

    margin:auto;

    text-align:center;

}

.reflection-divider{

    font-size:28px;

    color:var(--sand);

    margin-bottom:20px;

}

.reflection-mark{

    font-family:"Cormorant Garamond",serif;

    font-size:130px;

    line-height:1;

    color:rgba(212,170,89,.18);

    margin-bottom:-45px;

}

.reflection-quote{

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    line-height:1.85;

    color:var(--primary);

    font-style:italic;

    margin:0;

}

.reflection-quote p{

    margin-bottom:28px;

}

.reflection-ending{

    font-weight:600;

    color:var(--primary);

}

@media(max-width:768px){

    .reflection-section{

        padding:70px 0;

    }

    .reflection-mark{

        font-size:90px;

        margin-bottom:-25px;

    }

    .reflection-quote{

        font-size:1.5rem;

        line-height:1.8;

    }

}
/* ==========================================
   SCROLL ANIMATION
========================================== */

.reflection-content{

    opacity:0;

    transform:translateY(60px);

    transition:all 1.2s ease;

}

.reflection-section.show .reflection-content{

    opacity:1;

    transform:translateY(0);

}
.reflection-title{

    font-size:56px;

    font-weight:800;

    color:var(--primary);

    margin:24px 0 45px;

    line-height:1.2;

    max-width:760px;

    margin-left:auto;

    margin-right:auto;

}

@media(max-width:768px){

    .reflection-title{

        font-size:38px;

    }

}