/* ==========================================================================
   MAKE SIMX YOURS - deployment. White, like the rest of the page.
   Two objects: a managed cloud and a server, both idling. deploy.js swaps one
   class on .dp-stage and everything here reacts.
   ========================================================================== */

.dp{
  padding:clamp(64px,9vw,132px) 0 clamp(56px,7vw,104px);
}


.dp-h{
  margin:0 0 clamp(14px,1.8vw,22px);
  font-family:var(--serif); font-weight:300;
  font-size:clamp(34px,5.2vw,64px);
  line-height:1.02; letter-spacing:-.022em;
}
.dp-lede{
  margin:0 0 clamp(24px,3.5vw,44px);
  max-width:60ch;
  font-size:clamp(16px,1.35vw,19px); line-height:1.6;
  color:var(--ink2);
}

/* ---------- the drawing --------------------------------------------------- */
.dp-stage{ margin:0 0 clamp(28px,4vw,52px); }
.dp-svg{
  display:block; width:100%; height:auto;
  max-width:900px; margin:0 auto;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}

.dp-ln{ stroke:var(--ink); stroke-width:1.7; }
.dp-hair{ stroke:var(--hair); stroke-width:1.5; }

.dp-lbl{
  fill:var(--ink); font-family:var(--sans); font-size:17px; font-weight:600;
  text-anchor:middle; stroke:none;
}
.dp-sub{
  fill:var(--ink2); font-family:var(--sans); font-size:14px;
  text-anchor:middle; stroke:none;
}

/* ---------- idle ----------------------------------------------------------
   The two objects breathe on opposite phases so the pair never looks like one
   sprite moving twice. Nothing here reacts to scroll or pointer: it is idle. */
.dp-bob{ animation:dp-bob 5.4s ease-in-out infinite; }
.dp-bob--b{ animation-duration:6.2s; animation-delay:-2.4s; }
@keyframes dp-bob{ 50%{ transform:translateY(-7px); } }

.dp-dot{ fill:var(--grn); stroke:none; animation:dp-pulse 2.6s ease-in-out infinite; }
.dp-dot--2{ animation-delay:.32s; }
.dp-dot--3{ animation-delay:.64s; }
.dp-dot--4{ animation-delay:.96s; }
.dp-dot--5{ animation-delay:1.28s; }
@keyframes dp-pulse{ 0%,100%{ opacity:.25; } 45%{ opacity:1; } }

.dp-led{ fill:var(--grn); stroke:none; animation:dp-blink 3.4s steps(1,end) infinite; }
.dp-led--2{ animation-delay:.5s; animation-duration:2.2s; }
.dp-led--3{ animation-delay:1.1s; animation-duration:4.1s; }
.dp-led--4{ animation-delay:1.7s; animation-duration:2.8s; }
@keyframes dp-blink{ 0%,72%{ opacity:1; } 76%,88%{ opacity:.2; } 92%{ opacity:1; } }

.dp-flow{
  stroke:var(--grn); stroke-width:2;
  stroke-dasharray:5 8;
  animation:dp-run 1.1s linear infinite;
}
@keyframes dp-run{ to{ stroke-dashoffset:-26; } }

.dp-cut{ stroke:var(--ink2); stroke-width:2; opacity:0; }

/* ---------- states -------------------------------------------------------- */
.dp-only1,.dp-only2,.dp-only3{ display:none; }
.dp-stage.is-m1 .dp-only1,
.dp-stage.is-m2 .dp-only2,
.dp-stage.is-m3 .dp-only3{ display:block; }

.dp-cloud,.dp-rack,.dp-flow{ transition:opacity .45s ease; }
.dp-stage.is-m3 .dp-cloud{ opacity:.24; }
.dp-stage.is-m3 .dp-flow{ opacity:.18; animation:none; }
.dp-stage.is-m3 .dp-cut{ opacity:1; }
.dp-stage.is-m1 .dp-rack{ opacity:.55; }

/* ---------- the three cards, which are also the control ------------------- */
.dp-modes{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,20px);
  margin:0;
}
.dp-mode{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  margin:0; padding:clamp(18px,1.8vw,26px);
  text-align:left; font:inherit; color:inherit;
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:14px; cursor:pointer;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.dp-mode:hover{ border-color:#C9C6C4; }
.dp-mode[aria-pressed="true"]{
  border-color:var(--grn);
  box-shadow:0 0 0 1px var(--grn) inset;
}
.dp-mn{ font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--grnT); }
.dp-mt{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(21px,1.9vw,27px); line-height:1.12; letter-spacing:-.015em;
}
.dp-ml{ display:block; margin-top:6px; }
.dp-ml i{
  display:block; position:relative;
  padding-left:16px; margin-bottom:5px;
  font-style:normal; font-size:14px; line-height:1.5; color:var(--ink2);
}
.dp-ml i::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:1px; background:var(--grn);
}







/* ---------- narrow -------------------------------------------------------- */
@media (max-width:900px){
  .dp-modes{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  /* The drawing is 900 units wide and renders near 335 on a phone, a scale of
     0.37, so type set for the desktop lands at six pixels. Sized in viewBox
     units because scaling the SVG scales its type with it. */
  .dp-lbl{ font-size:34px; }
  .dp-sub{ font-size:28px; }
}

@media (prefers-reduced-motion:reduce){
  .dp-bob,.dp-dot,.dp-led,.dp-flow{ animation:none; }
  .dp-cloud,.dp-rack,.dp-flow,.dp-mode{ transition:none; }
}