/*
 * The entrance, as one keyframe on the motion tokens. `backwards` holds the
 * opening frame before the animation starts, so nothing flashes at full strength
 * on the frame between mount and the first tick — which is the whole failure a
 * fade-in exists to prevent.
 *
 * It runs ONCE, so it needs no `prefers-reduced-motion` rule of its own: the
 * duration token collapses to 1ms and the content is simply there.
 *
 * `backwards` rather than `both`, and the difference is the WHOLE life of the
 * element. `forwards` holds the closing frame for good, and a held `transform`
 * is still an animated one: measured, even a `transform: none` closing frame
 * resolves to the identity matrix and keeps the box a stacking context and a
 * containing block for every `position: fixed` descendant — which the
 * `Animated.View` this replaced never was when both offsets were 0. Dropping
 * `forwards` costs nothing, because the closing frame IS the element's own
 * resting state: opacity 1, no transform.
 */
@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;
    /* A `View` shrinks at 0 and a CSS box at 1, so the box replacing one says so —
       without it a fixed-width child overflows a narrow parent while this box
       collapses to nothing around it. */
    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;
    }
  }
}