@layer components {
  .ui-reveal {
    animation: ui-reveal-in var(--duration-slow) var(--ease-emphasized) both;
    will-change: transform, opacity;
  }

  .ui-reveal[data-reveal-on="view"] {
    animation: none;
  }
  .ui-reveal[data-reveal-state="out"] {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
  }
  .ui-reveal[data-reveal-state="in"] {
    animation-name: ui-reveal-in;
    animation-duration: var(--duration-slow);
    animation-timing-function: var(--ease-emphasized);
    animation-fill-mode: both;
  }

  .ui-reveal[data-reveal-delay="1"] {
    animation-delay: calc(var(--reveal-stagger-step) * 1);
  }
  .ui-reveal[data-reveal-delay="2"] {
    animation-delay: calc(var(--reveal-stagger-step) * 2);
  }
  .ui-reveal[data-reveal-delay="3"] {
    animation-delay: calc(var(--reveal-stagger-step) * 3);
  }
  .ui-reveal[data-reveal-delay="4"] {
    animation-delay: calc(var(--reveal-stagger-step) * 4);
  }
  .ui-reveal[data-reveal-delay="5"] {
    animation-delay: calc(var(--reveal-stagger-step) * 5);
  }
  .ui-reveal[data-reveal-delay="6"] {
    animation-delay: calc(var(--reveal-stagger-step) * 6);
  }

  @keyframes ui-reveal-in {
    from {
      opacity: 0;
      transform: translateY(var(--reveal-distance));
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-reveal,
    .ui-reveal[data-reveal-delay],
    .ui-reveal[data-reveal-state] {
      animation: none;
    }
    .ui-reveal[data-reveal-state="out"] {
      opacity: 1;
      transform: none;
    }
  }
}

@layer components {
  .ui-activity {
    display: inline-flex;
    align-items: center;
    gap: var(--activity-gap);
    font-size: var(--activity-font-size-sm);
  }
  .ui-activity[data-size="xs"] {
    font-size: var(--activity-font-size-xs);
  }
  .ui-activity[data-size="md"] {
    font-size: var(--activity-font-size-md);
  }
  .ui-activity[data-size="lg"] {
    font-size: var(--activity-font-size-lg);
  }

  .ui-activity-mark {
    display: inline-flex;
    align-items: flex-end;
    gap: var(--activity-gap);
    block-size: calc(var(--activity-mark-size) + var(--activity-mark-offset));
    color: hsl(var(--activity-color, var(--muted-foreground)));
  }

  .ui-activity[data-tone="default"] .ui-activity-mark {
    color: hsl(var(--foreground));
  }
  .ui-activity[data-tone="primary"] .ui-activity-mark {
    color: hsl(var(--primary));
  }
  .ui-activity[data-tone="success"] .ui-activity-mark {
    color: hsl(var(--text-success));
  }
  .ui-activity[data-tone="warning"] .ui-activity-mark {
    color: hsl(var(--text-warning));
  }
  .ui-activity[data-tone="destructive"] .ui-activity-mark {
    color: hsl(var(--text-error));
  }
  .ui-activity[data-tone="info"] .ui-activity-mark {
    color: hsl(var(--text-info));
  }

  .ui-activity[data-tone="inherit"] .ui-activity-mark {
    color: inherit;
  }

  .ui-activity-dot {
    inline-size: var(--activity-mark-size);
    block-size: var(--activity-mark-size);
    border-radius: var(--radius-pill);
    background: currentColor;
    opacity: 1;
    animation: ui-activity-bounce var(--activity-interval) var(--ease-standard) infinite;
  }

  .ui-activity-dot:nth-child(2) {
    animation-delay: calc(var(--activity-stagger-step) * 1);
  }
  .ui-activity-dot:nth-child(3) {
    animation-delay: calc(var(--activity-stagger-step) * 2);
  }

  .ui-activity-pulse {
    inline-size: var(--activity-pulse-mark-size);
    block-size: var(--activity-pulse-mark-size);
    border-radius: var(--radius-pill);
    background: currentColor;
    opacity: 1;
    animation: ui-activity-breathe var(--activity-interval) var(--ease-standard) infinite;
  }

  .ui-activity-bar {
    position: relative;
    overflow: hidden;
    inline-size: var(--activity-bar-width);
    block-size: var(--activity-bar-height);
    border-radius: var(--activity-bar-radius);
    background: hsl(
      var(--activity-color, var(--muted-foreground)) / var(--activity-bar-track-alpha)
    );
  }
  .ui-activity-bar-segment {
    position: absolute;
    inset-block: 0;

    inset-inline-start: 0;
    inline-size: var(--activity-bar-segment-width);
    border-radius: inherit;
    background: currentColor;
    animation: ui-activity-sweep var(--activity-interval) var(--ease-standard) infinite;
  }

  .ui-activity-label {
    min-inline-size: 0;
  }

  @keyframes ui-activity-bounce {
    0%,
    70%,
    100% {
      transform: translateY(0);
      opacity: var(--activity-mark-rest-alpha);
    }
    35% {
      transform: translateY(calc(-1 * var(--activity-mark-offset)));
      opacity: 1;
    }
  }

  @keyframes ui-activity-breathe {
    0%,
    100% {
      opacity: var(--activity-mark-rest-alpha);
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes ui-activity-sweep {
    from {
      inset-inline-start: calc(-1 * var(--activity-bar-segment-width));
    }
    to {
      inset-inline-start: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-activity-dot,
    .ui-activity-pulse,
    .ui-activity-bar-segment {
      animation: none;
    }
  }

  @media (forced-colors: active) {
    .ui-activity-dot,
    .ui-activity-pulse,
    .ui-activity-bar-segment {
      background: CanvasText;
    }
    .ui-activity-bar {
      border: 1px solid CanvasText;
    }
  }
}

@layer components {

  .ui-marquee {
    display: flex;
    align-items: center;
    gap: var(--marquee-gap-inline);
    inline-size: 100%;
    min-inline-size: 0;
  }

  .ui-marquee-viewport {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
  }

  .ui-marquee-scroller {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .ui-marquee[data-fade="true"] .ui-marquee-viewport {
    mask-image: linear-gradient(
      to right,
      transparent,
      black var(--marquee-mask-width),
      black calc(100% - var(--marquee-mask-width)),
      transparent
    );
  }

  .ui-marquee-track {
    display: flex;
    inline-size: max-content;
    will-change: transform;
    animation: ui-marquee-travel calc(var(--marquee-interval) * var(--marquee-cycle-scale, 1))
      linear infinite;
  }
  .ui-marquee[data-speed="slow"] .ui-marquee-track {
    animation-duration: calc(var(--marquee-interval-slow) * var(--marquee-cycle-scale, 1));
  }
  .ui-marquee[data-speed="fast"] .ui-marquee-track {
    animation-duration: calc(var(--marquee-interval-fast) * var(--marquee-cycle-scale, 1));
  }

  .ui-marquee-copy {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--marquee-gap-inline);
    padding-inline-end: var(--marquee-gap-inline);
  }

  .ui-marquee-control {
    flex: 0 0 auto;
  }

  @keyframes ui-marquee-travel {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% / var(--marquee-copies, 2)));
    }
  }

  @keyframes ui-marquee-travel-rtl {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(100% / var(--marquee-copies, 2)));
    }
  }
  [dir="rtl"] .ui-marquee-track {
    animation-name: ui-marquee-travel-rtl;
  }

  .ui-marquee[data-direction="end"] .ui-marquee-track {
    animation-direction: reverse;
  }

  .ui-marquee[data-playing="false"] .ui-marquee-track {
    animation-play-state: paused;
  }

  .ui-marquee-viewport:focus-within .ui-marquee-track {
    animation-play-state: paused;
  }

  .ui-marquee[data-pause-on-hover="true"] .ui-marquee-viewport:hover .ui-marquee-track {
    animation-play-state: paused;
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-marquee-track {
      animation: none;
    }
  }
}