/* Opening film: a pinned stage that is driven by scroll. Black, white, green, red-orange. */
.no-film .film{display:none}
.film{position:relative;z-index:2;height:720vh;margin-bottom:-100vh;margin-bottom:-100dvh;background:transparent}
.film .stick{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#0A0D0B}
.film svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#fin{pointer-events:none}
.film .skipbtn{position:absolute;right:16px;top:16px;z-index:5;font:600 14px/1 "Inter Tight",system-ui,sans-serif;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:10px 16px;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s}
.film .skipbtn:hover{background:rgba(255,255,255,.22)}
.film .hintscroll{position:absolute;left:0;right:0;bottom:26px;text-align:center;font:500 12px ui-monospace,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);transition:opacity .4s;pointer-events:none}
.film .hintscroll::after{content:"";display:block;width:1px;height:34px;margin:10px auto 0;background:linear-gradient(#fff,transparent);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.film .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 1px)}

/* the phone that opens on one shop */
.phone2{position:absolute;left:50%;top:50%;width:min(280px,64vw);aspect-ratio:9/19;margin:0;border-radius:38px;background:#000;padding:9px;
  box-shadow:0 0 0 2px #2a2f2c,0 40px 90px -20px rgba(0,0,0,.8);transform:translate(-50%,-50%) scale(0);opacity:0;z-index:3;will-change:transform}
.phone2::before{content:"";position:absolute;top:15px;left:50%;width:62px;height:18px;margin-left:-31px;border-radius:10px;background:#000;z-index:2}
.phone2 .scr{position:relative;height:100%;border-radius:30px;background:#0F1412;padding:44px 16px 16px;display:flex;flex-direction:column;align-items:center;color:#fff;overflow:hidden}
.phone2 .app{align-self:stretch;display:flex;justify-content:space-between;align-items:center;font:700 14px "Inter Tight",system-ui,sans-serif}
.phone2 .app i{width:22px;height:22px;border-radius:50%;background:#1d2420}
.phone2 .lead{margin-top:auto;font:500 11px ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.sos{position:relative;margin:14px 0 auto;width:132px;height:132px;border-radius:50%;border:0;background:#00C896;color:#04140e;font:800 28px "Inter Tight",system-ui,sans-serif;letter-spacing:.04em;box-shadow:0 0 0 10px rgba(0,200,150,.18),0 0 0 22px rgba(0,200,150,.08);cursor:default;animation:beat 1.4s ease-in-out infinite}
.sos.hit{background:#fff;animation:none;box-shadow:0 0 0 14px rgba(255,255,255,.3),0 0 0 34px rgba(0,200,150,.25);transition:all .25s}
@keyframes beat{50%{box-shadow:0 0 0 14px rgba(0,200,150,.24),0 0 0 30px rgba(0,200,150,.0)}}
.finger{position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid #fff;left:50%;top:128px;margin:-17px 0 0 -4px;opacity:0;transform:translate(26px,70px);transition:opacity .25s,transform .35s cubic-bezier(.22,.8,.2,1)}
.phone2.tap .finger{opacity:1;transform:translate(0,0)}

@media (max-width:700px){
  .film{height:640vh}
  .film .skipbtn{top:12px;right:12px}
}
@media (prefers-reduced-motion:reduce){.film{display:none}}

.film .skipbtn,.film .hintscroll{transition:opacity .4s}
.film.done .skipbtn{opacity:0;pointer-events:none}
.film+.shell{position:relative;z-index:1}
.film+.shell .hero{will-change:transform}
html,body{overflow-x:clip}
.film.film.film{padding:0;margin-top:0}