/* Motion: how the panel answers a pointer.
 *
 * Loaded after every other stylesheet, and only about movement: durations,
 * easing, a small lift or slide, a press. Colours stay where the theme files
 * set them, so day and night mode look as they did, they just move softly.
 * It plays for everyone, whatever the operating system asks; only the
 * site's own perf mode turns it down.
 */

:root {
  --motion-out: cubic-bezier(.22, 1, .36, 1);      /* quick start, long gentle stop */
  --motion-spring: cubic-bezier(.34, 1.56, .64, 1); /* a touch of overshoot, for icons */
  --motion-time: 280ms;
}

/* ── Menu items: desktop sidebar, mobile drawer, bottom bar ─────────────── */
.shell-nav-item,
.mob-sidebar-link,
.mobile-nav-item {
  transition:
    background-color var(--motion-time) var(--motion-out),
    color var(--motion-time) var(--motion-out),
    box-shadow 360ms var(--motion-out),
    transform var(--motion-time) var(--motion-out) !important;
}
.shell-nav-item i,
.shell-nav-item img,
.mob-sidebar-link i,
.mobile-nav-item i {
  transition: transform 420ms var(--motion-spring), color var(--motion-time) var(--motion-out), filter var(--motion-time) var(--motion-out);
}
/* The row eases a few pixels inward (RTL: toward the content) and its icon
   lifts; the active row stays put, it is already where you are. */
.shell-nav-item:hover:not(.shell-nav-active),
.mob-sidebar-link:hover {
  transform: translateX(-3px);
}
.shell-nav-item:hover i,
.shell-nav-item:hover img,
.mob-sidebar-link:hover i,
.mobile-nav-item:hover i {
  transform: scale(1.14) rotate(-6deg);
}
.shell-nav-item:active,
.mob-sidebar-link:active,
.mobile-nav-item:active {
  transform: scale(.97);
  transition-duration: 90ms !important;
}

/* ── Calls to action ────────────────────────────────────────────────────── */
.neon-btn,
.neon-btn-outline,
.cafe-cta-orange {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 320ms var(--motion-out),
    box-shadow 420ms var(--motion-out),
    filter var(--motion-time) var(--motion-out),
    background-position 700ms var(--motion-out),
    background-color var(--motion-time) var(--motion-out) !important;
}
.neon-btn:hover:not(:disabled),
.neon-btn-outline:hover:not(:disabled),
.cafe-cta-orange:hover {
  transform: translateY(-2px);
}
.neon-btn:active:not(:disabled),
.neon-btn-outline:active:not(:disabled),
.cafe-cta-orange:active {
  transform: translateY(0) scale(.98);
  transition-duration: 90ms !important;
}
/* A band of light crosses the button once on hover. */
.neon-btn::after,
.cafe-cta-orange::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(110%);
  transition: transform 0s;
}
.neon-btn:hover:not(:disabled)::after,
.cafe-cta-orange:hover::after {
  transform: translateX(-110%);
  transition: transform 900ms var(--motion-out);
}
.neon-btn:focus-visible,
.neon-btn-outline:focus-visible,
.cafe-cta-orange:focus-visible {
  outline: 2px solid rgba(34, 211, 238, .7);
  outline-offset: 3px;
}
html.theme-light .neon-btn:focus-visible,
html.theme-light .neon-btn-outline:focus-visible,
html.theme-light .cafe-cta-orange:focus-visible {
  outline-color: rgba(237, 124, 34, .7);
}

/* ── Smaller controls: chips and segmented choices ─────────────────────── */
.neon-chip,
.picker-tab,
.adv-chip,
.adv-seg button,
.model-sort button,
.quality-trigger,
.quality-option {
  transition:
    background-color var(--motion-time) var(--motion-out),
    color var(--motion-time) var(--motion-out),
    border-color var(--motion-time) var(--motion-out),
    box-shadow var(--motion-time) var(--motion-out),
    transform 240ms var(--motion-out) !important;
}
.neon-chip:hover,
.quality-trigger:hover {
  transform: translateY(-1px);
}
.neon-chip:active,
.adv-chip:active,
.adv-seg button:active,
.model-sort button:active,
.quality-trigger:active {
  transform: scale(.96);
  transition-duration: 90ms !important;
}

/* ── Perf mode: the site's own switch for less motion ───────────────────── */
html.perf-mode .neon-btn::after,
html.perf-mode .cafe-cta-orange::after { display: none; }
html.perf-mode .shell-nav-item,
html.perf-mode .mob-sidebar-link,
html.perf-mode .mobile-nav-item,
html.perf-mode .neon-btn,
html.perf-mode .neon-btn-outline,
html.perf-mode .cafe-cta-orange {
  transform: none !important;
}

/* ── Moving between the panel's pages ───────────────────────────────────────
 * The browser cross-fades one page into the next instead of flashing white,
 * and the side rail stays where it is (Chrome/Edge 126+, Safari 18.2+; other
 * browsers load the page as before). No script of ours runs for it: it is an
 * ordinary page load. Both pages must carry this rule, so it lives here in the
 * one stylesheet every panel page loads. Perf mode skips it from the head
 * script (pagereveal); the operating system's reduced motion does not.
 */
@view-transition { navigation: auto; }
#rightSidebar { view-transition-name: cafe-rail; }
::view-transition-group(cafe-rail) { animation-duration: 260ms; animation-timing-function: var(--motion-out); }
::view-transition-old(root) { animation: cafe-page-out 140ms ease-in both; }
::view-transition-new(root) { animation: cafe-page-in 280ms var(--motion-out) both; }
@keyframes cafe-page-out { to { opacity: 0; } }
@keyframes cafe-page-in { from { opacity: 0; transform: translateY(6px); } }