@layer motion {
  /* Content stays visible until the motion module successfully initializes. */
  .motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(2rem);
    transition:
      opacity var(--duration-slow) var(--ease-standard),
      transform var(--duration-slow) var(--ease-emphasized);
  }

  .motion-ready [data-reveal="clip"] {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
    transform: none;
    transition: clip-path var(--duration-cinematic) var(--ease-emphasized);
  }

  .motion-ready [data-reveal="line"] {
    transform: translateY(110%);
  }

  .motion-ready [data-reveal].is-visible {
    clip-path: inset(0);
    opacity: 1;
    transform: none;
  }

  .motion-ready [data-stagger] > * {
    transition-delay: calc(var(--stagger-index, 0) * 90ms);
  }

  .image-zoom {
    overflow: hidden;
  }

  .image-zoom img {
    transform: scale(1.02);
    transition: transform var(--duration-cinematic) var(--ease-standard);
  }

  .is-ready .image-zoom img {
    transform: scale(1);
  }

  .architectural-rule {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-cinematic) var(--ease-emphasized);
  }

  .is-visible > .architectural-rule,
  .architectural-rule.is-visible {
    transform: scaleX(1);
  }

  .dialog[open] {
    animation: dialog-in var(--duration-base) var(--ease-emphasized) both;
  }

  .dialog[open]::backdrop {
    animation: backdrop-in var(--duration-base) ease both;
  }

  @keyframes dialog-in {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: none; }
  }

  @keyframes backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}