/* The opening: one idea per screen, the whole phone, one button forward. */
body.intro{margin:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper);color:var(--ink)}
.iskip{position:fixed;top:max(12px,env(safe-area-inset-top));right:14px;z-index:5;min-height:44px;padding:0 10px;color:var(--muted);font-size:15px}
.iscreen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 28px 150px;
  opacity:0;pointer-events:none;transition:opacity .7s ease}
.iscreen.on{opacity:1;pointer-events:auto}
.iscreen.tour{justify-content:flex-start;padding-top:max(56px,calc(env(safe-area-inset-top) + 40px))}
.imark{width:96px;height:auto;clip-path:inset(100% 0 0 0);opacity:.95}
.iscreen.on .imark{animation:chalk 1.8s cubic-bezier(.4,.1,.3,1) .3s forwards}
@keyframes chalk{to{clip-path:inset(0 0 0 0)}}
.ivy{margin:14px 0 0;letter-spacing:.32em;font-size:13px;color:var(--muted);opacity:0}
.ititle{margin:36px 0 0;font-size:34px;font-weight:600;line-height:1.15;opacity:0}
.isub{margin:10px 0 0;font-size:18px;color:var(--muted);font-style:italic;opacity:0}
.iscreen.on .ivy{animation:rise .8s ease 1.9s forwards}.iscreen.on .ititle{animation:rise .9s ease 2.4s forwards}.iscreen.on .isub{animation:rise .9s ease 2.9s forwards}
.ibig{margin:0;font-size:31px;font-weight:600;line-height:1.2;opacity:0}
.ismall{margin:16px 0 0;font-size:18px;color:var(--muted);line-height:1.45;opacity:0;max-width:22rem}
.iscreen.on .ibig{animation:rise .9s ease .35s forwards}.iscreen.on .ismall{animation:rise .9s ease 1s forwards}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.itour-h{margin:0;font-size:21px;font-weight:600;line-height:1.3;opacity:0}
.iscreen.on .itour-h{animation:rise .7s ease .1s forwards}
.iphone{position:fixed;left:50%;top:calc(max(56px,calc(env(safe-area-inset-top) + 40px)) + 78px);width:390px;height:780px;margin-left:-195px;
  transform:scale(.6);transform-origin:50% 0;border:2px solid var(--chalk);border-radius:34px;overflow:hidden;opacity:0;transition:opacity .6s ease;pointer-events:none;z-index:1}
.iphone.on{opacity:1}
.iphone iframe{width:100%;height:100%;border:0;display:block}
.itap{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:2px solid var(--lit);background:var(--lit-bg);opacity:0;pointer-events:none;z-index:3}
.itap.go{animation:tapd .9s ease}
@keyframes tapd{0%{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:scale(.8)}}
.icap{position:fixed;left:0;right:0;bottom:calc(96px + env(safe-area-inset-bottom));text-align:center;font-size:14px;color:var(--muted);z-index:2;padding:0 24px}
.inext{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;min-width:200px;min-height:50px;padding:0 28px;
  border:1px solid var(--lit);border-radius:25px;color:var(--lit);font-size:17px;opacity:0;pointer-events:none;transition:opacity .6s ease}
.inext.show{opacity:1;pointer-events:auto}

