:root {
  --ease-crate-out:    cubic-bezier(.215, .61, .355, 1);
  --ease-crate-in:     cubic-bezier(.55, .055, .675, .19);
  --ease-crate-io:     cubic-bezier(.645, .045, .355, 1);
  --ease-crate-spring: cubic-bezier(.34, 1.42, .64, 1);
  --duration-instant:  80ms;
  --duration-fast:     140ms;
  --duration-base:     200ms;
  --duration-slow:     320ms;

  --duration-normal:   var(--duration-base);

  --duration-short:    var(--duration-fast);
  --duration-default:  var(--duration-base);
  --duration-medium:   var(--duration-base);
  --duration-long:     var(--duration-slow);

  --duration-extended: 3s;
  --ease-out:          var(--ease-crate-out);
  --ease-out-slow:     var(--ease-crate-out);

  --motion-travel:      8px;
  --motion-travel-sm:   4px;
  --motion-scale-from:  .96;
}

@keyframes crate-in-fade  { from { opacity: 0; } to { opacity: 1; transform: none; } }
@keyframes crate-out-fade { from { opacity: 1; } to { opacity: 0; } }

@keyframes crate-in-pop   { from { opacity: 0; transform: scale(var(--motion-scale-from)); } to { opacity: 1; transform: none; } }
@keyframes crate-out-pop  { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(var(--motion-scale-from)); } }

@keyframes crate-in-up    { from { opacity: 0; transform: translateY(var(--motion-travel)); } to { opacity: 1; transform: none; } }
@keyframes crate-out-up   { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(var(--motion-travel)); } }

@keyframes crate-in-down  { from { opacity: 0; transform: translateY(calc(-1 * var(--motion-travel))); } to { opacity: 1; transform: none; } }
@keyframes crate-out-down { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(calc(-1 * var(--motion-travel))); } }

@keyframes crate-in-right { from { opacity: 0; transform: translateX(var(--motion-travel)); } to { opacity: 1; transform: none; } }
@keyframes crate-out-right { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(var(--motion-travel)); } }

@keyframes crate-in-left  { from { opacity: 0; transform: translateX(calc(-1 * var(--motion-travel))); } to { opacity: 1; transform: none; } }
@keyframes crate-out-left { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(calc(-1 * var(--motion-travel))); } }

