/*
 * The entrance, one keyframe on the motion tokens. `backwards` holds the first frame so nothing
 * flashes before the first tick. Runs once, so the 1ms reduced-motion token suffices. Not
 * `forwards`: a held transform, even `none`, keeps the box a stacking context and containing block
 * for fixed descendants, and the resting state already equals the last frame.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-fade-in {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Without it a fixed-width child overflows a narrow parent while this box collapses. */
    flex-shrink: 0;
    min-width: 0;
    --lotics-fade-in-x: 0px;
    --lotics-fade-in-y: 0px;
    animation: lotics-fade-in var(--lotics-duration-base) var(--lotics-ease-standard) backwards;
  }

  @keyframes lotics-fade-in {
    from {
      opacity: 0;
      transform: translate3d(var(--lotics-fade-in-x), var(--lotics-fade-in-y), 0);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}