/* ==========================================================================
   Virtuant AI — services
   A sticky index beside ten service records, each with its own mechanism.
   ========================================================================== */

/* ================================================================ intro == */

.svc-intro {
  position: relative;
  padding-block: clamp(9rem, 20vh, 14rem) clamp(4rem, 8vh, 6rem);
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(59, 116, 255, .2), transparent 62%),
    radial-gradient(50% 60% at 0% 60%, rgba(226, 67, 216, .1), transparent 65%),
    var(--ink-950);
}

.svc-intro__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.svc-intro h1 { margin: 1.6rem 0 1.8rem; }
.svc-intro__meta {
  display: grid;
  gap: 1rem;
  padding-bottom: .6rem;
  font-size: var(--t-sm);
  color: var(--paper-dim);
}

.svc-intro__meta b {
  display: block;
  font-family: var(--f-display);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 860px) {
  .svc-intro__grid { grid-template-columns: 1fr; align-items: start; }
}

/* =============================================================== layout == */

.svc-body { background: var(--ink-900); padding-bottom: clamp(4rem, 9vh, 7rem); }

.svc-layout {
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Sticky index ------------------------------------------------------------ */

.svc-index {
  position: sticky;
  top: 7.5rem;
  padding-top: clamp(4rem, 9vh, 7rem);
}

.svc-index h2 {
  margin-bottom: 1.2rem;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.svc-index ol { display: grid; gap: .1rem; }

.svc-index a {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  font-size: .8125rem;
  color: var(--paper-faint);
  transition: color .3s linear;
}

.svc-index a span { font-size: var(--t-xs); letter-spacing: .08em; }
.svc-index a:hover { color: var(--paper-dim); }

.svc-index a.is-current { color: var(--paper); }
.svc-index a.is-current span { color: var(--cyan); }

@media (max-width: 980px) {
  .svc-layout { grid-template-columns: minmax(0, 1fr); }
  .svc-index { display: none; }
}

/* ============================================================== records == */

.svc-list { display: grid; grid-template-columns: minmax(0, 1fr); }

.service {
  padding-block: clamp(4rem, 9vh, 7rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: 6rem;
}

.svc-list > .service:first-child { border-top: 0; }

.service__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.service__num {
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--paper-faint);
}

.service__icon {
  width: 22px;
  height: 22px;
  align-self: center;
  color: var(--cyan);
}

.service h3 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: -0.035em;
}

.service__lede {
  max-width: 62ch;
  font-size: var(--t-md);
  color: var(--paper-dim);
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}

/* Visual — either a prepared image or a coded mechanism ------------------- */

.service__visual {
  position: relative;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(59, 116, 255, .13), transparent 66%),
    var(--ink-850);
  overflow: hidden;
}

.service__visual img { width: 100%; }

/* Explanation triple ------------------------------------------------------ */

.service__facets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 2.6rem);
}

.service__facets h4 {
  margin-bottom: .55rem;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.service__facets p { font-size: var(--t-sm); color: var(--paper-dim); }

/* Capability list --------------------------------------------------------- */

.service__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .1rem 2rem;
  margin-bottom: 2rem;
}

.service__features li {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--paper-dim);
}

.service__features li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--spectrum);
  translate: 0 -2px;
}

/* ========================================================== mechanisms ==
   Pure SVG diagrams. Strokes draw in and a signal travels the path once
   the record scrolls into view.
   ---------------------------------------------------------------------- */

.mech {
  display: block;
  width: 100%;
  height: auto;
  padding: clamp(1rem, 2.5vw, 2rem);
}

/* Below tablet the diagram would shrink its labels past legibility, so it
   keeps its natural size and scrolls inside the panel instead. */
@media (max-width: 720px) {
  .service__visual { overflow-x: auto; overscroll-behavior-x: contain; }
  .mech { min-width: 520px; }
}

.mech text {
  font-family: var(--f-body);
  font-size: 11px;
  fill: var(--paper-dim);
  stroke: none;
}

.mech .mech-title { font-size: 12px; fill: var(--paper); font-weight: 500; }
.mech .mech-sub { font-size: 9.5px; fill: var(--paper-faint); }

.mech .box {
  fill: rgba(146, 172, 255, .05);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.mech .box--live {
  fill: rgba(35, 224, 255, .08);
  stroke: rgba(35, 224, 255, .5);
}

.mech .box--out {
  fill: rgba(226, 67, 216, .07);
  stroke: rgba(226, 67, 216, .42);
}

.mech .wire {
  stroke: var(--line-strong);
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
}

.is-in .mech .wire {
  animation: wire-draw 1.1s var(--e-out) forwards;
  animation-delay: calc(var(--d, 0) * 1s);
}

@keyframes wire-draw { to { stroke-dashoffset: 0; } }

.mech .pulse {
  fill: var(--cyan);
  stroke: none;
  opacity: 0;
}

.is-in .mech .pulse {
  animation: pulse-run 2.6s var(--e-inout) infinite;
  animation-delay: calc(1s + var(--d, 0) * 1s);
}

@keyframes pulse-run {
  0% { opacity: 0; offset-distance: 0%; }
  12%, 78% { opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; }
}

.mech .glyph { stroke: var(--cyan); stroke-width: 1.4; fill: none; }

.mech .fade-step { opacity: 0; }

.is-in .mech .fade-step {
  animation: step-in .7s var(--e-out) forwards;
  animation-delay: calc(.25s + var(--d, 0) * 1s);
}

@keyframes step-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================== closing == */

.svc-close {
  position: relative;
  padding-block: clamp(5rem, 11vh, 8rem);
  text-align: center;
  background:
    radial-gradient(70% 90% at 50% 110%, rgba(122, 75, 240, .26), transparent 65%),
    var(--ink-950);
}

.svc-close__inner { display: grid; justify-items: center; gap: 1.3rem; }
.svc-close .lede { text-align: center; }

.svc-close__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-top: .8rem;
}

@media (prefers-reduced-motion: reduce) {
  .mech .wire { stroke-dashoffset: 0; animation: none; }
  .mech .pulse { display: none; }
  .mech .fade-step { opacity: 1; animation: none; }
}