/* ==================================================================
   10 — API "Build the perfect tools." blueprint grid
   Everything is scoped under #api / .api-*
=================================================================== */
#api {
  --api-line: #1b1c1e;
  --api-grid-w: min(calc(100vw - 60px), 1065px);
  --api-cols: 3;
}

#api .api-wrap {
  position: relative;
  max-width: 100vw;
  padding: var(--s-13) var(--s-3);
  overflow-x: hidden;
}

#api .api-container {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

/* ---- edge fades (left/right + top/bottom) ---- */
#api .api-fade-x,
#api .api-fade-y {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
#api .api-fade-x::before,
#api .api-fade-x::after,
#api .api-fade-y::before,
#api .api-fade-y::after {
  content: "";
  position: absolute;
}
#api .api-fade-x::before,
#api .api-fade-x::after {
  top: 0;
  bottom: 0;
  width: calc((100vw - var(--api-grid-w)) / 2);
}
#api .api-fade-x::before { left: 0; background: linear-gradient(90deg, var(--bg), rgba(7, 8, 10, 0)); }
#api .api-fade-x::after { right: 0; background: linear-gradient(270deg, var(--bg), rgba(7, 8, 10, 0)); }
#api .api-fade-y::before,
#api .api-fade-y::after { left: 0; right: 0; }
#api .api-fade-y::before { top: 0; height: 146px; background: linear-gradient(180deg, var(--bg), rgba(7, 8, 10, 0)); }
#api .api-fade-y::after { bottom: 0; height: 209px; background: linear-gradient(0deg, var(--bg), rgba(7, 8, 10, 0)); }

/* ---- the grid: 1px gaps over a line-coloured backdrop draw the blueprint lines ---- */
#api .api-grid {
  display: grid;
  gap: 1px;
  background: var(--api-line);
  grid-template-columns: 1fr repeat(var(--api-cols), calc(var(--api-grid-w) / var(--api-cols))) 1fr;
  grid-template-rows: 146px 48px auto auto 48px auto auto 48px auto auto auto 189px;
}
#api .api-grid > * {
  background-color: var(--bg);
  min-width: 0;
}
#api .api-spacer { min-height: 48px; }

/* explicit placement (desktop, 3 content columns) */
#api .api-title   { grid-area: 3 / 2; }
#api .api-desc    { grid-area: 4 / 2; }
#api .api-a-fig1  { grid-area: 3 / 3 / span 2 / span 2; }
#api .api-a-fig2  { grid-area: 6 / 2 / span 1 / span 2; }
#api .api-a-cross { grid-area: 6 / 4; }
#api .api-a-fig3  { grid-area: 7 / 2; }
#api .api-a-ui    { grid-area: 7 / 3; }
#api .api-a-fig4  { grid-area: 7 / 4; }
#api .api-a-batt  { grid-area: 9 / 2; }
#api .api-a-fig5  { grid-area: 9 / 3 / span 1 / span 2; }
#api .api-a-fig6  { grid-area: 10 / 2 / span 1 / span 2; }
#api .api-a-pub   { grid-area: 10 / 4; }
#api .api-a-start { grid-area: 11 / 3; }

/* ---- text cells ---- */
#api .api-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 355px;
  padding: var(--s-3);
}
#api .api-title,
#api .api-desc,
#api .api-a-start { min-height: 0; }

#api .api-col h3 {
  color: var(--white);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.1718;
  letter-spacing: 0.2px;
}
#api .api-col h4 {
  color: var(--white);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2px;
}
#api .api-col p {
  font-family: var(--mono-geist);
  color: var(--grey-300);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.3px;
}
#api .api-ext {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono-geist);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3px;
}
#api .api-a-start { justify-content: center; align-items: center; }

#api .api-arrow {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--grey-300);
  transition: color 0.3s, transform 0.3s;
}
#api .api-col-link > .api-arrow { align-self: flex-end; }
#api .api-col-link { transition: background-color 0.15s; }
#api .api-col-link:hover { background-color: var(--grey-800); }
#api .api-col-link:hover .api-arrow { color: var(--white); transform: translate(2px, -2px); }
#api .api-col-link:focus-visible { outline: 1px solid var(--grey-300); outline-offset: -1px; }

