.signature-motion {
  position: relative;
  z-index: 0;
  order: 2;
  pointer-events: none;
  width: 100%;
  max-width: 54rem;
  margin: clamp(3rem, 7vw, 4.5rem) auto 0;
  min-height: 7.5rem;
  color: #5c6b7a;
  --sig-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

.signature-motif {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.signature-motif text {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  fill: currentColor;
}

.signature-motif .sig-track {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 1 7;
}

.signature-motif .sig-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 120px 152px;
  animation: sig-progress 12s var(--sig-ease) infinite;
}

.signature-motif .sig-node {
  fill: var(--paper);
  stroke: currentColor;
  stroke-width: 1.25;
}

.signature-motif .sig-shadow {
  fill: rgba(20, 32, 51, 0.05);
}

.signature-motif .sig-card {
  fill: #fffdf9;
  stroke: #cfc7b9;
  stroke-width: 1.25;
}

.signature-motif .sig-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0;
}

.signature-motif .sig-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.signature-motif .sig-dot,
.signature-motif .sig-block {
  fill: #d9d3c8;
}

.signature-motif .sig-cite-base {
  fill: none;
  stroke: #cfc7b9;
  stroke-width: 1.25;
}

.signature-motif .sig-cite {
  fill: var(--accent);
  opacity: 0;
}

.signature-motif .sig-bubble {
  fill: #fffdf9;
  stroke: #cfc7b9;
  stroke-width: 1.25;
}

.signature-motif .sig-bubble-in .sig-bubble {
  fill: #e3f0e9;
  stroke: var(--accent);
}

.signature-motif .sig-bubble-in .sig-line {
  stroke: var(--accent);
}

.sig-token {
  fill: var(--accent);
  transform-box: view-box;
  transform-origin: 0 0;
  animation: sig-token 12s var(--sig-ease) infinite;
}

.sig-token-halo {
  opacity: 0.16;
}

.sig-station-site,
.sig-station-evidence,
.sig-station-conversation {
  animation-duration: 12s;
  animation-timing-function: var(--sig-ease);
  animation-iteration-count: infinite;
}

.sig-station-site {
  animation-name: sig-site;
}

.sig-station-evidence {
  animation-name: sig-evidence;
}

.sig-station-conversation {
  animation-name: sig-conversation;
}

.sig-ring-site {
  animation: sig-ring-site 12s var(--sig-ease) infinite;
}

.sig-ring-evidence {
  animation: sig-ring-evidence 12s var(--sig-ease) infinite;
}

.sig-ring-conversation {
  animation: sig-ring-conversation 12s var(--sig-ease) infinite;
}

.sig-cite-1 {
  animation: sig-cite-1 12s var(--sig-ease) infinite;
}

.sig-cite-2 {
  animation: sig-cite-2 12s var(--sig-ease) infinite;
}

.sig-cite-3 {
  animation: sig-cite-3 12s var(--sig-ease) infinite;
}

.sig-bubble-out {
  animation: sig-bubble-out 12s var(--sig-ease) infinite;
}

.sig-bubble-in {
  animation: sig-bubble-in 12s var(--sig-ease) infinite;
}

@keyframes sig-token {
  0%,
  6% {
    transform: translate(0%, 0%);
    opacity: 0;
  }

  12%,
  16% {
    transform: translate(0%, 0%);
    opacity: 1;
  }

  34%,
  56% {
    transform: translate(33.33%, 0%);
    opacity: 1;
  }

  72%,
  90% {
    transform: translate(66.67%, 0%);
    opacity: 1;
  }

  98%,
  100% {
    transform: translate(66.67%, 0%);
    opacity: 0;
  }
}

