#lilyee-rhythm{
    position:relative;
    height:180vh;
    overflow:hidden;
    background:
radial-gradient(circle at 15% 20%,
rgba(185,156,203,.20),
transparent 40%),

radial-gradient(circle at 80% 70%,
rgba(220,205,230,.25),
transparent 45%),

radial-gradient(circle at 50% 50%,
rgba(243,233,226,.40),
transparent 55%),

#F7F7F6;
}

.rhythm-background{
    filter: blur(10px);
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 20% 25%, #DCCDE6 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, #F3E9E2 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(185,156,203,.18) 0%, transparent 60%);

    z-index:1;
}
.rhythm-background::after{
    content:"";
    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle at 50% 50%,
        rgba(185,156,203,.12),
        transparent 60%
    );

    mix-blend-mode:screen;
}

#rhythm-canvas{
    position:absolute;
    inset:0;
    z-index:2;
}

.rhythm-content{
    position:sticky;
    top:0;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:3;
}

.ghost-word{
    position:absolute;

    font-size:clamp(220px,30vw,700px);

    font-weight:700;

    letter-spacing:.05em;

    color:#B99CCB;

    opacity:.045;

    white-space:nowrap;

    pointer-events:none;
}

.foreground-copy{
    text-align:center;
}

.eyebrow{
    letter-spacing:.4em;
    font-size:.8rem;
    color:#9376B2;
    margin-bottom:1rem;
}

.foreground-copy h2{
    font-size:clamp(42px,6vw,96px);
    line-height:1;
    color:#504E4A;
    font-weight:300;
}

.rhythm-image{
    border-radius:18px;

    transition:
    opacity 2.5s ease,
    filter 2.5s ease,
    transform 2.5s ease;

    box-shadow:
    0 20px 40px rgba(0,0,0,.05),
    0 40px 120px rgba(147,118,178,.08);
}

.rhythm-image.active{
    opacity:1;
    filter:blur(0);
}

.rhythm-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}


@media(max-width:768px){

    .ghost-word{
        font-size:120px;
    }

    .foreground-copy h2{
        font-size:42px;
    }

}
.rhythm-tagline{
    margin-top:24px;

    letter-spacing:.35em;

    font-size:.8rem;

    color:#9376B2;

    text-transform:uppercase;
}