/* Scenes (assets/scenes.js): small product screens that play step by step. A part with data-at="n" comes in at step n,
   a part with data-off="n" leaves at step n. Only transform and opacity move. The fx- classes pick how a part comes
   in. This file holds the engine, the Product and Resources menus' scenes and the home page's security scenes; product.css
   styles the product pages' scenes. */
@property --o0 { syntax: "*"; inherits: false; }
@property --from { syntax: "*"; inherits: false; }
@property --on { syntax: "*"; inherits: false; }
@property --to { syntax: "*"; inherits: false; }
@property --d { syntax: "*"; inherits: false; }
@property --dur { syntax: "*"; inherits: false; }
@property --ease { syntax: "*"; inherits: false; }

/* Coming in follows the scene's timing; going back to the start is quick. */
.sc.is-armed.is-armed [data-at] { opacity: var(--o0, 0); transform: var(--from, translateY(6px)); }
.sc.is-armed.is-armed [data-at], .sc.is-armed.is-armed [data-off] { transition: opacity var(--fast) var(--ease-out), transform var(--fast) var(--ease-out); }
.sc.is-armed.is-armed .is-on { opacity: 1; transform: var(--on, none); transition: opacity var(--dur, var(--normal)) var(--ease, var(--ease-out)) var(--d, 0s), transform var(--dur, var(--normal)) var(--ease, var(--ease-out)) var(--d, 0s); }
.sc.is-armed.is-armed .is-gone { opacity: 0; transform: var(--to, translateY(-4px)); transition: opacity var(--normal) var(--ease-out), transform var(--normal) var(--ease-out); }
.sc.is-snap *, .sc.is-snap *::before, .sc.is-snap *::after { transition: none !important; }
/* Before the script runs, and without it, a scene shows its last frame. */
.sc:not(.is-armed) [data-off] { opacity: 0; }

.fx-pop { --from: scale(.6); --ease: var(--ease-spring); }
.fx-l { --from: translateX(-14px); }
.fx-r { --from: translateX(14px); }
.fx-drop { --from: translateY(-10px); }
.fx-fade { --from: none; }
.fx-x { --o0: 1; --from: scaleX(0); transform-origin: 0 50%; }
.fx-y { --o0: 1; --from: scaleY(0); transform-origin: 50% 100%; }

.swap { display: inline-grid; align-items: center; justify-items: start; }
.swap > * { grid-area: 1 / 1; }

/* Typing dots and the four-square loader, moving only while their scene plays */
.dots3 { display: inline-flex; gap: 2px; align-items: center; height: 1em; }
.dots3 i { width: 4px; height: 4px; border-radius: 999px; background: currentColor; animation: sc-dot 900ms var(--ease-out) infinite; }
.dots3 i:nth-child(2) { animation-delay: 150ms; } .dots3 i:nth-child(3) { animation-delay: 300ms; }
@keyframes sc-dot { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-2px); opacity: 1; } }
.ldr { display: inline-grid; grid-template-columns: 4px 4px; gap: 1px; vertical-align: -1px; margin-right: 6px; }
.ldr i { width: 4px; height: 4px; border-radius: 1px; background: var(--ink); animation: sc-ldr 800ms linear infinite; }
.ldr i:nth-child(2) { animation-delay: 200ms; } .ldr i:nth-child(4) { animation-delay: 400ms; } .ldr i:nth-child(3) { animation-delay: 600ms; }
@keyframes sc-ldr { 0%, 100% { opacity: .2; } 25% { opacity: 1; } }
.sc:not(.is-live) .dots3 i, .sc:not(.is-live) .ldr i { animation-play-state: paused; }

