/* ===== cinema pass ===== */
/* the lights: sections are see-through and the page's colour is the room's light, eased between
   sections as you scroll (cine.js), like the house lights coming down and up again */
.comp.home,.comp.home.light{background:var(--room,#0f0c0b)!important}
/* the palette comes from the photographs: warm black, ivory paper, stone, and the plum of Essie's disco ball */
/* paper: a fine natural fibre under everything, only visible on the light sections */
.comp.home::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
.home .hero{background:#0f0c0b!important}
.home .s-pause,.home .s-chat,.home .s-gift,.home .s-wall,.home .s-faq,.home .s-close{background:transparent!important}
/* film stock: a fine grain over everything, moving like real grain does */
.home>.grain{position:fixed;inset:-8%;z-index:50;opacity:.055;mix-blend-mode:overlay;animation:stock .9s steps(5) infinite}
@keyframes stock{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
/* focus pulls: things arrive out of focus and slightly close, then settle sharp */
.rv{opacity:0;filter:blur(12px);transform:scale(1.035);transition:opacity 1s cubic-bezier(.2,.7,.2,1),filter 1.2s cubic-bezier(.2,.7,.2,1),transform 1.6s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;filter:blur(0);transform:none}
/* the reaction opens like a film starting: letterbox bars draw back */
.home .s-gift .f-frame::before,.home .s-gift .f-frame::after{content:"";position:absolute;left:0;right:0;height:14%;background:#000;z-index:8;pointer-events:none;transition:transform 1.3s cubic-bezier(.7,0,.2,1) .25s}
.home .s-gift .f-frame::before{top:0;transform-origin:top}
.home .s-gift .f-frame::after{bottom:0;transform-origin:bottom}
.home .s-gift.in .f-frame::before,.home .s-gift.in .f-frame::after{transform:scaleY(0)}
/* a slow push-in on every cover in the wall, the way a camera never quite stands still */
.home .s-wall .w-po img{animation:push 16s ease-in-out infinite alternate}
.home .s-wall .w-po:nth-child(3n) img{animation-duration:21s;animation-direction:alternate-reverse}
.home .s-wall .w-po:nth-child(4n) img{animation-duration:18s}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.09) translate(-1.5%,-1%)}}
@media (prefers-reduced-motion:reduce){.home>.grain{animation:none}.rv{filter:none;transform:none}.home .s-wall .w-po img{animation:none}.home .s-gift .f-frame::before,.home .s-gift .f-frame::after{display:none}}
/* scan to try it early: a quiet card in the corner on a computer */
.qr{position:fixed;left:20px;bottom:20px;z-index:60;width:148px;padding:10px 10px 12px;border-radius:22px;background:rgba(24,20,19,.94);color:#fff;text-align:center;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .5s var(--out),transform .6s cubic-bezier(.16,1,.3,1)}
.qr.on{opacity:1;transform:none;pointer-events:auto}
.qr-code{background:#fff;border-radius:14px;padding:12px;line-height:0}
.qr-code svg{width:100%;height:auto;display:block}
.qr-t{margin:12px 0 0;font-family:var(--fd);font-size:19px;line-height:1.1;letter-spacing:-.03em}
.qr-s{margin:6px 0 0;font-size:12px;line-height:1.4;color:rgba(255,255,255,.6)}
@media (max-width:999px),(pointer:coarse){.qr{display:none}}