/* ============================================================
   comail — motion demo (#see-it, under the hero)

   A 1280×800 "world" drawn in em, scaled to the stage by giving it
   font-size: 100cqw / 80. The camera is a transform on that world.
   Every animation shares one 40 s loop, so keyframe % = seconds × 2.5.
   ============================================================ */

.demo { margin: 0; }
.showcase { padding-top: clamp(56px, 6vw, 88px); }
.showcase .head {
  display: grid; grid-template-columns: 1.55fr 1fr; align-items: center;
  gap: 0 clamp(32px, 5vw, 64px);
  max-width: none; margin-bottom: 32px;
}
.showcase .kicker { grid-column: 1 / -1; }
.showcase .head__sub { margin-top: 0; }
.showcase .head__sub a { color: var(--ink); text-underline-offset: 3px; }

@media (max-width: 880px) {
  .showcase .head { grid-template-columns: 1fr; }
  .showcase .head__sub { margin-top: 20px; }
}

.demo__stage {
  position: relative; overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #f8fafd;
  box-shadow: 0 30px 60px -36px rgba(15,16,19,.45);
}

.demo__scene, .demo__cam { position: absolute; inset: 0; }
.demo__cam {
  width: 80em; height: 50em;
  font-size: 16px;                     /* fallback: no container units */
  font-size: calc(100cqw / 80);
  transform-origin: 0 0;
}

