/* Progressive decoration only: all text, links and media remain visible without JS. */
.sr-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.sr-counter-number { font-variant-numeric: tabular-nums; }
.sr-count-value { display: inline-block; min-width: 4.5ch; }

@supports (translate: 0 1px) {
  @media (prefers-reduced-motion: no-preference) {
    #main .sr-enter-once {
      animation: sr-small-entrance 650ms cubic-bezier(.2, .65, .25, 1) both;
    }
    /* Existing transforms (book rotations, sketches, etc.) remain untouched. */
    #main .marker.sr-marker-once {
      background-color: transparent;
      background-image: linear-gradient(var(--sr-marker-paint), var(--sr-marker-paint));
      background-position: left center;
      background-repeat: no-repeat;
      animation: sr-paint-in 800ms cubic-bezier(.25, .55, .25, 1) both;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
    #main .pink-underline.sr-underline-once {
      background-position: left top;
      background-repeat: no-repeat;
      animation: sr-paint-in 820ms cubic-bezier(.25, .55, .25, 1) both;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
    #main .text-button.sr-link-once {
      border-bottom-color: transparent;
      background-image: linear-gradient(currentColor, currentColor);
      background-position: left bottom;
      background-repeat: no-repeat;
      animation: sr-link-accent 1250ms ease-out both;
    }
    #main .idea-sketch-drawing > .sr-idea-node-once {
      animation: sr-idea-nudge 1150ms var(--sr-node-delay, 0ms) ease-in-out both;
    }
  }
}
@keyframes sr-small-entrance {
  from { translate: 0 12px; }
  to { translate: 0 0; }
}
@keyframes sr-paint-in {
  from { background-size: 0% 100%; }
  to { background-size: 100% 100%; }
}
@keyframes sr-link-accent {
  0% { background-size: 0% 2px; color: var(--ink); }
  38% { background-size: 100% 2px; color: #24704f; }
  72% { background-size: 100% 2px; color: #24704f; }
  100% { background-size: 100% 2px; color: var(--ink); }
}
@keyframes sr-idea-nudge {
  0%, 100% { translate: 0 0; }
  35% { translate: var(--sr-node-x, 4px) -3px; }
  70% { translate: 0 1px; }
}
@media (prefers-reduced-motion: reduce) {
  #main .sr-enter-once,
  #main .sr-marker-once,
  #main .sr-underline-once,
  #main .sr-link-once,
  #main .sr-idea-node-once { animation: none !important; }
}