/* Connectivity.
 *
 * A section the mirror never had, built from Figma — file GAIALPデザイン, page "LP phase_2",
 * node 633:99. It sits between Key Features and Specifications, which is where the design
 * puts it, and it is the one *light* section in this stretch of the page: white ground,
 * near-black type, a four-step diagram of where a GAIA image can go.
 *
 * It scrolls with the page and nothing here moves: no pin, no card, no rounded edge, no
 * gradient seam and no scroll-driven colour change. The section's edges are the edges the
 * design draws.
 *
 * The design is drawn at 1512px wide. Every measure below is that drawing's value at the top
 * of a clamp, shrinking with the viewport — the same rule true-colour-photo.css follows, so
 * the section is 1:1 with Figma at ~1512px and proportional either side of it.
 */

.connectivity {
  /* The illustration's own frame is 994x128 (icons) in the drawing; the row height is the
     one number the diagram is built from — icon heights, the arrows' length and the gap
     under them are all fractions of it. */
  --conn-icon-h: clamp(64px, 8.47vw, 128px);
  --conn-arrow-w: clamp(36px, 4.83vw, 73px);
  --conn-label-gap: clamp(11px, 1.46vw, 22px);

  /* The line and its travelling dot are white with a magenta glow in the design — on white
     ground the stroke itself all but disappears and the glow is what you read. */
  --conn-glow: #9d00ff;

  /* An opaque ground of its own, because this is a light section on a page whose dark tone
     is one scrim over .bg-galaxy. That rule is about not hand-painting *dark* tints per
     section — a light one has to paint its own or the galaxy shows through. */
  background: #fff;
  color: #101010;
}

.connectivity-reveal {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 34px, 0);
  will-change: opacity, filter, transform, clip-path;
  -webkit-clip-path: inset(18% 0 0 0);
  clip-path: inset(18% 0 0 0);
}

