/* Pointer effects are opt-in at the device and respect the system motion setting. */
.paw-switch[hidden], #trail-toggle[hidden], [data-paw-toggle][hidden] {
  display: none !important;
}
.paw-switch {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 42px;
  block-size: 42px;
  padding: 0;
  color: var(--forest, #414d36);
  background: transparent;
  border: 1px solid #b3b6a3;
  border-radius: 50%;
}
.paw-switch .paw-icon { inline-size: 19px; block-size: 19px; }
.paw-switch[aria-pressed="true"] { background: #e5e8d8; border-color: #a2aa90; }
.paw-switch:hover { background: #f0e4d5; border-color: #a66a50; }
.paw-switch:focus-visible { outline: 3px solid var(--terra, #a04b34); outline-offset: 4px; }

@media (any-hover: hover) and (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.paw-mode, html.paw-mode body {
    cursor: url('assets/illustrations/paw-cursor.png') 7 6, auto;
    cursor: -webkit-image-set(url('assets/illustrations/paw-cursor.png') 1x, url('assets/illustrations/paw-cursor@2x.png') 2x) 7 6, auto;
    cursor: image-set(url('assets/illustrations/paw-cursor.png') 1x, url('assets/illustrations/paw-cursor@2x.png') 2x) 7 6, auto;
  }
  html.paw-mode :is(a[href], button, summary, label[for]) { cursor: pointer; }
  html.paw-mode :is(form, dialog, iframe, [data-no-paw]) { cursor: auto; }
  html.paw-mode :is(input, textarea, [contenteditable="true"]) { cursor: text; }
  html.paw-mode :is(input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], input[type="file"], select) { cursor: pointer; }
  html.paw-mode :disabled { cursor: not-allowed; }

  /* Two sleepy breath marks appear beside the cat, without altering the logo file. */
  .paw-mode .masthead .brand { position: relative; }
  .paw-mode .masthead .brand::after {
    position: absolute;
    content: '';
    background: url('assets/illustrations/sleep-marks.svg') center / contain no-repeat;
    inline-size: 25px;
    block-size: 21px;
    inset-inline-start: 15px;
    inset-block-start: -9px;
    opacity: 0;
    pointer-events: none;
  }
  .paw-mode .masthead .brand:is(:hover, :focus-visible)::after {
    animation: titoto-cat-dozes 1.4s ease-out 1 both;
  }
}
.titoto-steps {
  position: fixed;
  z-index: 12;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.titoto-footprint {
  position: absolute;
  inset: 0 auto auto 0;
  width: 19px;
  height: 19px;
  background: #8c513d;
  -webkit-mask: url('assets/paw.svg') center / contain no-repeat;
  mask: url('assets/paw.svg') center / contain no-repeat;
  animation: titoto-step-fades 1.15s ease-out forwards;
}
@keyframes titoto-step-fades {
  0% { opacity: .58; }
  28% { opacity: .48; }
  100% { opacity: 0; }
}
@keyframes titoto-cat-dozes {
  0% { opacity: 0; transform: translate(-2px, 3px) rotate(-9deg); }
  30%, 60% { opacity: .9; }
  100% { opacity: 0; transform: translate(1px, -5px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .titoto-steps, .paw-switch, #trail-toggle, [data-paw-toggle] { display: none !important; }
}