/* ============================================================================
   The GoDark drawings, on this site.

   GENERATED FROM ~/Landing/godark/style.css, then scoped under `.gd`. It is a
   copy, and a copy drifts: when the landing's drawing changes, re-extract
   rather than hand-patching this. Nothing here is authored.

   Two sections use it: the Action Button phone and the loop. Both are the
   product's own visual language rather than this site's, which is the point.
   A portfolio page showing an app in this site's typography would be showing
   the wrong thing.
   ========================================================================= */

/* GoDark's tokens, scoped so they cannot reach this site's own components.

   NO PANEL. These sat on a bone card with a hairline and a radius, which put a
   box around a drawing that already has its own edges and made two sections
   read as attachments rather than as part of the page. They sit straight on
   this site's paper now.

   `--bone` is therefore this site's `--bg`, not GoDark's. It is not decorative:
   the loop's black pill knocks its label out in `var(--bone)`, so that text
   has to be whatever the page behind it is. Ink and mark stay GoDark's,
   because the drawings should still look like themselves. */
.gd {
  --bone: #f7f5ef;
  --ink: #14110e;
  --mark: #d8ccbe;
  --say: rgba(20, 17, 14, 0.66);
  --hand: "Permanent Marker", "Comic Sans MS", cursive;
  --ease: cubic-bezier(0.2, 0.8, 0.25, 1);
  color: var(--ink);
  padding: 6px 0 10px;
}


/* Both drawings were laid out against GoDark's own 440px column. This site's
   column is nearly twice that, and an SVG with a viewBox simply scales to its
   container, so unconstrained the phone came out enormous and the loop came
   out over 800px tall. Hold them at the width they were drawn for and centre
   them in the panel. */
.gd .ks-wrap,
.gd .loop-scroll { max-width: 440px; margin-inline: auto; }

.gd .sk {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 10px);
  overflow: visible;
  pointer-events: none;
}
.gd .ks-wrap {
  position: relative;
  width: 100%;
  margin: 18px 0 22px;
  perspective: 900px;
  perspective-origin: 42% 50%;
}
.gd .ks {
  display: block;
  width: 100%;
  height: auto;
  color: #b0a091;
  overflow: visible;
  transform-origin: 34% 50%;
}
.gd .ks-wrap.is-live .ks { animation: ks-turn 6s var(--ease) infinite; }




