/* Motion for ORA's assessment glyphs (markup in ora-glyphs.js). The cockpit
   loads this file directly and the embedded journey imports it, so both
   animate the same way. A glyph is still until it is live (.is-live) or its
   holder (.og-play) is hovered or focused. Every loop starts and ends on the
   still frame, so starting, stopping and looping never jump. When a glyph
   stops, ora-glyphs.js keeps it moving until its loop ends: .og-settle after a
   hover or focus, .og-ending after it was live. */

.og { display: inline-block; flex: none; overflow: visible; vertical-align: middle; }
.og-holder { display: inline-flex; flex: none; line-height: 0; }
.og-as-is .og-tobe { display: none; }
.og-tobe2, .og-glow { display: none; }
.og-to-be .og-tobe2, .og-to-be .og-glow { display: inline; }
.og-tobe2, .og-tobe2 * { animation-delay: .3s; }

/* Elements that scale or slide do so around their own box. */
.og :is(.og-d1, .og-d2, .og-d3, .og-d4, .og-d5, .og-p1, .og-p2, .og-halo, .og-ring, .og-card, .og-g1, .og-g2, .og-spark, .og-band, .og-arrow) {
  transform-box: fill-box;
  transform-origin: center;
}
.og :is(.og-c1, .og-c2, .og-c3) { transform-box: fill-box; transform-origin: 50% 100%; }
.og :is(.og-rb1, .og-rb2, .og-rb3, .og-rb4, .og-root, .og-k1, .og-k2, .og-k3, .og-av1, .og-av2, .og-av3, .og-nm1, .og-nm2, .og-nm3, .og-b1, .og-b2, .og-b3, .og-ck) {
  transform-box: fill-box;
  transform-origin: center;
}
.og :is(.og-pg1, .og-pg2, .og-pg3) { transform-box: fill-box; transform-origin: 50% 100%; }
.og-small .og-tobe { transform-box: fill-box; transform-origin: 50% 100%; }
.og-large .og-wipe { transform-box: fill-box; transform-origin: 0 50%; }

:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og) * {
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.45, .05, .25, 1);
}
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-large * { animation-duration: 5.2s; }
/* A holder marked .og-once plays one loop when hovered or focused, then rests on the still frame; the pointer
   leaving lets that loop end. A glyph that was live finishes the loop it is in. */
