/* Exact exported glyphs and ribbon geometry, with independent entrance layers. */
#swarm-heading {
  --glyph-width: calc(1091.5 * var(--u)); --glyph-height: calc(279.2 * var(--u));
  --glyph-top: calc(23.2 * var(--u)); --glow-x: -999px; --glow-y: -999px;
  --glow-pad: calc(32 * var(--u)); --glow-amount: 0; --glow-radius: calc(215 * var(--u));
}
#swarm-heading .title-letter {
  left: calc(var(--glyph-width) * var(--x) / 1092); top: calc(var(--glyph-height) * var(--y) / 280);
  width: calc(var(--glyph-width) * var(--w) / 1092); height: calc(var(--glyph-height) * var(--h) / 280);
  background-image: var(--letter-image);
  background-position: calc(var(--glyph-width) * var(--x) / -1092) calc(var(--glyph-height) * var(--y) / -280);
}
.swarm-light {
  position: absolute; left: 50%; top: calc(var(--glyph-top) - var(--glow-pad)); transform: translateX(-50%);
  width: calc(var(--glyph-width) + 2 * var(--glow-pad)); height: calc(var(--glyph-height) + 2 * var(--glow-pad)); pointer-events: none;
  background: url('https://spin-assets.onew.design/assets/headline-swarm-v38.svg') center / var(--glyph-width) var(--glyph-height) no-repeat;
  mask-image: radial-gradient(circle var(--glow-radius) at var(--glow-x) var(--glow-y), #000 0%, #000d 28%, #0005 65%, transparent 100%);
  opacity: var(--glow-amount);
}
.swarm-light-core { filter: blur(.65px); }
.swarm-light-soft { filter: blur(calc(7 * var(--u))); }
#swarm-heading.title-entering .swarm-light, #swarm-heading.swarm-pending .swarm-light { visibility: hidden; }
#swarm-heading.swarm-pending > img { opacity: 0; }
.technology { height: calc(2930 * var(--v)); }
.technology-rows { top: calc(344 * var(--v)); gap: calc(220 * var(--v)); }
.technology-copy { padding-left: calc(120 * var(--u)); }
.technology-caption { top: calc(2800 * var(--v)); }
.technology-ribbon { inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; z-index:0; }
.technology-intro,.technology-rows,.technology-caption { z-index:1; }
.technology-ribbon path { stroke: white; stroke-width: 40; stroke-linecap: round; }
.ribbon-base { stroke-opacity: .12; }
.ribbon-draw { stroke-opacity: .82; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.technology.flow-active .ribbon-draw { stroke-dashoffset: 1; opacity: 0; }
.flow-item { opacity: var(--flow-reveal, 1); translate: 0 calc(36px * (1 - var(--flow-reveal, 1))); }
.tech-reveal-pending { opacity: 0; translate: 0 26px; }
@media (max-width: 1023px) {
  #swarm-heading { --glyph-width: calc(307 * var(--u)); --glyph-height: calc(78.525 * var(--u)); --glyph-top: calc(6.525 * var(--u)); --glow-radius: calc(68 * var(--u)); }
  .technology { height: auto; }
  .technology-rows { top: auto; gap: 132px; margin-top: 56px; }
  .technology-row { gap: 32px; }
  .technology-copy { padding-left: 0; }
  .technology-caption { top: auto; }
  .technology-ribbon { opacity: .6; }
  .technology-ribbon path { stroke-width: 18; }
}
@media (prefers-reduced-motion: reduce) {
  .swarm-light { display: none; }
  #swarm-heading.swarm-pending > img { opacity: 1; }
  .tech-reveal-pending, .flow-item { opacity: 1; translate: none; }
}

/* Keep image bounds fixed so their masks and the line contact stay exact. */
.technology-image.flow-item {translate:none}

.swarm-light-outline {background-image:url('https://spin-assets.onew.design/assets/headline-swarm-v38-outline.svg');filter:none;mask-image:radial-gradient(circle calc(var(--glow-radius) * 1.2) at var(--glow-x) var(--glow-y),#000 0%,#000 65%,transparent 100%)}

.technology .tech-word {display:inline-block;white-space:nowrap}
.technology .tech-glyph {display:inline-block;white-space:pre;text-transform:none}
.technology.flow-active h3.flow-item {opacity:1;translate:none}
.technology.flow-active h3:not(.text-revealed) .tech-glyph {opacity:0}
.technology.flow-active .description.flow-item {opacity:0;translate:none}
.technology.flow-active .description.copy-revealed {opacity:1}
@media(prefers-reduced-motion:reduce){
 .technology.flow-active h3 .tech-glyph,.technology.flow-active .description.flow-item {opacity:1!important;translate:none!important}
}

/* Scale around the ribbon's entry point, keeping their intersection attached. */
.technology-image.flow-item {scale:calc(.88 + .12 * var(--flow-reveal,1))}
.technology.flow-active .technology-intro h2:not(.text-revealed) .tech-glyph {opacity:0}
.technology-intro>p.copy-revealed {opacity:1;translate:none}
@media(prefers-reduced-motion:reduce){.technology-image.flow-item {scale:1}}