/* v16 — a normal-flow material change, between the introduction and roadmap. */
.ink-transition {
  position:relative;
  isolation:isolate;
  height:clamp(360px,40vw,620px);
  overflow:clip;
  background:var(--navy);
  pointer-events:none;
  contain:paint;
}
.ink-transition-fallback,
.ink-transition-canvas,
.ink-transition-paper { position:absolute; inset:0; width:100%; height:100%; }
.ink-transition-fallback {
  background:linear-gradient(180deg,transparent 35%,var(--cream) 100%),
    url('assets/attua/cream-dither-edge.webp') center / 100% 100% no-repeat;
  mask-image:linear-gradient(180deg,transparent,#000 12%);
}
.ink-transition-canvas { display:block; opacity:0; image-rendering:pixelated; }
.ink-transition.is-rendered .ink-transition-canvas { opacity:1; }
.ink-transition.is-rendered .ink-transition-fallback { visibility:hidden; }
.ink-transition-paper {
  background:url('assets/attua/cotton-stock.webp') center 48% / cover no-repeat;
  opacity:.11;
  mix-blend-mode:multiply;
  mask-image:linear-gradient(180deg,transparent 5%,#000 35%,#000 76%,transparent);
}
.ink-transition + .approach::after {
  mask-image:linear-gradient(180deg,transparent,#000 150px);
}
@media(max-width:700px) {
  .ink-transition { height:clamp(250px,80vw,360px); }
  .ink-transition-paper { opacity:.09; }
}
@media(prefers-reduced-motion:reduce) {
  .ink-transition { height:clamp(200px,27vw,390px); }
}
@media print { .ink-transition { display:none; } }