.og-play.og-once .og:not(.is-live):not(.og-ending) * { animation-iteration-count: 1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-small * { animation-duration: 3.4s; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og) .og-scan { animation-timing-function: linear; }

/* ---- Current State: reading and rating -------------------------------- */
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-current-state.og-large .og-scan { animation-name: og-csl-scan; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-current-state.og-large .og-d1 { animation-name: og-csl-d1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-current-state.og-large .og-d2 { animation-name: og-csl-d2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-current-state.og-large .og-d3 { animation-name: og-csl-d3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-current-state.og-large .og-d4 { animation-name: og-csl-d4; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-current-state.og-large .og-d5 { animation-name: og-csl-d5; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-current-state.og-large .og-fill { animation-name: og-csl-fill; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-current-state.og-large .og-halo { animation-name: og-csl-halo; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-current-state.og-small .og-scan { animation-name: og-css-scan; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-current-state.og-small .og-d1 { animation-name: og-css-d1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-current-state.og-small .og-d2 { animation-name: og-css-d2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-current-state.og-small .og-fill { animation-name: og-css-fill; }

/* The scan passes down the page; as it crosses a line, a finding lifts off
   it and arcs to its row (pain points above, strengths below), and the
   maturity ring fills a little with each one. */
@keyframes og-csl-scan {
  0%, 12% { opacity: 0; transform: translateY(0); }
  16%, 66% { opacity: 1; }
  70% { opacity: 0; transform: translateY(31px); }
  71%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes og-csl-d1 {
  0%, 5% { opacity: 1; transform: translate(0, 0) scale(1); }
  10% { opacity: 0; transform: translate(0, 0) scale(.3); }
  10.5%, 18% { opacity: 0; transform: translate(-18.5px, 2px) scale(0); }
  20.5% { opacity: 1; transform: translate(-18.5px, 2px) scale(1.5); }
  23.5% { transform: translate(-18.5px, 2px) scale(1); }
  28.5% { transform: translate(-9.25px, -4px) scale(1.1); }
  33.5%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes og-csl-d2 {
  0%, 5% { opacity: 1; transform: translate(0, 0) scale(1); }
  10% { opacity: 0; transform: translate(0, 0) scale(.3); }
  10.5%, 27.4% { opacity: 0; transform: translate(-15.5px, -2px) scale(0); }
  29.9% { opacity: 1; transform: translate(-15.5px, -2px) scale(1.5); }
  32.9% { transform: translate(-15.5px, -2px) scale(1); }
  37.9% { transform: translate(-7.75px, -6px) scale(1.1); }
  42.9%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes og-csl-d3 {
  0%, 5% { opacity: 1; transform: translate(0, 0) scale(1); }
  10% { opacity: 0; transform: translate(0, 0) scale(.3); }
  10.5%, 36.8% { opacity: 0; transform: translate(-28px, 12px) scale(0); }
  39.3% { opacity: 1; transform: translate(-28px, 12px) scale(1.5); }
  42.3% { transform: translate(-28px, 12px) scale(1); }
  47.3% { transform: translate(-14px, 1px) scale(1.1); }
  52.3%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes og-csl-d4 {
  0%, 5% { opacity: 1; transform: translate(0, 0) scale(1); }
  10% { opacity: 0; transform: translate(0, 0) scale(.3); }
  10.5%, 46.1% { opacity: 0; transform: translate(-29.5px, 17px) scale(0); }
  48.6% { opacity: 1; transform: translate(-29.5px, 17px) scale(1.5); }
  51.6% { transform: translate(-29.5px, 17px) scale(1); }
  56.6% { transform: translate(-14.75px, 3.5px) scale(1.1); }
  61.6%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes og-csl-d5 {
  0%, 5% { opacity: 1; transform: translate(0, 0) scale(1); }
  10% { opacity: 0; transform: translate(0, 0) scale(.3); }
  10.5%, 55.5% { opacity: 0; transform: translate(-26px, 13px) scale(0); }
  58% { opacity: 1; transform: translate(-26px, 13px) scale(1.5); }
  61% { transform: translate(-26px, 13px) scale(1); }
  66% { transform: translate(-13px, 1.5px) scale(1.1); }
  71%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes og-csl-fill {
  0%, 5% { stroke-dashoffset: 14.45; }
  11%, 33.5% { stroke-dashoffset: 28.9; }
  37%, 42.9% { stroke-dashoffset: 26.01; }
  46.4%, 52.3% { stroke-dashoffset: 23.12; }
  55.8%, 61.6% { stroke-dashoffset: 20.23; }
  65.1%, 71% { stroke-dashoffset: 17.34; }
  74.5%, 100% { stroke-dashoffset: 14.45; }
}
@keyframes og-csl-halo {
  0%, 73% { opacity: 0; transform: scale(.9); }
  75% { opacity: .7; transform: scale(.95); }
  88% { opacity: 0; transform: scale(1.3); }
  89%, 100% { opacity: 0; transform: scale(.9); }
}
@keyframes og-css-scan {
  0%, 8% { opacity: 0; transform: translateY(0); }
  11%, 49% { opacity: 1; }
  52% { opacity: 0; transform: translateY(13px); }
  53%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes og-css-d1 {
  0%, 4% { opacity: 1; transform: translate(0, 0) scale(1); }
  8% { opacity: 0; transform: translate(0, 0) scale(.3); }
  8.5%, 16% { opacity: 0; transform: translate(-6.8px, 3.4px) scale(0); }
  19% { opacity: 1; transform: translate(-6.8px, 3.4px) scale(1.4); }
  21.5% { transform: translate(-6.8px, 3.4px) scale(1); }
  25.5% { transform: translate(-3.4px, -1.3px) scale(1.1); }
  30.5%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes og-css-d2 {
  0%, 4% { opacity: 1; transform: translate(0, 0) scale(1); }
  8% { opacity: 0; transform: translate(0, 0) scale(.3); }
  8.5%, 27.8% { opacity: 0; transform: translate(-13.1px, 6.9px) scale(0); }
  30.8% { opacity: 1; transform: translate(-13.1px, 6.9px) scale(1.4); }
  33.3% { transform: translate(-13.1px, 6.9px) scale(1); }
  37.3% { transform: translate(-6.55px, .45px) scale(1.1); }
  42.3%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes og-css-fill {
  0%, 4% { stroke-dashoffset: 7.225; }
  8%, 30.5% { stroke-dashoffset: 14.45; }
  34%, 42.3% { stroke-dashoffset: 10.84; }
  46%, 100% { stroke-dashoffset: 7.225; }
}

/* ---- Opportunity: connecting ------------------------------------------ */
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large * { animation-duration: 5.6s; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-l1 { animation-name: og-opl-l1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-l2 { animation-name: og-opl-l2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-l3 { animation-name: og-opl-l3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-l4 { animation-name: og-opl-l4; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-f1 { animation-name: og-opl-f1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-f2 { animation-name: og-opl-f2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-d1 { animation-name: og-opl-d1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-d2 { animation-name: og-opl-d2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-d3 { animation-name: og-opl-d3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-d4 { animation-name: og-opl-d4; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-d5 { animation-name: og-opl-d5; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-p1 { animation-name: og-opl-p1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-p2 { animation-name: og-opl-p2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-card { animation-name: og-opl-card; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-g1 { animation-name: og-opl-g1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-g2 { animation-name: og-opl-g2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-spark { animation-name: og-op-spark; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-large .og-ring { animation-name: og-opl-ring; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-small .og-l1 { animation-name: og-ops-l1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-small .og-l2 { animation-name: og-ops-l2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-small .og-f1 { animation-name: og-ops-f1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-small .og-d1 { animation-name: og-ops-d1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-small .og-d2 { animation-name: og-ops-d2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-small .og-d3 { animation-name: og-ops-d3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-small .og-card { animation-name: og-ops-card; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-small .og-g1 { animation-name: og-ops-g1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-opportunity.og-small .og-spark { animation-name: og-op-spark-s; }
.og-opportunity :is(.og-l1, .og-l2, .og-l3, .og-l4, .og-f1, .og-f2) { stroke-dasharray: 1 1; }

/* Pain points and strengths drift, link up one by one, and send what they
   share along the links into an opportunity card; the card lights, the
   ranked cards behind it fan out, and a spark marks the find. */
@keyframes og-opl-l1 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 11% { opacity: 0; stroke-dashoffset: 0; } 11.5%, 30% { opacity: 1; stroke-dashoffset: 1; } 36%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-opl-l2 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 11% { opacity: 0; stroke-dashoffset: 0; } 11.5%, 34% { opacity: 1; stroke-dashoffset: 1; } 40%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-opl-l3 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 11% { opacity: 0; stroke-dashoffset: 0; } 11.5%, 38% { opacity: 1; stroke-dashoffset: 1; } 44%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-opl-l4 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 11% { opacity: 0; stroke-dashoffset: 0; } 11.5%, 42% { opacity: 1; stroke-dashoffset: 1; } 48%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-opl-f1 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 11% { opacity: 0; stroke-dashoffset: 0; } 11.5%, 46% { opacity: 1; stroke-dashoffset: 1; } 52%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-opl-f2 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 11% { opacity: 0; stroke-dashoffset: 0; } 11.5%, 48% { opacity: 1; stroke-dashoffset: 1; } 54%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-opl-d1 { 0%, 10% { transform: translate(0, 0) scale(1); } 20% { transform: translate(1.6px, -1.2px) scale(1); } 29% { transform: translate(0, 0) scale(1); } 31% { transform: translate(0, 0) scale(1.35); } 34%, 100% { transform: translate(0, 0) scale(1); } }
@keyframes og-opl-d2 { 0%, 10% { transform: translate(0, 0) scale(1); } 20% { transform: translate(-1.4px, 1.5px) scale(1); } 29% { transform: translate(0, 0) scale(1); } 35% { transform: translate(0, 0) scale(1.35); } 38%, 100% { transform: translate(0, 0) scale(1); } }
@keyframes og-opl-d3 { 0%, 10% { transform: translate(0, 0) scale(1); } 20% { transform: translate(1.3px, 1.4px) scale(1); } 29% { transform: translate(0, 0) scale(1); } 39% { transform: translate(0, 0) scale(1.35); } 42%, 100% { transform: translate(0, 0) scale(1); } }
@keyframes og-opl-d4 { 0%, 10% { transform: translate(0, 0) scale(1); } 20% { transform: translate(-1.5px, -1.3px) scale(1); } 29% { transform: translate(0, 0) scale(1); } 43% { transform: translate(0, 0) scale(1.35); } 46%, 100% { transform: translate(0, 0) scale(1); } }
@keyframes og-opl-d5 { 0%, 10% { transform: translate(0, 0) scale(1); } 20% { transform: translate(1.4px, -1.4px) scale(1); } 29% { transform: translate(0, 0) scale(1); } 47% { transform: translate(0, 0) scale(1.35); } 50%, 100% { transform: translate(0, 0) scale(1); } }
@keyframes og-opl-p1 {
  0%, 44% { opacity: 0; transform: translate(-25px, -14px) scale(1); }
  45.5% { opacity: 1; }
  51% { transform: translate(-11px, -9px) scale(1); }
  57% { opacity: 1; transform: translate(0, 0) scale(1); }
  60% { opacity: 0; transform: translate(0, 0) scale(.3); }
  61%, 100% { opacity: 0; transform: translate(-25px, -14px) scale(1); }
}
@keyframes og-opl-p2 {
  0%, 46% { opacity: 0; transform: translate(-24px, 14px) scale(1); }
  47.5% { opacity: 1; }
  53% { transform: translate(-10px, 4px) scale(1); }
  59% { opacity: 1; transform: translate(0, 0) scale(1); }
  62% { opacity: 0; transform: translate(0, 0) scale(.3); }
  63%, 100% { opacity: 0; transform: translate(-24px, 14px) scale(1); }
}
@keyframes og-opl-card {
  0%, 5% { opacity: 1; transform: scale(1); }
  11%, 57% { opacity: 0; transform: scale(.6); }
  62% { opacity: 1; transform: scale(1.09); }
  66%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes og-opl-g1 {
  0%, 5% { opacity: 1; transform: translate(0, 0); }
  11%, 63% { opacity: 0; transform: translate(-3px, 3.5px); }
  66% { opacity: 1; }
  67.5% { opacity: .45; }
  69%, 100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes og-opl-g2 {
  0%, 5% { opacity: 1; transform: translate(0, 0); }
  11%, 66% { opacity: 0; transform: translate(-6px, 7px); }
  69% { opacity: 1; }
  70.5% { opacity: .45; }
  72%, 100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes og-opl-ring {
  0%, 60% { opacity: 0; transform: scale(.92); }
  63% { opacity: .9; transform: scale(.98); }
  76% { opacity: 0; transform: scale(1.18); }
  77%, 100% { opacity: 0; transform: scale(.92); }
}
@keyframes og-op-spark {
  0%, 5% { opacity: 1; transform: rotate(0deg) scale(1); }
  10%, 70% { opacity: 0; transform: rotate(-90deg) scale(0); }
  76% { opacity: 1; transform: rotate(-30deg) scale(1.35); }
  83%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes og-ops-l1 { 0%, 4% { opacity: 1; stroke-dashoffset: 0; } 9% { opacity: 0; stroke-dashoffset: 0; } 9.5%, 14% { opacity: 1; stroke-dashoffset: 1; } 25%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-ops-l2 { 0%, 4% { opacity: 1; stroke-dashoffset: 0; } 9% { opacity: 0; stroke-dashoffset: 0; } 9.5%, 22% { opacity: 1; stroke-dashoffset: 1; } 33%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-ops-f1 { 0%, 4% { opacity: 1; stroke-dashoffset: 0; } 9% { opacity: 0; stroke-dashoffset: 0; } 9.5%, 33% { opacity: 1; stroke-dashoffset: 1; } 40%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-ops-d1 { 0%, 12% { transform: scale(1); } 15% { transform: scale(1.4); } 19%, 100% { transform: scale(1); } }
@keyframes og-ops-d2 { 0%, 23% { transform: scale(1); } 26% { transform: scale(1.4); } 30%, 100% { transform: scale(1); } }
@keyframes og-ops-d3 { 0%, 31% { transform: scale(1); } 34% { transform: scale(1.4); } 38%, 100% { transform: scale(1); } }
@keyframes og-ops-card {
  0%, 4% { opacity: 1; transform: scale(1); }
  9%, 40% { opacity: 0; transform: scale(.55); }
  46% { opacity: 1; transform: scale(1.12); }
  51%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes og-ops-g1 {
  0%, 4% { opacity: 1; transform: translate(0, 0); }
  9%, 50% { opacity: 0; transform: translate(-2.5px, 2px); }
  57%, 100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes og-op-spark-s {
  0%, 4% { opacity: 1; transform: rotate(0deg) scale(1); }
  9%, 55% { opacity: 0; transform: rotate(-90deg) scale(0); }
  62% { opacity: 1; transform: rotate(-30deg) scale(1.4); }
  70%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* ---- Technology: building the house ----------------------------------- */
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large * { animation-duration: 5.6s; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-band { animation-name: og-tel-band; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-c1 { animation-name: og-tel-c1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-c2 { animation-name: og-tel-c2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-c3 { animation-name: og-tel-c3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-roof { animation-name: og-tel-roof; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-a1 { animation-name: og-tel-a1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-a2 { animation-name: og-tel-a2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-a3 { animation-name: og-tel-a3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-a4 { animation-name: og-tel-a4; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-a5 { animation-name: og-tel-a5; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-a6 { animation-name: og-tel-a6; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-tobe { animation-name: og-tel-tobe; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-wipe { animation-name: og-tel-wipe; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-arrow { animation-name: og-tel-arrow; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-large .og-halo { animation-name: og-tel-halo; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-small .og-band { animation-name: og-tes-band; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-small .og-c1 { animation-name: og-tes-c1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-small .og-c2 { animation-name: og-tes-c2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-small .og-c3 { animation-name: og-tes-c3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-small .og-roof { animation-name: og-tes-roof; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-technology.og-small .og-tobe { animation-name: og-tes-tobe; }

/* The foundations are laid, the application pillars rise, the
   orchestration roof settles on them, applications slide into their slots,
   and an arrow turns one As-is application into its To-be. */
@keyframes og-tel-band { 0%, 5% { opacity: 1; transform: scaleX(1); } 10%, 14% { opacity: 0; transform: scaleX(.05); } 15.5% { opacity: 1; } 22%, 100% { opacity: 1; transform: scaleX(1); } }
@keyframes og-tel-c1 { 0%, 5% { opacity: 1; transform: scaleY(1); } 10% { opacity: 0; transform: scaleY(1); } 11%, 20% { opacity: 1; transform: scaleY(0); } 29% { transform: scaleY(1.05); } 32%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes og-tel-c2 { 0%, 5% { opacity: 1; transform: scaleY(1); } 10% { opacity: 0; transform: scaleY(1); } 11%, 23% { opacity: 1; transform: scaleY(0); } 32% { transform: scaleY(1.05); } 35%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes og-tel-c3 { 0%, 5% { opacity: 1; transform: scaleY(1); } 10% { opacity: 0; transform: scaleY(1); } 11%, 26% { opacity: 1; transform: scaleY(0); } 35% { transform: scaleY(1.05); } 38%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes og-tel-roof { 0%, 5% { opacity: 1; transform: translateY(0); } 10%, 37% { opacity: 0; transform: translateY(-7px); } 44% { opacity: 1; transform: translateY(.8px); } 47%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes og-tel-a1 { 0%, 5% { opacity: 1; transform: translateY(0); } 10%, 47% { opacity: 0; transform: translateY(-4px); } 52%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes og-tel-a2 { 0%, 5% { opacity: 1; transform: translateY(0); } 10%, 56% { opacity: 0; transform: translateY(-4px); } 61%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes og-tel-a3 { 0%, 5% { opacity: 1; transform: translateY(0); } 10%, 50% { opacity: 0; transform: translateY(-4px); } 55%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes og-tel-a4 { 0%, 5% { opacity: 1; transform: translateY(0); } 10%, 59% { opacity: 0; transform: translateY(-4px); } 64%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes og-tel-a5 { 0%, 5% { opacity: 1; transform: translateY(0); } 10%, 53% { opacity: 0; transform: translateY(-4px); } 58%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes og-tel-a6 { 0%, 5% { opacity: 1; transform: translateY(0); } 10%, 62% { opacity: 0; transform: translateY(-4px); } 67%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes og-tel-tobe { 0%, 5% { opacity: 1; } 10%, 70% { opacity: 0; } 70.5%, 100% { opacity: 1; } }
@keyframes og-tel-wipe { 0%, 70% { transform: scaleX(1); } 70.5% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); } }
@keyframes og-tel-halo { 0%, 76% { opacity: 0; transform: scale(.9); } 79% { opacity: .9; transform: scale(1); } 92% { opacity: 0; transform: scale(1.35); } 93%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes og-tel-arrow { 0%, 70% { opacity: 1; transform: translateX(0); } 70.5% { opacity: 0; transform: translateX(-4px); } 80%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes og-tes-band { 0%, 6% { transform: scaleX(1); } 10% { transform: scaleX(.92); } 16%, 100% { transform: scaleX(1); } }
@keyframes og-tes-c1 { 0%, 4% { opacity: 1; transform: scaleY(1); } 9% { opacity: 0; transform: scaleY(1); } 10%, 14% { opacity: 1; transform: scaleY(0); } 24%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes og-tes-c2 { 0%, 4% { opacity: 1; transform: scaleY(1); } 9% { opacity: 0; transform: scaleY(1); } 10%, 18% { opacity: 1; transform: scaleY(0); } 28%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes og-tes-c3 { 0%, 4% { opacity: 1; transform: scaleY(1); } 9% { opacity: 0; transform: scaleY(1); } 10%, 22% { opacity: 1; transform: scaleY(0); } 32%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes og-tes-roof { 0%, 4% { opacity: 1; transform: translateY(0); } 9%, 30% { opacity: 0; transform: translateY(-4px); } 38% { opacity: 1; transform: translateY(.5px); } 41%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes og-tes-tobe { 0%, 4% { opacity: 1; transform: scaleY(1); } 9% { opacity: 0; transform: scaleY(1); } 10%, 46% { opacity: 1; transform: scaleY(0); } 58%, 100% { opacity: 1; transform: scaleY(1); } }

/* ---- Document ingestion: reading the documents ------------------------ */
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-large * { animation-duration: 5.6s; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-large .og-pg1 { animation-name: og-inl-pg1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-large .og-pg2 { animation-name: og-inl-pg2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-large .og-pg3 { animation-name: og-inl-pg3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-large .og-lt1 { animation-name: og-inl-lt1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-large .og-lt2 { animation-name: og-inl-lt2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-large .og-lt3 { animation-name: og-inl-lt3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-large .og-rb1 { animation-name: og-inl-rb1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-large .og-rb2 { animation-name: og-inl-rb2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-large .og-rb3 { animation-name: og-inl-rb3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-large .og-rb4 { animation-name: og-inl-rb4; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-small .og-pg1 { animation-name: og-ins-pg1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-small .og-pg2 { animation-name: og-ins-pg2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-small .og-lt1 { animation-name: og-ins-lt1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-ingestion.og-small .og-rb1 { animation-name: og-ins-rb1; }

/* The pages fan out, a light passes over each in turn, the regions ORA
   records light up as boxes, and the pages file back into a neat stack. */
@keyframes og-inl-pg3 { 0%, 8% { transform: translate(0, 0) rotate(0deg); } 20%, 60% { transform: translate(-14px, 3px) rotate(-13deg); } 74%, 100% { transform: translate(0, 0) rotate(0deg); } }
@keyframes og-inl-pg2 { 0%, 8% { transform: translate(0, 0) rotate(0deg); } 20%, 60% { transform: translate(0, -2px) rotate(0deg); } 74%, 100% { transform: translate(0, 0) rotate(0deg); } }
@keyframes og-inl-pg1 { 0%, 8% { transform: translate(0, 0) rotate(0deg); } 20%, 60% { transform: translate(14px, 1px) rotate(13deg); } 74%, 100% { transform: translate(0, 0) rotate(0deg); } }
@keyframes og-inl-lt3 { 0%, 22% { opacity: 0; transform: translateX(0); } 24%, 32% { opacity: .55; } 34% { opacity: 0; transform: translateX(15px); } 35%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes og-inl-lt2 { 0%, 33% { opacity: 0; transform: translateX(0); } 35%, 43% { opacity: .55; } 45% { opacity: 0; transform: translateX(15px); } 46%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes og-inl-lt1 { 0%, 44% { opacity: 0; transform: translateX(0); } 46%, 54% { opacity: .55; } 56% { opacity: 0; transform: translateX(15px); } 57%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes og-inl-rb3 { 0%, 28% { opacity: 0; transform: scale(.6); } 31% { opacity: 1; transform: scale(1.12); } 33%, 60% { opacity: 1; transform: scale(1); } 66%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes og-inl-rb2 { 0%, 39% { opacity: 0; transform: scale(.6); } 42% { opacity: 1; transform: scale(1.12); } 44%, 60% { opacity: 1; transform: scale(1); } 66%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes og-inl-rb1 { 0%, 5% { opacity: 1; transform: scale(1); } 9%, 49% { opacity: 0; transform: scale(.6); } 52% { opacity: 1; transform: scale(1.12); } 54%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-inl-rb4 { 0%, 5% { opacity: 1; transform: scale(1); } 9%, 52% { opacity: 0; transform: scale(.6); } 55% { opacity: 1; transform: scale(1.12); } 57%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-ins-pg2 { 0%, 8% { transform: translate(0, 0) rotate(0deg); } 22%, 56% { transform: translate(2.5px, -1px) rotate(10deg); } 70%, 100% { transform: translate(0, 0) rotate(0deg); } }
@keyframes og-ins-pg1 { 0%, 8% { transform: translate(0, 0) rotate(0deg); } 22%, 56% { transform: translate(-2.5px, 1px) rotate(-10deg); } 70%, 100% { transform: translate(0, 0) rotate(0deg); } }
@keyframes og-ins-lt1 { 0%, 26% { opacity: 0; transform: translateX(0); } 29%, 43% { opacity: .6; } 46% { opacity: 0; transform: translateX(6px); } 47%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes og-ins-rb1 { 0%, 4% { opacity: 1; transform: scale(1); } 8%, 36% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1.15); } 43%, 100% { opacity: 1; transform: scale(1); } }

/* ---- People and transcript links: finding the people ------------------ */
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large * { animation-duration: 5.6s; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-root { animation-name: og-pel-root; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-ln1 { animation-name: og-pel-ln1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-ln2 { animation-name: og-pel-ln2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-ln3 { animation-name: og-pel-ln3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-ln4 { animation-name: og-pel-ln4; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-ln5 { animation-name: og-pel-ln5; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-k1 { animation-name: og-pel-k1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-k2 { animation-name: og-pel-k2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-k3 { animation-name: og-pel-k3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-av1 { animation-name: og-pel-av1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-av2 { animation-name: og-pel-av2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-av3 { animation-name: og-pel-av3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-nm1 { animation-name: og-pel-nm1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-nm2 { animation-name: og-pel-nm2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-large .og-nm3 { animation-name: og-pel-nm3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-small .og-ln1 { animation-name: og-pes-ln1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-small .og-ln2 { animation-name: og-pes-ln2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-small .og-ln3 { animation-name: og-pes-ln3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-small .og-ln4 { animation-name: og-pes-ln4; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-small .og-k1 { animation-name: og-pes-k1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-small .og-k2 { animation-name: og-pes-k2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-small .og-av1 { animation-name: og-pes-av1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-small .og-av2 { animation-name: og-pes-av2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-small .og-nm1 { animation-name: og-pes-nm1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-people.og-small .og-nm2 { animation-name: og-pes-nm2; }
.og-people :is(.og-ln1, .og-ln2, .og-ln3, .og-ln4, .og-ln5) { stroke-dasharray: 1 1; }

/* The org chart draws its boxes and lines; names light up in the
   transcript, lift out of it and settle into the chart as people. */
@keyframes og-pel-root { 0%, 5% { opacity: 1; transform: scale(1); } 10%, 12% { opacity: 0; transform: scale(.5); } 16% { opacity: 1; transform: scale(1.1); } 19%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-pel-ln1 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 10% { opacity: 0; stroke-dashoffset: 0; } 10.5%, 17% { opacity: 1; stroke-dashoffset: 1; } 22%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-pel-ln2 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 10% { opacity: 0; stroke-dashoffset: 0; } 10.5%, 21% { opacity: 1; stroke-dashoffset: 1; } 28%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-pel-ln3 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 10% { opacity: 0; stroke-dashoffset: 0; } 10.5%, 27% { opacity: 1; stroke-dashoffset: 1; } 32%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-pel-ln4 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 10% { opacity: 0; stroke-dashoffset: 0; } 10.5%, 28% { opacity: 1; stroke-dashoffset: 1; } 33%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-pel-ln5 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 10% { opacity: 0; stroke-dashoffset: 0; } 10.5%, 29% { opacity: 1; stroke-dashoffset: 1; } 34%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-pel-k1 { 0%, 5% { opacity: 1; transform: scale(1); } 10%, 31% { opacity: 0; transform: scale(.5); } 34% { opacity: 1; transform: scale(1.08); } 37%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-pel-k2 { 0%, 5% { opacity: 1; transform: scale(1); } 10%, 33% { opacity: 0; transform: scale(.5); } 36% { opacity: 1; transform: scale(1.08); } 39%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-pel-k3 { 0%, 5% { opacity: 1; transform: scale(1); } 10%, 35% { opacity: 0; transform: scale(.5); } 38% { opacity: 1; transform: scale(1.08); } 41%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-pel-av1 { 0%, 5% { opacity: 1; transform: scale(1); } 9%, 56% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.2); } 63%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-pel-av2 { 0%, 5% { opacity: 1; transform: scale(1); } 9%, 60% { opacity: 0; transform: scale(.3); } 64% { opacity: 1; transform: scale(1.2); } 67%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-pel-av3 { 0%, 5% { opacity: 1; transform: scale(1); } 9%, 64% { opacity: 0; transform: scale(.3); } 68% { opacity: 1; transform: scale(1.2); } 71%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-pel-nm1 { 0%, 37% { opacity: 0; transform: translate(0, 0) scale(.6); } 40%, 46% { opacity: 1; transform: translate(0, 0) scale(1); } 51% { transform: translate(8.75px, -5.25px) scale(1); } 56% { opacity: 1; transform: translate(17.5px, 5.5px) scale(.8); } 58% { opacity: 0; transform: translate(17.5px, 5.5px) scale(.3); } 59%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); } }
@keyframes og-pel-nm2 { 0%, 39% { opacity: 0; transform: translate(0, 0) scale(.6); } 42%, 50% { opacity: 1; transform: translate(0, 0) scale(1); } 55% { transform: translate(16.5px, -7px) scale(1); } 60% { opacity: 1; transform: translate(33px, 2px) scale(.8); } 62% { opacity: 0; transform: translate(33px, 2px) scale(.3); } 63%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); } }
@keyframes og-pel-nm3 { 0%, 41% { opacity: 0; transform: translate(0, 0) scale(.6); } 44%, 54% { opacity: 1; transform: translate(0, 0) scale(1); } 59% { transform: translate(20.75px, -8.75px) scale(1); } 64% { opacity: 1; transform: translate(41.5px, -1.5px) scale(.8); } 66% { opacity: 0; transform: translate(41.5px, -1.5px) scale(.3); } 67%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); } }
@keyframes og-pes-ln1 { 0%, 4% { opacity: 1; stroke-dashoffset: 0; } 8% { opacity: 0; stroke-dashoffset: 0; } 8.5%, 12% { opacity: 1; stroke-dashoffset: 1; } 17%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-pes-ln2 { 0%, 4% { opacity: 1; stroke-dashoffset: 0; } 8% { opacity: 0; stroke-dashoffset: 0; } 8.5%, 15% { opacity: 1; stroke-dashoffset: 1; } 22%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-pes-ln3 { 0%, 4% { opacity: 1; stroke-dashoffset: 0; } 8% { opacity: 0; stroke-dashoffset: 0; } 8.5%, 20% { opacity: 1; stroke-dashoffset: 1; } 25%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-pes-ln4 { 0%, 4% { opacity: 1; stroke-dashoffset: 0; } 8% { opacity: 0; stroke-dashoffset: 0; } 8.5%, 21% { opacity: 1; stroke-dashoffset: 1; } 26%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-pes-k1 { 0%, 4% { opacity: 1; transform: scale(1); } 8%, 22% { opacity: 0; transform: scale(.5); } 26% { opacity: 1; transform: scale(1.1); } 29%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-pes-k2 { 0%, 4% { opacity: 1; transform: scale(1); } 8%, 24% { opacity: 0; transform: scale(.5); } 28% { opacity: 1; transform: scale(1.1); } 31%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-pes-av1 { 0%, 4% { opacity: 1; transform: scale(1); } 8%, 43% { opacity: 0; transform: scale(.3); } 47% { opacity: 1; transform: scale(1.25); } 50%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-pes-av2 { 0%, 4% { opacity: 1; transform: scale(1); } 8%, 50% { opacity: 0; transform: scale(.3); } 54% { opacity: 1; transform: scale(1.25); } 57%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-pes-nm1 { 0%, 28% { opacity: 0; transform: translate(0, 0) scale(.6); } 31%, 33% { opacity: 1; transform: translate(0, 0) scale(1); } 38% { transform: translate(4.55px, -3.5px) scale(1); } 43% { opacity: 1; transform: translate(9.1px, 0) scale(.8); } 45% { opacity: 0; transform: translate(9.1px, 0) scale(.3); } 46%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); } }
@keyframes og-pes-nm2 { 0%, 31% { opacity: 0; transform: translate(0, 0) scale(.6); } 35%, 38% { opacity: 1; transform: translate(0, 0) scale(1); } 44% { transform: translate(6.95px, -4px) scale(1); } 50% { opacity: 1; transform: translate(13.9px, 0) scale(.8); } 52% { opacity: 0; transform: translate(13.9px, 0) scale(.3); } 53%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); } }

/* ---- Interview Briefs: preparing each brief --------------------------- */
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-large * { animation-duration: 5.6s; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-large .og-q1 { animation-name: og-brl-q1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-large .og-q2 { animation-name: og-brl-q2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-large .og-q3 { animation-name: og-brl-q3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-large .og-b1 { animation-name: og-brl-b1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-large .og-b2 { animation-name: og-brl-b2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-large .og-b3 { animation-name: og-brl-b3; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-large .og-ck { animation-name: og-brl-ck; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-large .og-halo { animation-name: og-brl-halo; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-small .og-q1 { animation-name: og-brs-q1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-small .og-q2 { animation-name: og-brs-q2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-small .og-b1 { animation-name: og-brs-b1; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-small .og-b2 { animation-name: og-brs-b2; }
:is(.og.is-live, .og.og-settle, .og.og-ending, .og-play:hover .og, .og-play:focus-within .og).og-briefs.og-small .og-ck { animation-name: og-brs-ck; }
.og-briefs :is(.og-q1, .og-q2, .og-q3) { stroke-dasharray: 1 1; }

/* Pain points come onto the person's card one by one, each writes itself
   out as a question, and a check marks the Brief done. */
@keyframes og-brl-q1 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 10% { opacity: 0; stroke-dashoffset: 0; } 10.5%, 29% { opacity: 1; stroke-dashoffset: 1; } 38%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-brl-q2 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 10% { opacity: 0; stroke-dashoffset: 0; } 10.5%, 40% { opacity: 1; stroke-dashoffset: 1; } 49%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-brl-q3 { 0%, 5% { opacity: 1; stroke-dashoffset: 0; } 10% { opacity: 0; stroke-dashoffset: 0; } 10.5%, 51% { opacity: 1; stroke-dashoffset: 1; } 60%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-brl-b1 { 0%, 5% { opacity: 1; transform: translate(0, 0) scale(1); } 10% { opacity: 0; transform: translate(0, 0) scale(.4); } 10.5%, 13% { opacity: 0; transform: translate(-16px, 0) scale(0); } 16% { opacity: 1; transform: translate(-16px, 0) scale(1.3); } 18%, 22% { opacity: 1; transform: translate(-16px, 0) scale(1); } 26% { transform: translate(-8px, -3px) scale(1.1); } 29%, 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes og-brl-b2 { 0%, 5% { opacity: 1; transform: translate(0, 0) scale(1); } 10% { opacity: 0; transform: translate(0, 0) scale(.4); } 10.5%, 15% { opacity: 0; transform: translate(-16px, 0) scale(0); } 18% { opacity: 1; transform: translate(-16px, 0) scale(1.3); } 20%, 33% { opacity: 1; transform: translate(-16px, 0) scale(1); } 37% { transform: translate(-8px, -3px) scale(1.1); } 40%, 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes og-brl-b3 { 0%, 5% { opacity: 1; transform: translate(0, 0) scale(1); } 10% { opacity: 0; transform: translate(0, 0) scale(.4); } 10.5%, 17% { opacity: 0; transform: translate(-16px, 0) scale(0); } 20% { opacity: 1; transform: translate(-16px, 0) scale(1.3); } 22%, 44% { opacity: 1; transform: translate(-16px, 0) scale(1); } 48% { transform: translate(-8px, -3px) scale(1.1); } 51%, 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes og-brl-ck { 0%, 5% { opacity: 1; transform: scale(1); } 10%, 62% { opacity: 0; transform: scale(0); } 66% { opacity: 1; transform: scale(1.25); } 69%, 100% { opacity: 1; transform: scale(1); } }
@keyframes og-brl-halo { 0%, 65% { opacity: 0; transform: scale(.8); } 67% { opacity: .9; transform: scale(.9); } 80% { opacity: 0; transform: scale(1.4); } 81%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes og-brs-q1 { 0%, 4% { opacity: 1; stroke-dashoffset: 0; } 8% { opacity: 0; stroke-dashoffset: 0; } 8.5%, 24% { opacity: 1; stroke-dashoffset: 1; } 33%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-brs-q2 { 0%, 4% { opacity: 1; stroke-dashoffset: 0; } 8% { opacity: 0; stroke-dashoffset: 0; } 8.5%, 34% { opacity: 1; stroke-dashoffset: 1; } 43%, 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes og-brs-b1 { 0%, 4% { opacity: 1; transform: translate(0, 0) scale(1); } 8% { opacity: 0; transform: translate(0, 0) scale(.4); } 8.5%, 10% { opacity: 0; transform: translate(-6px, 0) scale(0); } 13% { opacity: 1; transform: translate(-6px, 0) scale(1.3); } 15%, 17% { opacity: 1; transform: translate(-6px, 0) scale(1); } 20% { transform: translate(-3px, -2px) scale(1.1); } 24%, 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes og-brs-b2 { 0%, 4% { opacity: 1; transform: translate(0, 0) scale(1); } 8% { opacity: 0; transform: translate(0, 0) scale(.4); } 8.5%, 12% { opacity: 0; transform: translate(-6px, 0) scale(0); } 15% { opacity: 1; transform: translate(-6px, 0) scale(1.3); } 17%, 27% { opacity: 1; transform: translate(-6px, 0) scale(1); } 30% { transform: translate(-3px, -2px) scale(1.1); } 34%, 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes og-brs-ck { 0%, 4% { opacity: 1; transform: scale(1); } 8%, 46% { opacity: 0; transform: scale(0); } 51% { opacity: 1; transform: scale(1.3); } 55%, 100% { opacity: 1; transform: scale(1); } }

/* ---- Stage ------------------------------------------------------------ */
/* A large glyph can stand on a small stage: the Canvas's dot grid, fading
   out from the middle, under a slow lavender, pink and teal aurora. */
.og-stage { position: relative; display: inline-grid; place-items: center; isolation: isolate; }
.og-stage::before,
.og-stage::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.og-stage::before {
  inset: -34%;
  background:
    radial-gradient(42% 40% at 38% 40%, rgba(167, 139, 250, .34), transparent 72%),
    radial-gradient(34% 32% at 68% 62%, rgba(236, 72, 153, .14), transparent 72%),
    radial-gradient(30% 28% at 62% 30%, rgba(45, 212, 191, .12), transparent 72%);
  filter: blur(8px);
  animation: og-aura 7s ease-in-out infinite alternate;
}
.og-stage::after {
  inset: -22%;
  background-image: radial-gradient(rgba(124, 58, 237, .22) 1px, transparent 1.3px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
  mask-image: radial-gradient(closest-side, #000 30%, transparent);
}
@keyframes og-aura {
  from { transform: translate(-4%, -3%) rotate(-6deg) scale(1); }
  to { transform: translate(4%, 3%) rotate(6deg) scale(1.08); }
}

/* ---- Loading steps ---------------------------------------------------- */
/* The steps sit in one place and show one after another; the last stays. */
.og-steps { display: inline-grid; }
.og-steps > span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: og-step 3.4s ease both;
  animation-delay: calc(var(--og-step, 0) * 3.4s);
}
.og-steps > span:last-child { animation-name: og-step-last; }
@keyframes og-step { 0% { opacity: 0; transform: translateY(3px); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-3px); } }
@keyframes og-step-last { 0% { opacity: 0; transform: translateY(3px); } 10%, 100% { opacity: 1; transform: none; } }

/* ---- Loaders leaving -------------------------------------------------- */
/* A loader ([data-og-loader]) the page is done with plays on a beat, then
   fades out (OraGlyphs.leave, or the journey's useLoaderHold). */
[data-og-loader] { transition: opacity .22s cubic-bezier(.4, 0, .2, 1); }
[data-og-loader].is-leaving { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .og, .og *, .og-stage::before { animation: none !important; }
  .og-steps > span { animation: none; }
  .og-steps > span:first-child { opacity: 1; }
  [data-og-loader] { transition: none; }
}