@media (prefers-reduced-motion: no-preference) {
  :root {
    --motion-lift: 30px;
    --motion-slide: 28px;
    --motion-zoom: 1.11;
  }

  .motion-enter {
    animation: home-rise var(--motion-duration, 620ms) cubic-bezier(.22,1,.36,1) var(--motion-delay, 0ms) backwards;
  }

  .motion-enter.motion-drawing {
    --motion-duration: 1000ms;
    animation-name: home-drawing;
  }

  .motion-drawing .drawing-frame {position:relative}

  .motion-enter.motion-drawing .drawing-frame::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--accent);
    box-shadow: 0 0 12px #a4432860;
    pointer-events: none;
    animation: home-trace 1000ms ease-out var(--motion-delay, 0ms) both;
  }

  .motion-enter:is(.motion-sheet,.motion-sheet-reverse) {
    --motion-duration: 720ms;
    --sheet-offset: calc(-1 * var(--motion-slide));
    animation-name: home-sheet;
  }

  .motion-enter.motion-sheet-reverse {--sheet-offset: var(--motion-slide)}

  .motion-enter.motion-view {
    --motion-duration: 780ms;
    animation-name: home-view;
  }

  .motion-enter.motion-view :is(.case-image,.sample-image,.ai-story-render,.ai-story-deck) img {
    animation: home-image-settle 900ms cubic-bezier(.22,1,.36,1) var(--motion-delay, 0ms) both;
  }

  .motion-enter.motion-view :is(.ai-story-render,.ai-story-deck) {overflow:hidden}

  .motion-enter.motion-step {
    --motion-duration: 770ms;
    animation-name: home-step;
  }

  .motion-enter.motion-step .number {
    animation: home-number 600ms cubic-bezier(.22,1,.36,1) var(--motion-delay, 0ms) both;
  }

  #faq details[open] > :not(summary) {
    animation: home-rise 260ms ease-out backwards;
  }

  @media (hover: hover) and (pointer: fine) {
    :is(.cad-story-sheet, .cad-process-figure, .cad-change-figures a, .ai-evidence, #hotel-deck a, .progress-thumb) img {
      transition: filter 220ms ease, box-shadow 220ms ease;
    }

    :is(.cad-story-sheet, .cad-process-figure, .cad-change-figures a, .ai-evidence, #hotel-deck a, .progress-thumb):hover img {
      filter: brightness(1.035);
      box-shadow: 0 5px 12px #20292220;
    }
  }

  .motion-enter:is(:focus-within,:focus,:target),
  .motion-enter:is(:focus-within,:focus,:target) :is(img,.number),
  .motion-enter:is(:focus-within,:focus,:target) .drawing-frame::after {
    animation: none;
  }

  @keyframes home-rise {
    from {opacity: .15; transform: translateY(var(--motion-lift))}
    to {opacity: 1; transform: translateY(0)}
  }

  @keyframes home-drawing {
    0% {opacity: .75; clip-path: inset(0 98% 0 0); transform: translateY(10px)}
    76% {opacity: 1; clip-path: inset(0); transform: translateY(0)}
    100% {opacity: 1; clip-path: inset(0)}
  }

  @keyframes home-trace {
    0% {left: 0; opacity: 0}
    12% {opacity: .85}
    76% {left: calc(100% - 2px); opacity: .7}
    100% {left: calc(100% - 2px); opacity: 0}
  }

  @keyframes home-sheet {
    from {opacity: .18; transform: translateX(var(--sheet-offset))}
    to {opacity: 1; transform: translateX(0)}
  }

  @keyframes home-view {
    from {opacity: .24; transform: translateY(var(--motion-lift)) scale(.96)}
    to {opacity: 1; transform: translateY(0) scale(1)}
  }

  @keyframes home-image-settle {
    from {transform: scale(var(--motion-zoom))}
    to {transform: scale(1)}
  }

  @keyframes home-step {
    0% {opacity: .2; transform: translateY(var(--motion-lift))}
    72% {opacity: 1; transform: translateY(-3px)}
    100% {opacity: 1; transform: translateY(0)}
  }

  @keyframes home-number {
    from {opacity: 0; transform: translateY(-8px)}
    to {opacity: 1; transform: translateY(0)}
  }

  @media (max-width: 700px) {
    :root {
      --motion-lift: 19px;
      --motion-slide: 10px;
      --motion-zoom: 1.055;
    }

    .motion-enter.motion-sheet-reverse {--sheet-offset: calc(-1 * var(--motion-slide))}
  }
}