/* One booking, both phones: the text on the left, the phone on the right, and pieces of its screen lifted out in front of it.
   --px is the left edge of the phone on stage (booking.js puts it 6 units right of centre, 44 units from the camera). */
:root { --px:calc(50vw + 12vh); --blue:#2f6fe4; }
.runway { height:calc(var(--n) * 100vh); }
.part { position:fixed; inset:0; z-index:6; pointer-events:none; opacity:0; }
.txt { position:absolute; left:64px; bottom:12vh; width:390px; }
.eyebrow { font:600 12px Inter; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.txt h2 { font:400 60px/1.02 Fraunces; letter-spacing:-.03em; font-variation-settings:"opsz" 144; margin-bottom:16px; }
.txt p { font:400 18px/1.5 Inter; color:var(--muted); }

/* A piece of the screen, lifted out when its scene arrives (.on), --d after it. */
.lift { position:fixed; z-index:7; opacity:0; translate:0 26px; scale:.96;
        transition:opacity .45s var(--ease), translate .8s var(--ease), scale .8s var(--ease); }
.on .lift { opacity:1; translate:0 0; scale:1; transition-delay:var(--d,.3s); }
.lift b { display:block; font:600 16px/1.25 Inter; }
.lift span { font:400 13.5px/1.3 Inter; color:var(--muted); }

/* The live strip above the tab bar: a dot that says the state, the other side's name, one line, ›. */
.strip { display:flex; align-items:center; gap:12px; width:360px; padding:11px 18px 11px 11px; border-radius:30px; background:#fff;
         box-shadow:0 24px 60px rgba(31,31,29,.16), 0 2px 6px rgba(31,31,29,.06); }
.strip i { margin-left:auto; font:300 26px/1 Inter; color:#a3a09a; font-style:normal; }
.ic { width:38px; height:38px; flex:none; border-radius:50%; background:var(--blue) center/22px no-repeat; }
.ic.wait { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.ic.ok { background-color:var(--green); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }

/* The profile's Book button. */
.pill { display:flex; align-items:center; gap:12px; padding:9px 26px 9px 9px; border-radius:999px; background:var(--ink); color:#fff;
        box-shadow:0 24px 60px rgba(31,31,29,.25); }
.pill span { color:rgba(255,255,255,.7); } .pill b { font-size:17px; }
.face { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#d7b49a,#9a8a5a); }

/* A push, as the lock screen shows it: it drops in and the icon rings. */
.push { display:flex; gap:12px; align-items:flex-start; width:390px; padding:14px 16px; border-radius:26px;
        background:rgba(246,245,242,.78); backdrop-filter:blur(26px) saturate(1.6); -webkit-backdrop-filter:blur(26px) saturate(1.6);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 26px 60px rgba(31,31,29,.2); translate:0 -40px; }
.on .push { transition:opacity .35s var(--ease), translate .9s cubic-bezier(.34,1.56,.64,1), scale .9s cubic-bezier(.34,1.56,.64,1);
            transition-delay:var(--d); }
.push small { display:flex; justify-content:space-between; font:600 12px Inter; letter-spacing:.04em; color:var(--muted); margin:1px 0 3px; }
.push small span { font-weight:400; letter-spacing:0; font-size:12px; }
.push > div { flex:1; } .push b { font-size:15.5px; }
.app { position:relative; width:40px; height:40px; flex:none; border-radius:10px; background:var(--ink); display:grid; place-items:center; }
.app em { font:italic 400 24px/1 Fraunces; color:var(--bone); margin-top:-3px; }
.app s { position:absolute; inset:0; border-radius:12px; border:2px solid var(--blue); opacity:0; }
.on .app s { animation:ring 1.3s ease-out calc(var(--d) + .5s) 2; }
.on .app s + s { animation-delay:calc(var(--d) + .85s); }
@keyframes ring { 0% { opacity:.7; scale:1; } 100% { opacity:0; scale:2.4; } }

/* The request card from her screen, with Accept pressed. */
.request { width:400px; padding:18px 20px; border-radius:24px; background:#fff; box-shadow:0 30px 70px rgba(31,31,29,.18); }
.request .left { position:absolute; right:18px; top:18px; padding:5px 10px; border-radius:999px; background:#e7effc; color:var(--blue); font:700 11px Inter; letter-spacing:.06em; }
.request small { font:400 14px Inter; color:var(--muted); }
.request .when { font:600 30px/1.2 Inter; letter-spacing:-.01em; margin:2px 0 14px; }
.request dl { display:grid; grid-template-columns:auto 1fr; font:400 14px/1 Inter; }
.request dt, .request dd { padding:12px 0; border-top:1px solid #efece6; }
.request dt { color:var(--muted); font-size:13px; } .request dd { text-align:right; }
.acts { display:flex; gap:10px; margin-top:14px; }
.acts span { flex:1; text-align:center; padding:12px 0; border-radius:999px; font:600 15px Inter; }
.accept { background:var(--ink); color:#fff !important; }
.decline { background:#f1efea; color:#c4302b !important; }
.on .accept { animation:press .55s ease 1.6s both; }
@keyframes press { 0% { scale:1; } 35% { scale:.92; background:#000; } 100% { scale:1; } }

/* The thread: hers on the right in ink, Maria's on the left in white, after a moment of typing. */
.bubble { max-width:330px; padding:13px 17px; border-radius:22px; font:400 17px/1.35 Inter; white-space:normal;
          box-shadow:0 20px 50px rgba(31,31,29,.14); }
.bubble.me { background:var(--ink); color:#fff; border-bottom-right-radius:7px; }
.bubble.her { background:#fff; border-bottom-left-radius:7px; }
.typing { display:flex; gap:5px; padding:16px 18px; border-radius:22px; border-bottom-left-radius:7px; background:#fff; box-shadow:0 20px 50px rgba(31,31,29,.14); }
.typing s { width:8px; height:8px; border-radius:50%; background:#b5b1aa; animation:blink 1s infinite; }
.typing s:nth-child(2) { animation-delay:.15s; } .typing s:nth-child(3) { animation-delay:.3s; }
@keyframes blink { 50% { opacity:.3; } }
.on .typing { animation:gone .2s linear 2.05s forwards; }
@keyframes gone { to { opacity:0; } }

@media (prefers-reduced-motion: reduce) {
  .lift, .on .lift { transition:none; translate:0 0; scale:1; }
  .on .app s, .on .accept { animation:none; } .typing { display:none; }
}