/* fx-core.css · Effects Library core · owner: Lizzy East · all rights reserved */

/* SETTINGS. Every effect reads these, so one site can feel calm and the next bold
   without new code. Set them on :root, or on one element to change just that one. */
:root {
  --fx-dur: 700ms;
  --fx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fx-distance: 24px;
  --fx-stagger: 90ms;
}

/* Written per block by fx-core.js: a delay from data-fx-delay, and --fx-i, the
   block's place among those that arrived with it. Neither leaks into children. */
@property --fx-delay {
  syntax: "<time>";
  inherits: false;
  initial-value: 0ms;
}
@property --fx-i {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* THE REDUCED-MOTION SWITCH. When the device asks for less motion, or the page
   turns motion off (<html data-fx-motion="off">, mirrored by the core as
   html.fx-still), every effect drops to its unanimated style. In this library the
   unanimated style IS the finished look, so this is "end state, immediately".
   Each effect guards its own motion too; this is the net underneath. */
@media (prefers-reduced-motion: reduce) {
  [data-fx], [data-fx] *,
  [data-fx]::before, [data-fx]::after,
  [data-fx] *::before, [data-fx] *::after {
    transition: none !important;
    animation: none !important;
  }
}
html.fx-still [data-fx], html.fx-still [data-fx] *,
html.fx-still [data-fx]::before, html.fx-still [data-fx]::after,
html.fx-still [data-fx] *::before, html.fx-still [data-fx] *::after {
  transition: none !important;
  animation: none !important;
}