/* Interactive ink. No resting artwork, layout, or text is changed. */
:root { --ink-lens-size: 224px; }
.ink-motion {
  display: inline-flex; align-items: center; min-height: 44px;
  border: 0; padding: 0; margin-top: 6px; background: transparent;
  color: inherit; font: 11px/1.5 var(--meta); text-decoration: underline;
  text-underline-offset: 4px; cursor: pointer;
}
.keep-room-footer .ink-motion { display: flex; }

/* Buildings develop upward through an ordered ink screen. Objects resolve as checks. */
.ink-ready.ink-awake > :is(.color-art, .keep-color) {
  opacity: 1 !important;
  transition: none !important;
  mask-image: var(--ink-rise-mask);
  mask-size: 32px 300%;
  mask-repeat: repeat-x;
  mask-position: 0 100%;
  animation: ink-develop 640ms cubic-bezier(.16, 1, .3, 1) both;
}
.world-scene .object.ink-ready.ink-awake > .color-art {
  mask-size: 8px 8px;
  mask-repeat: repeat;
  animation: ink-resolve 320ms step-end both;
}
@keyframes ink-develop {
  from { mask-position: 0 0; }
  to { mask-position: 0 100%; }
}
@keyframes ink-resolve {
  0% { mask-image: var(--ink-step-0); }
  12.5% { mask-image: var(--ink-step-1); }
  25% { mask-image: var(--ink-step-2); }
  37.5% { mask-image: var(--ink-step-3); }
  50% { mask-image: var(--ink-step-4); }
  62.5% { mask-image: var(--ink-step-5); }
  75% { mask-image: var(--ink-step-6); }
  87.5% { mask-image: var(--ink-step-7); }
  100% { mask-image: none; }
}

