/* Card variants share the approved composition and copy. */
:root{--card-line:color-mix(in srgb,var(--ink) 25%,transparent);--machine-shade:rgba(0,0,0,.72);--machine-corner-max:48px}
.engine-machine,.engine-documents{display:none}
.engine-logo{display:block}

/* Large wordmark and the three operations as typography. */
[data-card="type"] .engine-orbit{display:none}
[data-card="type"] .engine-logo{width:92%;margin-top:7%}
[data-card="type"] .engine-steps{display:flex;flex-direction:column;gap:0;bottom:var(--gap-md);font-size:clamp(18px,2.1vw,34px);letter-spacing:-.04em}
[data-card="type"] .engine-steps span{border-top:var(--hairline) solid var(--card-line);padding:10px 0}

/* A document processor, kept inside the same card boundaries. */
[data-card="documents"] .engine-face{background:var(--surface);border:var(--hairline) solid var(--line);color:var(--ice)}
[data-card="documents"] .engine-orbit{display:none}
[data-card="documents"] .engine-documents{display:block;position:absolute;inset:34% 20% 19%;transform:rotate(-7deg)}
.engine-documents i{position:absolute;inset:0;border-radius:4px;background:var(--ice);box-shadow:var(--shadow)}
.engine-documents i:nth-child(1){transform:translate(16%,-10%) rotate(11deg);opacity:.65}
.engine-documents i:nth-child(2){transform:translate(8%,-4%) rotate(5deg);background:var(--paper)}
.engine-documents i:nth-child(3){background:var(--accent)}
.engine-documents i:nth-child(3):after{content:"";position:absolute;inset:22% 16%;background:repeating-linear-gradient(180deg,var(--ink) 0 3px,transparent 3px 18px);opacity:.24}
[data-card="documents"] .engine-steps{color:var(--ice)}

/* Only this choice turns the hero yellow. Other sections keep their dark base. */
[data-card="machine"] .hero{background:var(--accent);color:var(--ink)}
[data-card="machine"] .hero:before{display:none}
[data-card="machine"] .hero .descriptor,[data-card="machine"] .flow-canvas .node-caption{color:var(--ink)}
[data-card="machine"] .site-header{color:var(--ink)}
[data-card="machine"] .hero .cta{background:var(--ink);color:var(--accent)}
[data-card="machine"] .hero a:focus-visible,[data-card="machine"] .site-header a:focus-visible{outline-color:var(--ink)}
[data-card="machine"] .next-section{border-color:var(--card-line)}
[data-card="machine"] .flow-canvas .connections path{stroke:color-mix(in srgb,var(--ink) 45%,var(--accent))}
[data-card="machine"] .engine-face{background:var(--ink);color:var(--paper);isolation:isolate;padding:var(--gap-md)}
[data-card="machine"] .engine-face:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--machine-shade),transparent 38%,transparent 72%,var(--machine-shade))}
[data-card="machine"] .engine-machine{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:53% 56%;z-index:-2}
[data-card="machine"] .flow-canvas .engine{left:30%;top:9%;width:40%;height:82%}
[data-card="machine"] .flow-canvas .attachment{left:5%}
[data-card="machine"] .engine-logo{width:72%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:1}
[data-card="machine"] .engine-orbit{display:none}
[data-card="machine"] .engine-steps{color:var(--paper)}
/* The three operation labels on the machine card are parked for now; the markup stays. Delete this one rule to show them again. */
[data-card="machine"] .engine-steps{display:none}



@media(min-width:701px) and (max-width:1000px){
 [data-card="type"] .engine-steps{font-size:clamp(17px,2.1vw,24px)}
 [data-card="machine"] .engine-face{padding:var(--gap-sm)}
}
@media(max-width:700px){
 [data-card="type"] .engine-logo{width:75%;margin-top:0}
 [data-card="type"] .engine-steps{font-size:21px;left:var(--gap-sm);right:var(--gap-sm);bottom:var(--gap-sm)}
 [data-card="type"] .engine-steps span{padding:7px 0}
 [data-card="documents"] .engine-documents{inset:30% 27% 19%}
 [data-card="documents"] .engine-logo{width:57%}
 [data-card="machine"] .flow-canvas{height:1280px}
 [data-card="machine"] .flow-canvas .attachment{left:auto;right:0}
 [data-card="machine"] .flow-canvas .engine{left:0;top:30%;width:100%;height:30%}
 [data-card="machine"] .flow-canvas .result{top:65%}
 [data-card="machine"] .engine-logo{width:72%}
 [data-card="machine"] .engine-machine{object-position:53% 60%}
 [data-card="machine"] .engine-face{padding:var(--gap-sm)}
}

/* Keep the photographic poster beneath the video until playback really starts. */
.engine-video{opacity:0}
[data-machine-motion="playing"] .engine-video{opacity:1}
@media(prefers-reduced-motion:reduce){
 [data-machine-motion] .engine-video{opacity:0}
}

/* One pinned scene; the original monitoring nodes become its final surface. */
.machine-scene { position: relative; overflow: hidden; background: var(--accent); }
.machine-scene .hero { overflow: visible; }
.machine-scene .engine { z-index: 3; }
.machine-scene .engine-face {
  transform-origin: top left;
  background: var(--machine-destination);
  /* The corner radius grows with the face; dividing each axis by its own scale
     keeps the corners circular although the face scales unevenly. */
  border-radius: calc(var(--machine-corner, var(--radius)) / var(--machine-scale-x, 1)) / calc(var(--machine-corner, var(--radius)) / var(--machine-scale-y, 1));
  pointer-events: none;
}
.machine-scene .engine-face > *,
.machine-scene .engine-face:after,
.machine-scene .engine > .node-caption,
.machine-scene .engine > .port { opacity: var(--machine-detail-opacity, 1); }
/* The wordmark fades on its own schedule and undoes the uneven scale meanwhile. */
.machine-scene .engine-logo {
  opacity: var(--machine-logo-opacity, 1);
  transform: translate(-50%, -50%) scale(calc(var(--machine-scale-y, 1) / var(--machine-scale-x, 1)), 1);
}
.machine-scene .engine-video { opacity: 0; }
[data-machine-motion="playing"] .machine-scene .engine-video { opacity: var(--machine-detail-opacity, 1); }
.machine-scene .monitoring {
  position: relative;
  z-index: 4;
  margin-top: var(--scene-overlap);
  min-height: 100vh;
  pointer-events: none;
}
.machine-scene .monitoring > * { pointer-events: auto; }