/* 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:#F4F7F4}
.film .stick>svg,.film canvas{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:#0A0D0B;background:rgba(255,255,255,.7);border:1px solid rgba(10,13,11,.14);border-radius:999px;padding:10px 16px;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s}
.film .skipbtn:hover{background:#fff}
.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(10,13,11,.6);transition:opacity .4s;pointer-events:none}
.film .hintscroll::after{content:"";display:block;width:1px;height:34px;margin:10px auto 0;background:linear-gradient(#0A0D0B,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:#FBFCFB;padding:44px 16px 18px;display:flex;flex-direction:column;align-items:center;color:#0D1511;overflow:hidden}
.phone2 .app{align-self:stretch;display:flex;justify-content:space-between;align-items:center;font:700 15px "Inter Tight",system-ui,sans-serif;letter-spacing:-.02em;color:#003D2B}
.phone2 .app .lg{display:inline-flex;align-items:center;gap:6px}
.phone2 .app .lg img{display:block}
.phone2 .app i{width:24px;height:24px;border-radius:50%;background:#E6EEE8}
.phone2 .mini{align-self:stretch;margin-top:14px;border-radius:16px;background:#F0F5F1;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(13,21,17,.06)}
.phone2 .mini svg{display:block;width:100%;height:auto}
.phone2 .mini p{display:flex;justify-content:space-between;align-items:baseline;padding:8px 12px 10px;font:600 12px "Inter Tight",system-ui,sans-serif}
.phone2 .mini span{font:500 11px Inter,system-ui,sans-serif;color:#55625B}
.phone2 .btnwrap{position:relative;flex:1;width:100%;display:grid;place-items:center}
.phone2 .ring{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:2px solid rgba(0,200,150,.45);animation:pulse 2.4s ease-out infinite}
.phone2 .ring.r2{animation-delay:1.2s}
@keyframes pulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.65);opacity:0}}
.sos{position:relative;width:132px;height:132px;border-radius:50%;border:0;background:#00C896;color:#fff;display:grid;place-items:center;cursor:default;
  box-shadow:0 0 0 10px rgba(0,200,150,.14),0 18px 34px -10px rgba(0,120,90,.55),inset 0 2px 0 rgba(255,255,255,.35);transition:background .25s,color .25s,box-shadow .25s,transform .25s}
.sos svg{width:46px;height:auto;display:block}
.sos.hit{background:#003D2B;color:#8CE6BE;transform:scale(.94);box-shadow:0 0 0 16px rgba(0,200,150,.22),0 0 0 36px rgba(0,200,150,.1),0 10px 24px -10px rgba(0,61,43,.7)}
.phone2 .lead{margin-top:auto;font:500 12px Inter,system-ui,sans-serif;color:#55625B}
.finger{position:absolute;width:36px;height:36px;border-radius:50%;background:rgba(13,21,17,.16);border:2px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.25);left:50%;top:50%;margin:8px 0 0 10px;opacity:0;transform:translate(34px,64px);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}
.film .ts{position:absolute;left:0;right:0;height:30%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.film .ts.t{top:0;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.film .ts.b{bottom:0;-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}
.film .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(24,36,30,.16))}
/* after the film the hero sits on the living city instead of its own card background */
html:not(.no-film) .film+.shell{z-index:3}
html:not(.no-film) .film+.shell .hero{background:transparent}
html:not(.no-film) .film+.shell .hero::before{content:"";opacity:var(--veil,1);position:absolute;left:-10%;right:-10%;top:0;height:78%;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 60% at 50% 34%,rgba(244,247,244,.94) 0%,rgba(244,247,244,.75) 50%,rgba(244,247,244,0) 80%)}
html:not(.no-film) .film+.shell .hero{isolation:isolate}
.film .fadeb{position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;opacity:0;background:linear-gradient(rgba(244,247,244,0),#F4F7F4 85%)}
.film,.film+.shell,.film+.shell *{overflow-anchor:none}