/* A local color window keeps the surrounding photograph in its own dither. */
@media (hover: hover) and (pointer: fine) {
  .ink-lens:not(.clear):not([data-reveal-manual]):not(:focus-visible) > :is(.keep-dither,.keep-sticker-dither) {
    opacity: 1 !important;
    transition: none !important;
    mask-image: var(--ink-lens-mask), linear-gradient(#fff, #fff);
    mask-size: var(--ink-lens-size) var(--ink-lens-size), 100% 100%;
    mask-repeat: no-repeat;
    mask-position: calc(var(--ink-x) - 112px) calc(var(--ink-y) - 112px), 0 0;
    mask-composite: exclude;
  }
  :is(.pv,.row-preview).ink-lens:not(.clear):not([data-reveal-manual]):not(:focus-visible) > img.colour {
    opacity: 1 !important;
    transition: none !important;
    mask-image: var(--ink-lens-mask);
    mask-size: var(--ink-lens-size) var(--ink-lens-size);
    mask-repeat: no-repeat;
    mask-position: calc(var(--ink-x) - 112px) calc(var(--ink-y) - 112px);
  }
}
.pv.ink-pinned.clear > img.colour {
  mask-size: 8px 8px;
  mask-repeat: repeat;
  animation: ink-resolve 240ms step-end both;
}
.keep-photo.ink-pinned.clear > :is(.keep-dither,.keep-sticker-dither) {
  opacity: 1 !important;
  mask-size: 8px 8px;
  mask-repeat: repeat;
  animation: ink-unprint 240ms step-end both;
}
@keyframes ink-unprint {
  0% { mask-image: none; }
  12.5% { mask-image: var(--ink-step-7); }
  25% { mask-image: var(--ink-step-6); }
  37.5% { mask-image: var(--ink-step-5); }
  50% { mask-image: var(--ink-step-4); }
  62.5% { mask-image: var(--ink-step-3); }
  75% { mask-image: var(--ink-step-2); }
  87.5% { mask-image: var(--ink-step-1); }
  100% { mask-image: var(--ink-step-0); }
}

/* Quiet ink tracks sit in the existing whitespace, outside the lettering. */
:where(.work-list a, .room-index a, .register .row > a, .chips .btn,
  .angles button, .worlds button, .obj-switch button, .keep-back, .topbar a, .map-footer a, .wfoot .back a, .filterbar button, .city-header button, .route-bar button, .view-tools button, #print-index > a) {
  position: relative;
  --ink-track-color: currentColor;
}
:where(.work-list a, .room-index a, .register .row > a, .chips .btn,
  .angles button, .worlds button, .obj-switch button, .keep-back, .topbar a, .map-footer a, .wfoot .back a, .filterbar button, .city-header button, .route-bar button, .view-tools button, #print-index > a)::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  pointer-events: none;
  background: repeating-conic-gradient(var(--ink-track-color) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 220ms cubic-bezier(.16, 1, .3, 1);
}
.work-list li:nth-child(even) a::after, .room-index a:nth-child(even)::after {
  background-size: 2px 2px;
}
:where(.work-list a, .room-index a, .register .row > a, .chips .btn,
  .angles button, .worlds button, .obj-switch button, .keep-back, .topbar a, .map-footer a, .wfoot .back a, .filterbar button, .city-header button, .route-bar button, .view-tools button, #print-index > a):focus-visible::after {
  clip-path: inset(0);
}
@media (hover: hover) and (pointer: fine) {
  :where(.work-list a, .room-index a, .register .row > a, .chips .btn,
    .angles button, .worlds button, .obj-switch button, .keep-back, .topbar a, .map-footer a, .wfoot .back a, .filterbar button, .city-header button, .route-bar button, .view-tools button, #print-index > a):hover::after {
    clip-path: inset(0);
  }
}
:where(.chips .btn, .angles button, .worlds button, .obj-switch button)[aria-pressed="true"]::after {
  clip-path: inset(0);
}

/* Pause and reduced motion keep instant, complete color feedback. */
body.ink-still .ink-ready.ink-awake > :is(.color-art, .keep-color),
body.ink-still .pv.ink-pinned.clear > img.colour {
  animation: none !important;
  mask-image: none !important;
}
body.ink-still .keep-photo.ink-pinned.clear > :is(.keep-dither,.keep-sticker-dither) {
  animation: none;
  opacity: 0 !important;
}
body.ink-still :is(.color-art, .keep-color, .keep-dither, .keep-sticker-dither, img.colour) {
  transition: none !important;
}
body.ink-still :is(.work-list a, .room-index a, .register .row > a,
  .chips .btn, .angles button, .worlds button, .obj-switch button, .keep-back, .topbar a, .map-footer a, .wfoot .back a, .filterbar button, .city-header button, .route-bar button, .view-tools button, #print-index > a)::after {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .ink-ready.ink-awake > :is(.color-art, .keep-color), .pv.ink-pinned.clear > img.colour {
    animation: none !important;
    mask-image: none !important;
  }
  .keep-photo.ink-pinned.clear > :is(.keep-dither,.keep-sticker-dither) { animation: none !important; opacity: 0 !important; }
  :is(.work-list a, .room-index a, .register .row > a,
    .chips .btn, .angles button, .worlds button, .obj-switch button, .keep-back, .topbar a, .map-footer a, .wfoot .back a, .filterbar button, .city-header button, .route-bar button, .view-tools button, #print-index > a)::after { transition: none; }
}

/* Local ink development continues as the visitor explores a surface. */
@media (hover:hover) and (pointer:fine) {
  .ink-ready.ink-awake.ink-brush > :is(.color-art,.keep-color) {
    animation:none; mask-image:var(--ink-lens-mask),linear-gradient(#fff5,#fff5);
    mask-size:224px 224px,100% 100%; mask-repeat:no-repeat;
    mask-position:calc(var(--ink-x) - 112px) calc(var(--ink-y) - 112px),0 0;mask-composite:add;
  }
  .row-preview.ink-lens > img.colour {opacity:1!important;}
}
body.ink-still .ink-brush > :is(.color-art,.keep-color) {mask-image:none!important;}
@media(prefers-reduced-motion:reduce){.ink-brush > :is(.color-art,.keep-color){mask-image:none!important;}}