/* ---- figure cells (dotted blueprint paper) ---- */
#api .api-fig {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  background-color: var(--bg);
  background-image: radial-gradient(circle at center, var(--grey-500) 0.6px, transparent 0.9px);
  background-size: 17px 17px;
  background-position: -8.5px -8.5px;
  overflow: hidden;
}
#api .api-caption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 12px;
  background: #08090c;
  font-family: var(--mono-geist);
  font-size: 10px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.5px;
  color: var(--grey-300);
  text-transform: uppercase;
}
#api .api-fig > .api-svg { width: 100%; height: auto; overflow: visible; }
#api .api-square {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
#api .api-square > .api-svg { width: 100%; height: auto; overflow: visible; }
#api .api-svg path,
#api .api-svg circle { vector-effect: non-scaling-stroke; stroke-width: 1; stroke-linejoin: round; }
#api .api-svg g { transform-box: fill-box; }

/* ---------------- FIG 01 · exploded launcher ---------------- */
#api .api-f1-top,
#api .api-f1-bottom,
#api .api-f1-focus,
#api .api-f1-list {
  transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
}
#api .api-f1-top    { transform: translateY(55px); }
#api .api-f1-bottom { transform: translateY(-37px); }
#api .api-f1-focus  { transform: translate(2px, 12px); transition-duration: 1s; }
#api .is-active .api-f1-top,
#api .is-active .api-f1-bottom,
#api .is-active .api-f1-focus { transform: none; }
#api .api-fig1.is-active:hover .api-f1-top    { transform: translateY(-10px); }
#api .api-fig1.is-active:hover .api-f1-focus  { transform: translateY(-5px); }
#api .api-fig1.is-active:hover .api-f1-bottom { transform: translateY(8px); }
#api .api-fig1.is-active:hover .api-f1-list   { transform: translateY(0); }
#api .api-f1-label {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s, transform 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
}
#api .api-f1-label.is-search   { transition-delay: 0.65s; }
#api .api-f1-label.is-selected { transition-delay: 0.85s; }
#api .api-f1-label.is-list     { transition-delay: 1s; transform: translateY(-20px); }
#api .is-active .api-f1-label { opacity: 1; transform: none; }
#api .api-f1-label text {
  font-family: var(--mono-geist);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.6px;
  fill: #737477;
}
#api .api-lead { fill: none; stroke: #45464a; }
#api .api-lead-dot { fill: #6a6b6f; stroke: none; }

/* ---------------- FIG 02 · retro computer ---------------- */
#api .api-f2-screen { opacity: 0; }
#api .api-f2-logo { opacity: 0; }
#api .api-fig2.is-active .api-f2-screen { animation: api-crt-boot 1.5s 1s forwards; }
#api .api-fig2.is-active .api-f2-logo { opacity: 1; transition: opacity 0.5s 2s; }
#api .api-f2-led { transition: fill 0.4s; }
#api .api-fig2.is-active .api-f2-led { animation: api-led 2.8s ease-in-out 1s infinite; }
#api .api-fig2:hover .api-f2-screen { filter: brightness(1.25); }
@keyframes api-crt-boot {
  0% { opacity: 0; }
  8% { opacity: 0.9; }
  14% { opacity: 0.1; }
  24% { opacity: 1; }
  30% { opacity: 0.35; }
  45% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes api-led { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------------- FIG 03 · checkbox / radio pieces ---------------- */
#api .api-f3-item {
  --f3-side: #07080a;
  --f3-top: #0b0c0e;
  --f3-stroke: #545454;
  --f3-ind-top: #181a1e;
  --f3-ind-body: #0f1013;
}
#api .api-f3-item.is-on {
  --f3-side: #02193b;
  --f3-top: #01204d;
  --f3-stroke: #1d4bc4;
  --f3-ind-top: #63a1ff;
  --f3-ind-body: #2e6fcf;
}
#api .api-fig3 path { transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out; }
#api .api-f3-ind {
  transform-origin: 50% 50%;
  transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#api .api-f3-item:not(.is-on) .api-f3-ind { opacity: 0; transform: scale(0); }

/* ---------------- FIG 04 · toggle ---------------- */
#api .api-f4-toggle {
  --f4-base: #02193b;
  --f4-top: #021d48;
  --f4-stroke: #1d4bc4;
  --f4-ind-top: #63a1ff;
  --f4-ind-body: #2e6fcf;
  --f4-ind-stroke: #1d4bc4;
}
#api .api-f4-toggle.is-off {
  --f4-base: #07080a;
  --f4-top: #0b0c0f;
  --f4-stroke: #545454;
  --f4-ind-top: #1b1c20;
  --f4-ind-body: #0f1013;
  --f4-ind-stroke: #545454;
}
#api .api-fig4 path { transition: fill 0.25s ease-in-out, stroke 0.25s ease-in-out; }
#api .api-f4-knob { transition: transform 1.2s cubic-bezier(0.075, 0.82, 0.165, 1); }
#api .api-f4-toggle.is-off .api-f4-knob { transform: translate(-67.5px, -39px); }

