@import url("https://fonts.googleapis.com/css?family=Inter:300,regular,500,600,700,800,900&display=swap");*{border:0;margin:0;padding:0}*,:after,:before{box-sizing:border-box}:after,:before{display:inline-block}body{line-height:1;scrollbar-gutter:stable;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,textarea{background-color:transparent;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit}input,textarea{width:100%}label{display:inline-block}button,option,select{cursor:pointer}a{color:inherit;display:inline-block;text-decoration:none}ul li{list-style:none}img{height:auto;max-width:100%;vertical-align:middle}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}address{font-style:normal}body{color:#000;font-family:Inter;font-size:1rem;min-width:20rem}[data-anim-scrolllock] body{overflow:hidden;overscroll-behavior:none;touch-action:none}.wrapper{display:flex;flex-direction:column;min-height:100%;overflow:clip}.wrapper>main{flex:1 1 auto}.wrapper>*{min-width:0}[class*=__container]{margin:0 auto;max-width:75rem;padding-left:.9375rem;padding-right:.9375rem}*{box-sizing:border-box}body,html{height:100%}:root{--photo-gap:clamp(0.0625rem,1.1vw,1.875rem);--photo-lift:clamp(12.5rem,32vh,25rem);--photo-5-drop:clamp(6.25rem,12vh,10.625rem)}body{background:pink;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;overflow-x:hidden}.stage{display:grid;min-height:100vh;padding:1.5rem;place-items:center}.stage--scroll{display:none;position:relative}.stage--scroll.is-active{display:block}.fixed{display:grid;gap:1.125rem;left:50%;place-items:center;pointer-events:none;position:fixed;top:60%;transform:translate(-50%,-60%)}.hint{font-size:clamp(1.6875rem,4.8vw,4.375rem);font-weight:800;opacity:.9;text-align:center;text-shadow:0 .5rem 1.5rem rgba(0,0,0,.35);white-space:nowrap}.heart-btn{align-items:center;backdrop-filter:blur(.75rem);background:hsla(0,0%,100%,.12);border:0;border-radius:62.4375rem;box-shadow:0 1.125rem 2.8125rem rgba(0,0,0,.35);color:#fff;cursor:pointer;display:inline-flex;gap:.75rem;overflow:hidden;padding:.875rem 1.125rem;pointer-events:auto;transition:transform .2s ease,background .2s ease}.heart-btn:hover{background:hsla(0,0%,100%,.16);transform:scale(1.05)}.heart-btn:active{transform:scale(.98)}.heart-btn__row{position:relative}.heart-btn__img{border-radius:50%;display:block;height:clamp(9.375rem,24vw,18.75rem);object-fit:cover;width:clamp(9.375rem,24vw,18.75rem)}.heart-btn__text{font-size:clamp(1rem,2.4vw,1.5rem);font-weight:900;left:50%;position:absolute;text-shadow:0 .625rem 1.5rem rgba(0,0,0,.35);top:50%;transform:translate(-50%,-50%);white-space:nowrap}.envelope{aspect-ratio:16/10;filter:drop-shadow(0 1.5625rem 3.4375rem rgba(0,0,0,.35));overflow:visible;perspective:87.5rem;position:relative;width:min(70vmin,45rem)}.env-glass{background:hsla(0,0%,100%,.86);border-radius:1.375rem;box-shadow:inset 0 0 0 .0625rem hsla(0,0%,100%,.35);inset:0;position:absolute}.env-glass--back{background:hsla(0,0%,100%,.55);z-index:1}.env-glass--front{background:hsla(0,0%,100%,.9);clip-path:polygon(50% 46%,100% 0,100% 100%,0 100%,0 0);z-index:6}.env-flap{background:hsla(0,0%,100%,.95);clip-path:polygon(100% 0,0 0,50% 100%);height:42%;left:0;position:absolute;top:0;transform:rotateX(calc(var(--flap)*180deg));transform-origin:50% 0;transform-style:preserve-3d;width:100%;z-index:8}.seal{aspect-ratio:1;background:radial-gradient(at 70% 31%,#ff3b7a 29%,transparent 30%),radial-gradient(at 30% 31%,#ff3b7a 29%,transparent 30%),conic-gradient(from -45deg at 50% 84%,#ff3b7a 90deg,transparent 0) bottom/100% 50% no-repeat;filter:drop-shadow(0 0 1.125rem rgba(255,77,141,.45));opacity:calc(1 - var(--sealFade));top:46%;transform:translate(-50%,-50%) scale(calc(1 - var(--sealFade)));width:18%;z-index:20}.seal,.valentine-title{left:50%;position:absolute}.valentine-title{font-size:clamp(1.25rem,4.5vmin,3rem);font-weight:900;letter-spacing:.125rem;opacity:var(--title);text-shadow:-.0625rem -.0625rem 0 #000,.0625rem -.0625rem 0 #000,-.0625rem .0625rem 0 #000,.0625rem .0625rem 0 #000;top:50%;transform:translateX(-50%) translateY(calc(.875rem - var(--title)*.875rem));white-space:nowrap;z-index:60}.letter{background:transparent;bottom:18%;left:10%;overflow:visible;right:10%;top:22%}.letter,.photos{position:absolute}.photos{inset:0;pointer-events:none;z-index:50}.photo{aspect-ratio:1/1;border-radius:.875rem;box-shadow:0 1.25rem 2.1875rem rgba(0,0,0,.22);left:50%;object-fit:cover;opacity:0;position:absolute;top:65%;width:clamp(5rem,20vmin,11.875rem);--i:0;--progress:0}.photo:first-child{--i:0;--progress:var(--p1);opacity:var(--p1)}.photo:nth-child(2){--i:1;--progress:var(--p2);opacity:var(--p2)}.photo:nth-child(3){--i:2;--progress:var(--p3);opacity:var(--p3)}.photo:nth-child(4){--i:3;--progress:var(--p4);opacity:var(--p4)}.photo:nth-child(5){--i:999;--progress:var(--p5);opacity:var(--p5)}.photo:not(:nth-child(5)){transform:translate(-50%,-50%) translate(calc((var(--i) - 1.5)*(100% + var(--photo-gap))*var(--progress)),calc(var(--photo-lift)*-1*var(--progress))) scale(calc(.92 + var(--progress)*.08))}.photo:nth-child(5){transform:translate(-50%,-50%) translateY(calc(var(--photo-lift)*-1*var(--progress) + var(--photo-5-drop)*var(--progress))) scale(calc(.92 + var(--progress)*.08));width:clamp(8.125rem,20vmin,11.875rem)}.spacer{height:800vh}@media (width <= 20em){.hint{margin-bottom:15.625rem}}@media (width > 20em) and (width <= 75em){.hint{margin-bottom:clamp(10rem,17.67045454545625rem + -10.2272727273vw,15.625rem)}}@media (width > 75em){.hint{margin-bottom:10rem}}@media (prefers-reduced-motion:reduce){.env-flap,.photo{transform:none!important}}