/* S3 «Чем отличается», play copy of ../../slides/s3-diff/index.html's styles. Scoped by #slide-s3 / s3- ids.
   Transforms of pinned children and of the terminal are written by s3.js every frame (the CSS sets only the rest). */
#slide-s3 { pointer-events: none; }

/* arcs of other services' data: pale steel, not our system blue */
#slide-s3 #s3-lines path { fill: none; stroke-linecap: round; }
#slide-s3 .s3-halo { stroke: rgba(196, 210, 240, 0.42); stroke-width: 12; filter: blur(8px); stroke-dasharray: 1 1; }
#slide-s3 .s3-core { stroke: #f1f5ff; stroke-width: 2.6; stroke-dasharray: 1 1; }
#slide-s3 .s3-ghost { stroke: rgba(196, 210, 240, 0.16); stroke-width: 2; stroke-dasharray: 3 9; }
#slide-s3 #s3-lines circle { fill: #ffffff; opacity: 0; }
#slide-s3 #s3-lines .s3-pk { fill: #f4f7ff; filter: drop-shadow(0 0 6px rgba(214, 226, 250, 0.9)); }

/* ground labels of other services: a place name with a quiet role under it; brand pills under their rings */
#slide-s3 .s3-place { position: absolute; left: 0; top: 0; transform: translate(-50%, 34px); text-align: center; white-space: nowrap; opacity: 0; }
#slide-s3 .s3-place b { display: block; font-size: 46px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: #eef3ff; text-shadow: 0 2px 18px rgba(5, 10, 22, 0.9); }
#slide-s3 .s3-place span { display: block; margin-top: 6px; font-size: 24px; font-weight: 500; color: #a7b4cf; text-shadow: 0 2px 14px rgba(5, 10, 22, 0.9); }
#slide-s3 .s3-brand {
  position: absolute; left: 0; top: 0; transform: translate(-50%, 34px); transform-origin: 50% 0; white-space: nowrap; opacity: 0;
  padding: 7px 16px 8px; border-radius: 12px;
  background: rgba(9, 16, 31, 0.86); border: 1.5px solid rgba(196, 210, 240, 0.34);
  font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: #dfe6f5;
}
#s3-haze {
  position: absolute; left: -210px; top: -150px; width: 560px; height: 300px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(214, 224, 245, 0.3), rgba(214, 224, 245, 0.1) 55%, rgba(214, 224, 245, 0) 100%);
  filter: blur(6px);
}
#s3-cloudtag { position: absolute; left: 0; top: 0; transform: translate(36px, -50%); white-space: nowrap; opacity: 0; }
#s3-cloudtag b { display: block; font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: #eef3ff; text-shadow: 0 2px 18px rgba(5, 10, 22, 0.9); }
#s3-cloudtag span { display: block; margin-top: 6px; font-size: 24px; font-weight: 500; color: #a7b4cf; text-shadow: 0 2px 14px rgba(5, 10, 22, 0.9); }

/* our terminal (screen space), tethered to the rack */
#s3-term {
  position: absolute; left: 1090px; top: 585px; width: 720px; opacity: 0;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(16, 26, 48, 0.95), rgba(8, 14, 28, 0.96));
  border: 1.5px solid rgba(110, 170, 245, 0.3);
  box-shadow: 0 34px 80px rgba(2, 6, 16, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#s3-term-bar { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
#s3-term-bar i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
#s3-term-bar span { flex: 1; text-align: center; margin-right: 54px; font-family: "Inter", sans-serif; font-size: 18px; font-weight: 500; color: #7f8eaf; }
#s3-term-body { padding: 18px 24px 22px; font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 21px; line-height: 1.6; color: #cbd6ea; white-space: pre; }
#slide-s3 .s3-ln { display: block; height: 34px; overflow: hidden; }
#slide-s3 .s3-ln.s3-cont { padding-left: 2ch; }
#slide-s3 .s3-ln .s3-p { color: #2fe8ce; }
#slide-s3 .s3-ln .s3-url { color: #ffffff; }
#slide-s3 .s3-ty { display: inline-block; overflow: hidden; vertical-align: top; white-space: pre; max-width: 0; }
#slide-s3 .s3-cur { display: inline-block; width: 12px; height: 23px; margin-left: 2px; vertical-align: -3px; background: #2fe8ce; opacity: 0; }
#s3-l2, #s3-l3, #s3-err { opacity: 0; }
#s3-err { color: #ff8a7a; }
#s3-err em { font-style: normal; padding: 1px 6px; margin: 0 -2px; border-radius: 6px; background: rgba(255, 110, 90, 0); color: #ffb0a4; }

/* the caption (S3.4) */
#s3-capbg { opacity: 0; }
#s3-cap { opacity: 0; }