/*
 * Smooth-response layer
 * Keeps motion on compositor-friendly properties and lowers paint work while
 * the user is actively scrolling. This file intentionally loads after the
 * main design system so the performance rules stay easy to audit.
 */

:root {
  --motion-standard: cubic-bezier(.2, .8, .2, 1);
  --motion-emphasized: cubic-bezier(.16, 1, .3, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

/* Native, interruption-friendly smooth scrolling for nested workspaces. */
.panel-content,
.panel-tabs,
.live-detail-scroll,
.live-player-modal,
.live-player-list,
#live-dashboard-servers,
.live-network-warning-tooltip,
.ban-stack-reason-picker,
.account-edit-form {
  scroll-behavior: smooth;
}

/* The navigation no longer animates blur on every scroll frame. */
.nav {
  will-change: auto;
  transition:
    transform .34s var(--motion-emphasized),
    opacity .24s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.nav.nav-at-top {
  --nav-bg-alpha: 0;
  --nav-border-alpha: 0;
  --nav-blur: 0px;
}

.nav:not(.nav-at-top) {
  --nav-bg-alpha: .76;
  --nav-border-alpha: .14;
  --nav-blur: 12px;
}

.public-site.is-scrolling .nav {
  backdrop-filter: none;
  box-shadow: none;
}

/* Fixed backgrounds and large drop shadows are expensive during wheel input. */
.public-site .status-section {
  background-attachment: scroll, scroll;
}

.public-site.is-scrolling .skeleton,
.public-site.is-scrolling .stat-ring {
  animation-play-state: paused;
}

/* Skip layout and paint for distant public sections until they approach view. */
.public-site .about,
.public-site .status-section,
.public-site .community-band,
.public-site .staff-section,
.public-site .store-section,
.public-site .footer {
  content-visibility: auto;
}

.public-site .about { contain-intrinsic-block-size: auto 920px; }
.public-site .status-section { contain-intrinsic-block-size: auto 1700px; }
.public-site .community-band { contain-intrinsic-block-size: auto 360px; }
.public-site .staff-section { contain-intrinsic-block-size: auto 1600px; }
.public-site .store-section { contain-intrinsic-block-size: auto 1700px; }
.public-site .footer { contain-intrinsic-block-size: auto 240px; }

/* Page changes should acknowledge the click before expensive page content settles. */
@keyframes panel-page-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.panel-page.active {
  animation: panel-page-enter .28s var(--motion-emphasized) backwards;
}

.button,
.panel-tab,
.panel-tab-icon,
.filter-chip,
.store-tab,
.staff-card,
.rank-card,
.feature-card,
.perk-item {
  transition-timing-function: var(--motion-standard);
}

/* Do not keep layout-heavy mobile navigation layers promoted while idle. */
.panel-mobile-menu,
.panel-mobile-header,
.panel-mobile-menu-toggle {
  will-change: auto;
}

.panel-app.nav-transitioning .panel-mobile-menu,
.panel-app.nav-transitioning .panel-mobile-menu-toggle,
.panel-app.nav-transitioning .panel-sidebar {
  will-change: transform, opacity;
}

@media (min-width: 1201px) {
  /* A temporary transform hint on this wrapper creates a containing block
     for the absolute collapse button. Removing it after the transition then
     moves the button back to sidebar-relative coordinates. Desktop navigation
     changes width, not the wrapper's transform, so keep its anchor unchanged. */
  .panel-app.nav-transitioning .panel-mobile-menu {
    will-change: opacity;
  }
}

/* Preserve the visual depth, but avoid very large live blur surfaces. */
.live-server-detail,
.live-player-overlay,
.bug-detail-overlay,
.account-edit-overlay,
.punishment-server-overlay {
  backdrop-filter: blur(10px) saturate(1.04);
}

/* Live Server Dashboard: one motion language for choices and detail layers. */
.live-server-detail,
.live-player-overlay {
  opacity: 0;
  pointer-events: none;
  animation: none !important;
  transition:
    opacity .48s ease,
    backdrop-filter .44s ease,
    background-color .34s ease;
}

.live-detail-modal,
.live-detail-modal.is-update-render,
.live-player-modal {
  transform-origin: 50% 44%;
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(.93);
  filter: none;
  animation: none !important;
  transition:
    opacity .48s ease,
    transform .74s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.live-server-detail.is-entering,
.live-server-detail.is-open,
.live-player-overlay.is-entering,
.live-player-overlay.is-open {
  pointer-events: auto;
}

.live-server-detail.is-open,
.live-player-overlay.is-open {
  opacity: 1;
}

.live-server-detail.is-open .live-detail-modal,
.live-player-overlay.is-open .live-player-modal {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

.live-server-detail.closing,
.live-player-overlay.closing {
  pointer-events: none;
  opacity: 0;
  animation: none !important;
  transition-duration: .34s;
  transition-timing-function: ease-in;
}

.live-server-detail.closing .live-detail-modal,
.live-player-overlay.closing .live-player-modal {
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(.975);
  filter: none;
  animation: none !important;
  transition-duration: .32s;
  transition-timing-function: cubic-bezier(.4, 0, 1, 1);
}

.live-server-detail.is-entering .live-detail-modal::after,
.live-player-overlay.is-entering .live-player-modal::after {
  animation-play-state: running;
}

.live-server-detail.is-open .live-detail-header,
.live-player-overlay.is-open .live-player-modal-header {
  animation: live-detail-content-in .5s var(--motion-standard) .12s both;
}

.live-server-detail.is-open .live-detail-grid,
.live-player-overlay.is-open .live-player-info-heading {
  animation: live-detail-content-in .52s var(--motion-standard) .18s both;
}

.live-server-detail.is-open .live-detail-body,
.live-player-overlay.is-open .live-player-info-grid {
  animation: live-detail-content-in .54s var(--motion-standard) .24s both;
}

.live-detail-modal.is-update-render {
  animation: none;
}

.live-detail-modal.is-update-render .live-detail-header,
.live-detail-modal.is-update-render .live-detail-grid,
.live-detail-modal.is-update-render .live-detail-body {
  animation: none;
}

/* Reserve the final frame before loading players, so a centered dialog never
   jumps vertically when the loading placeholder becomes a populated list. */
.live-detail-modal {
  height: min(900px, calc(100dvh - clamp(32px, 5vw, 72px)));
}

.live-detail-scroll {
  height: 100%;
  box-sizing: border-box;
}

.live-detail-modal.is-update-render .live-detail-grid { animation-delay: 45ms; }
.live-detail-modal.is-update-render .live-detail-body { animation-delay: 90ms; }

.live-player-card {
  animation: live-choice-in .34s var(--motion-emphasized) both;
  animation-delay: var(--live-player-delay, 0ms);
}

#panel-page-live-dashboard .live-server-row.is-filtering-in {
  animation: live-choice-in .34s var(--motion-emphasized) both;
}

#panel-page-live-dashboard .live-server-row.is-filtering-out {
  pointer-events: none;
  animation: live-choice-out .2s ease-in both;
}

@keyframes live-detail-content-in {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes live-choice-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes live-choice-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, -5px, 0) scale(.994); }
}

@media (max-width: 760px), (pointer: coarse) {
  .nav:not(.nav-at-top) {
    --nav-blur: 8px;
  }

  .live-server-detail,
  .live-player-overlay,
  .bug-detail-overlay,
  .account-edit-overlay,
  .punishment-server-overlay {
    backdrop-filter: blur(6px);
  }
}

@media (max-width: 960px) {
  .public-site .nav,
  .public-site .nav.nav-at-top,
  .public-site .nav:not(.nav-at-top) {
    --nav-bg-alpha: 0;
    --nav-border-alpha: 0;
    --nav-blur: 0px;
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    box-shadow: none;
    cursor: pointer;
  }

  .public-site .nav :is(a, button, .nav-links) {
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  .panel-content,
  .panel-tabs,
  .live-detail-scroll,
  .live-player-modal,
  .live-player-list,
  #live-dashboard-servers,
  .live-network-warning-tooltip,
  .ban-stack-reason-picker,
  .account-edit-form {
    scroll-behavior: auto !important;
  }

  .live-player-card,
  #panel-page-live-dashboard .live-server-row.is-filtering-in,
  #panel-page-live-dashboard .live-server-row.is-filtering-out {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  /* These short, low-travel transitions stay enabled intentionally: the Live
     Dashboard dialogs must still communicate opening and closing state. */
  .live-server-detail,
  .live-player-overlay {
    transition-duration: .3s !important;
    transition-delay: 0ms !important;
  }

  .live-detail-modal,
  .live-player-modal {
    transform: translate3d(0, 10px, 0) scale(.985);
    transition-duration: .4s !important;
    transition-delay: 0ms !important;
  }

  .live-server-detail.is-open .live-detail-modal,
  .live-player-overlay.is-open .live-player-modal {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .live-server-detail.closing .live-detail-modal,
  .live-player-overlay.closing .live-player-modal {
    transition-duration: .28s !important;
  }

  .live-server-detail.is-open .live-detail-header,
  .live-server-detail.is-open .live-detail-grid,
  .live-server-detail.is-open .live-detail-body,
  .live-player-overlay.is-open .live-player-modal-header,
  .live-player-overlay.is-open .live-player-info-heading,
  .live-player-overlay.is-open .live-player-info-grid {
    animation-duration: .2s !important;
    animation-delay: 0ms !important;
  }
}