/* the start page: the map so far, small and still, and one way forward */
body.start{margin:0;background:var(--paper);color:var(--ink)}
.st{max-width:34rem;margin:0 auto;padding:max(28px,calc(env(safe-area-inset-top) + 16px)) 20px 40px}
.st .wide{height:30px;width:auto;opacity:.9}
.st h1{margin:26px 0 4px;font-size:27px;font-weight:600}
.st .sub{margin:0;color:var(--muted);font-style:italic}
.st .mapbox{position:relative;margin:24px 0 0;border:1px solid var(--rule);border-radius:12px;height:300px;overflow:hidden}
.st .mapbox .gmap{position:absolute;left:0;top:0;width:390px;transform-origin:0 0;pointer-events:none}
.st .mapbox::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--paper))}
.st .maplab{position:absolute;left:12px;bottom:10px;z-index:2;font-size:13px;color:var(--muted)}
.st .go{display:flex;align-items:center;justify-content:center;margin:22px 0 0;min-height:56px;border:1px solid var(--lit);border-radius:28px;color:var(--lit);font-size:18px;text-decoration:none}
.st .more{display:flex;justify-content:space-between;margin:18px 4px 0}
.st .more a{color:var(--muted);font-size:15px;text-decoration:none;min-height:44px;display:flex;align-items:center}
/* the frame a little smaller, the caption just beneath it */
body.intro{--ft:calc(max(56px, calc(env(safe-area-inset-top) + 40px)) + 70px)}
.iphone{top:var(--ft);transform:scale(.54)}
.icap{bottom:auto;top:calc(var(--ft) + 421px + 12px)}

/* livelier: quicker beats, chalk that writes, a struck-out word, screens that move */
.iscreen{transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);transform:translateY(24px)}
.iscreen.on{transform:none}
.iscreen.on .imark{animation:chalk .9s cubic-bezier(.4,.1,.3,1) .1s forwards}
.iscreen.on .ivy{animation:rise .5s ease .8s forwards}
.chalkw{display:inline-block;clip-path:inset(0 100% 0 0)}
.iscreen.on .ititle{animation:none;opacity:1}
.iscreen.on .chalkw{animation:write .9s steps(14,end) 1s forwards}
@keyframes write{to{clip-path:inset(-20% -12% -20% -12%)}}
.iscreen.on .isub{animation:rise .6s ease 1.8s forwards}
.iscreen.on .ibig{animation:pop .55s cubic-bezier(.3,1.4,.5,1) .1s forwards}
.iscreen.on .ismall{animation:rise .55s ease .55s forwards}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.uline,.strike{position:relative;white-space:nowrap}
.uline::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--lit);transform:scaleX(0);transform-origin:0 50%}
.iscreen.on .uline::after{animation:draw .5s ease .55s forwards}
.uline{color:var(--lit)}
.strike::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:3px;border-radius:2px;background:var(--lit);transform:scaleX(0) rotate(-4deg);transform-origin:0 50%}
.iscreen.on .strike::after{animation:strike .35s ease .6s forwards}
.iscreen.on .strike{animation:fadeword .3s ease .95s forwards}
@keyframes draw{to{transform:scaleX(1)}}
@keyframes strike{to{transform:scaleX(1) rotate(-4deg)}}
@keyframes fadeword{to{color:var(--muted)}}
/* the button: centred, gold, with its arrow; one line always */
.inext{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center;white-space:nowrap;min-width:230px;
  background:var(--lit);color:var(--paper);border-color:var(--lit);font-weight:600;font-size:18px;min-height:54px;border-radius:27px;
  transform:translateX(-50%) translateY(10px)}
.inext.show{transform:translateX(-50%)}
.inext .arr{font-size:22px;line-height:1;transition:transform .3s ease}
.inext.show .arr{animation:nudge 1.6s ease-in-out 1s infinite}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion: reduce){.inext.show .arr{animation:none}}
.inext{transition:opacity .4s ease,transform .4s cubic-bezier(.3,1.4,.5,1)}

.iauth{margin:22px 0 0;font-size:16px;color:var(--ink);opacity:0;letter-spacing:.01em}
.iauth.i2{margin-top:4px}
.iscreen.on .iauth{animation:rise .6s ease 2.1s forwards}
.iscreen.on .iauth.i2{animation-delay:2.25s}
.iauth{margin-top:56px}
/* the first screen: the mark and title in the upper part, the authors resting lower, above the button */
.iscreen.first{justify-content:flex-start;padding-top:max(16vh,90px);padding-bottom:calc(128px + env(safe-area-inset-bottom))}
.iscreen.first .iauth{margin-top:auto}
.iscreen.first .iauth.i2{margin-top:4px}
.iscreen.first .iauth.i2{margin-bottom:auto}