/* The missed-call demonstration. Lives in its own file because two things
 use it: the homepage, and the promotional film, which renders this exact
 component frame by frame rather than a second drawing of it. */

/* --- The phone. Abstracted, not a traced iPhone: a real device drawing dates the
   page the week a new one ships, and copying a product silhouette is somebody
   else's trade dress. --- */
.demo { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.phone {
  position: relative; width: 288px; max-width: 100%; aspect-ratio: 300 / 600;
  background: #fbfaf8; border-radius: 34px; padding: 10px;
  box-shadow: 0 0 0 1.5px var(--color-line-strong), var(--shadow-3);
}
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 25px; background: #f3f1ed; display: flex; flex-direction: column; }
.phone-bar { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px 7px; font-size: .68rem; font-weight: 600; color: var(--color-subtle); letter-spacing: .01em; }
.phone-bar .bars { display: flex; gap: 2px; align-items: flex-end; }
.phone-bar .bars i { display: block; width: 3px; background: var(--color-subtle); border-radius: 1px; }
.phone-bar .bars i:nth-child(1) { height: 4px; } .phone-bar .bars i:nth-child(2) { height: 6px; }
.phone-bar .bars i:nth-child(3) { height: 8px; } .phone-bar .bars i:nth-child(4) { height: 10px; opacity: .3; }
.phone-body { flex: 1; position: relative; }

/* Stage 1: the incoming call */
.call {
  position: absolute; inset: 0; background: linear-gradient(180deg, #23241f 0%, #14150f 100%);
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: var(--space-3);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.call.is-gone { opacity: 0; transform: scale(.96); pointer-events: none; }
.call-avatar { width: 66px; height: 66px; border-radius: 50%; background: #34362d; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.5rem; color: #fff; margin-bottom: var(--space-2); position: relative; }
.call-avatar::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); opacity: 0; transform: scale(.85); }
.call.is-ringing .call-avatar::after { animation: ring 1.6s var(--ease-out) infinite; }
@keyframes ring { 0% { opacity: .8; transform: scale(.88); } 70% { opacity: 0; transform: scale(1.35); } 100% { opacity: 0; } }
.call-who { font-weight: 600; font-size: 1.02rem; }
.call-num { color: rgba(255,255,255,.62); font-size: .8rem; }
.call-state { color: rgba(255,255,255,.62); font-size: .76rem; margin-top: 2px; letter-spacing: .02em; }
.call-keys { display: flex; gap: 34px; margin-top: var(--space-4); }
.call-keys span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.call-keys .no { background: #b4382a; } .call-keys .yes { background: #2f8a4d; }
.call-keys svg { width: 19px; height: 19px; fill: #fff; }

/* Stage 2: the thread */
.thread { position: absolute; inset: 0; padding: var(--space-3) 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; overflow: hidden; }
.missed { display: flex; align-items: center; gap: 8px; background: var(--color-card); border: 1px solid var(--color-line); border-left: 3px solid #b4382a; border-radius: var(--radius-sm); padding: 8px 10px; font-size: .74rem; }
.missed b { font-weight: 600; color: #b4382a; display: block; }
.missed span { color: var(--color-muted); }
.gap-note { text-align: center; font-size: .68rem; color: var(--color-muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin: 2px 0; }
.bubble { max-width: 84%; padding: 9px 12px; border-radius: 15px; font-size: .79rem; line-height: 1.45; box-shadow: var(--shadow-1); }
.bubble.out { align-self: flex-start; background: var(--color-card); border-bottom-left-radius: 5px; }
.bubble.in { align-self: flex-end; background: var(--color-brand); color: var(--color-brand-ink); border-bottom-right-radius: 5px; box-shadow: none; }
.bubble .from { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); font-weight: 600; margin-bottom: 3px; }
.typing { display: inline-flex; gap: 4px; align-items: center; height: 1.2em; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-muted); animation: blip 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blip { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* Every stage element animates from one class so the video can drive the same markup. */
.step { opacity: 0; transform: translateY(8px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-spring); }
.step.on { opacity: 1; transform: none; }

.demo-caption { min-height: 2.9em; max-width: 21rem; text-align: center; color: var(--color-subtle); font-size: .92rem; }
.demo-caption b { font-weight: 600; color: var(--color-text); }
.demo-label { font-size: var(--size-eyebrow); text-transform: uppercase; letter-spacing: .13em; color: var(--color-muted); font-weight: 600; }
.demo-replay { background: none; border: 0; font: inherit; font-size: .8rem; color: var(--color-muted); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); }
.demo-replay:hover { color: var(--color-brand); }


/* Film render mode: the tool that renders the promotional film freezes CSS
   animation, so seek(t) supplies these values by hand instead. */
.is-render .call-avatar::after { animation: none; opacity: var(--ring-o, 0); transform: scale(var(--ring-s, 1)); }
.is-render .typing i { animation: none; }
.is-render .step, .is-render .call { transition: none; }