.connectivity-reveal.is-view {
  animation: connectivity-dissolve-up 960ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.connectivity-reveal--delay-1.is-view {
  animation-delay: 120ms;
}

.connectivity-reveal--delay-2.is-view {
  animation-delay: 240ms;
}

@keyframes connectivity-dissolve-up {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 34px, 0);
    -webkit-clip-path: inset(18% 0 0 0);
    clip-path: inset(18% 0 0 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

/* Size and weight come from css/page/section-titles.css, which every section title on the
   page shares. */
.connectivity .connectivity-title {
  text-align: center;
}

/* 38px under the title and 54px over the diagram, both from the design's frame padding. */
.connectivity-lead {
  max-width: 1272px;
  margin: clamp(20px, 2.5vw, 38px) auto 0;
  font-size: clamp(1.5rem, 1.59vw, 2.4rem);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

/* The diagram. Four content-sized columns with the arrows between them as flex items of
   their own: each arrow takes an equal share of whatever is left over, so it is centred in
   its gap without anything having to measure the columns. */
.connectivity-flow {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  max-width: 994px;
  margin: clamp(28px, 3.6vw, 54px) auto clamp(15px, 2vw, 30px);
}

.connectivity-node {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
}

/* The four icons are drawn to different heights and sit on a common baseline, so the box is
   the row's full height and the icon is dropped to the bottom of it. */
.connectivity-art {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
  align-items: flex-end;
  height: var(--conn-icon-h);
}

/* Both max-* overrides are load-bearing against style.css's global
   `img { max-width: 100%; max-height: 100% }` — see README.md, "Ground rules". */
.connectivity-icon {
  display: block;
  width: auto;
  max-width: none;
  max-height: none;
}

/* Each icon's own height as a fraction of the row, straight from the drawing. */
.connectivity-node--usb .connectivity-icon {
  height: calc(var(--conn-icon-h) * 0.925);
}

.connectivity-node--gaia .connectivity-icon {
  height: calc(var(--conn-icon-h) * 0.984);
}

.connectivity-node--im7 .connectivity-icon {
  height: calc(var(--conn-icon-h) * 0.862);
}

.connectivity-node--dicom .connectivity-icon {
  height: calc(var(--conn-icon-h) * 0.989);
}

/* 26px labels in the drawing, and #231815 rather than the section's #101010 — the artwork's
   own black, kept so the captions belong to the diagram and not to the copy above it.
   `nowrap` because a label is wider than its icon and is meant to run under the arrows;
   letting it wrap instead would break the row's rhythm. */
.connectivity-label {
  margin-top: var(--conn-label-gap);
  color: #231815;
  font-size: clamp(1.5rem, 1.72vw, 2.6rem);
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

/* GAIA is the one instrument in the row, and the design says so: 34px bold against 26px
   book. The larger line box also drops its baseline below the others', which is what the
   drawing does. */
.connectivity-node--gaia .connectivity-label {
  font-size: clamp(1.9rem, 2.25vw, 3.4rem);
  font-weight: 700;
}

/* The arrow's cell. Its height is the icon row, so `top` below is a fraction of that row
   rather than of a box that grows with the labels. */
.connectivity-arrow {
  position: relative;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: var(--conn-arrow-w);
  height: var(--conn-icon-h);
  overflow: hidden;
}

/* The line, and the dot 82% of the way along it. Both are placed at 58.4% down the icon row,
   which is where the drawing crosses the instruments. */
.connectivity-arrow:before,
.connectivity-arrow:after {
  content: "";
  position: absolute;
  top: 58.4%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.connectivity-arrow:before {
  width: var(--conn-arrow-w);
  height: 1.6px;
  border-radius: 1px;
  background: rgba(157, 0, 255, 0.18);
}

.connectivity-arrow:after {
  width: var(--conn-arrow-w);
  height: clamp(1px, 0.16vw, 2px);
  border-radius: 999px;
  background: #9d00ff;
  box-shadow:
    0 0 3px rgba(157, 0, 255, 0.85),
    0 0 7px rgba(157, 0, 255, 0.38);
  animation: conn-draw-right 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: clip-path, opacity;
}

.connectivity-arrow--to-usb:after {
  animation-name: conn-draw-left;
}

.connectivity-arrow--to-im7:after {
  animation-delay: 0.28s;
}

.connectivity-arrow--to-dicom:after {
  animation-delay: 0.56s;
}

.connectivity-flow:not(.is-view) .connectivity-arrow:after {
  animation-play-state: paused;
}

@keyframes conn-draw-right {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  14% {
    opacity: 1;
  }
  52% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  78% {
    opacity: 1;
    clip-path: inset(0 0 0 100%);
  }
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes conn-draw-left {
  0% {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
  }
  14% {
    opacity: 1;
  }
  52% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  78% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
}

/* ---- Phone --------------------------------------------------------------------------
 *
 * The design has no phone frame for this section. Four columns at 994px do not survive the
 * fold, so the flow turns and reads top to bottom — the arrows turn with it, which is why
 * both of them are re-stated rather than rotated: a rotation would carry the dot's 82%
 * offset around with it and land it on the wrong side.
 */
@media only screen and (max-width: 767px) {
  .connectivity {
    --conn-icon-h: 76px;
    --conn-arrow-w: 44px;
    --conn-label-gap: 12px;
  }

  .connectivity-flow {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
  }

  .connectivity-node {
    -ms-flex-align: center;
    align-items: center;
  }

  .connectivity-arrow {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: var(--conn-icon-h);
    min-width: 0;
    height: var(--conn-arrow-w);
    margin: 4px 0;
  }

  .connectivity-arrow:before,
  .connectivity-arrow:after {
    top: 50%;
    left: 50%;
  }

  .connectivity-arrow:before {
    width: 1.6px;
    height: var(--conn-arrow-w);
    background: rgba(157, 0, 255, 0.18);
  }

  .connectivity-arrow:after {
    left: 50%;
    width: clamp(1px, 0.42vw, 2px);
    height: var(--conn-arrow-w);
    background: #9d00ff;
    animation-name: conn-draw-down;
  }

  .connectivity-arrow--to-usb:after {
    animation-name: conn-draw-up;
  }
}

@keyframes conn-draw-down {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  14% {
    opacity: 1;
  }
  52% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  78% {
    opacity: 1;
    clip-path: inset(100% 0 0 0);
  }
  100% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }
}

@keyframes conn-draw-up {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }
  14% {
    opacity: 1;
  }
  52% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  78% {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .connectivity-reveal,
  .connectivity-reveal.is-view {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
    -webkit-clip-path: none;
    clip-path: none;
  }

  .connectivity-arrow:after {
    animation: none;
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}