.film{margin-top:var(--sp-5)}@media (min-width:768px){.film{margin-top:var(--sp-5)}}.film__scroller{position:relative}.film__stage{--frame-w:min(calc(100vw - 32px), 480px);--frame-h:calc(var(--frame-w) * .625);--frame-gap:var(--sp-3);--peek:calc(var(--frame-h) * .24);--stage-pad:var(--sp-12);--stage-h:calc(var(--frame-h) + 2 * (var(--peek) + var(--frame-gap)) + 2 * var(--stage-pad));top:max(0px, calc((100vh - var(--stage-h)) / 2));height:var(--stage-h);justify-content:center;align-items:center;display:flex;position:sticky}@media (min-width:768px){.film__stage{--frame-w:600px}}.film__window{width:var(--frame-w);height:calc(var(--frame-h) + 2 * (var(--peek) + var(--frame-gap)));flex-shrink:0;position:relative}.film__reel{-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 calc(var(--peek) * .85), #000 calc(100% - var(--peek) * .85), transparent 100%);-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 calc(var(--peek) * .85), #000 calc(100% - var(--peek) * .85), transparent 100%);mask-image:linear-gradient(to bottom, transparent 0, #000 calc(var(--peek) * .85), #000 calc(100% - var(--peek) * .85), transparent 100%);position:absolute;inset:0;overflow:hidden}.film__column{gap:var(--frame-gap);transform:translateY(calc(var(--peek) + var(--frame-gap) - var(--i,0) * (var(--frame-h) + var(--frame-gap))));flex-direction:column;margin:0;padding:0;list-style:none;transition:transform .38s cubic-bezier(.25,.46,.45,.94);display:flex}.film__frame{width:var(--frame-w);height:var(--frame-h);opacity:.45;filter:blur(2px);transition:opacity .22s cubic-bezier(.55,0,1,.45),transform .22s cubic-bezier(.55,0,1,.45),filter .22s cubic-bezier(.55,0,1,.45);transform:scale(.92)}.film__frame.is-current{opacity:1;filter:blur();transition:opacity .28s cubic-bezier(.25,.46,.45,.94) 40ms,transform .28s cubic-bezier(.25,.46,.45,.94) 40ms,filter .28s cubic-bezier(.25,.46,.45,.94) 40ms;transform:scale(1)}.film__shot{cursor:zoom-in;width:100%;height:100%;padding:0;display:block}.film__shot .shot-art{border-radius:var(--card-radius);width:100%;height:100%;overflow:hidden}.film__edge{height:calc(var(--peek) + var(--frame-gap));pointer-events:none;-webkit-backdrop-filter:blur(8px)saturate(1.2);backdrop-filter:blur(8px)saturate(1.2);background:linear-gradient(#0000 0%,#faf8f380 55%,#faf8f3e0 100%);background:linear-gradient(#0000 0%,lab(97.5981% .0453889 2.67295/.5) 55%,lab(97.5981% .0453889 2.67295/.88) 100%);position:absolute;bottom:0;left:0;right:0;-webkit-mask-image:linear-gradient(#0000 0%,#000 70% 100%);mask-image:linear-gradient(#0000 0%,#000 70% 100%)}.film__label{left:0;right:0;bottom:var(--sp-3);font-family:var(--font-sans);font-size:var(--text-meta);letter-spacing:.03em;text-align:center;color:var(--ink-soft);margin:0;animation:.2s cubic-bezier(.25,.46,.45,.94) .1s backwards film-label-in;position:absolute}@keyframes film-label-in{0%{opacity:0;transform:translateY(5px)}}@keyframes film-fade-in{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.film__column{transition:none}.film__frame,.film__frame.is-current{filter:none;transition:opacity .15s linear;transform:none}.film__label{animation:.15s linear backwards film-fade-in}}@media (prefers-reduced-transparency:reduce){.film__edge{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(#0000 0%,#faf8f3b3 45%,#faf8f3f5 100%);background:linear-gradient(#0000 0%,lab(97.5981% .0453889 2.67295/.7) 45%,lab(97.5981% .0453889 2.67295/.96) 100%)}}