/* ---------------- FIG 05 · battery charger ---------------- */
#api .api-fig5 { --led-fill: transparent; --led-stroke: #545454; }
#api .api-f5-batt {
  transform: translateY(-80px);
  transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#api .api-fig5.is-active .api-f5-batt { transform: none; }
#api .api-fig5.is-active:hover .api-f5-batt { transform: translateY(-10px); }
#api .api-f5-led { transition: fill 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), stroke 0.2s; transition-delay: calc(0.9s + var(--i, 0) * 0.12s); }
#api .api-fig5.is-active { --led-fill: #63a1ff; --led-stroke: #0c2c76; }
#api .api-fig5.is-active .api-f5-led { animation: api-led 2.4s ease-in-out infinite; animation-delay: calc(1.6s + var(--i, 0) * 0.3s); }

/* ---------------- FIG 06 · floppy disk ---------------- */
#api .api-f6-disc {
  transform: translateY(63px);
  transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#api .api-fig6.is-active .api-f6-disc { transform: none; animation: api-float 3s ease-in-out 1.5s infinite; }
@keyframes api-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* looping animations only run while the figure is on screen */
#api .api-fig:not(.is-onscreen) * { animation-play-state: paused !important; }

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  #api .api-svg *,
  #api .api-svg { transition: none !important; animation: none !important; }
  #api .api-f1-top, #api .api-f1-bottom, #api .api-f1-focus, #api .api-f1-label,
  #api .api-f5-batt, #api .api-f6-disc { transform: none !important; opacity: 1; }
  #api .api-f2-screen, #api .api-f2-logo { opacity: 1; }
  #api .api-fig5 { --led-fill: #63a1ff; --led-stroke: #0c2c76; }
}

/* ---------------- tablet: 2 columns ---------------- */
@media (max-width: 1199px) {
  #api { --api-cols: 2; }
  #api .api-grid {
    grid-template-columns: 1fr repeat(2, calc(var(--api-grid-w) / 2)) 1fr;
    grid-template-rows: 96px auto auto auto auto auto auto auto 120px;
  }
  #api .api-spacer { display: none; }
  #api .api-grid::before,
  #api .api-grid::after { content: ""; background: var(--bg); }
  #api .api-grid::before { grid-area: 1 / 1 / span 1 / span 4; }
  #api .api-grid::after { grid-area: 9 / 1 / span 1 / span 4; }
  #api .api-a-fig1  { grid-area: 2 / 2 / span 1 / span 2; }
  #api .api-title   { grid-area: 3 / 2; }
  #api .api-desc    { grid-area: 3 / 3; }
  #api .api-a-fig2  { grid-area: 4 / 2; }
  #api .api-a-cross { grid-area: 4 / 3; }
  #api .api-a-fig3  { display: none; }
  #api .api-a-ui    { grid-area: 5 / 2; }
  #api .api-a-fig4  { grid-area: 5 / 3; }
  #api .api-a-batt  { grid-area: 6 / 2; }
  #api .api-a-fig5  { grid-area: 6 / 3; }
  #api .api-a-fig6  { grid-area: 7 / 2; }
  #api .api-a-pub   { grid-area: 7 / 3; }
  #api .api-a-start { grid-area: 8 / 2 / span 1 / span 2; }
  #api .api-fig { padding: 40px; }
}

/* ---------------- phone: single column ---------------- */
@media (max-width: 783px) {
  #api .api-wrap { padding: var(--s-12) var(--s-2); }
  #api .api-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  #api .api-grid::before,
  #api .api-grid::after { display: none; }
  #api .api-fade-x { display: none; }
  #api .api-fade-y::before { height: 48px; }
  #api .api-fade-y::after { height: 64px; }
  #api .api-grid > * { grid-area: auto !important; }
  #api .api-title   { order: 1; padding-top: 56px; }
  #api .api-desc    { order: 2; }
  #api .api-a-fig1  { order: 3; }
  #api .api-a-fig2  { order: 4; }
  #api .api-a-cross { order: 5; }
  #api .api-a-fig4  { order: 6; }
  #api .api-a-ui    { order: 7; }
  #api .api-a-fig6  { order: 8; }
  #api .api-a-pub   { order: 9; }
  #api .api-a-start { order: 10; padding-bottom: 72px; }
  #api .api-a-fig5, #api .api-a-batt { display: none; }
  #api .api-col { min-height: 0; gap: var(--s-3); }
  #api .api-col-link:not(.api-desc):not(.api-a-start) { min-height: 260px; }
  #api .api-col h3 { font-size: 40px; }
  #api .api-col h4 { font-size: 20px; }
  #api .api-fig { padding: 32px 20px; }
  #api .api-square { max-width: 300px; }
}