/* Click-to-enlarge for images in rich text (image_zoom_controller.js).
   Loaded automatically by app_stylesheets_tag.

   The <dialog> is a bare, transparent top-layer canvas: blitz's dialog
   frame, fade-in and backdrop blur are switched off, and the two children
   carry the animation themselves — the backdrop fades, the copy of the
   image flies from the text to the middle by transform (see the
   controller for the maths). */
@layer components {
  dialog.image-zoom,
  dialog.image-zoom[open] {
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: hidden;
    opacity: 1;
    transform: none;
    transition: none;
    cursor: zoom-out;
  }

  dialog.image-zoom::backdrop {
    background: transparent;
    backdrop-filter: none;
    transition: none;
  }

  .image-zoom-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.88);
    opacity: 0;
    transition: opacity 320ms ease-out;
  }

  .image-zoom--open .image-zoom-backdrop {
    opacity: 1;
  }

  /* Placed over the source image's own rectangle (top/left/width/height are
     inline); the controller moves and scales it with a transform. */
  .image-zoom-image {
    position: absolute;
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    transform-origin: 0 0;
    will-change: transform;
    transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
    user-select: none;
  }

  /* Read-only rich text: the cursor says what a click does. In an editor
     the click selects first, so blitz's pointer stays. */
  .task-description-view.tiptap-content img,
  .task-comment-content.tiptap-content img {
    cursor: zoom-in;
  }

  @media (prefers-reduced-motion: reduce) {
    .image-zoom-backdrop,
    .image-zoom-image {
      transition-duration: 1ms;
    }
  }
}