.architect-speech{
  color: rgba(0, 242, 255, .88);                
  text-shadow:
    0 0 14px rgba(0,242,255,.14);
    1px 0 0 rgba(255, 0, 60, .18);              
  font-weight: 800;
  letter-spacing: .3px;
}

.architect-block{
  border-left: 3px solid rgba(0,242,255,.22);
  padding-left: 12px;
  margin: 0 0 12px 0;
  background: rgba(0,242,255,.03);
}

.architect-wrap{
  position: relative;
  display: inline-block;
  padding-bottom: 54px; /* space for binary to fall */
}

.architect-drip{
  position: relative;
  display: inline-block;
  padding-bottom: 22px; /* space for drips */
}

/* lower-half smear of the text */
.architect-drip::before{
  content: attr(data-drip);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;

  color: rgba(0,242,255,.55);
  text-shadow:
    0 0 18px rgba(0,242,255,.22),
    1px 0 0 rgba(255,0,60,.18);

  transform: translateY(.62em) skewX(-1deg);
  filter: blur(.9px);
  opacity: .75;

  /* show only the lower half */
  clip-path: inset(56% 0 0 0);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* drip blobs/trails under the letters */
.architect-drip::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 22px;
  z-index: 0;

  background:
    radial-gradient(circle at 10% 2px, rgba(0,242,255,.95) 0 4px, transparent 6px),
    radial-gradient(circle at 28% 5px, rgba(0,242,255,.75) 0 3px, transparent 6px),
    radial-gradient(circle at 52% 3px, rgba(0,242,255,.92) 0 4px, transparent 7px),
    radial-gradient(circle at 71% 6px, rgba(0,242,255,.70) 0 3px, transparent 6px),
    radial-gradient(circle at 88% 2px, rgba(0,242,255,.85) 0 4px, transparent 7px),
    linear-gradient(to bottom, rgba(0,242,255,.35), transparent 75%);

  opacity: .9;
  filter: blur(.25px);
  mix-blend-mode: screen;

  transform: translateY(-6px);
  animation: archDrip 2.7s linear infinite;
  pointer-events: none;
}

@keyframes archDrip{
  0%   { transform: translateY(-7px); opacity:.15; }
  12%  { opacity:.95; }
  70%  { opacity:.55; }
  100% { transform: translateY(10px); opacity:.08; }
}

@media (prefers-reduced-motion: reduce){
  .architect-drip::after{ animation: none; }
}

/* vertical “binary rain” columns */
.bin-stream{
  position: absolute;
  top: calc(100% - 6px); /* start right under the quote */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1px;

  color: rgba(0,242,255,.82);
  text-shadow:
    0 0 10px rgba(0,242,255,.18),
    1px 0 0 rgba(255,0,60,.14);

  writing-mode: vertical-rl; /* turns your string into a vertical column */
  text-orientation: upright;

  opacity: .85;
  pointer-events: none;

  /* fade out as it falls */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%);

  animation: binFall 2.9s linear infinite;
}

/* position each stream under different parts of the quote */
.bin-stream.b1{ left: 8%;  animation-delay: 0s; }
.bin-stream.b2{ left: 46%; animation-delay: .35s; opacity: .70; }
.bin-stream.b3{ left: 82%; animation-delay: .15s; opacity: .78; }

@keyframes binFall{
  from{ transform: translateY(-6px); }
  to  { transform: translateY(64px); }
}

/* occasional glitch twitch */
.bin-stream{
  animation:
    binFall 2.9s linear infinite,
    binGlitch 6.4s steps(1,end) infinite;
}

@keyframes binGlitch{
  0%, 88%, 100% { filter: none; }
  90% { transform: translateY(18px) translateX(-1px); filter: contrast(1.1) saturate(1.1); }
  91% { transform: translateY(22px) translateX(2px);  filter: hue-rotate(10deg); }
  92% { filter: none; }
}

@media (prefers-reduced-motion: reduce){
  .bin-stream{ animation: none; }
}