/* Motion: the duration and easing tokens, the shared keyframes, the theme
 * cross-fade, and the one reduced-motion rule for the whole page.
 *
 * The rules (clean-theme plan, section 5): animate only transform,
 * opacity, background-color, color, border-color, box-shadow, fill, stroke
 * and outline-color; never `all` and never a layout property; every
 * transition and animation names a duration token and an easing token;
 * nothing exceeds --duration-slow; nothing in clean moves on its own; hover
 * effects sit under @media (hover: hover). tests/css-helpers.js
 * motionProblems() checks an app's sheets against them.
 *
 * This is the one sheet allowed literal durations. Retro's twinkle, blink
 * and rainbow stay as they are in each app's retro.css. */

:root {
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 320ms;
  /* The loading pulse is the one repeating animation; it runs only while
     something is loading (.wp-loading below). */
  --duration-pulse: 1.2s;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* A view becoming visible: apply to the view that just lost `hidden`,
   e.g. `.view:not([hidden]) { animation: wp-enter var(--duration) var(--ease-out); }` */
@keyframes wp-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Dropdown panels and menus, from transform-origin: top. */
@keyframes wp-pop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes wp-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes wp-toast-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* The scrim behind a dialog. */
@keyframes wp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* A dialog on a wide screen, and the same dialog as a bottom sheet. */
@keyframes wp-dialog-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes wp-sheet-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* The site nav's phone menu: fades and slides down 6px. */
@keyframes wp-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes wp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* A loading placeholder. Remove the class when the content arrives. */
.wp-loading {
  animation: wp-pulse var(--duration-pulse) var(--ease-standard) infinite;
}

/* The theme or scheme cross-fade. theme.js puts the class on <html> for
   300ms around a change and takes it off again, so no global transition
   lingers. */
html.wp-theme-changing,
html.wp-theme-changing *,
html.wp-theme-changing *::before,
html.wp-theme-changing *::after {
  transition:
    background-color var(--duration) var(--ease-standard),
    color var(--duration) var(--ease-standard),
    border-color var(--duration) var(--ease-standard),
    fill var(--duration) var(--ease-standard),
    stroke var(--duration) var(--ease-standard);
}

/* Reduced motion, once, for the whole page: everything that would move
   arrives at once in its final place. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}