/* ---------- Product menu: one small scene per product ---------- */
.nav__panel--products { width: min(1080px, calc(100vw - 32px)); }
.menu__tile.mini { height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f2f2ee; color: var(--ink); font-size: 9.5px; line-height: 1.25; letter-spacing: 0; text-align: left; }
.mini .mi { position: relative; width: 236px; height: 104px; flex: none; display: flex; gap: 8px; padding: 0 8px; align-items: center; }
.mini b { font-weight: 600; color: var(--ink); font-size: inherit; letter-spacing: 0; }
.mini i { font-style: normal; color: var(--muted); }
.mini img { display: block; border-radius: 999px; object-fit: cover; flex: none; }
.mini .lgo { border-radius: 0; }
.mc { background: #fff; border-radius: 8px; box-shadow: var(--sh-chip); }
.mt { display: inline-flex; align-items: center; gap: 4px; height: 17px; padding: 0 6px; border-radius: 5px; background: #fff; box-shadow: var(--sh-chip); white-space: nowrap; font-weight: 500; }
.mt.ok { background: var(--green-soft); color: var(--green); box-shadow: none; }
.mr { display: flex; align-items: center; gap: 6px; }
.mr i { display: block; font-size: 8.5px; }

/* CRM: an email, an invite and a call note fly into a person's record and fill it in */
.msrc { width: 74px; flex: none; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; position: relative; z-index: 1; }
.msrc > .mt { position: relative; }
.msrc .fly { position: absolute; inset: 0; --o0: 1; --from: none; --to: translateX(84px) scale(.4); }
.mck { width: 5px; height: 5px; border-radius: 999px; background: var(--signal); margin-left: 1px; }
.msrc svg { width: 10px; height: 10px; }
.mrec { flex: 1; min-width: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.mrec .mr { margin-bottom: 2px; }
.mf { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 15px; border-top: 1px solid var(--line); padding-top: 3px; }
.mf > i { font-size: 8.5px; }
.mf .swap { justify-items: end; }
.mf u { width: 30px; height: 4px; border-radius: 2px; background: var(--line); }
.mn { display: flex; align-items: center; gap: 5px; margin-top: 2px; padding: 3px 5px; border-radius: 5px; background: var(--green-soft); }
.mn b { color: var(--green); }
.mn svg { width: 11px; height: 11px; flex: none; }

/* Contract Management: the uploaded order form is approved, each signer signs, and Otto reads the notice date */
.mdoc { width: 88px; flex: none; padding: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mdoc > i { font-size: 8.5px; }
.mln { display: flex; flex-direction: column; gap: 3px; align-self: stretch; margin: 2px 0; }
.mln s { display: block; height: 3px; border-radius: 2px; background: var(--line); }
.mln s:nth-child(2) { width: 84%; } .mln s:nth-child(3) { width: 60%; }
.msig { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ms { padding: 5px 6px; gap: 5px; }
.ms > span:not(.swap) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ms .swap { justify-items: end; }
.ms .mt { height: 15px; padding: 0 5px; font-size: 8.5px; }
.ms .mt svg { width: 9px; height: 9px; flex: none; }

/* Automation: a meeting starts the workflow, the approved email goes out, and a reply stops the run */
.mflow { width: 86px; flex: none; display: flex; flex-direction: column; align-items: flex-start; }
.mflow svg { width: 10px; height: 10px; flex: none; }
.mini .mln2 { display: block; width: 1px; height: 8px; margin-left: 12px; background: var(--line-strong); transform-origin: 50% 0; }
.mini .mok { display: grid; place-items: center; width: 11px; height: 11px; margin-left: 1px; border-radius: 999px; background: var(--green-soft); color: var(--green); }
.mini .mok svg { width: 7px; height: 7px; }
.mrun { flex: 1; min-width: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.mrun .mr { margin-bottom: 2px; }
.mrun .mn svg { width: 10px; height: 10px; color: var(--green); }

/* Deal Room: a proposal's row scrolls like Netflix, a tile opens and a view shows up */
.mini-dr .mi { padding: 0; }
.mpp { position: relative; width: 100%; height: 100%; background: #0f1115; border-radius: 8px; overflow: hidden; color: #f5f5f5; padding: 8px 0 0 8px; }
.mpp b { color: #fff; }
.mpn { display: flex; gap: 8px; align-items: baseline; padding-right: 8px; margin-bottom: 6px; }
.mpn i { color: #8a919c; }
.mrail { display: flex; gap: 6px; transition: transform var(--slow) var(--ease-out); }
.s2 .mrail { transform: translateX(-64px); } .s3 .mrail, .sc:not(.is-armed) .mrail { transform: translateX(-128px); }
.mrail > span { position: relative; width: 58px; height: 34px; flex: none; border-radius: 4px; padding: 4px; display: flex; align-items: flex-end; font-size: 8px; line-height: 1.15; font-weight: 600; color: #fff; }
.mrail .r { position: absolute; inset: -2px; border: 1.5px solid #fff; border-radius: 6px; }
.k1 { background: #3a2f4f; } .k2 { background: #2f4a44; } .k3 { background: #4a3a2b; } .k4 { background: #2b3a4f; } .k5 { background: #4f2f3a; }
.mopen { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 38px; border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; justify-content: space-between; transform-origin: 50% 0; --from: translateY(-6px) scale(.9); }
.mopen i { color: #c9ced6; font-size: 8px; }
.mbar { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.mbar s { display: block; height: 100%; width: 72%; background: #f2b600; --dur: 1100ms; --ease: linear; }
.mtoast { position: absolute; right: 6px; top: 30px; display: flex; align-items: center; gap: 5px; padding: 4px 7px 4px 4px; color: var(--ink); --from: translateX(10px); }
.mtoast i { display: block; font-size: 8px; }
.mpp .mtoast b { color: var(--ink); }

@media (max-width: 1111px) { .menu--products .mini .mi { transform: scale(.9); } }

/* ---------- Resources menu ---------- */
.nav__panel--resources { width: min(538px, calc(100vw - 32px)); }

/* Blog: a post's cover fills in, its ranked tools tick in, then its decision tree lights a path to a tool */
.mini .blg img, .mini .bli img, .mini .bleaf img { border-radius: 3px; }
.mini-blog .mi { padding: 0 4px; }
.bpost { width: 84px; flex: none; padding: 5px; display: flex; flex-direction: column; gap: 5px; }
.bcov { height: 40px; border-radius: 5px; background: var(--hover); display: grid; grid-template-columns: repeat(3, 13px); grid-auto-rows: 13px; gap: 4px; place-content: center; }
.blg { position: relative; display: block; width: 13px; height: 13px; }
.blg .bring { position: absolute; inset: -2.5px; border: 1.5px solid var(--signal); border-radius: 5px; }
.mini .bpost > b { font-size: 9px; line-height: 1.2; padding: 0 1px 1px; }
.bstage { flex: 1; min-width: 0; align-self: stretch; align-items: center; justify-items: stretch; }
.blist { display: flex; flex-direction: column; gap: 5px; }
.bli { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; background: #fff; border-radius: 6px; box-shadow: var(--sh-chip); font-weight: 600; white-space: nowrap; }
.bn { width: 7px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.btree { display: flex; flex-direction: column; align-items: center; }
.mini .bq { font-size: 8.5px; margin-bottom: 4px; white-space: nowrap; }
.bbr { display: flex; gap: 3px; }
.btree .mt { height: 16px; padding: 0 4px; font-size: 8.5px; }
.mini .bln { display: block; width: 1px; height: 7px; background: var(--signal); transform-origin: 50% 0; }
.bq2 { gap: 3px; } .mini .bq2 i { font-size: 8.5px; } .mini .bq2 b { color: var(--green); }
.btree .bleaf { height: 19px; padding: 0 6px 0 4px; font-size: 9.5px; font-weight: 600; }

/* Security: the mailbox is read only, its sign-in token is sealed, and an email's text gives a fact and is not kept */
.sacc { width: 102px; flex: none; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.sacc .mr { gap: 4px; }
.sacc .mr .mt { margin-left: auto; height: 15px; padding: 0 4px; font-size: 8.5px; }
.sfld { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 6px; }
.mini .sfld > i { font-size: 8.5px; }
.stok { font-family: "Geist Mono", ui-monospace, monospace; font-size: 8.5px; letter-spacing: 0; color: var(--ink); white-space: nowrap; }
.sseal svg, .slab svg { width: 8px; height: 8px; flex: none; }
.smail { flex: 1; min-width: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.smail .mr { gap: 4px; flex-wrap: wrap; }
.mini .smail .mr i { font-size: 8.5px; }
.sbody { height: 17px; align-items: center; }
.slines { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.slines u { display: block; height: 3px; border-radius: 2px; background: var(--line); }
.slines u:nth-child(2) { width: 86%; } .slines u:nth-child(3) { width: 58%; }
.smail .mn { margin-top: 0; }

/* ---------- Home page security: one scene per item, played once in view (the engine above) ---------- */
.mini.sec-tile { display: flex; align-items: center; justify-content: center; height: 120px; margin-bottom: 4px; overflow: hidden; border-radius: var(--r-sm); background: var(--hover); box-shadow: var(--sh-chip); color: var(--ink); font-size: 9.5px; line-height: 1.25; letter-spacing: 0; text-align: left; cursor: default; }
.sec2 .mini b { font: inherit; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.sec2 .mini i { font-size: 8.5px; }

/* Read only: each email and meeting is read into the record, and the inbox keeps its unread mark */
.sbox { width: 100px; flex: none; padding: 6px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.srow { position: relative; isolation: isolate; display: flex; align-items: center; gap: 5px; align-self: stretch; padding: 3px 4px; border-radius: 5px; }
.srow > span { display: flex; flex-direction: column; min-width: 0; }
.sdot { position: absolute; right: 5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 999px; background: var(--ink); }
.sscan { position: absolute; inset: 0; border-radius: 5px; background: var(--signal-soft); box-shadow: inset 0 0 0 1px var(--signal-line); z-index: -1; --from: none; }
.srow > * { position: relative; }
.srow > .sscan, .srow > .sdot { position: absolute; }
.sbox > .mt { margin: 2px 0 0 4px; }

/* Encrypted twice: a sign-in token is sealed with AES-256, inside a database encrypted at rest */
.sx-enc .mi { justify-content: center; }
.slay { position: absolute; left: 50%; top: 50%; border-radius: 12px; }
.slay2 { width: 200px; height: 92px; margin: -46px 0 0 -100px; border: 1px dashed var(--line-strong); background: rgba(255,255,255,.45); --from: scale(.94); }
.slay1 { width: 150px; height: 58px; margin: -25px 0 0 -75px; border: 1.5px solid var(--signal-line); border-radius: 10px; background: #fff; --from: scale(.9); --ease: var(--ease-spring); }
.slab { position: absolute; left: 10px; top: -9px; height: 15px; padding: 0 5px; font-size: 8.5px; }
.slay2 .slab { top: -8px; color: var(--ink-2); }
.stoken { position: relative; z-index: 1; margin: 8px auto 0; padding: 6px 9px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.mini .stoken > i { font-size: 8.5px; }
.stok.scipher { color: var(--green); }

/* Never used for training: an email and a call give notes; training on them is crossed out */
.sx-train .msrc { width: 50px; }
.snotes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.snote { padding: 7px 8px; display: flex; flex-direction: column; gap: 4px; }
.strain { display: flex; align-items: center; gap: 4px; }
.strain > .mt:first-child { position: relative; color: var(--muted); }
.sstrike { position: absolute; left: 5px; right: 5px; top: 50%; height: 1px; background: var(--ink-2); }
.sno { background: var(--solid); color: #fff; box-shadow: none; --from: scale(.6); }

/* Deleted when you leave: Disconnect, and each stored email and meeting goes */
.sacct { width: 220px; padding: 7px 8px; display: flex; flex-direction: column; gap: 5px; }
.shd { display: flex; align-items: center; gap: 5px; }
.shd .swap { margin-right: auto; }
.shd .mt { height: 15px; padding: 0 5px; font-size: 8.5px; }
.sbtn { display: inline-flex; align-items: center; height: 17px; padding: 0 7px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line-strong); font-weight: 500; transition: opacity var(--normal) var(--ease-out); }
.sx-del.s2 .sbtn, .sx-del:not(.is-armed) .sbtn { opacity: .4; }
.sx-del.is-live.s2 .sbtn { animation: sc-press 360ms var(--ease-spring); }
@keyframes sc-press { 0%, 100% { transform: none; } 35% { transform: scale(.9); } }
.slist { min-height: 58px; align-items: center; justify-items: stretch; border-top: 1px solid var(--line); padding-top: 4px; }
.srows { display: flex; flex-direction: column; gap: 1px; }
.sx-del .srow { padding: 2px 0; gap: 5px; --to: translateX(-12px); }
.sx-del .srow i { margin-left: auto; }
.sempty { display: flex; align-items: center; justify-content: center; gap: 5px; font-weight: 500; color: var(--green); }
.sempty svg { width: 10px; height: 10px; }

/* The same scenes on the product pages' "rest of the platform" cards */
.p-other .menu__tile.mini { height: 140px; margin-bottom: 6px; border-radius: 12px; }
.om-product .p-other .mini b { font-family: var(--font); font-size: inherit; line-height: inherit; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
  .sc *, .sc *::before, .sc *::after { transition: none !important; animation: none !important; }
}