/* The MCP explainer film, shown on the home and connect pages. */
.mock small{display:block;font-size:10.5px;font-weight:600;color:var(--muted);margin:2px 0 5px}
.login-email{margin:0 0 12px;border:1px solid var(--line-strong);border-radius:8px;padding:7px 10px}
.login-email .type{display:inline-block}
.code-boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.code-boxes span{display:grid;place-items:center;height:40px;border:1px solid var(--line-strong);border-radius:8px;font:500 20px var(--serif);background:#fff}
.is-active .login-email .type{animation:type .9s steps(14,end) .3s both}
.is-active .code-boxes span{animation:digit .3s ease both}
.is-active .code-boxes span:nth-child(1){animation-delay:1.5s}.is-active .code-boxes span:nth-child(2){animation-delay:1.7s}.is-active .code-boxes span:nth-child(3){animation-delay:1.9s}.is-active .code-boxes span:nth-child(4){animation-delay:2.1s}.is-active .code-boxes span:nth-child(5){animation-delay:2.3s}.is-active .code-boxes span:nth-child(6){animation-delay:2.5s}
.is-active .mock-login .mock-button{animation:press .5s ease 3s both}
@keyframes digit{from{color:transparent;border-color:var(--blue);box-shadow:0 0 0 3px #2351d826}}
.consent-row{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.consent-row .mock-button{margin:0;padding:8px 16px}
.consent-done{position:absolute;inset:0;margin:0!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:inherit;background:#fffdf9f2;color:var(--green)!important;font:500 24px/1.2 var(--serif)!important}
.consent-done::before{content:'✓';display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;font:600 26px/1 var(--sans);box-shadow:0 0 0 8px var(--green-soft)}
.is-active .consent-done{animation:done-in .5s cubic-bezier(.3,1.5,.5,1) 2.9s both}
@keyframes done-in{from{opacity:0}}
.is-active .consent-done::before{animation:stamp .5s cubic-bezier(.3,1.6,.5,1) 3.05s both}
.tool-call{align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);background:var(--paper);border:1px dashed var(--line-strong);border-radius:999px;padding:4px 10px}
.tool-call code{font:11px var(--mono);color:var(--ink)}
.tool-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.film-connect .mock-chat{min-height:280px}
.is-active .film-connect .from-user,.film-connect .is-active .from-user{animation:pop .45s cubic-bezier(.3,1.4,.5,1) .3s both;transform-origin:right bottom}
.film-connect .is-active .tool-call{animation:card-in .4s ease 1.1s both}
.film-connect .is-active .tc2{animation-delay:1.6s}
.film-connect .is-active .tool-dot{animation:spin-dot .9s ease 1.1s both}
.film-connect .is-active .from-ai{animation:pop .45s cubic-bezier(.3,1.4,.5,1) 2.3s both;transform-origin:left bottom}
.film-connect .is-active .from-ai strong{animation:type 1s steps(30,end) 2.6s both}
.film-connect .is-active .stream i{animation:grow-x .5s ease both;transform-origin:left}
.film-connect .is-active .stream i:nth-child(1){animation-delay:3.4s}.film-connect .is-active .stream i:nth-child(2){animation-delay:3.7s}.film-connect .is-active .stream i:nth-child(3){animation-delay:4s}
@keyframes spin-dot{0%,60%{background:transparent;border:2px solid var(--line-strong);border-top-color:var(--blue);box-shadow:none;transform:rotate(0)}59%{transform:rotate(540deg)}}
@media(max-width:560px){.code-boxes span{height:32px;font-size:16px}.film-connect .mock-chat{min-height:0}.tc2{display:none!important}}

/* Adding the connector: one URL, no terminal. */
.mock small{display:block}
.add-field{margin:0 0 12px;border:1px solid var(--line-strong);border-radius:8px;padding:7px 10px;font-size:12.5px}
.add-field .type{display:inline-block}
.is-active .mock-add .add-field .type{animation:type 1.2s steps(20,end) .5s both}
.is-active .mock-add .mock-button{animation:press .5s ease 2.4s both}
.mock-add .consent-row{margin-top:4px}
.mock-add .consent-row .mock-button{margin:0;padding:8px 16px}
.mock-login{position:relative}
.is-active .mock-login .consent-done{animation:done-in .5s cubic-bezier(.3,1.5,.5,1) 3.6s both}
.is-active .mock-login .consent-done::before{animation:stamp .5s cubic-bezier(.3,1.6,.5,1) 3.75s both}