@keyframes sig-progress {
  0%,
  16% {
    transform: scaleX(0);
    opacity: 1;
  }

  34%,
  56% {
    transform: scaleX(0.5);
    opacity: 1;
  }

  72%,
  90% {
    transform: scaleX(1);
    opacity: 1;
  }

  98%,
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

@keyframes sig-site {
  0% {
    transform: translate(0, 0);
    opacity: 0.55;
  }

  8%,
  24% {
    transform: translate(0, -3px);
    opacity: 1;
  }

  34%,
  100% {
    transform: translate(0, 0);
    opacity: 0.55;
  }
}

@keyframes sig-evidence {
  0%,
  26% {
    transform: translate(0, 0);
    opacity: 0.55;
  }

  34%,
  56% {
    transform: translate(0, -3px);
    opacity: 1;
  }

  66%,
  100% {
    transform: translate(0, 0);
    opacity: 0.55;
  }
}

@keyframes sig-conversation {
  0%,
  62% {
    transform: translate(0, 0);
    opacity: 0.55;
  }

  72%,
  90% {
    transform: translate(0, -3px);
    opacity: 1;
  }

  98%,
  100% {
    transform: translate(0, 0);
    opacity: 0.55;
  }
}

@keyframes sig-ring-site {
  0%,
  6% {
    opacity: 0;
  }

  12%,
  24% {
    opacity: 1;
  }

  32%,
  100% {
    opacity: 0;
  }
}

@keyframes sig-ring-evidence {
  0%,
  28% {
    opacity: 0;
  }

  36%,
  54% {
    opacity: 1;
  }

  64%,
  100% {
    opacity: 0;
  }
}

@keyframes sig-ring-conversation {
  0%,
  64% {
    opacity: 0;
  }

  72%,
  90% {
    opacity: 1;
  }

  98%,
  100% {
    opacity: 0;
  }
}

@keyframes sig-cite-1 {
  0%,
  36% {
    opacity: 0;
  }

  40%,
  90% {
    opacity: 1;
  }

  98%,
  100% {
    opacity: 0;
  }
}

@keyframes sig-cite-2 {
  0%,
  42% {
    opacity: 0;
  }

  46%,
  90% {
    opacity: 1;
  }

  98%,
  100% {
    opacity: 0;
  }
}

@keyframes sig-cite-3 {
  0%,
  48% {
    opacity: 0;
  }

  52%,
  90% {
    opacity: 1;
  }

  98%,
  100% {
    opacity: 0;
  }
}

@keyframes sig-bubble-out {
  0%,
  72% {
    transform: translate(0, 4px);
    opacity: 0;
  }

  76%,
  90% {
    transform: translate(0, 0);
    opacity: 1;
  }

  98%,
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes sig-bubble-in {
  0%,
  79% {
    transform: translate(0, 4px);
    opacity: 0;
  }

  83%,
  90% {
    transform: translate(0, 0);
    opacity: 1;
  }

  98%,
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes sig-token-fade {
  0%,
  100% {
    opacity: 0.2;
  }

  45%,
  55% {
    opacity: 1;
  }
}

@keyframes sig-poster-fade {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

.signature-motion::before {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/motion-poster.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (prefers-reduced-motion: reduce) {
  .signature-motion {
    min-height: 7.5rem;
  }

  .signature-motif {
    visibility: hidden;
  }

  .signature-motion::before {
    display: block;
    background-image: url("/motion-poster.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: sig-poster-fade 12s ease-in-out infinite;
  }

  .sig-token {
    animation-name: sig-token-fade;
    transform: none;
  }
}

html[data-motion-edition="reduced"] .signature-motion,
html:has([data-motion-reduce]:checked) .signature-motion {
  min-height: 7.5rem;
}

html[data-motion-edition="reduced"] .signature-motif,
html:has([data-motion-reduce]:checked) .signature-motif {
  visibility: hidden;
}

html[data-motion-edition="reduced"] .signature-motion::before,
html:has([data-motion-reduce]:checked) .signature-motion::before {
  display: block;
  background-image: url("/motion-poster.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: sig-poster-fade 12s ease-in-out infinite;
}

html[data-motion-edition="reduced"] .sig-token,
html:has([data-motion-reduce]:checked) .sig-token {
  animation-name: sig-token-fade;
  transform: none;
}

html[data-motion-paused="true"] .signature-motion::before,
html[data-motion-paused="true"] .signature-motif *,
html:has([data-motion-pause]:checked) .signature-motion::before,
html:has([data-motion-pause]:checked) .signature-motif * {
  animation-play-state: paused;
}

.launch-wires {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.launch-wires-side {
  position: absolute;
  top: 50%;
  width: 26rem;
  height: 15.6rem;
  overflow: visible;
  transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 45%);
  mask-image: linear-gradient(to right, transparent, #000 45%);
}

.launch-wires-side.is-left {
  right: 100%;
}

.launch-wires-side.is-right {
  left: 100%;
  transform: translateY(-50%) scaleX(-1);
}

.wire-tracks path,
.wire-pulses path {
  fill: none;
  stroke-linecap: round;
}

.wire-tracks path {
  stroke: #d2c9b9;
  stroke-width: 1.1;
}

.wire-pulses path {
  stroke: #6f7b8b;
  stroke-width: 2.6;
}

.is-left .wire-pulses path:nth-child(odd),
.is-right .wire-pulses path:nth-child(even) {
  stroke: var(--accent);
}

.wire-band {
  animation: wire-band 12s cubic-bezier(0.5, 0, 0.8, 1) infinite;
}

.launch-wires-side mask:nth-of-type(3n) .wire-band {
  animation-name: wire-band-twice;
}

.is-left mask:nth-of-type(1) .wire-band { animation-delay: -0.6s; }
.is-left mask:nth-of-type(2) .wire-band { animation-delay: -7.4s; }
.is-left mask:nth-of-type(3) .wire-band { animation-delay: -3.1s; }
.is-left mask:nth-of-type(4) .wire-band { animation-delay: -9.8s; }
.is-left mask:nth-of-type(5) .wire-band { animation-delay: -5.2s; }
.is-left mask:nth-of-type(6) .wire-band { animation-delay: -11.3s; }
.is-left mask:nth-of-type(7) .wire-band { animation-delay: -1.9s; }
.is-right mask:nth-of-type(1) .wire-band { animation-delay: -4.3s; }
.is-right mask:nth-of-type(2) .wire-band { animation-delay: -10.6s; }
.is-right mask:nth-of-type(3) .wire-band { animation-delay: -6.7s; }
.is-right mask:nth-of-type(4) .wire-band { animation-delay: -2.4s; }
.is-right mask:nth-of-type(5) .wire-band { animation-delay: -8.9s; }
.is-right mask:nth-of-type(6) .wire-band { animation-delay: -0.1s; }
.is-right mask:nth-of-type(7) .wire-band { animation-delay: -6.1s; }

.wire-port {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: wire-port 12s ease-in-out infinite;
}

@keyframes wire-band {
  0% {
    transform: translateX(0);
  }
  38%,
  100% {
    transform: translateX(480px);
  }
}

@keyframes wire-band-twice {
  0% {
    transform: translateX(0);
  }
  32%,
  50% {
    transform: translateX(480px);
  }
  50.01% {
    transform: translateX(0);
  }
  82%,
  100% {
    transform: translateX(480px);
  }
}

@keyframes wire-port {
  0%,
  25%,
  50%,
  75%,
  100% {
    opacity: 0.6;
    transform: scale(0.9);
  }
  12.5%,
  37.5%,
  62.5%,
  87.5% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@media (max-width: 56rem) {
  .launch-wires {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wire-pulses,
  .wire-port {
    display: none;
  }
}

html[data-motion-edition="reduced"] .wire-pulses,
html[data-motion-edition="reduced"] .wire-port,
html:has([data-motion-reduce]:checked) .wire-pulses,
html:has([data-motion-reduce]:checked) .wire-port {
  display: none;
}

html[data-motion-paused="true"] .launch-wires *,
html:has([data-motion-pause]:checked) .launch-wires * {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion-edition="reduced"]):not(:has([data-motion-reduce]:checked)) .hero-badge-item {
    animation: badge-swap 12s ease-in-out infinite;
  }

  html:not([data-motion-edition="reduced"]):not(:has([data-motion-reduce]:checked)) .hero-badge-item + .hero-badge-item {
    visibility: visible;
    animation-delay: -6s;
  }
}

html[data-motion-paused="true"] .hero-badge-item,
html:has([data-motion-pause]:checked) .hero-badge-item {
  animation-play-state: paused;
}

@keyframes badge-swap {
  0%,
  44% {
    opacity: 1;
    transform: translateY(0);
  }
  50%,
  94% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.closing {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.launch-wires.is-reverse .wire-tracks path {
  stroke: rgba(255, 255, 255, 0.2);
}

.launch-wires.is-reverse .wire-pulses path {
  stroke: #dbeee4;
}

.launch-wires.is-reverse .is-left .wire-pulses path:nth-child(odd),
.launch-wires.is-reverse .is-right .wire-pulses path:nth-child(even) {
  stroke: #8fd1b0;
}

.launch-wires.is-reverse .wire-port {
  fill: #dbeee4;
}

.launch-wires.is-reverse .wire-band {
  animation-name: wire-band-out;
}

.launch-wires.is-reverse .launch-wires-side mask:nth-of-type(3n) .wire-band {
  animation-name: wire-band-out;
}

@keyframes wire-band-out {
  0% {
    transform: translateX(480px);
  }
  38%,
  100% {
    transform: translateX(0);
  }
}