@keyframes crate-sheet-in-right   { from { transform: translateX(100%); }  to { transform: none; } }
@keyframes crate-sheet-out-right  { from { transform: none; }              to { transform: translateX(100%); } }
@keyframes crate-sheet-in-left    { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes crate-sheet-out-left   { from { transform: none; }              to { transform: translateX(-100%); } }
@keyframes crate-sheet-in-bottom  { from { transform: translateY(100%); }  to { transform: none; } }
@keyframes crate-sheet-out-bottom { from { transform: none; }              to { transform: translateY(100%); } }

@keyframes crate-confirm-pop { from { transform: scale(.82); } to { transform: none; } }

[data-crate-motion][data-crate-state="enter"],
[data-crate-motion][data-crate-state="exit"] {
  animation-duration: var(--duration-base);
  animation-fill-mode: both;

  backface-visibility: hidden;
}
[data-crate-motion][data-crate-state="enter"] {
  animation-timing-function: var(--ease-crate-out);
}
[data-crate-motion][data-crate-state="exit"] {
  animation-timing-function: var(--ease-crate-in);
  animation-duration: var(--duration-fast);
}

[data-crate-motion="fade"][data-crate-state="enter"]  { animation-name: crate-in-fade; }
[data-crate-motion="fade"][data-crate-state="exit"]   { animation-name: crate-out-fade; }
[data-crate-motion="pop"][data-crate-state="enter"]   { animation-name: crate-in-pop; }
[data-crate-motion="pop"][data-crate-state="exit"]    { animation-name: crate-out-pop; }
[data-crate-motion="up"][data-crate-state="enter"]    { animation-name: crate-in-up; }
[data-crate-motion="up"][data-crate-state="exit"]     { animation-name: crate-out-up; }
[data-crate-motion="down"][data-crate-state="enter"]  { animation-name: crate-in-down; }
[data-crate-motion="down"][data-crate-state="exit"]   { animation-name: crate-out-down; }
[data-crate-motion="left"][data-crate-state="enter"]  { animation-name: crate-in-left; }
[data-crate-motion="left"][data-crate-state="exit"]   { animation-name: crate-out-left; }
[data-crate-motion="right"][data-crate-state="enter"] { animation-name: crate-in-right; }
[data-crate-motion="right"][data-crate-state="exit"]  { animation-name: crate-out-right; }

[data-crate-motion^="sheet-"][data-crate-state="enter"] { animation-duration: var(--duration-slow); }
[data-crate-motion^="sheet-"][data-crate-state="exit"]  { animation-duration: var(--duration-base); }
[data-crate-motion="sheet-right"][data-crate-state="enter"]  { animation-name: crate-sheet-in-right; }
[data-crate-motion="sheet-right"][data-crate-state="exit"]   { animation-name: crate-sheet-out-right; }
[data-crate-motion="sheet-left"][data-crate-state="enter"]   { animation-name: crate-sheet-in-left; }
[data-crate-motion="sheet-left"][data-crate-state="exit"]    { animation-name: crate-sheet-out-left; }
[data-crate-motion="sheet-bottom"][data-crate-state="enter"] { animation-name: crate-sheet-in-bottom; }
[data-crate-motion="sheet-bottom"][data-crate-state="exit"]  { animation-name: crate-sheet-out-bottom; }

.crate-motion-backdrop[data-crate-state="enter"] {
  animation: crate-in-fade var(--duration-base) var(--ease-crate-out) both;
}
.crate-motion-backdrop[data-crate-state="exit"] {
  animation: crate-out-fade var(--duration-fast) var(--ease-crate-in) both;
}

.crate-motion-dialog[data-crate-state="enter"] {
  animation: crate-in-pop var(--duration-base) var(--ease-crate-out) both;
}
.crate-motion-dialog[data-crate-state="exit"] {
  animation: crate-out-pop var(--duration-fast) var(--ease-crate-in) both;
}

@media (max-width: 639px) {
  .crate-motion-dialog--sheet[data-crate-state="enter"] {
    animation: crate-sheet-in-bottom var(--duration-slow) var(--ease-crate-out) both;
  }
  .crate-motion-dialog--sheet[data-crate-state="exit"] {
    animation: crate-sheet-out-bottom var(--duration-base) var(--ease-crate-in) both;
  }
}

.crate-motion-menu[data-crate-state="enter"] {
  animation: crate-in-down var(--duration-base) var(--ease-crate-out) both;
}
.crate-motion-menu[data-crate-state="exit"] {
  animation: crate-out-down var(--duration-fast) var(--ease-crate-in) both;
}

.crate-motion-toast[data-crate-state="enter"] {
  animation: crate-in-right var(--duration-base) var(--ease-crate-out) both;
}
.crate-motion-toast[data-crate-state="exit"] {
  animation: crate-out-right var(--duration-fast) var(--ease-crate-in) both;
}
@media (max-width: 639px) {
  .crate-motion-toast[data-crate-state="enter"] { animation-name: crate-in-up; }
  .crate-motion-toast[data-crate-state="exit"]  { animation-name: crate-out-up; }
}

.crate-motion-drawer-right[data-crate-state="enter"] { animation: crate-sheet-in-right   var(--duration-slow) var(--ease-crate-out) both; }
.crate-motion-drawer-right[data-crate-state="exit"]  { animation: crate-sheet-out-right  var(--duration-base) var(--ease-crate-in)  both; }
.crate-motion-drawer-left[data-crate-state="enter"]  { animation: crate-sheet-in-left    var(--duration-slow) var(--ease-crate-out) both; }
.crate-motion-drawer-left[data-crate-state="exit"]   { animation: crate-sheet-out-left   var(--duration-base) var(--ease-crate-in)  both; }
.crate-motion-sheet[data-crate-state="enter"]        { animation: crate-sheet-in-bottom  var(--duration-slow) var(--ease-crate-out) both; }
.crate-motion-sheet[data-crate-state="exit"]         { animation: crate-sheet-out-bottom var(--duration-base) var(--ease-crate-in)  both; }

turbo-frame,
[data-turbo-frame-busy] {

  transition: opacity var(--duration-fast) var(--ease-crate-out) 0ms;
}
turbo-frame[busy],
turbo-frame[aria-busy="true"],
[data-turbo-frame-busy="true"] {
  opacity: .55;
  transition: opacity var(--duration-fast) var(--ease-crate-out) 120ms;
}

turbo-frame[data-crate-motion-swap]:not([busy]) > * {
  animation: crate-in-fade var(--duration-base) var(--ease-crate-out) both;
}

.turbo-progress-bar {
  transition: width var(--duration-base) var(--ease-crate-io),
              opacity var(--duration-fast) var(--ease-crate-in);
}

.crate-motion-swap {
  display: grid;
  grid-template-areas: "swap";
}
.crate-motion-swap > .crate-motion-swap__skeleton,
.crate-motion-swap > .crate-motion-swap__content {
  grid-area: swap;
  min-width: 0;
  transition: opacity var(--duration-base) var(--ease-crate-out);
}
.crate-motion-swap[data-crate-loaded="false"] > .crate-motion-swap__content {
  opacity: 0;

  pointer-events: none;
}
.crate-motion-swap[data-crate-loaded="true"] > .crate-motion-swap__skeleton {
  opacity: 0;
  pointer-events: none;

  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-crate-out),
              visibility 0s linear var(--duration-base);
}
.crate-motion-swap[data-crate-loaded="true"] > .crate-motion-swap__content { opacity: 1; }

