/* Decorative ink stays behind text and below every opaque action/header bar.
   Never put transform/filter/will-change on the app, main, or bar ancestors. */
.ink-motion-layer {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ink-motion-frame { position: absolute; z-index: -1; }
.ink-motion-viewport { position: fixed; z-index: 1; }
.ink-motion-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Equivalent to the approved .93 center / .12 edge paper scrim, without
     painting an opaque paper layer over the live UI. Max center ink = .0595. */
  -webkit-mask-image: linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.07) 31%,rgba(0,0,0,.07) 69%,rgba(0,0,0,.88));
  mask-image: linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.07) 31%,rgba(0,0,0,.07) 69%,rgba(0,0,0,.88));
}
.app.ink-motion-active { isolation: isolate; }
.app > .ink-motion-frame { top: calc(var(--header-h) + var(--safe-top)); }
.app.ink-motion-active #panel-focus .home-study-stage { background: transparent; }
@media (min-width: 960px) {
  .app > .ink-motion-frame { left: var(--rail-w); }
  .app.ink-motion-active #panel-focus .home-study-primary { background: transparent; }
}
.ink-motion-fading > .ink-motion-canvas {
  animation: ink-motion-fade 4500ms cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes ink-motion-fade { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ink-motion-layer { display: none; }
  .ink-motion-fading > .ink-motion-canvas { animation: none; }
}