/*
  Project scenes. Every wireframe plays a short story driven by a cursor or a tap:
  the default state is the finished interface, and each scene starts and ends on it,
  so a scene can loop without a seam and stays readable without JavaScript or motion.
  scenes.js adds .is-live: once (4.8 s, under the 5 s limit) when a stage first comes
  into view, in a loop while its project is hovered or focused, never offscreen.
*/
.stage {
  --scene: 4.8s;
  --arrive: cubic-bezier(0.16, 1, 0.3, 1);
  --travel: cubic-bezier(0.65, 0, 0.35, 1);
}
.stage svg * {
  transform-box: fill-box;
}
.stage .cursor,
.stage .tap {
  opacity: 0;
  pointer-events: none;
}
.stage .cursor-press {
  transform-origin: 0 0;
}
.stage .tap {
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .stage.is-live svg * {
    animation-duration: var(--scene);
    animation-iteration-count: infinite;
    animation-timing-function: var(--arrive);
    animation-fill-mode: both;
  }

  /* 01 YouTube: subscribe, play, the numbers climb */
  .stage[data-slug="youtube"].is-live .cursor { animation-name: yt-cursor; }
  .stage[data-slug="youtube"].is-live .cursor-press { animation-name: yt-press; }
  .stage[data-slug="youtube"].is-live .yt-sub { animation-name: yt-sub; }
  .stage[data-slug="youtube"].is-live .yt-sub-label { animation-name: yt-sub-label; transform-origin: left center; }
  .stage[data-slug="youtube"].is-live .yt-sub-check { animation-name: yt-sub-check; transform-origin: center; }
  .stage[data-slug="youtube"].is-live .yt-play { animation-name: yt-play; transform-origin: center; }
  .stage[data-slug="youtube"].is-live .yt-progress { animation-name: yt-progress; transform-origin: left center; }
  .stage[data-slug="youtube"].is-live .yt-bar { transform-origin: center bottom; }
  .stage[data-slug="youtube"].is-live .yt-bar-1 { animation-name: yt-bar-1; }
  .stage[data-slug="youtube"].is-live .yt-bar-2 { animation-name: yt-bar-2; }
  .stage[data-slug="youtube"].is-live .yt-bar-3 { animation-name: yt-bar-3; }
  .stage[data-slug="youtube"].is-live .yt-bar-4 { animation-name: yt-bar-4; }

  /* 02 BLUNATECH: an empty month gets a campaign, the plan fills up */
  .stage[data-slug="blunatech"].is-live .cursor { animation-name: bl-cursor; }
  .stage[data-slug="blunatech"].is-live .cursor-press { animation-name: bl-press; }
  .stage[data-slug="blunatech"].is-live .bl-new { animation-name: bl-new; transform-origin: center; }
  .stage[data-slug="blunatech"].is-live .bl-new-title { animation-name: bl-new-title; transform-origin: left center; }
  .stage[data-slug="blunatech"].is-live .bl-new-pill { animation-name: bl-new-pill; transform-origin: center; }
  .stage[data-slug="blunatech"].is-live .bl-new-accent { animation-name: bl-new-accent; transform-origin: center top; }
  .stage[data-slug="blunatech"].is-live .bl-new-line-1 { animation-name: bl-new-line-1; transform-origin: left center; }
  .stage[data-slug="blunatech"].is-live .bl-new-line-2 { animation-name: bl-new-line-2; transform-origin: left center; }
  .stage[data-slug="blunatech"].is-live .bl-selected { animation-name: bl-selected; }
  .stage[data-slug="blunatech"].is-live .bl-progress { animation-name: bl-progress; transform-origin: left center; }

  /* 03 BerichtsheftKI: tap the mic, talk, stop, the report writes itself */
  .stage[data-slug="berichtsheftki"].is-live .tap { animation-name: bh-tap; }
  .stage[data-slug="berichtsheftki"].is-live .tap-ring { animation-name: bh-ring; transform-origin: center; }
  .stage[data-slug="berichtsheftki"].is-live .bh-mic { animation-name: bh-mic; transform-origin: center; }
  .stage[data-slug="berichtsheftki"].is-live .bh-arrow { animation-name: bh-arrow; }
  .stage[data-slug="berichtsheftki"].is-live .bh-wave { transform-origin: center; animation-timing-function: ease-in-out; }
  .stage[data-slug="berichtsheftki"].is-live .bh-wave-a { animation-name: bh-wave-a; }
  .stage[data-slug="berichtsheftki"].is-live .bh-wave-b { animation-name: bh-wave-b; }
  .stage[data-slug="berichtsheftki"].is-live .bh-wave-c { animation-name: bh-wave-c; }
  .stage[data-slug="berichtsheftki"].is-live .bh-rec { animation-name: bh-rec; animation-timing-function: ease-in-out; }
  .stage[data-slug="berichtsheftki"].is-live .bh-stop { animation-name: bh-stop; transform-origin: center; }
  .stage[data-slug="berichtsheftki"].is-live .bh-report { transform-origin: left center; }
  .stage[data-slug="berichtsheftki"].is-live .bh-report-1 { animation-name: bh-report-1; }
  .stage[data-slug="berichtsheftki"].is-live .bh-report-2 { animation-name: bh-report-2; }

  /* 04 MMK Chatbot: type, send, the answer builds with its sources, thumbs up */
  .stage[data-slug="mmk-chatbot"].is-live .cursor { animation-name: mm-cursor; }
  .stage[data-slug="mmk-chatbot"].is-live .cursor-press { animation-name: mm-press; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-placeholder { animation-name: mm-placeholder; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-typed { animation-name: mm-typed; transform-origin: left center; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-send { animation-name: mm-send; transform-origin: center; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-bubble { animation-name: mm-bubble; transform-origin: right center; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-line { transform-origin: left center; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-line-1 { animation-name: mm-line-1; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-line-2 { animation-name: mm-line-2; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-line-3 { animation-name: mm-line-3; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-sources-label { animation-name: mm-sources-label; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-source-1 { animation-name: mm-source-1; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-source-2 { animation-name: mm-source-2; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-feedback { animation-name: mm-feedback; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-check-box { animation-name: mm-check-box; }
  .stage[data-slug="mmk-chatbot"].is-live .mm-check { animation-name: mm-check; }
}

/* ---------- YouTube ---------- */
@keyframes yt-cursor {
  0%, 4% { opacity: 0; transform: translate(496px, 302px); }
  9% { opacity: 1; transform: translate(490px, 294px); }
  19% { transform: translate(462px, 86px); }
  27% { transform: translate(460px, 88px); animation-timing-function: var(--travel); }
  39% { transform: translate(132px, 178px); }
  50% { transform: translate(130px, 181px); animation-timing-function: var(--travel); }
  72% { opacity: 1; transform: translate(292px, 292px); }
  80%, 100% { opacity: 0; transform: translate(306px, 316px); }
}
@keyframes yt-press {
  0%, 19% { transform: scale(1); }
  21% { transform: scale(0.8); }
  25%, 39% { transform: scale(1); }
  41% { transform: scale(0.8); }
  45%, 100% { transform: scale(1); }
}
@keyframes yt-sub {
  0%, 21% { fill: var(--fg); stroke: transparent; }
  26%, 88% { fill: var(--surface); stroke: var(--border); }
  96%, 100% { fill: var(--fg); stroke: transparent; }
}
@keyframes yt-sub-label {
  0%, 21% { transform: translateX(0) scaleX(1); fill: var(--bg); }
  26%, 88% { transform: translateX(4px) scaleX(0.62); fill: var(--muted); }
  96%, 100% { transform: translateX(0) scaleX(1); fill: var(--bg); }
}
@keyframes yt-sub-check {
  0%, 22% { opacity: 0; transform: scale(0.4); }
  28%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes yt-play {
  0%, 41% { transform: scale(1); }
  43% { transform: scale(0.86); }
  48% { transform: scale(1.06); }
  54%, 100% { transform: scale(1); }
}
@keyframes yt-progress {
  0%, 43% { opacity: 0; transform: scaleX(0); }
  44% { opacity: 1; transform: scaleX(0.02); animation-timing-function: linear; }
  88% { opacity: 1; transform: scaleX(1); }
  94%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes yt-bar-1 {
  0%, 50% { transform: scaleY(1); }
  58%, 88% { transform: scaleY(1.3); }
  96%, 100% { transform: scaleY(1); }
}
@keyframes yt-bar-2 {
  0%, 52% { transform: scaleY(1); }
  60%, 88% { transform: scaleY(1.2); }
  96%, 100% { transform: scaleY(1); }
}
@keyframes yt-bar-3 {
  0%, 54% { transform: scaleY(1); }
  62%, 88% { transform: scaleY(1.34); }
  96%, 100% { transform: scaleY(1); }
}
@keyframes yt-bar-4 {
  0%, 56% { transform: scaleY(1); }
  64%, 88% { transform: scaleY(1.25); }
  96%, 100% { transform: scaleY(1); }
}

/* ---------- BLUNATECH ---------- */
@keyframes bl-cursor {
  0%, 4% { opacity: 0; transform: translate(540px, 300px); }
  9% { opacity: 1; transform: translate(532px, 290px); }
  19% { transform: translate(224px, 102px); }
  27% { transform: translate(227px, 105px); animation-timing-function: var(--travel); }
  62% { transform: translate(298px, 226px); animation-timing-function: var(--travel); }
  72% { opacity: 1; transform: translate(330px, 296px); }
  79%, 100% { opacity: 0; transform: translate(340px, 318px); }
}
@keyframes bl-press {
  0%, 19% { transform: scale(1); }
  21% { transform: scale(0.8); }
  25%, 100% { transform: scale(1); }
}
@keyframes bl-new {
  0%, 21% { opacity: 0; transform: scale(0.94); }
  27%, 88% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.97); }
}
@keyframes bl-new-title {
  0%, 24% { transform: scaleX(0); }
  30%, 100% { transform: scaleX(1); }
}
@keyframes bl-new-pill {
  0%, 27% { opacity: 0; transform: scale(0.6); }
  33%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes bl-new-accent {
  0%, 25% { transform: scaleY(0); }
  31%, 100% { transform: scaleY(1); }
}
@keyframes bl-new-line-1 {
  0%, 27% { transform: scaleX(0); }
  34%, 100% { transform: scaleX(1); }
}
@keyframes bl-new-line-2 {
  0%, 30% { transform: scaleX(0); }
  37%, 100% { transform: scaleX(1); }
}
@keyframes bl-selected {
  0%, 21% { stroke: var(--fg); }
  26%, 88% { stroke: var(--border); }
  96%, 100% { stroke: var(--fg); }
}
@keyframes bl-progress {
  0%, 34% { transform: scaleX(1); }
  43%, 88% { transform: scaleX(1.55); }
  96%, 100% { transform: scaleX(1); }
}

/* ---------- BerichtsheftKI ---------- */
@keyframes bh-tap {
  0%, 12% { opacity: 0; transform: translate(229px, 115px) scale(1.5); }
  18% { opacity: 1; transform: translate(229px, 115px) scale(1); }
  23% { opacity: 0; transform: translate(229px, 115px) scale(1); }
  24%, 61% { opacity: 0; transform: translate(381px, 258px) scale(1.5); }
  67% { opacity: 1; transform: translate(381px, 258px) scale(1); }
  72%, 100% { opacity: 0; transform: translate(381px, 258px) scale(1); }
}
@keyframes bh-ring {
  0%, 17% { opacity: 0; transform: scale(0.6); }
  19% { opacity: 1; transform: scale(0.8); }
  25% { opacity: 0; transform: scale(1.9); }
  26%, 66% { opacity: 0; transform: scale(0.6); }
  68% { opacity: 1; transform: scale(0.8); }
  74%, 100% { opacity: 0; transform: scale(1.9); }
}
@keyframes bh-mic {
  0%, 17% { transform: scale(1); }
  19% { transform: scale(0.86); }
  24% { transform: scale(1.05); }
  29%, 100% { transform: scale(1); }
}
@keyframes bh-arrow {
  0%, 22% { transform: translateX(0); }
  26% { transform: translateX(6px); }
  32%, 100% { transform: translateX(0); }
}
@keyframes bh-wave-a {
  0%, 25% { transform: scaleY(1); }
  30% { transform: scaleY(1.5); }
  35% { transform: scaleY(0.6); }
  40% { transform: scaleY(1.35); }
  45% { transform: scaleY(0.7); }
  50% { transform: scaleY(1.45); }
  55% { transform: scaleY(0.55); }
  60% { transform: scaleY(1.3); }
  65% { transform: scaleY(0.8); }
  69%, 100% { transform: scaleY(1); }
}
@keyframes bh-wave-b {
  0%, 25% { transform: scaleY(1); }
  30% { transform: scaleY(0.6); }
  35% { transform: scaleY(1.4); }
  40% { transform: scaleY(0.7); }
  45% { transform: scaleY(1.5); }
  50% { transform: scaleY(0.65); }
  55% { transform: scaleY(1.35); }
  60% { transform: scaleY(0.75); }
  65% { transform: scaleY(1.2); }
  69%, 100% { transform: scaleY(1); }
}
@keyframes bh-wave-c {
  0%, 25% { transform: scaleY(1); }
  30% { transform: scaleY(1.3); }
  35% { transform: scaleY(1.6); }
  40% { transform: scaleY(0.8); }
  45% { transform: scaleY(1.25); }
  50% { transform: scaleY(1.55); }
  55% { transform: scaleY(0.7); }
  60% { transform: scaleY(1.4); }
  65% { transform: scaleY(0.9); }
  69%, 100% { transform: scaleY(1); }
}
@keyframes bh-rec {
  0%, 25% { opacity: 0; }
  28% { opacity: 1; }
  38% { opacity: 0.25; }
  48% { opacity: 1; }
  58% { opacity: 0.25; }
  66% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes bh-stop {
  0%, 66% { transform: scale(1); }
  68.5% { transform: scale(0.9); }
  73% { transform: scale(1.04); }
  78%, 100% { transform: scale(1); }
}
@keyframes bh-report-1 {
  0%, 21% { transform: scaleX(1); }
  25%, 72% { transform: scaleX(0); }
  80%, 100% { transform: scaleX(1); }
}
@keyframes bh-report-2 {
  0%, 22% { transform: scaleX(1); }
  26%, 75% { transform: scaleX(0); }
  83%, 100% { transform: scaleX(1); }
}

/* ---------- MMK Chatbot ---------- */
@keyframes mm-cursor {
  0%, 6% { opacity: 0; transform: translate(440px, 304px); }
  11% { opacity: 1; transform: translate(447px, 296px); }
  21% { transform: translate(489px, 271px); }
  27% { transform: translate(488px, 270px); }
  46% { transform: translate(480px, 262px); animation-timing-function: var(--travel); }
  58% { transform: translate(193px, 219px); }
  66% { transform: translate(196px, 222px); animation-timing-function: var(--travel); }
  74% { opacity: 1; transform: translate(250px, 290px); }
  80%, 100% { opacity: 0; transform: translate(262px, 306px); }
}
@keyframes mm-press {
  0%, 21% { transform: scale(1); }
  23% { transform: scale(0.8); }
  27%, 59% { transform: scale(1); }
  61% { transform: scale(0.8); }
  65%, 100% { transform: scale(1); }
}
@keyframes mm-placeholder {
  0%, 6% { opacity: 1; }
  8%, 26% { opacity: 0; }
  31%, 100% { opacity: 1; }
}
@keyframes mm-typed {
  0%, 7% { opacity: 0; transform: scaleX(0.02); }
  8% { opacity: 1; transform: scaleX(0.02); animation-timing-function: steps(10, end); }
  20% { opacity: 1; transform: scaleX(1); }
  24% { opacity: 1; transform: scaleX(1); }
  26%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes mm-send {
  0%, 22% { transform: scale(1); }
  24% { transform: scale(0.84); }
  29% { transform: scale(1.06); }
  34%, 100% { transform: scale(1); }
}
@keyframes mm-bubble {
  0%, 2% { opacity: 1; transform: translateY(0) scale(1); }
  6% { opacity: 0; transform: translateY(-4px) scale(1); }
  25% { opacity: 0; transform: translateY(14px) scale(0.94); }
  32%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mm-line-1 {
  0%, 2% { opacity: 1; transform: scaleX(1); }
  6% { opacity: 0; transform: scaleX(1); }
  32% { opacity: 0; transform: scaleX(0); }
  33% { opacity: 1; transform: scaleX(0.04); }
  41%, 100% { opacity: 1; transform: scaleX(1); }
}
@keyframes mm-line-2 {
  0%, 2% { opacity: 1; transform: scaleX(1); }
  6% { opacity: 0; transform: scaleX(1); }
  35% { opacity: 0; transform: scaleX(0); }
  36% { opacity: 1; transform: scaleX(0.04); }
  44%, 100% { opacity: 1; transform: scaleX(1); }
}
@keyframes mm-line-3 {
  0%, 2% { opacity: 1; transform: scaleX(1); }
  6% { opacity: 0; transform: scaleX(1); }
  38% { opacity: 0; transform: scaleX(0); }
  39% { opacity: 1; transform: scaleX(0.04); }
  47%, 100% { opacity: 1; transform: scaleX(1); }
}
@keyframes mm-sources-label {
  0%, 2% { opacity: 1; }
  6%, 46% { opacity: 0; }
  50%, 100% { opacity: 1; }
}
@keyframes mm-source-1 {
  0%, 2% { opacity: 1; transform: translateY(0); }
  6% { opacity: 0; transform: translateY(0); }
  47% { opacity: 0; transform: translateY(10px); }
  53%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes mm-source-2 {
  0%, 2% { opacity: 1; transform: translateY(0); }
  6% { opacity: 0; transform: translateY(0); }
  50% { opacity: 0; transform: translateY(10px); }
  56%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes mm-feedback {
  0%, 2% { opacity: 1; }
  6%, 54% { opacity: 0; }
  58%, 100% { opacity: 1; }
}
@keyframes mm-check-box {
  0%, 61% { fill: transparent; stroke: var(--border); }
  64%, 90% { fill: var(--fg); stroke: var(--fg); }
  97%, 100% { fill: transparent; stroke: var(--border); }
}
@keyframes mm-check {
  0%, 61% { stroke: var(--muted); }
  64%, 90% { stroke: var(--bg); }
  97%, 100% { stroke: var(--muted); }
}

/* ---------- Sharehood, Karla, CLEW Agent, CLEW NFC ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Sharehood: the radius opens, neighbours' items pop up, the list fills */
  .stage[data-slug="sharehood"].is-live .sh-radius { animation-name: sh-radius; transform-origin: center; }
  .stage[data-slug="sharehood"].is-live .sh-pin { transform-origin: center; }
  .stage[data-slug="sharehood"].is-live .sh-pin-1 { animation-name: sh-pin-1; }
  .stage[data-slug="sharehood"].is-live .sh-pin-2 { animation-name: sh-pin-2; }
  .stage[data-slug="sharehood"].is-live .sh-pin-3 { animation-name: sh-pin-3; }
  .stage[data-slug="sharehood"].is-live .sh-pin-4 { animation-name: sh-pin-4; }
  .stage[data-slug="sharehood"].is-live .sh-row-1 { animation-name: sh-row-1; }
  .stage[data-slug="sharehood"].is-live .sh-row-2 { animation-name: sh-row-2; }
  .stage[data-slug="sharehood"].is-live .sh-row-3 { animation-name: sh-row-3; }
  .stage[data-slug="sharehood"].is-live .sh-cta { animation-name: sh-cta; transform-origin: center; }

  /* Karla: a question comes in, the answer streams, the source follows */
  .stage[data-slug="karla"].is-live .ka-q { animation-name: ka-q; transform-origin: right center; }
  .stage[data-slug="karla"].is-live .ka-a { animation-name: ka-a; transform-origin: left top; }
  .stage[data-slug="karla"].is-live .ka-line { transform-origin: left center; }
  .stage[data-slug="karla"].is-live .ka-line-1 { animation-name: ka-line-1; }
  .stage[data-slug="karla"].is-live .ka-line-2 { animation-name: ka-line-2; }
  .stage[data-slug="karla"].is-live .ka-line-3 { animation-name: ka-line-3; }
  .stage[data-slug="karla"].is-live .ka-source { animation-name: ka-source; transform-origin: left center; }

  /* CLEW Agent: the draft writes itself, the rules check it, sending stays locked */
  .stage[data-slug="clew-agent"].is-live .ca-line { transform-origin: left center; }
  .stage[data-slug="clew-agent"].is-live .ca-line-1 { animation-name: ca-line-1; }
  .stage[data-slug="clew-agent"].is-live .ca-line-2 { animation-name: ca-line-2; }
  .stage[data-slug="clew-agent"].is-live .ca-line-3 { animation-name: ca-line-3; }
  .stage[data-slug="clew-agent"].is-live .ca-line-4 { animation-name: ca-line-4; }
  .stage[data-slug="clew-agent"].is-live .ca-line-5 { animation-name: ca-line-5; }
  .stage[data-slug="clew-agent"].is-live .ca-line-6 { animation-name: ca-line-6; }
  .stage[data-slug="clew-agent"].is-live .ca-check { transform-origin: center; }
  .stage[data-slug="clew-agent"].is-live .ca-check-1 { animation-name: ca-check-1; }
  .stage[data-slug="clew-agent"].is-live .ca-check-2 { animation-name: ca-check-2; }
  .stage[data-slug="clew-agent"].is-live .ca-check-3 { animation-name: ca-check-3; }
  .stage[data-slug="clew-agent"].is-live .ca-lock { animation-name: ca-lock; }

  /* CLEW NFC: the phone taps the chip, waves go out, the form fills in */
  .stage[data-slug="clew-nfc"].is-live .cn-phone { animation-name: cn-phone; animation-timing-function: var(--travel); }
  .stage[data-slug="clew-nfc"].is-live .cn-chip { animation-name: cn-chip; transform-origin: center; }
  .stage[data-slug="clew-nfc"].is-live .cn-ring { transform-origin: center; }
  .stage[data-slug="clew-nfc"].is-live .cn-ring-1 { animation-name: cn-ring-1; }
  .stage[data-slug="clew-nfc"].is-live .cn-ring-2 { animation-name: cn-ring-2; }
  .stage[data-slug="clew-nfc"].is-live .cn-wave-1 { animation-name: cn-wave-1; }
  .stage[data-slug="clew-nfc"].is-live .cn-wave-2 { animation-name: cn-wave-2; }
  .stage[data-slug="clew-nfc"].is-live .cn-wave-3 { animation-name: cn-wave-3; }
  .stage[data-slug="clew-nfc"].is-live .cn-field { transform-origin: left center; }
  .stage[data-slug="clew-nfc"].is-live .cn-field-1 { animation-name: cn-field-1; }
  .stage[data-slug="clew-nfc"].is-live .cn-field-2 { animation-name: cn-field-2; }
  .stage[data-slug="clew-nfc"].is-live .cn-field-3 { animation-name: cn-field-3; }
  .stage[data-slug="clew-nfc"].is-live .cn-ok { animation-name: cn-ok; transform-origin: center; }
  .stage[data-slug="clew-nfc"].is-live .cn-progress { animation-name: cn-progress; transform-origin: left center; }
}

@keyframes sh-radius {
  0%, 4% { opacity: 1; transform: scale(1); }
  9%, 16% { opacity: 0; transform: scale(0.2); }
  34%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes sh-pin-1 { 0%, 4% { opacity: 1; transform: scale(1); } 9%, 34% { opacity: 0; transform: scale(0.4); } 40%, 100% { opacity: 1; transform: scale(1); } }
@keyframes sh-pin-2 { 0%, 4% { opacity: 1; transform: scale(1); } 9%, 38% { opacity: 0; transform: scale(0.4); } 44%, 100% { opacity: 1; transform: scale(1); } }
@keyframes sh-pin-3 { 0%, 4% { opacity: 1; transform: scale(1); } 9%, 42% { opacity: 0; transform: scale(0.4); } 48%, 100% { opacity: 1; transform: scale(1); } }
@keyframes sh-pin-4 { 0%, 4% { opacity: 1; transform: scale(1); } 9%, 46% { opacity: 0; transform: scale(0.4); } 52%, 100% { opacity: 1; transform: scale(1); } }
@keyframes sh-row-1 { 0%, 4% { opacity: 1; transform: none; } 9%, 54% { opacity: 0; transform: translateX(14px); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes sh-row-2 { 0%, 4% { opacity: 1; transform: none; } 9%, 58% { opacity: 0; transform: translateX(14px); } 66%, 100% { opacity: 1; transform: none; } }
@keyframes sh-row-3 { 0%, 4% { opacity: 1; transform: none; } 9%, 62% { opacity: 0; transform: translateX(14px); } 70%, 100% { opacity: 1; transform: none; } }
@keyframes sh-cta { 0%, 4% { transform: scale(1); } 9%, 72% { transform: scale(0.9); } 78%, 100% { transform: scale(1); } }

@keyframes ka-q { 0%, 4% { opacity: 1; transform: none; } 9%, 14% { opacity: 0; transform: translateY(8px) scale(0.92); } 22%, 100% { opacity: 1; transform: none; } }
@keyframes ka-a { 0%, 4% { opacity: 1; transform: none; } 9%, 30% { opacity: 0; transform: translateY(8px) scale(0.96); } 38%, 100% { opacity: 1; transform: none; } }
@keyframes ka-line-1 { 0%, 4% { transform: scaleX(1); } 9%, 36% { transform: scaleX(0); } 44%, 100% { transform: scaleX(1); } }
@keyframes ka-line-2 { 0%, 4% { transform: scaleX(1); } 9%, 42% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
@keyframes ka-line-3 { 0%, 4% { transform: scaleX(1); } 9%, 48% { transform: scaleX(0); } 56%, 100% { transform: scaleX(1); } }
@keyframes ka-source { 0%, 4% { opacity: 1; transform: scale(1); } 9%, 58% { opacity: 0; transform: scale(0.6); } 66%, 100% { opacity: 1; transform: scale(1); } }

@keyframes ca-line-1 { 0%, 4% { transform: scaleX(1); } 9%, 18% { transform: scaleX(0); } 26%, 100% { transform: scaleX(1); } }
@keyframes ca-line-2 { 0%, 4% { transform: scaleX(1); } 9%, 22% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
@keyframes ca-line-3 { 0%, 4% { transform: scaleX(1); } 9%, 26% { transform: scaleX(0); } 34%, 100% { transform: scaleX(1); } }
@keyframes ca-line-4 { 0%, 4% { transform: scaleX(1); } 9%, 30% { transform: scaleX(0); } 38%, 100% { transform: scaleX(1); } }
@keyframes ca-line-5 { 0%, 4% { transform: scaleX(1); } 9%, 34% { transform: scaleX(0); } 42%, 100% { transform: scaleX(1); } }
@keyframes ca-line-6 { 0%, 4% { transform: scaleX(1); } 9%, 38% { transform: scaleX(0); } 46%, 100% { transform: scaleX(1); } }
@keyframes ca-check-1 { 0%, 4% { opacity: 1; transform: scale(1); } 9%, 50% { opacity: 0; transform: scale(0.4); } 56%, 100% { opacity: 1; transform: scale(1); } }
@keyframes ca-check-2 { 0%, 4% { opacity: 1; transform: scale(1); } 9%, 56% { opacity: 0; transform: scale(0.4); } 62%, 100% { opacity: 1; transform: scale(1); } }
@keyframes ca-check-3 { 0%, 4% { opacity: 1; transform: scale(1); } 9%, 62% { opacity: 0; transform: scale(0.4); } 68%, 100% { opacity: 1; transform: scale(1); } }
@keyframes ca-lock {
  0%, 74% { transform: none; }
  77% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  83% { transform: translateX(-2px); }
  86%, 100% { transform: none; }
}

@keyframes cn-phone {
  0%, 4% { transform: none; }
  12%, 18% { transform: translateX(22px); }
  30% { transform: translateX(-24px); }
  40%, 100% { transform: none; }
}
@keyframes cn-chip {
  0%, 24% { transform: scale(1); }
  30% { transform: scale(0.92); }
  38%, 100% { transform: scale(1); }
}
@keyframes cn-ring-1 {
  0%, 28% { opacity: 1; transform: scale(1); }
  30% { opacity: 1; transform: scale(0.9); }
  46% { opacity: 0; transform: scale(1.25); }
  52% { opacity: 0; transform: scale(0.9); }
  62%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes cn-ring-2 {
  0%, 30% { opacity: 1; transform: scale(1); }
  32% { opacity: 1; transform: scale(0.9); }
  50% { opacity: 0; transform: scale(1.25); }
  56% { opacity: 0; transform: scale(0.9); }
  66%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes cn-wave-1 { 0%, 4% { opacity: 1; } 9%, 28% { opacity: 0; } 32%, 100% { opacity: 1; } }
@keyframes cn-wave-2 { 0%, 4% { opacity: 1; } 9%, 31% { opacity: 0; } 35%, 100% { opacity: 1; } }
@keyframes cn-wave-3 { 0%, 4% { opacity: 1; } 9%, 34% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes cn-field-1 { 0%, 4% { transform: scaleX(1); } 9%, 42% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
@keyframes cn-field-2 { 0%, 4% { transform: scaleX(1); } 9%, 48% { transform: scaleX(0); } 56%, 100% { transform: scaleX(1); } }
@keyframes cn-field-3 { 0%, 4% { transform: scaleX(1); } 9%, 54% { transform: scaleX(0); } 62%, 100% { transform: scaleX(1); } }
@keyframes cn-ok { 0%, 4% { opacity: 1; transform: scale(1); } 9%, 66% { opacity: 0; transform: scale(0.4); } 72%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cn-progress { 0%, 4% { transform: scaleX(1); } 9%, 72% { transform: scaleX(0.8); } 82%, 100% { transform: scaleX(1); } }