/* ONLYDROP v49 — No mouse-driven visual effects + genuine all-motion switch.
   This file deliberately loads last to win against legacy !important rules.
   ON retains the original decorative animation system without the custom cursor.
   OFF removes animations and transitions, including CSS animations with fill modes.
   Static perspective, collage textures, color and geometry remain unchanged. */

/* Always in view regardless of page / collapsed floating header. */
html body #motionToggle {
  position: fixed !important;
  inset: auto max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) auto !important;
  z-index: 9999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 12px 17px !important;
  border: 2px solid var(--od-acid, #c8ff48) !important;
  border-radius: 4px !important;
  background: #0c1116 !important;
  color: #f6f1e8 !important;
  font: 700 11px/1.2 'IBM Plex Mono', monospace !important;
  letter-spacing: .065em !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .85) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  rotate: 0deg !important;
  transform: none !important;
  scale: 1 !important;
  translate: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  white-space: nowrap;
}
html body #motionToggle .motion-toggle-tag {
  font: 700 9px/1 'IBM Plex Mono', monospace;
  padding: 3px 4px;
  color: #090c10;
  background: var(--od-acid, #c8ff48);
}
html body #motionToggle .motion-indicator {
  width: 9px;
  height: 9px;
  min-width: 9px;
  background: var(--od-acid, #c8ff48);
  box-shadow: none !important;
  animation: none !important;
}
html body #motionToggle[aria-pressed="false"] {
  border-color: #fa92ac !important;
  color: #fff0f4 !important;
}
html body #motionToggle[aria-pressed="false"] .motion-indicator {
  background: #fa92ac !important;
}
html body #motionToggle[aria-pressed="false"] .motion-toggle-tag {
  background: #fa92ac;
}
html body #motionToggle:hover {
  background: #192026 !important;
  transform: none !important;
  translate: none !important;
}
html body #motionToggle:focus-visible {
  outline: 3px solid #f6f1e8 !important;
  outline-offset: 4px;
}
@media (max-width: 560px) {
  html body #motionToggle {
    inset: auto max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) auto !important;
    min-height: 45px !important;
    padding: 10px 12px !important;
    font-size: 9px !important;
  }
}

/* No cursor replacement, hovering distortions or mouse-triggered card lift.
   The default native pointer and focus affordances still work. */
html, html * { cursor: auto; }
html a, html button, html [role="button"], html summary { cursor: pointer; }
#hero3d { cursor: auto !important; }
#home .category-menu > a.category-card:hover {
  rotate: 0deg !important;
  transform: rotate(var(--tile-tilt, 0deg)) !important;
  filter: none !important;
}
#home .category-card:hover .category-arrow { transform: none !important; }

/* Completely OFF: keep normal static layout/perspective, remove all motion.
   Two IDs in #views #home make these rules stronger than old declarations. */
html.motion-paused { scroll-behavior: auto !important; }
html.motion-paused body *,
html.motion-paused body *::before,
html.motion-paused body *::after,
html.motion-paused body #views *,
html.motion-paused body #views *::before,
html.motion-paused body #views *::after,
html.motion-paused body #projectDialog *,
html.motion-paused body #projectDialog *::before,
html.motion-paused body #projectDialog *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.motion-paused body #motionToggle,
html.motion-paused body #motionToggle * {
  animation: none !important;
  transition: none !important;
}
html.motion-paused #home .category-slide,
html.motion-paused #home .category-slide *,
html.motion-paused #home .category-slide *::before,
html.motion-paused #home .category-slide *::after {
  animation: none !important;
  transition: none !important;
}
/* Hide transient route FX if an active transition was interrupted. */
html.motion-paused .p5-fx,
html.motion-paused .p5-title,
html.motion-paused .p5-shard,
html.motion-paused .p5-spatial-grid { display: none !important; }

/* Legacy title and slider rules have multiple classes and !important declarations.
   The double-ID selectors here ensure the OFF state wins everywhere in a panel. */
html.motion-paused body #views #home *,
html.motion-paused body #views #home *::before,
html.motion-paused body #views #home *::after,
html.motion-paused body #views #work *,
html.motion-paused body #views #work *::before,
html.motion-paused body #views #work *::after,
html.motion-paused body #views #about *,
html.motion-paused body #views #about *::before,
html.motion-paused body #views #about *::after,
html.motion-paused body #views #contact *,
html.motion-paused body #views #contact *::before,
html.motion-paused body #views #contact *::after {
  animation: none !important;
  transition: none !important;
}