@keyframes ks-turn {
  0%, 6%    { transform: rotateY(0deg) scale(1); }
  22%, 76%  { transform: rotateY(27deg) scale(1.14); }
  90%, 100% { transform: rotateY(0deg) scale(1); }
}
.gd .ks-body { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.gd .ks-btn { stroke: var(--ink); stroke-width: 1.6; fill: var(--ink); }
.gd .ks-wrap.is-live .ks-btn { animation: ks-press 6s var(--ease) infinite; }


@keyframes ks-press {
  0%, 26%   { transform: translateX(0); }
  30%, 74%  { transform: translateX(2.6px); }
  80%, 100% { transform: translateX(0); }
}
.gd .ks-ring { fill: none; stroke: var(--ink); stroke-width: 1.6; opacity: 0; }
.gd .ks-wrap.is-live .ks-ring { animation: ks-ring 6s linear infinite; }


@keyframes ks-ring {
  0%, 26%  { opacity: 0; r: 9; }
  30%      { opacity: 0.5; r: 10; }
  40%      { opacity: 0; r: 21; }
  100%     { opacity: 0; r: 21; }
}
.gd .ks-app { stroke: currentColor; stroke-width: 1.5; fill: rgba(20, 17, 14, 0); }
.gd .ks-wrap.is-live .ks-app { animation: ks-dark 6s var(--ease) infinite; }


@keyframes ks-dark {
  0%, 30%   { fill: rgba(20, 17, 14, 0); stroke: currentColor; }
  42%, 76%  { fill: rgba(20, 17, 14, 1); stroke: rgba(20, 17, 14, 1); }
  84%, 100% { fill: rgba(20, 17, 14, 0); stroke: currentColor; }
}
.gd .ks-tag {
  position: absolute;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: rgba(20, 17, 14, 0.717);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}
.gd .ks-tag-press {
  left: 1%;
  top: 29%;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.gd .ks-point { width: 30px; height: 11px; display: block; flex: none; opacity: 0.75; }
.gd .ks-tag-dark {
  right: 0;
  top: 52%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.gd .ks-lock { width: 34px; height: 48px; display: block; color: rgba(20, 17, 14, 0.62); overflow: visible; }
.gd .ks-tag-text { display: block; }
.gd .ks-lk-body, .gd .ks-lk-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gd .ks-lk-key { fill: var(--ink); stroke: none; opacity: 0.62; }
.gd .ks-lk-shackle { transform: translateY(-6px); }
.gd .ks-wrap.is-live .ks-lk-shackle { animation: ks-shut 6s var(--ease) infinite; }


@keyframes ks-shut {
  0%, 48%   { transform: translateY(-6px); }
  53%, 86%  { transform: translateY(0); }
  92%, 100% { transform: translateY(-6px); }
}
.gd .ks-wrap.is-live .ks-lk-seat { animation: ks-seat 6s var(--ease) infinite; }


@keyframes ks-seat {
  0%, 51%  { transform: translateY(0); }
  54%      { transform: translateY(1.6px); }
  58%, 100% { transform: translateY(0); }
}
.gd .ks-lk-tick {
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.gd .ks-wrap.is-live .ks-lk-tick { animation: ks-clack 6s var(--ease) infinite; animation-delay: calc(var(--i) * 0.02s); }


@keyframes ks-clack {
  0%, 51%   { opacity: 0; transform: scale(0.5); }
  55%       { opacity: 0.85; transform: scale(1); }
  62%, 100% { opacity: 0; transform: scale(1.15); }
}
.gd .ks-wrap.is-live .ks-tag-press { animation: ks-say-press 6s var(--ease) infinite; }


@keyframes ks-say-press {
  0%, 16%   { opacity: 0; transform: translateY(3px); }
  22%, 44%  { opacity: 1; transform: none; }
  52%, 100% { opacity: 0; transform: translateY(3px); }
}
.gd .ks-wrap.is-live .ks-tag-dark { animation: ks-say-dark 6s var(--ease) infinite; }


@keyframes ks-say-dark {
  0%, 46%   { opacity: 0; transform: translateY(3px); }
  49%, 82%  { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(3px); }
}
.gd .ks-wrap.is-still .ks { transform: rotateY(24deg) scale(1.1); }
.gd .ks-wrap.is-still .ks-app { fill: rgba(20, 17, 14, 1); stroke: rgba(20, 17, 14, 1); }
.gd .ks-wrap.is-still .ks-tag { opacity: 1; }
.gd .ks-wrap.is-still .ks-lk-shackle { transform: translateY(0); }
.gd @property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.gd .loop-scroll { position: relative; margin: 0 0 14px; }
.gd .loop-wrap { position: relative; width: 100%; }
.gd .loop { display: block; width: 100%; height: auto; color: #b0a091; overflow: visible; }
.gd .lp-live, .gd .lp-dead, .gd .lp-out {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
}
.gd .lp-live { stroke-dashoffset: calc(var(--len) * (1 - clamp(0, var(--p) / 0.34, 1))); }
.gd .lp-dead {
  stroke: #d3c6b6;
  stroke-dasharray: 7 8;
  stroke-dashoffset: calc(var(--len) * (1 - clamp(0, (var(--p) - 0.46) / 0.18, 1)));
}
.gd .lp-out {
  stroke: var(--ink);
  stroke-dashoffset: calc(var(--len) * (1 - clamp(0, (var(--p) - 0.66) / 0.11, 1)));
}
.gd .lp-dot { fill: currentColor; }
.gd .lp-dot-0 { opacity: clamp(0, var(--p) / 0.05, 1); }
.gd .lp-dot-1 { opacity: clamp(0, (var(--p) - 0.2) / 0.06, 1); }
.gd .lp-dot-2, .gd .lp-dot-3 { fill: #cdbfae; }
.gd .lp-dot-2 { opacity: clamp(0, (var(--p) - 0.5) / 0.06, 1); }
.gd .lp-dot-3 { opacity: clamp(0, (var(--p) - 0.58) / 0.06, 1); }
.gd .lp-dot-4 { fill: var(--ink); opacity: clamp(0, (var(--p) - 0.74) / 0.07, 1); }
.gd .lp-pen {
  fill: var(--ink);
  opacity: clamp(0, var(--p) / 0.04, 1);
  
  transform: translateY(calc(44px + 162px * clamp(0, var(--p) / 0.34, 1)));
}
.gd .lp-lock {
  transform-box: fill-box;
  transform-origin: center;
  opacity: clamp(0, (var(--p) - 0.36) / 0.07, 1);
  transform:
    translateY(calc(-14px * (1 - clamp(0, (var(--p) - 0.36) / 0.09, 1))))
    scaleX(calc(0.72 + 0.28 * clamp(0, (var(--p) - 0.36) / 0.09, 1)));
}
.gd .lp-lock-body { fill: var(--ink); stroke: var(--ink); stroke-width: 1.6; }
.gd .loop-steps { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.gd .lp {
  position: absolute;
  left: 15%;
  right: 6%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
  row-gap: 5px;
}
.gd .lp-ic {
  grid-area: 1 / 1;
  align-self: center;
  width: 22px;
  height: 22px;
  overflow: visible;
}
.gd .lp-ic path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gd .lp b { grid-area: 1 / 2; align-self: center; font-family: var(--hand); font-size: 19px; line-height: 1.1; color: var(--ink); }
.gd .lp i { grid-area: 2 / 2; font-style: normal; font-size: 13px; line-height: 1.4; color: var(--say); }
.gd .lp-0 { top: 9.7%;  opacity: clamp(0, var(--p) / 0.06, 1); }
.gd .lp-1 { top: 28.3%; opacity: clamp(0, (var(--p) - 0.2) / 0.07, 1); }
.gd .lp-cut { top: 46%; left: 11%; right: 30%; opacity: clamp(0, (var(--p) - 0.4) / 0.07, 1); }
.gd .lp-2 { top: 64.6%; opacity: clamp(0, (var(--p) - 0.5) / 0.07, 1); }
.gd .lp-3 { top: 77.9%; opacity: clamp(0, (var(--p) - 0.58) / 0.07, 1); }
.gd .lp-4 { top: 93.8%; opacity: clamp(0, (var(--p) - 0.74) / 0.08, 1); }
.gd .lp-cut { row-gap: 6px; }
.gd .lp-cut b { color: var(--bone); font-size: 20px; }
.gd .lp-cut i { color: rgba(241, 233, 224, 0.82); font-size: 12px; }
.gd .lp-cut .lp-ic { color: var(--bone); }
.gd .lp-off b {
  color: var(--say);
  justify-self: start;
  position: relative;
}
.gd .lp-off b::after {
  content: "";
  position: absolute;
  left: -3px;               
  right: -3px;
  top: 54%;
  height: 1.6px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(var(--cut, 0));
}
.gd .lp-off .lp-ic { color: var(--say); }
.gd .lp-ic-cut {
  stroke-dasharray: var(--len);
  stroke-dashoffset: calc(var(--len) * (1 - var(--cut, 0)));
}
.gd .lp-2 { --cut: clamp(0, (var(--p) - 0.56) / 0.07, 1); }
.gd .lp-3 { --cut: clamp(0, (var(--p) - 0.645) / 0.07, 1); }
.gd .lp-4 b { font-size: 21px; }
.gd .lp-4 .lp-ic { color: var(--ink); }