/* The connector's pages (connect.css): the picture. The scene is 800 units wide; one unit is
 * 0.125cqw, so it scales as one. Where the cube and the tile stand is set here and mirrored by the
 * service's connect-scene.ts, which draws the ice between them (the numbers must agree). The cube
 * is the app's (ADR 0090): a body and two eyes of their own, turned by --cc-look-x/-y (-1 to 1)
 * from connect.js; the tile is the AI app's own logo, frosted over until it is known. */
.cc-connect-scene {
  --h: 260;
  --cube-x: 30;
  --cube-y: 38;
  --cube-s: 184;
  --tile-x: 615;
  --tile-y: 55;
  --tile-s: 150;
  --tag-y: 234;
  --u: 0.125cqw;
  position: relative;
  flex-shrink: 0;
  width: min(100%, clamp(760px, 61vw, 1100px));
  aspect-ratio: 800 / var(--h);
  container-type: inline-size;
}
.cc-connect-scene > * {
  position: absolute;
  margin: 0;
}

/* Soft shadows on the snow under each object. */
.cc-connect-ground {
  height: calc(20 * var(--u));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(18 85 223 / 0.26), rgb(18 85 223 / 0));
  filter: blur(calc(3 * var(--u)));
}
.cc-connect-ground--cube {
  top: calc((var(--cube-y) + var(--cube-s) * 0.96) * var(--u));
  left: calc((var(--cube-x) + var(--cube-s) * 0.1) * var(--u));
  width: calc(var(--cube-s) * 0.82 * var(--u));
}
.cc-connect-ground--tile {
  top: calc((var(--tile-y) + var(--tile-s) * 0.94) * var(--u));
  left: calc((var(--tile-x) + var(--tile-s) * 0.08) * var(--u));
  width: calc(var(--tile-s) * 0.84 * var(--u));
}

/* Cold Call: the cube, whole. */
.cc-connect-cube {
  z-index: 2;
  top: calc(var(--cube-y) * var(--u));
  left: calc(var(--cube-x) * var(--u));
  width: calc(var(--cube-s) * var(--u));
  aspect-ratio: 1;
  background: url('./ice-cube-body.webp') center / contain no-repeat;
  filter: drop-shadow(0 calc(10 * var(--u)) calc(16 * var(--u)) rgb(18 85 223 / 0.22));
  /* Without the script it watches the ice and the app across from it. */
  --cc-look-x: 0.62;
  --cc-look-y: 0.04;
}
.cc-connect-eye {
  position: absolute;
  aspect-ratio: 1;
  background: center / contain no-repeat;
  translate: calc(var(--cc-look-x) * 17%) calc(var(--cc-look-y) * 17%);
}
.cc-connect-eye--left {
  top: 32.28%;
  left: 13.17%;
  width: 25.98%;
  background-image: url('./ice-cube-eye-left.webp');
}
.cc-connect-eye--right {
  top: 31.84%;
  left: 60.14%;
  width: 26.39%;
  background-image: url('./ice-cube-eye-right.webp');
}

/* The AI app: its own tile, or the generic navy glass. */
.cc-connect-tile {
  z-index: 2;
  top: calc(var(--tile-y) * var(--u));
  left: calc(var(--tile-x) * var(--u));
  width: calc(var(--tile-s) * var(--u));
  aspect-ratio: 1;
  border-radius: 21.7%;
  filter: drop-shadow(0 calc(18 * var(--u)) calc(18 * var(--u)) rgb(12 23 59 / 0.28));
}
.cc-connect-logo,
.cc-connect-glass {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.cc-connect-glass {
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 28% 0%, rgb(63 123 255 / 0.42), rgb(63 123 255 / 0) 62%),
    radial-gradient(90% 70% at 90% 110%, rgb(18 85 223 / 0.35), rgb(18 85 223 / 0) 70%),
    linear-gradient(165deg, var(--cn-navy-hi) 0%, var(--cn-navy) 72%);
  box-shadow:
    inset 0 1.5px 0 rgb(255 255 255 / 0.2),
    inset 0 0 0 1px rgb(169 211 255 / 0.16);
}
.cc-connect-initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 3%;
  color: var(--cn-white);
  font-size: calc(var(--tile-s) * 0.52 * var(--u));
  font-weight: 700;
  letter-spacing: -0.03em;
  text-shadow: 0 0 calc(18 * var(--u)) rgb(169 211 255 / 0.5);
}
/* Frost over the glass until we know who it is; it melts on the first page the app shows on. */
.cc-connect-frost {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    url('./connect-frost.svg') center / 100% 100% no-repeat,
    radial-gradient(70% 62% at 0% 100%, rgb(230 244 255 / 0.4), rgb(230 244 255 / 0) 74%),
    radial-gradient(52% 46% at 100% 0%, rgb(230 244 255 / 0.26), rgb(230 244 255 / 0) 74%);
  opacity: 0;
  pointer-events: none;
}
.cc-connect-tile[data-app='your-ai'] .cc-connect-frost {
  opacity: 1;
}
.cc-connect-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