@keyframes crate-skeleton-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.crate-motion-skeleton {
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: crate-skeleton-sweep 1.6s linear infinite;
}

.crate-press {

  transition-property: transform, opacity, box-shadow, background-color, border-color, color;
  transition-duration: var(--duration-instant), var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-fast);
  transition-timing-function: var(--ease-crate-out);
}
.crate-press:active:not([disabled]):not([aria-disabled="true"]) { transform: scale(.98); }

.crate-press-card { transition: transform var(--duration-instant) var(--ease-crate-out); }
.crate-press-card:active:not([disabled]):not([aria-disabled="true"]) { transform: scale(.995); }

.crate-press-icon { transition: transform var(--duration-instant) var(--ease-crate-out); }
.crate-press-icon:active:not([disabled]):not([aria-disabled="true"]) { transform: scale(.94); }

.crate-focus-motion {
  transition-property: box-shadow, border-color, background-color, color;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-crate-out);
}

.crate-input-motion {
  transition-property: box-shadow, border-color, background-color;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-crate-out);
}

@keyframes crate-flash-out {
  from { opacity: 1; translate: 0 0; }
  to   { opacity: 0; translate: 0 calc(-1 * var(--motion-travel)); }
}
.crate-motion-flash[data-crate-state="exit"] {
  animation: crate-flash-out var(--duration-fast) var(--ease-crate-in) both;
  pointer-events: none;
}

.crate-motion-confirm {
  animation: crate-confirm-pop var(--duration-base) var(--ease-crate-spring) both;
}

.crate-list-enter > * {
  animation: crate-in-up var(--duration-base) var(--ease-crate-out) both;
  animation-delay: min(calc(var(--crate-i, 0) * 28ms), 224ms);
}

.crate-list-leave {
  animation: crate-out-left var(--duration-fast) var(--ease-crate-in) both;
  pointer-events: none;
}

:root {

  --crate-glow-a: var(--color-brand-500, #f97316);
  --crate-glow-b: var(--color-brand-400, #fb923c);

  --crate-glow-spread: 28px;

  --crate-glow-blur: 32px;
  --crate-glow-opacity: 0.5;

  --crate-glow-blur-max:   9999px;
  --crate-glow-spread-max: 9999px;

  --crate-glow-duration: 9s;

  --crate-sheen-duration: 900ms;
}

@keyframes crate-glow-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.14); }
}

@keyframes crate-glow-drift-alt {
  from { transform: translate3d(2.5%, 2%, 0) scale(1.1); opacity: .75; }
  to   { transform: translate3d(-2.5%, -2%, 0) scale(1); opacity: 1; }
}

.crate-glow {
  position: relative;

}
.crate-glow::before {
  content: "";
  position: absolute;
  z-index: -1;

  inset: calc(-1 * min(var(--crate-glow-spread), var(--crate-glow-spread-max)));
  border-radius: inherit;
  pointer-events: none;

  background:
    radial-gradient(closest-side circle at 32% 34%, var(--crate-glow-a), transparent 100%),
    radial-gradient(closest-side circle at 70% 66%, var(--crate-glow-b), transparent 100%);
  filter: blur(min(var(--crate-glow-blur), var(--crate-glow-blur-max)));
  opacity: var(--crate-glow-opacity);
  will-change: transform;
  animation: crate-glow-drift var(--crate-glow-duration) var(--ease-crate-io) infinite alternate;
}