.demo__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 16px;
  font-size: .875rem; color: var(--muted);
}
.demo__cap code { color: var(--ink); }
.demo__toggle {
  flex: none;
  padding: 4px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg);
  font-size: .8125rem; color: var(--ink-2);
  cursor: pointer;
}
.demo__toggle:hover { border-color: #cfcfcb; color: var(--ink); }
.demo__toggle[hidden] { display: none; }

@media (max-width: 600px) {
  .demo__cap { flex-direction: column; gap: 10px; }
}

/* ── Gmail ─────────────────────────────────────────────────── */

.gm {
  position: relative; width: 80em; height: 50em;
  background: #f8fafd;
  color: #1f1f1f;
  font-family: var(--sans); font-size: 1em; line-height: 1.4;
  letter-spacing: 0;
  font-feature-settings: normal;
}
.gm__ico { width: 1.5em; height: 1.5em; flex: none; color: #444746; }
.gm__ico--sm { width: 1.1em; height: 1.1em; }

.gm__top {
  position: absolute; left: 0; top: 0; right: 0; height: 4em;
  display: flex; align-items: center; gap: 1em;
  padding: 0 1.25em;
}
.gm__brand {
  display: flex; align-items: center; gap: .5em;
  width: 11.75em;
  font-size: 1.375em; color: #444746; letter-spacing: -.01em;
}
.gm__logo { width: 1.45em; height: 1.1em; }
.gm__search {
  display: flex; align-items: center; gap: .9em;
  width: 45em; height: 3em; padding: 0 1em;
  border-radius: 1.5em;
  background: #e9eef6; color: #444746;
}
.gm__me {
  margin-left: auto;
  display: grid; place-items: center;
  width: 2em; height: 2em; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 500;
}

.gm__side { position: absolute; left: 0; top: 4em; width: 16em; padding: .5em .5em 0 .5em; }
.gm__compose {
  display: inline-flex; align-items: center; gap: .9em;
  height: 3.5em; padding: 0 1.5em 0 1.1em; margin-bottom: 1em;
  border-radius: 1em;
  background: #c2e7ff; color: #001d35; font-weight: 500;
}
.gm__compose .gm__ico { color: #001d35; }
.gm__nav { list-style: none; padding: 0; }
.gm__nav li {
  display: flex; align-items: center; gap: 1.1em;
  height: 2em; padding: 0 1em 0 1.1em;
  border-radius: 0 1em 1em 0;
  font-size: .875em;
}
.gm__nav li.is-on { background: #d3e3fd; font-weight: 700; color: #001d35; }
.gm__nav .gm__ico { width: 1.45em; height: 1.45em; }
.gm__count { margin-left: auto; font-weight: inherit; font-size: .9em; display: grid; }
.gm__count > span { grid-area: 1 / 1; text-align: right; }
.gm__count-new { opacity: 0; }

.gm__main {
  position: absolute; left: 16.5em; top: 4em; right: 1em; bottom: 0;
  overflow: hidden;
  border-radius: 1em 1em 0 0;
  background: #fff;
}
.gm__list, .gm__msg { position: absolute; inset: 0; }
.gm__msg { opacity: 0; }

.gm__bar {
  display: flex; align-items: center; gap: 1.3em;
  height: 3.25em; padding: 0 1.25em;
}
.gm__bar .gm__ico--sm { margin-left: -1.1em; }
.gm__gap { width: .3em; }
.gm__sep { width: .0625em; height: 1.25em; background: #dadce0; }
.gm__pager { margin-left: auto; font-size: .8125em; color: #444746; }
.gm__labelbtn { position: relative; display: grid; place-items: center; }
.gm__labelbtn::before {          /* hover/pressed circle */
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 2.5em; height: 2.5em; margin: -1.25em 0 0 -1.25em;
  border-radius: 50%; background: rgba(68,71,70,.12);
  opacity: 0;
}

.gm__section {
  display: flex; align-items: center; gap: .9em;
  height: 2.75em; padding: 0 1.25em;
  font-size: 1em;
}
.gm__section .gm__ico { color: #444746; }

.gm__new { height: 0; overflow: hidden; }
.gm__row {
  display: flex; align-items: center; gap: .85em;
  height: 2.5em; padding: 0 1.25em;
  box-shadow: inset 0 .0625em #eceff1;
  background: #f2f6fc;
  font-size: .875em; color: #444746; white-space: nowrap;
}
.gm__row > i {
  flex: none; width: 1.15em; height: 1.15em;
}
.gm__row > i:first-child { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1.5' y='1.5' width='17' height='17' rx='2' fill='none' stroke='%239aa0a6' stroke-width='2.4'/%3E%3C/svg%3E") center / 100% no-repeat; }
.gm__row--unread { background: #fff; color: #1f1f1f; }
.gm__row--unread .gm__ico { width: 1.6em; height: 1.6em; color: #9aa0a6; }
.gm__row--unread .gm__from, .gm__row--unread .gm__time { font-weight: 700; color: #1f1f1f; }
.gm__from { width: 13.5em; flex: none; overflow: hidden; text-overflow: ellipsis; }
.gm__subj { flex: 1; overflow: hidden; text-overflow: ellipsis; color: #5f6368; }
.gm__subj b { font-weight: 500; color: #444746; }
.gm__row--unread .gm__subj b { font-weight: 700; color: #1f1f1f; }
.gm__time { flex: none; width: 4.5em; text-align: right; font-size: .9em; }

/* opened message */
.gm__head {
  display: flex; align-items: center; gap: .75em;
  padding: 1em 1.25em .9em 4.5em;
}
.gm__title { font-size: 1.375em; font-weight: 400; color: #1f1f1f; letter-spacing: 0; white-space: nowrap; }
.gm__chip {
  flex: none;
  padding: .1em .45em;
  border-radius: .25em;
  background: #ddd; color: #444746;
  font-size: .8125em; white-space: nowrap;
}
.gm__chip--co {
  background: #fbd3d0; color: #8c1d18;
  opacity: 0;
}

.gm__sender {
  display: flex; align-items: flex-start; gap: 1em;
  padding: .25em 1.25em .9em 1.25em;
  font-size: .875em; color: #5e5e5e;
}
.gm__avatar { flex: none; width: 2.9em; height: 2.9em; border-radius: 50%; background: #a8c7fa; overflow: hidden; }
.gm__avatar svg { width: 100%; height: 100%; }
.gm__who { line-height: 1.5; }
.gm__who b { color: #1f1f1f; font-weight: 700; }
.gm__who small { font-size: 1em; }
.gm__when { margin-left: auto; font-size: .9em; }

.gm__body {
  margin-left: 4.5em; height: 40em;
  padding: 2em 0;
  background: #f0efe9;
  font-size: 1em;
}
.rc__brand {
  display: flex; align-items: center; justify-content: center; gap: .55em;
  margin-bottom: 1.4em;
  font-size: 1.05em; font-weight: 700; color: #141413;
}
.rc__mark { font-size: 1.45em; font-weight: 800; letter-spacing: -.12em; padding-right: .1em; }
.rc {
  width: 30em; margin: 0 auto 1em; padding: 1.4em 1.75em;
  border-radius: .75em;
  background: #fff;
  color: #141413;
}
.rc__dim { font-size: .875em; color: #73726c; }
.rc__amount { font-size: 2.25em; font-weight: 600; letter-spacing: -.02em; margin: .1em 0 .15em; }
.rc__links { display: flex; gap: 1.5em; margin-top: .9em; font-size: .8125em; font-weight: 600; color: #141413; }
.rc__links span { text-decoration: underline; text-underline-offset: .2em; }
.rc__num { font-weight: 700; margin-bottom: .8em; }
.rc__line { display: flex; justify-content: space-between; padding: .55em 0; box-shadow: inset 0 .0625em #ebeae6; font-size: .875em; }
.rc__line--total { font-weight: 700; }

/* label menu */
.gm__menu {
  position: absolute; left: 25.6em; top: 2.75em;
  width: 15.5em; padding: .9em 0 .25em;
  border-radius: .3em;
  background: #fff;
  box-shadow: 0 .125em .375em .125em rgba(60,64,67,.15), 0 .0625em .125em rgba(60,64,67,.3);
  font-size: 1em;
  transform-origin: 0 0;
  opacity: 0;
}
.gm__menu-title { padding: 0 1em; font-size: .875em; }
.gm__menu-search {
  display: flex; justify-content: flex-end;
  margin: .25em 1em .5em; padding: .25em 0;
  box-shadow: inset 0 -.0625em #c4c7c5;
}
.gm__menu-search .gm__ico { width: 1.2em; height: 1.2em; }
.gm__opts { list-style: none; padding: .2em 0; }
.gm__opts li {
  position: relative;
  display: flex; align-items: center; gap: .8em;
  height: 2.05em; padding: 0 1.3em;
  font-size: .9375em; color: #1f1f1f;
}
.gm__opt--pick::before {         /* hover highlight */
  content: ''; position: absolute; inset: 0;
  background: rgba(31,31,31,.06);
  opacity: 0;
}
.gm__box {
  position: relative;
  flex: none; display: grid; place-items: center;
  width: 1.1em; height: 1.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1.5' y='1.5' width='17' height='17' rx='2' fill='none' stroke='%23444746' stroke-width='2.4'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.gm__box svg { width: 1.05em; height: 1.05em; color: #444746; opacity: 0; }
.gm__menu-foot { display: grid; height: 5.1em; overflow: hidden; box-shadow: inset 0 .0625em #e3e3e3; }
.gm__menu-foot > p {
  grid-area: 1 / 1;
  padding: .5em 2.85em .55em;
  font-size: .9375em; line-height: 2.2;
}
.gm__menu-apply { opacity: 0; position: relative; }
.gm__menu-apply::before {        /* pressed highlight */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2.6em;
  background: rgba(31,31,31,.08);
  opacity: 0;
}

.gm__cursor {
  position: absolute; left: 0; top: 0;
  width: 1.6em; height: 1.6em;
  opacity: 0;
  filter: drop-shadow(0 .1em .15em rgba(0,0,0,.25));
}
.gm__ripple {
  position: absolute; left: 0; top: 0;
  width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em;
  border-radius: 50%;
  background: rgba(232,76,61,.35);
  opacity: 0;
}

/* ── terminal ──────────────────────────────────────────────── */

.demo__scene--term { opacity: 0; background: #0b0c0f; }
.tm {
  position: absolute; left: 4em; top: 3em; width: 72em; height: 44em;
  overflow: hidden;
  border-radius: 1em;
  background: #15161b;
  box-shadow: inset 0 0 0 .0625em rgba(255,255,255,.1), 0 2em 4em -1.5em rgba(0,0,0,.6);
  color: rgba(255,255,255,.88);
  font-family: var(--mono); font-size: 1em;
}
.tm__bar {
  display: flex; align-items: center; gap: .5em;
  height: 2.75em; padding: 0 1.1em;
  box-shadow: inset 0 -.0625em rgba(255,255,255,.07);
  background: #1b1c22;
}
.tm__bar i { width: .8em; height: .8em; border-radius: 50%; background: rgba(255,255,255,.16); }
.tm__bar span { flex: 1; margin-right: 2.4em; text-align: center; font-size: .8125em; color: rgba(255,255,255,.42); }
.tm__body { padding: 1.6em 2em; font-size: 1.1875em; line-height: 1.75; }
.tm__dim { color: rgba(255,255,255,.42); }
.tm__user { color: rgba(255,255,255,.5); margin-bottom: 1em; }
.tm__l { position: relative; padding-left: 1.6em; white-space: pre; }
.tm__l--more { margin-top: 0; }
.tm__l + .tm__l:not(.tm__l--more), .tm__r + .tm__l { margin-top: .9em; }
.tm__dot {
  position: absolute; left: .2em; top: .62em;
  width: .55em; height: .55em; border-radius: 50%;
  background: rgba(255,255,255,.9);
}
.tm__dot--ok { background: #54d7a4; }
.tm__r { position: relative; padding-left: 3.4em; white-space: pre; color: rgba(255,255,255,.62); }
.tm__r::before {                 /* ⎿ */
  content: ''; position: absolute; left: 1.75em; top: .2em;
  width: .9em; height: .65em;
  box-shadow: inset .1em -.1em rgba(255,255,255,.35);
}
.tm__r--more::before { display: none; }
.tm__note {
  margin: 1.4em 0 0 -.6em; padding: .3em .6em .3em 2.2em;
  box-shadow: inset .2em 0 var(--accent);
  background: rgba(232,76,61,.1);
  color: rgba(255,255,255,.9);
}
.tm__tag { color: var(--accent-hi); }
.tm__tag::before { content: 'comail '; color: rgba(255,255,255,.9); font-weight: 500; }
.tm__type { display: inline-block; vertical-align: top; }
.tm__swap { display: grid; }
.tm__swap > p { grid-area: 1 / 1; }
.tm__spin { color: #d97757; }
.tm__spin svg { display: inline-block; vertical-align: -.15em; width: 1em; height: 1em; margin-right: .6em; }
.tm__prompt {
  margin-top: 1.4em; padding: .4em .9em;
  border-radius: .4em;
  box-shadow: inset 0 0 0 .0625em rgba(255,255,255,.18);
  color: rgba(255,255,255,.5);
}
.tm__prompt i { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: rgba(255,255,255,.7); }

/* ── outro: rules, one connection, admin agent ─────────────── */

.demo__scene--outro { opacity: 0; background: #0b0c0f; }
.demo__cam--outro { width: 240em; }
.ou {
  position: relative; display: flex; width: 240em; height: 50em;
  background:
    linear-gradient(rgba(255,255,255,.035) .0625em, transparent .0625em) 0 0 / 3.5em 3.5em,
    linear-gradient(90deg, rgba(255,255,255,.035) .0625em, transparent .0625em) 0 0 / 3.5em 3.5em,
    #0b0c0f;
  color: rgba(255,255,255,.72);
  font-family: var(--sans); line-height: 1.4;
  letter-spacing: 0; font-feature-settings: normal;
}
.ou__panel { position: relative; flex: none; width: 80em; height: 50em; }
.ou__kicker {
  position: absolute; left: 6.5em; top: 6.2em;
  font-family: var(--mono); font-size: .95em; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-hi);
}
.ou__title {
  position: absolute; left: 2.5em; top: 3.2em; width: 25em;
  font-size: 2.6em; font-weight: 600; line-height: 1.1; letter-spacing: -.03em;
  color: #fff;
}
.ou__chip {
  display: inline-block;
  padding: .2em .55em; border-radius: .35em;
  background: rgba(232,76,61,.16); color: #ff8a7c;
  font-family: var(--mono); font-size: .85em; white-space: nowrap;
}

/* rules card */
.ou__rules {
  position: absolute; left: 10em; top: 19em; width: 60em;
  padding: 1.5em 2em 1.3em;
  border-radius: 1.1em;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 .0625em rgba(255,255,255,.1), 0 2em 4em -1.5em rgba(0,0,0,.6);
}
.ou__rules-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 1em;
  font-size: 1.05em; color: rgba(255,255,255,.6);
}
.ou__rules-head span { font-family: var(--mono); font-size: .85em; color: rgba(255,255,255,.4); }
.ou__rule {
  display: grid; grid-template-columns: 8.5em 1fr auto auto; align-items: center; gap: 1em;
  padding: .85em 0;
  box-shadow: inset 0 .05em rgba(255,255,255,.08);
  font-size: 1.3em;
  opacity: 0;
}
.ou__when { color: rgba(255,255,255,.55); }
.ou__val {
  justify-self: start;
  padding: .2em .55em; border-radius: .35em;
  background: rgba(255,255,255,.07); color: #fff;
  font-family: var(--mono); font-size: .9em;
}
.ou__arrow { color: rgba(255,255,255,.35); }
.ou__rules-foot {
  padding-top: 1em;
  box-shadow: inset 0 .0625em rgba(255,255,255,.08);
  font-size: .95em; color: rgba(255,255,255,.45);
}
.ou__type { display: inline-block; vertical-align: top; white-space: pre; }

/* one connection */
.ou__wires { position: absolute; left: 0; top: 0; width: 80em; height: 50em; }
.ou__wire {
  fill: none; stroke: rgba(255,255,255,.3); stroke-width: .22;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.ou__wire--0 { stroke: var(--accent-hi); }
.ou__agent, .ou__hub, .ou__inbox {
  position: absolute;
  display: flex; flex-direction: column; justify-content: center;
  border-radius: .9em;
  background: #15161b;
  box-shadow: inset 0 0 0 .0625em rgba(255,255,255,.12), 0 1.5em 3em -1em rgba(0,0,0,.6);
}
.ou__agent { left: 5em; top: 28.5em; width: 21em; height: 7em; padding: 0 1.3em; }
.ou__agent b { font-family: var(--mono); font-size: 1.15em; font-weight: 500; color: #fff; }
.ou__agent span { margin-top: .3em; font-family: var(--mono); font-size: .78em; color: rgba(255,255,255,.45); }
.ou__hub {                       /* 1.6em type, so 33em × 29em in world units */
  left: 20.625em; top: 18.125em; width: 6.875em; height: 3.75em;
  flex-direction: row; align-items: center; justify-content: center;
  background: #1d1213;
  box-shadow: inset 0 0 0 .04em rgba(232,76,61,.5), 0 0 2em rgba(232,76,61,.18);
  font-size: 1.6em; font-weight: 600; letter-spacing: -.045em; color: #fff;
}
.ou__inbox { left: 53em; width: 23em; height: 6em; padding: 0 1.3em; opacity: 0; }
.ou__inbox b { font-size: 1.1em; font-weight: 600; color: #fff; }
.ou__inbox span { margin-top: .25em; font-family: var(--mono); font-size: .82em; color: rgba(255,255,255,.5); }
.ou__inbox--1 { top: 19.5em; }
.ou__inbox--2 { top: 29em; }
.ou__inbox--3 { top: 38.5em; }

/* admin terminal */
.tm--admin { left: 8em; top: 19em; width: 64em; height: 19em; }
.tm--admin .tm__user { color: rgba(255,255,255,.62); }
.ou__a1, .ou__a2, .ou__a3, .ou__a4 { opacity: 0; }

/* ── timeline ──────────────────────────────────────────────────
   One 40 s loop. Keyframe % = seconds × 2.5; the storyboard:
    0.8  receipt lands in the inbox          3.3  click it open
    5.2  label button → menu                 7.4  tick co:bookkeeping-agent
    9.1  Apply → the label chip lands       11.1  cross-fade to the agent
   12.0  comail notification                14.0  agent reads the thread
   15.4  "…I'll book the expense."          20.2  record_expense
   23.4  pull back                          23.7  outro: rules
   27.4  pan: one connection, every inbox   32.1  pan: the admin agent sets it up
   39.2  fade back to the inbox                                               */

.demo__stage { --loop: 40s; --ease: cubic-bezier(.65, 0, .35, 1); }

.demo__cam--gmail      { animation: demo-cam-gmail var(--loop) var(--ease) infinite; }
.demo__cam--term       { animation: demo-cam-term var(--loop) var(--ease) infinite; }
.demo__scene--term     { animation: demo-scene-term var(--loop) linear infinite; }
.gm__new               { animation: demo-new-row var(--loop) var(--ease) infinite; }
.gm__new .gm__row      { animation: demo-new-row-bg var(--loop) linear infinite; }
.gm__count-new         { animation: demo-count-new var(--loop) linear infinite; }
.gm__count-old         { animation: demo-count-old var(--loop) linear infinite; }
.gm__list              { animation: demo-list var(--loop) linear infinite; }
.gm__msg               { animation: demo-msg var(--loop) linear infinite; }
.gm__labelbtn::before  { animation: demo-label-hover var(--loop) linear infinite; }
.gm__menu              { animation: demo-menu var(--loop) var(--ease) infinite; }
.gm__opt--pick::before { animation: demo-opt-hover var(--loop) linear infinite; }
.gm__box svg           { animation: demo-check var(--loop) var(--ease) infinite; }
.gm__menu-create       { animation: demo-menu-create var(--loop) linear infinite; }
.gm__menu-apply        { animation: demo-menu-apply var(--loop) linear infinite; }
.gm__menu-foot         { animation: demo-menu-foot var(--loop) var(--ease) infinite; }
.gm__menu-apply::before { animation: demo-apply-press var(--loop) linear infinite; }
.gm__chip--co          { animation: demo-chip var(--loop) var(--ease) infinite; }
.gm__cursor            { animation: demo-cursor var(--loop) var(--ease) infinite; }
.gm__ripple            { animation: demo-ripple var(--loop) cubic-bezier(.2, .6, .3, 1) infinite; }

.tm__note              { animation: demo-note var(--loop) var(--ease) infinite; }
.tm__t1                { animation: demo-t1 var(--loop) linear infinite; }
.tm__t2                { animation: demo-t2 var(--loop) linear infinite; }
.tm__say .tm__dot      { animation: demo-say var(--loop) linear infinite; }
.tm__type--1           { animation: demo-type-1 var(--loop) steps(56) infinite; }
.tm__type--2           { animation: demo-type-2 var(--loop) steps(50) infinite; }
.tm__type--3           { animation: demo-type-3 var(--loop) steps(22) infinite; }
.tm__t3                { animation: demo-t3 var(--loop) linear infinite; }
.tm__spin              { animation: demo-spin var(--loop) linear infinite; }
.tm__spin svg          { animation: demo-whirl 1.2s steps(6) infinite; }
.tm__t4                { animation: demo-t4 var(--loop) linear infinite; }
.tm__prompt i          { animation: demo-blink 1.1s steps(1) infinite; }

.demo__scene--outro    { animation: demo-scene-outro var(--loop) linear infinite; }
.demo__cam--outro      { animation: demo-cam-outro var(--loop) var(--ease) infinite; }
.ou__rule--1           { animation: demo-rule-1 var(--loop) var(--ease) infinite; }
.ou__rule--2           { animation: demo-rule-2 var(--loop) var(--ease) infinite; }
.ou__type--1           { animation: demo-type-o1 var(--loop) steps(8) infinite; }
.ou__type--2           { animation: demo-type-o2 var(--loop) steps(19) infinite; }
.ou__type--3           { animation: demo-type-o3 var(--loop) steps(61) infinite; }
.ou__wire--0           { animation: demo-wire-0 var(--loop) var(--ease) infinite; }
.ou__wire--1           { animation: demo-wire-1 var(--loop) var(--ease) infinite; }
.ou__wire--2           { animation: demo-wire-2 var(--loop) var(--ease) infinite; }
.ou__wire--3           { animation: demo-wire-3 var(--loop) var(--ease) infinite; }
.ou__inbox--1          { animation: demo-inbox-1 var(--loop) var(--ease) infinite; }
.ou__inbox--2          { animation: demo-inbox-2 var(--loop) var(--ease) infinite; }
.ou__inbox--3          { animation: demo-inbox-3 var(--loop) var(--ease) infinite; }
.ou__a1                { animation: demo-a1 var(--loop) linear infinite; }
.ou__a2                { animation: demo-a2 var(--loop) linear infinite; }
.ou__a3                { animation: demo-a3 var(--loop) linear infinite; }
.ou__a4                { animation: demo-a4 var(--loop) linear infinite; }

@keyframes demo-whirl { to { transform: rotate(180deg); } }
@keyframes demo-blink { 50% { opacity: 0; } }

/* Held on frame 0 until main.js sees it on screen; paused by the button. */
.js .demo:not(.is-live) .demo__stage *,
.js .demo:not(.is-live) .demo__stage *::before,
.demo.is-paused .demo__stage *,
.demo.is-paused .demo__stage *::before { animation-play-state: paused; }

/* No camera moves or pointer: the story plays as a wide shot. */
@media (prefers-reduced-motion: reduce) {
  .demo__cam { animation: none; }
  .demo__cam--outro { animation: demo-cam-outro-cut var(--loop) step-end infinite; }
  .gm__cursor, .gm__ripple { display: none; }
}

/* camera: Gmail */
@keyframes demo-cam-gmail {
       0% { transform: translate(0em, 0em) scale(1.7) }
     1.5% { transform: translate(0em, 0em) scale(1.7) }
       6% { transform: translate(-69.35em, -4.97em) scale(2.7) }
       9% { transform: translate(-69.35em, -4.97em) scale(2.7) }
    9.05% { transform: translate(-45em, 0em) scale(2.5) }
   12.25% { transform: translate(-72em, 0em) scale(2.8) }
    13.5% { transform: translate(-72em, 0em) scale(2.8) }
   15.75% { transform: translate(-78.8em, -6.2em) scale(2.4) }
    16.5% { transform: translate(-78.8em, -6.2em) scale(2.4) }
   18.25% { transform: translate(-154em, -32.6em) scale(4) }
   19.75% { transform: translate(-158.85em, -34.04em) scale(4.1) }
   21.75% { transform: translate(-69.56em, -17.9em) scale(2.2) }
   23.25% { transform: translate(-69.56em, -17.9em) scale(2.2) }
   25.75% { transform: translate(-55em, 0em) scale(1.9) }
      29% { transform: translate(-58.47em, 0em) scale(1.95) }
   29.05% { transform: translate(0em, 0em) scale(1.7) }
     100% { transform: translate(0em, 0em) scale(1.7) }
}

/* camera: terminal */
@keyframes demo-cam-term {
       0% { transform: translate(-5.6em, -2.2em) scale(1.6) }
   27.75% { transform: translate(-5.6em, -2.2em) scale(1.6) }
      35% { transform: translate(-5.6em, -4.6em) scale(1.6) }
    41.5% { transform: translate(-5.3em, -14em) scale(1.5) }
    50.5% { transform: translate(-4.94em, -15.6em) scale(1.4) }
    55.5% { transform: translate(-4.85em, -15.02em) scale(1.38) }
    58.5% { transform: translate(0em, 0em) scale(1) }
     100% { transform: translate(0em, 0em) scale(1) }
}

/* terminal over Gmail */
@keyframes demo-scene-term {
       0% { opacity: 0 }
   27.75% { opacity: 0 }
      29% { opacity: 1 }
   60.75% { opacity: 1 }
    60.8% { opacity: 0 }
     100% { opacity: 0 }
}

/* new mail lands */
@keyframes demo-new-row {
       0% { height: 0 }
       2% { height: 0 }
     3.5% { height: 2.5em }
      30% { height: 2.5em }
   30.05% { height: 0 }
     100% { height: 0 }
}

@keyframes demo-new-row-bg {
       0% { background: #fff }
       2% { background: #e8f0fe }
       7% { background: #fff }
     100% { background: #fff }
}

@keyframes demo-count-new {
       0% { opacity: 0 }
     2.5% { opacity: 0 }
    2.75% { opacity: 1 }
      30% { opacity: 1 }
   30.25% { opacity: 0 }
     100% { opacity: 0 }
}

@keyframes demo-count-old {
       0% { opacity: 1 }
     2.5% { opacity: 1 }
    2.75% { opacity: 0 }
      30% { opacity: 0 }
   30.25% { opacity: 1 }
     100% { opacity: 1 }
}

/* list → message */
@keyframes demo-msg {
       0% { opacity: 0 }
       9% { opacity: 0 }
    9.05% { opacity: 1 }
      30% { opacity: 1 }
   30.05% { opacity: 0 }
     100% { opacity: 0 }
}

@keyframes demo-list {
       0% { opacity: 1 }
       9% { opacity: 1 }
    9.05% { opacity: 0 }
      30% { opacity: 0 }
   30.05% { opacity: 1 }
     100% { opacity: 1 }
}

@keyframes demo-label-hover {
       0% { opacity: 0 }
   12.12% { opacity: 0 }
   12.43% { opacity: 1 }
   23.25% { opacity: 1 }
   23.55% { opacity: 0 }
     100% { opacity: 0 }
}

/* label menu */
@keyframes demo-menu {
       0% { opacity: 0; transform: scale(.94) }
   13.25% { opacity: 0; transform: scale(.94) }
    13.7% { opacity: 1; transform: none }
   23.25% { opacity: 1; transform: none }
    23.5% { opacity: 0; transform: none }
     100% { opacity: 0; transform: none }
}

@keyframes demo-opt-hover {
       0% { opacity: 0 }
   16.12% { opacity: 0 }
   16.38% { opacity: 1 }
    20.5% { opacity: 1 }
   20.75% { opacity: 0 }
     100% { opacity: 0 }
}

@keyframes demo-check {
       0% { opacity: 0; transform: scale(.3) }
    18.5% { opacity: 0; transform: scale(.3) }
    18.8% { opacity: 1; transform: scale(1.2) }
   19.12% { opacity: 1; transform: none }
      30% { opacity: 1; transform: none }
   30.05% { opacity: 0; transform: scale(.3) }
     100% { opacity: 0; transform: scale(.3) }
}

@keyframes demo-menu-create {
       0% { opacity: 1 }
   18.62% { opacity: 1 }
   18.93% { opacity: 0 }
      30% { opacity: 0 }
    30.3% { opacity: 1 }
     100% { opacity: 1 }
}

@keyframes demo-menu-apply {
       0% { opacity: 0 }
   18.62% { opacity: 0 }
   18.93% { opacity: 1 }
      30% { opacity: 1 }
    30.3% { opacity: 0 }
     100% { opacity: 0 }
}

@keyframes demo-menu-foot {
       0% { height: 5.1em }
   18.62% { height: 5.1em }
   19.12% { height: 3.05em }
      30% { height: 3.05em }
   30.05% { height: 5.1em }
     100% { height: 5.1em }
}

@keyframes demo-apply-press {
       0% { opacity: 0 }
   22.75% { opacity: 0 }
   22.88% { opacity: 1 }
      30% { opacity: 1 }
   30.12% { opacity: 0 }
     100% { opacity: 0 }
}

/* the label lands */
@keyframes demo-chip {
       0% { opacity: 0; transform: scale(.6); box-shadow: 0 0 0 0 rgba(232,76,61,0) }
    23.5% { opacity: 0; transform: scale(.6); box-shadow: 0 0 0 0 rgba(232,76,61,0) }
      24% { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 0 rgba(232,76,61,0) }
    24.5% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(232,76,61,0) }
    25.5% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(232,76,61,.55) }
    27.5% { opacity: 1; transform: none; box-shadow: 0 0 0 .7em rgba(232,76,61,0) }
      30% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(232,76,61,0) }
   30.05% { opacity: 0; transform: scale(.6); box-shadow: 0 0 0 0 rgba(232,76,61,0) }
     100% { opacity: 0; transform: scale(.6); box-shadow: 0 0 0 0 rgba(232,76,61,0) }
}

/* pointer */
@keyframes demo-cursor {
       0% { opacity: 0; transform: translate(52.67em, 17.8em) scale(1) }
     5.5% { opacity: 0; transform: translate(52.67em, 17.8em) scale(1) }
       6% { opacity: 1; transform: translate(52.67em, 17.8em) scale(1) }
    7.88% { opacity: 1; transform: translate(39.67em, 11.05em) scale(1) }
    8.25% { opacity: 1; transform: translate(39.67em, 11.05em) scale(0.85) }
    8.62% { opacity: 1; transform: translate(39.67em, 11.05em) scale(1) }
     9.5% { opacity: 1; transform: translate(39.67em, 11.05em) scale(1) }
   12.12% { opacity: 1; transform: translate(44.82em, 5.45em) scale(1) }
   12.88% { opacity: 1; transform: translate(44.82em, 5.45em) scale(0.85) }
   13.25% { opacity: 1; transform: translate(44.82em, 5.45em) scale(1) }
      14% { opacity: 1; transform: translate(44.82em, 5.45em) scale(1) }
   16.12% { opacity: 1; transform: translate(47.27em, 14.4em) scale(1) }
   18.38% { opacity: 1; transform: translate(47.27em, 14.4em) scale(0.85) }
   18.75% { opacity: 1; transform: translate(47.27em, 14.4em) scale(1) }
   20.25% { opacity: 1; transform: translate(47.27em, 14.4em) scale(1) }
   22.25% { opacity: 1; transform: translate(45.27em, 26.5em) scale(1) }
   22.62% { opacity: 1; transform: translate(45.27em, 26.5em) scale(0.85) }
      23% { opacity: 1; transform: translate(45.27em, 26.5em) scale(1) }
      24% { opacity: 0; transform: translate(53.67em, 20.8em) scale(1) }
     100% { opacity: 0; transform: translate(52.67em, 17.8em) scale(1) }
}

/* click ripples */
@keyframes demo-ripple {
       0% { opacity: 0; transform: translate(0, 0) scale(.2) }
     8.2% { opacity: 0; transform: translate(40em, 11.25em) scale(.2) }
    8.25% { opacity: 1; transform: translate(40em, 11.25em) scale(.2) }
    9.38% { opacity: 0; transform: translate(40em, 11.25em) scale(1) }
   12.83% { opacity: 0; transform: translate(45.15em, 5.65em) scale(.2) }
   12.88% { opacity: 1; transform: translate(45.15em, 5.65em) scale(.2) }
      14% { opacity: 0; transform: translate(45.15em, 5.65em) scale(1) }
   18.32% { opacity: 0; transform: translate(47.6em, 14.6em) scale(.2) }
   18.38% { opacity: 1; transform: translate(47.6em, 14.6em) scale(.2) }
    19.5% { opacity: 0; transform: translate(47.6em, 14.6em) scale(1) }
   22.58% { opacity: 0; transform: translate(45.6em, 26.7em) scale(.2) }
   22.62% { opacity: 1; transform: translate(45.6em, 26.7em) scale(.2) }
   23.75% { opacity: 0; transform: translate(45.6em, 26.7em) scale(1) }
     100% { opacity: 0; transform: translate(0, 0) scale(.2) }
}

/* terminal lines, in order */
@keyframes demo-note {
       0% { opacity: 0; transform: translateX(-1.5em) }
   29.87% { opacity: 0; transform: translateX(-1.5em) }
    30.5% { opacity: 1; transform: none }
     100% { opacity: 1; transform: none }
}

@keyframes demo-t1 {
       0% { opacity: 0 }
      35% { opacity: 0 }
   35.62% { opacity: 1 }
     100% { opacity: 1 }
}

@keyframes demo-t2 {
       0% { opacity: 0 }
      36% { opacity: 0 }
   36.62% { opacity: 1 }
     100% { opacity: 1 }
}

@keyframes demo-say {
       0% { opacity: 0 }
   38.25% { opacity: 0 }
   38.88% { opacity: 1 }
     100% { opacity: 1 }
}

@keyframes demo-type-1 {
       0% { clip-path: inset(0 100% 0 0) }
    38.5% { clip-path: inset(0 100% 0 0) }
      42% { clip-path: inset(0 0 0 0) }
     100% { clip-path: inset(0 0 0 0) }
}

@keyframes demo-type-2 {
       0% { clip-path: inset(0 100% 0 0) }
   42.12% { clip-path: inset(0 100% 0 0) }
      45% { clip-path: inset(0 0 0 0) }
     100% { clip-path: inset(0 0 0 0) }
}

@keyframes demo-type-3 {
       0% { clip-path: inset(0 100% 0 0) }
   45.25% { clip-path: inset(0 100% 0 0) }
   47.13% { clip-path: inset(0 0 0 0) }
     100% { clip-path: inset(0 0 0 0) }
}

@keyframes demo-t3 {
       0% { opacity: 0 }
    50.5% { opacity: 0 }
   51.12% { opacity: 1 }
     100% { opacity: 1 }
}

@keyframes demo-spin {
       0% { opacity: 0 }
      51% { opacity: 0 }
   51.62% { opacity: 1 }
      54% { opacity: 1 }
   54.37% { opacity: 0 }
     100% { opacity: 0 }
}

@keyframes demo-t4 {
       0% { opacity: 0 }
   54.25% { opacity: 0 }
   54.87% { opacity: 1 }
     100% { opacity: 1 }
}

/* camera: outro */
@keyframes demo-cam-outro {
       0% { transform: translate(0em, -1em) scale(1) }
    68.5% { transform: translate(0em, -1em) scale(1) }
      72% { transform: translate(-80em, -1em) scale(1) }
   80.25% { transform: translate(-80em, -1em) scale(1) }
   83.75% { transform: translate(-160em, -1em) scale(1) }
     100% { transform: translate(-160em, -1em) scale(1) }
}

@keyframes demo-cam-outro-cut {
       0% { transform: translate(0em, 0em) scale(1) }
    70.5% { transform: translate(0em, 0em) scale(1) }
   70.55% { transform: translate(-80em, 0em) scale(1) }
   82.38% { transform: translate(-80em, 0em) scale(1) }
   82.42% { transform: translate(-160em, 0em) scale(1) }
     100% { transform: translate(-160em, 0em) scale(1) }
}

/* outro over the terminal, then back to the inbox */
@keyframes demo-scene-outro {
       0% { opacity: 0 }
   59.25% { opacity: 0 }
   60.62% { opacity: 1 }
      98% { opacity: 1 }
     100% { opacity: 0 }
}

@keyframes demo-rule-1 {
       0% { opacity: 0; transform: translateX(-1em) }
   62.25% { opacity: 0; transform: translateX(-1em) }
   62.87% { opacity: 1; transform: none }
     100% { opacity: 1; transform: none }
}

@keyframes demo-rule-2 {
       0% { opacity: 0; transform: translateX(-1em) }
   64.25% { opacity: 0; transform: translateX(-1em) }
   64.88% { opacity: 1; transform: none }
     100% { opacity: 1; transform: none }
}

@keyframes demo-type-o1 {
       0% { clip-path: inset(0 100% 0 0) }
   62.75% { clip-path: inset(0 100% 0 0) }
      64% { clip-path: inset(0 0 0 0) }
     100% { clip-path: inset(0 0 0 0) }
}

@keyframes demo-type-o2 {
       0% { clip-path: inset(0 100% 0 0) }
   64.75% { clip-path: inset(0 100% 0 0) }
   67.25% { clip-path: inset(0 0 0 0) }
     100% { clip-path: inset(0 0 0 0) }
}

@keyframes demo-type-o3 {
       0% { clip-path: inset(0 100% 0 0) }
      84% { clip-path: inset(0 100% 0 0) }
   87.25% { clip-path: inset(0 0 0 0) }
     100% { clip-path: inset(0 0 0 0) }
}

@keyframes demo-wire-0 {
       0% { stroke-dashoffset: 1 }
   71.75% { stroke-dashoffset: 1 }
   72.75% { stroke-dashoffset: 0 }
     100% { stroke-dashoffset: 0 }
}

@keyframes demo-wire-1 {
       0% { stroke-dashoffset: 1 }
   72.75% { stroke-dashoffset: 1 }
      74% { stroke-dashoffset: 0 }
     100% { stroke-dashoffset: 0 }
}

@keyframes demo-wire-2 {
       0% { stroke-dashoffset: 1 }
      73% { stroke-dashoffset: 1 }
   74.25% { stroke-dashoffset: 0 }
     100% { stroke-dashoffset: 0 }
}

@keyframes demo-wire-3 {
       0% { stroke-dashoffset: 1 }
   73.25% { stroke-dashoffset: 1 }
    74.5% { stroke-dashoffset: 0 }
     100% { stroke-dashoffset: 0 }
}

@keyframes demo-inbox-1 {
       0% { opacity: 0; transform: translateX(-1em) }
   73.75% { opacity: 0; transform: translateX(-1em) }
   74.38% { opacity: 1; transform: none }
     100% { opacity: 1; transform: none }
}

@keyframes demo-inbox-2 {
       0% { opacity: 0; transform: translateX(-1em) }
   74.12% { opacity: 0; transform: translateX(-1em) }
   74.75% { opacity: 1; transform: none }
     100% { opacity: 1; transform: none }
}

@keyframes demo-inbox-3 {
       0% { opacity: 0; transform: translateX(-1em) }
    74.5% { opacity: 0; transform: translateX(-1em) }
   75.12% { opacity: 1; transform: none }
     100% { opacity: 1; transform: none }
}

@keyframes demo-a1 {
       0% { opacity: 0 }
   87.75% { opacity: 0 }
   88.38% { opacity: 1 }
     100% { opacity: 1 }
}

@keyframes demo-a2 {
       0% { opacity: 0 }
      89% { opacity: 0 }
   89.62% { opacity: 1 }
     100% { opacity: 1 }
}

@keyframes demo-a3 {
       0% { opacity: 0 }
   90.25% { opacity: 0 }
   90.88% { opacity: 1 }
     100% { opacity: 1 }
}

@keyframes demo-a4 {
       0% { opacity: 0 }
   91.75% { opacity: 0 }
   92.38% { opacity: 1 }
     100% { opacity: 1 }
}