/* Their names under them. */
.cc-connect-tag {
  top: calc(var(--tag-y) * var(--u));
  translate: -50% 0;
  display: grid;
  justify-items: center;
  color: var(--cn-ink-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  white-space: nowrap;
}
.cc-connect-tag--cube {
  left: calc((var(--cube-x) + var(--cube-s) / 2) * var(--u));
}
.cc-connect-tag--tile {
  left: calc((var(--tile-x) + var(--tile-s) / 2) * var(--u));
  width: calc(300 * var(--u));
}
.cc-connect-tag--named {
  color: var(--cn-navy);
}
.cc-connect-tag--tile,
.cc-connect-host {
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-connect-host {
  max-width: 100%;
  color: var(--cn-ink-3);
  font-size: 12px;
  font-weight: 500;
}

/* The bridge: a lane of dots where the ice will go; the ice itself is glass in bands. */
.cc-connect-bridge {
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cc-connect-bridge--narrow {
  display: none;
}
.cc-connect-lane {
  fill: none;
  stroke: var(--cn-lane);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 0 0.022;
  opacity: 0.8;
}
.cc-connect-reveal,
.cc-connect-reveal-was,
.cc-connect-reveal-end {
  fill: none;
  stroke: var(--cn-white);
}
.cc-connect-reveal {
  stroke-dasharray: 1 2;
}
.cc-connect-reveal--close {
  stroke-dasharray: 0 2;
}
.cc-connect-ice-shadow {
  fill: rgb(18 85 223 / 0.26);
}
.cc-connect-ice-aura {
  fill: var(--cn-glow);
  opacity: 0;
}
.cc-connect-ice--closed .cc-connect-ice-aura,
.cc-connect-scene--fan .cc-connect-ice-aura {
  opacity: 0.4;
}
.cc-connect-ice-cloud,
.cc-connect-ice-glint {
  fill: var(--cn-white);
}
.cc-connect-ice-deep {
  fill: #9fc8ff;
  opacity: 0.75;
}
.cc-connect-ice-sheen {
  fill: var(--cn-white);
  opacity: 0.35;
}
.cc-connect-stop-face-0 {
  stop-color: #2c73f5;
}
.cc-connect-stop-face-1 {
  stop-color: #4589fb;
}
.cc-connect-stop-face-2 {
  stop-color: #5b97ff;
}
.cc-connect-stop-core-0 {
  stop-color: #c7e1ff;
}
.cc-connect-stop-core-1 {
  stop-color: #e4f2ff;
}
.cc-connect-stop-core-2 {
  stop-color: #d3e8ff;
}
.cc-connect-flakes {
  fill: none;
  stroke: var(--cn-white);
  stroke-width: 0.9;
  stroke-linecap: round;
}
.cc-connect-flakes--faint {
  opacity: 0.6;
}
.cc-connect-tip-halo {
  fill: var(--cn-glow);
  opacity: 0.55;
}
.cc-connect-tip-rays {
  fill: none;
  stroke: var(--cn-white);
  stroke-width: 1.7;
  stroke-linecap: round;
}
.cc-connect-tip-core {
  fill: var(--cn-white);
}
.cc-connect-spark,
.cc-connect-pulse {
  fill: none;
  stroke-linecap: round;
  opacity: 0;
}
.cc-connect-spark {
  stroke: var(--cn-white);
  stroke-width: 6;
  stroke-dasharray: 0 2;
}
.cc-connect-spark--halo {
  stroke: var(--cn-glow);
  stroke-width: 22;
}
.cc-connect-pulse {
  stroke: var(--cn-glow);
  stroke-width: 22;
  stroke-dasharray: 0.16 3;
  stroke-dashoffset: 0.16;
}
.cc-connect-pulse--core {
  stroke: var(--cn-white);
  stroke-width: 6;
}
.cc-connect-ice--closed {
  visibility: hidden;
}