.crate-glow--dual::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * min(var(--crate-glow-spread), var(--crate-glow-spread-max)));
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(closest-side circle at 60% 40%, var(--crate-glow-b), transparent 100%);
  filter: blur(min(var(--crate-glow-blur), var(--crate-glow-blur-max)));
  opacity: calc(var(--crate-glow-opacity) * 0.7);
  will-change: transform;
  animation: crate-glow-drift-alt calc(var(--crate-glow-duration) * 1.35) var(--ease-crate-io) infinite alternate;
}

.crate-glow--subtle { --crate-glow-opacity: 0.3; --crate-glow-blur: 24px; }
.crate-glow--strong { --crate-glow-opacity: 0.72; --crate-glow-spread: 36px; }

.dark,
[data-theme="dark"] { --crate-glow-opacity: 0.34; }
.dark .crate-glow--subtle,
[data-theme="dark"] .crate-glow--subtle { --crate-glow-opacity: 0.2; }
.dark .crate-glow--strong,
[data-theme="dark"] .crate-glow--strong { --crate-glow-opacity: 0.48; }

.crate-glow--hover::before {
  opacity: calc(var(--crate-glow-opacity) * 0.55);
  transition: opacity var(--duration-base) var(--ease-crate-out);
}
.crate-glow--hover:hover::before,
.crate-glow--hover:focus-visible::before { opacity: var(--crate-glow-opacity); }

@media (max-width: 767.98px) {

  :root { --crate-glow-blur-max: 20px; --crate-glow-spread-max: 18px; }

  .crate-glow--dual::after { display: none; }
}

@keyframes crate-sheen-sweep {
  from { transform: translateX(-120%) skewX(-12deg); }
  to   { transform: translateX(220%) skewX(-12deg); }
}
.crate-sheen { position: relative; overflow: hidden; }
.crate-sheen::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .38), transparent);
  transform: translateX(-120%) skewX(-12deg);
  will-change: transform;
}
.crate-sheen:hover::after,
.crate-sheen:focus-visible::after {
  animation: crate-sheen-sweep var(--crate-sheen-duration) var(--ease-crate-io) 1;
}

@media (prefers-reduced-motion: reduce) {
  :root {

    --duration-instant:  0.01ms;
    --duration-fast:     0.01ms;
    --duration-base:     0.01ms;
    --duration-slow:     0.01ms;

    --motion-travel:     0px;
    --motion-travel-sm:  0px;
    --motion-scale-from: 1;

    --ease-crate-spring: cubic-bezier(.645, .045, .355, 1);
  }
  [data-crate-motion][data-crate-state],
  .crate-motion-backdrop[data-crate-state],
  .crate-motion-dialog[data-crate-state],
  .crate-motion-dialog--sheet[data-crate-state],
  .crate-motion-menu[data-crate-state],
  .crate-motion-toast[data-crate-state],
  .crate-motion-flash[data-crate-state],
  .crate-motion-drawer-right[data-crate-state],
  .crate-motion-drawer-left[data-crate-state],
  .crate-motion-sheet[data-crate-state],
  .crate-motion-confirm,
  .crate-list-enter > *,
  .crate-list-leave,
  turbo-frame[data-crate-motion-swap]:not([busy]) > * {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
  .crate-press,
  .crate-press-card,
  .crate-press-icon,
  .crate-input-motion,
  .crate-focus-motion,
  .crate-motion-swap > .crate-motion-swap__skeleton,
  .crate-motion-swap > .crate-motion-swap__content,
  turbo-frame[busy],
  turbo-frame[aria-busy="true"],
  .turbo-progress-bar {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .crate-motion-swap[data-crate-loaded="true"] > .crate-motion-swap__skeleton {
    transition-delay: 0s, 0.02ms !important;
  }

  .crate-press:active,
  .crate-press-card:active,
  .crate-press-icon:active { transform: none; }

  .crate-motion-skeleton { animation: none; background-image: none; }

  .crate-glow::before,
  .crate-glow--dual::after { animation: none; transform: none; }

  .crate-sheen:hover::after,
  .crate-sheen:focus-visible::after { animation-duration: 0.01ms !important; }
  .crate-glow--hover::before { transition-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
  .crate-motion-skeleton { background-image: none; animation: none; }

  .crate-glow::before,
  .crate-glow--dual::after,
  .crate-sheen::after { display: none; }
}