/* PC interaction motion. Resting geometry and typography belong to the Figma
   screen styles; view/filter changes never animate the size of the workspace. */
@media screen and (min-width: 901px) {
  :root:has(> body.judge-figma), body.judge-figma {
    --jf-motion-fast: 140ms;
    --jf-motion-exit: 160ms;
    --jf-motion-enter: 280ms;
    --jf-motion-layout: 320ms;
    --jf-motion-ease: cubic-bezier(.22, 1, .36, 1);
    --jf-motion-dismiss: cubic-bezier(.4, 0, 1, 1);
    --jf-sidebar-expanded-width: 320px;
  }

  /* Snapshot only the content. The shell stays live and does not flash or
     interpolate its width/height when changing routes or Classroom tabs. */
  :root[data-jf-transition] { view-transition-name: none; }
  :root[data-jf-snapshot="old"] #jf-main { view-transition-name: jf-content; }
  :root[data-jf-transition]::view-transition { pointer-events: none; }
  :root[data-jf-transition]::view-transition-group(jf-content) {
    animation: none;
    overflow: clip;
    pointer-events: none;
  }
  :root[data-jf-transition]::view-transition-image-pair(jf-content) { isolation: isolate; }
  :root[data-jf-transition]::view-transition-old(jf-content) {
    height: 100%;
    object-fit: none;
    object-position: left top;
    mix-blend-mode: normal;
    pointer-events: none;
    animation: jf-page-leave var(--jf-motion-exit) ease-out both;
  }
  @keyframes jf-page-leave { to { opacity: 0; } }

  .jf-navigation-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.judge-figma.jf-navigation-loading > .jf-header::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 28%;
    background: var(--jf-blue); transform-origin: left;
    animation: jf-navigation-progress 1200ms ease-in-out 160ms infinite backwards;
  }
  @keyframes jf-navigation-progress { from { transform: translateX(0); opacity: 0; } 25% { opacity: .8; } to { transform: translateX(250%); opacity: 0; } }
  body.judge-figma > #jf-main:focus { outline: none; }

  body.judge-figma .jf-sidebar {
    width: var(--jf-sidebar-expanded-width);
    transition: none;
  }
  body.judge-figma.jf-sidebar-animating .jf-sidebar {
    transition: transform var(--jf-motion-layout) var(--jf-motion-ease);
  }
  body.judge-figma.jf-sidebar-animating > .jf-header {
    transition: left var(--jf-motion-layout) var(--jf-motion-ease);
  }
  body.judge-figma.jf-sidebar-animating > main.page {
    transition: margin-left var(--jf-motion-layout) var(--jf-motion-ease);
  }
  body.judge-figma :is(.jf-nav-link, .jf-toolbar-button, .jf-task-row,
    .jf-room-card, .jf-choice, .jf-team-screen a, .jf-team-screen button,
    .classroom-figma .button, .classroom-figma .tabs > a) {
    transition: background-color var(--jf-motion-fast) ease-out,
      color var(--jf-motion-fast) ease-out, border-color var(--jf-motion-fast) ease-out;
  }
  body.judge-figma .jf-choice:hover { transform: none; }
  body.judge-figma :is(.button, .social-auth-button):is(:hover, :active) {
    transform: none !important;
  }
  body.judge-figma :is(.jf-member-progress-track i, .task-table-progress i,
    .jf-tutorial-progress span, .classroom-tutorial-progress span) {
    transition: width var(--jf-motion-layout) var(--jf-motion-ease);
  }

  /* Native dialogs retain showModal/close, Escape, focus and form semantics.
     display/overlay keep their exit visible without delaying application code. */
  @supports (transition-behavior: allow-discrete) and (overlay: auto) {
    body.judge-figma dialog {
      --jf-dialog-offset: 0 8px;
      --jf-dialog-scale: .985;
      opacity: 0;
      translate: var(--jf-dialog-offset);
      scale: var(--jf-dialog-scale);
      transition: opacity var(--jf-motion-exit) var(--jf-motion-dismiss),
        translate var(--jf-motion-exit) var(--jf-motion-dismiss),
        scale var(--jf-motion-exit) var(--jf-motion-dismiss),
        display var(--jf-motion-exit) allow-discrete,
        overlay var(--jf-motion-exit) allow-discrete;
    }
    body.judge-figma dialog.jf-task-detail-dialog { --jf-dialog-offset: 16px 0; --jf-dialog-scale: 1; }
    body.judge-figma dialog[open] {
      opacity: 1;
      translate: 0 0;
      scale: 1;
      animation: none !important;
      transition-duration: var(--jf-motion-enter);
      transition-timing-function: var(--jf-motion-ease);
    }
    body.judge-figma dialog:not([open]) { pointer-events: none; }
    body.judge-figma dialog::backdrop {
      opacity: 0;
      transition: opacity var(--jf-motion-exit) ease-out,
        display var(--jf-motion-exit) allow-discrete,
        overlay var(--jf-motion-exit) allow-discrete;
    }
    body.judge-figma dialog[open]::backdrop { opacity: 1; }

    body.judge-figma :is(.jf-header-popover, .classroom-drawer) {
      opacity: 1;
      transition: opacity var(--jf-motion-fast) ease-out,
        display var(--jf-motion-fast) allow-discrete;
    }
    body.judge-figma :is(.jf-header-popover, .classroom-drawer)[hidden] {
      opacity: 0;
      pointer-events: none;
    }
    body.judge-figma .jf-header-popover {
      translate: 0 0;
      transition: opacity var(--jf-motion-exit) ease-out,
        translate var(--jf-motion-enter) var(--jf-motion-ease),
        display var(--jf-motion-exit) allow-discrete;
    }
    body.judge-figma .jf-header-popover[hidden] { translate: 0 -4px; }
    body.judge-figma .classroom-drawer-panel {
      animation: none;
      translate: 0 0;
      scale: 1;
      transition: translate var(--jf-motion-enter) var(--jf-motion-ease),
        scale var(--jf-motion-enter) var(--jf-motion-ease);
    }
    body.judge-figma .classroom-drawer[hidden] .classroom-drawer-panel { translate: 0 8px; scale: .985; }

    @starting-style {
      body.judge-figma dialog[open] { opacity: 0; translate: var(--jf-dialog-offset); scale: var(--jf-dialog-scale); }
      body.judge-figma dialog[open]::backdrop { opacity: 0; }
      body.judge-figma :is(.jf-header-popover, .classroom-drawer):not([hidden]) { opacity: 0; }
      body.judge-figma .jf-header-popover:not([hidden]) { translate: 0 -4px; }
      body.judge-figma .classroom-drawer:not([hidden]) .classroom-drawer-panel { translate: 0 8px; scale: .985; }
    }
  }

  /* Dynamically inserted warning/confirmation dialogs and anchored menus. */
  body.judge-figma .dialog-backdrop { animation: jf-surface-fade var(--jf-motion-fast) ease-out; }
  body.judge-figma .dialog-backdrop > .dialog-box { animation: jf-surface-enter var(--jf-motion-enter) var(--jf-motion-ease); }
  body.judge-figma :is(.jf-filter-menu, .task-assignee-menu, .jf-comment-picker,
    .task-advanced-filter-body, .jf-member-safety-popover) {
    animation: jf-surface-fade var(--jf-motion-fast) ease-out;
  }
  @keyframes jf-surface-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes jf-surface-enter { from { opacity: 0; translate: 0 8px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }
}
@media screen and (min-width: 901px) and (max-width: 1500px) {
  body.judge-figma { --jf-sidebar-expanded-width: 260px; }
}

/* Include pseudo-elements: busy indicators/backdrops must respect both the
   OS preference and the existing in-product motion preference. */
@media screen and (min-width: 901px) {
  body.judge-figma.jf-reduce-motion,
  body.judge-figma.jf-reduce-motion *,
  body.judge-figma.jf-reduce-motion *::before,
  body.judge-figma.jf-reduce-motion *::after,
  body.judge-figma.jf-reduce-motion *::backdrop {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :root:has(> body.jf-reduce-motion)::view-transition-group(*),
  :root:has(> body.jf-reduce-motion)::view-transition-old(*),
  :root:has(> body.jf-reduce-motion)::view-transition-new(*) { animation: none !important; }
}
@media screen and (min-width: 901px) and (prefers-reduced-motion: reduce) {
  body.judge-figma,
  body.judge-figma *,
  body.judge-figma *::before,
  body.judge-figma *::after,
  body.judge-figma *::backdrop {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :root::view-transition-group(*),
  :root::view-transition-old(*),
  :root::view-transition-new(*) { animation: none !important; }
}