/* ============================================================
   HELIOCASTLE — MOCKUP — code
   Used by a card with class "mock mock-code".
   ============================================================ */

/* ---------- mock: student project (code editor) ---------- */
.mock-code { background: radial-gradient(80% 70% at 30% 15%, #10131a, #07080b 75%); }
.code-win {
  position: absolute;
  top: 13%; left: 9%; right: 9%; bottom: 17%;
  display: flex;
  background: #0d0f13;
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 26px 55px rgb(var(--shadow-rgb) / calc(0.65 * var(--shadow-a)));
}
.code-side {
  flex: 0 0 24%;
  padding: 9% 7%;
  background: rgb(var(--ink-rgb) / 0.022);
  border-right: 1px solid rgb(var(--ink-rgb) / 0.06);
}
.code-side i {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgb(var(--ink-rgb) / 0.1);
  margin-bottom: 10px;
}
.code-side i:nth-child(even) { width: 72%; }
.code-side i.on { background: rgb(var(--accent-rgb) / 0.65); width: 86%; }

.code-main { flex: 1; display: flex; flex-direction: column; }
.code-tabs {
  display: flex;
  gap: 6px;
  padding: 5% 6% 0;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06);
}
.code-tabs b {
  height: 16px;
  width: 34%;
  border-radius: 3px 3px 0 0;
  background: rgb(var(--ink-rgb) / 0.05);
}
.code-tabs b.on { background: rgb(var(--accent-rgb) / 0.22); border-bottom: 2px solid var(--gold); }

.code-lines { padding: 7% 6%; }
.code-lines span {
  display: block;
  width: var(--w);
  height: 4px;
  border-radius: 2px;
  background: rgb(var(--ink-rgb) / 0.11);
  margin-bottom: 9px;
}
.code-lines .i1 { margin-left: 8%; }
.code-lines .i2 { margin-left: 16%; }
.code-lines .k { background: rgb(var(--ink-rgb) / 0.22); }
.code-lines .g { background: rgb(var(--accent-rgb) / 0.7); }

/* animation: code types itself in line by line, then clears and repeats */
.code-lines span {
  transform: scaleX(0);
  transform-origin: left;
  animation: code-type 7s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.code-lines span:nth-child(1) { animation-delay: 0s; }
.code-lines span:nth-child(2) { animation-delay: .2s; }
.code-lines span:nth-child(3) { animation-delay: .4s; }
.code-lines span:nth-child(4) { animation-delay: .6s; }
.code-lines span:nth-child(5) { animation-delay: .8s; }
.code-lines span:nth-child(6) { animation-delay: 1s; }
.code-lines span:nth-child(7) { animation-delay: 1.2s; }
.code-lines span:nth-child(8) { animation-delay: 1.4s; }
.code-lines span:nth-child(9) { animation-delay: 1.6s; }
@keyframes code-type {
  0% { transform: scaleX(0); }
  7%, 82% { transform: scaleX(1); }
  92%, 100% { transform: scaleX(0); }
}
/* active-file marker in the sidebar ticks along with the typing */
.code-side i.on { animation: side-blink 7s ease-in-out infinite; }
@keyframes side-blink {
  0%, 100% { opacity: 0.5; }
  10%, 80% { opacity: 1; }
}

/* ---------- mock: customized VPS (rack + terminal) ---------- */