/*
 * CNBDG Motion System
 * Platform-aware, interruptible motion.
 * macOS uses restrained window depth and pointer precision; iOS uses direct
 * manipulation, liquid navigation and bottom sheets. Only compositor-friendly
 * transform and opacity are animated.
 */
:root {
  --motion-spring: cubic-bezier(.2, .82, .22, 1);
  --motion-spring-out: cubic-bezier(.16, 1, .3, 1);
  --motion-accelerate: cubic-bezier(.4, 0, 1, 1);
  --motion-duration-page: 340ms;
  --motion-duration-sheet: 300ms;
  --mac-pointer-x: 0px;
  --mac-pointer-y: 0px;
}

html.motion-enabled .page.active {
  animation: none !important;
  will-change: auto;
}

html.motion-view-transition,
html.motion-view-transition body {
  overflow-x: clip !important;
}

::view-transition {
  position: fixed;
  inset: 0;
  overflow: clip;
}

@supports (view-transition-name: page-content) {
  html.motion-enabled.motion-platform-macos .page.active { view-transition-name: page-content; }

  ::view-transition-group(page-content) {
    z-index: 4;
    overflow: clip;
    animation-duration: var(--motion-duration-page);
    animation-timing-function: var(--motion-spring-out);
  }

  ::view-transition-image-pair(page-content) {
    isolation: isolate;
    overflow: clip;
  }

  ::view-transition-old(page-content),
  ::view-transition-new(page-content) {
    width: 100%;
    height: 100%;
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform, opacity;
    animation-duration: var(--motion-duration-page);
    animation-fill-mode: both;
  }

  html.motion-platform-macos.motion-forward::view-transition-old(page-content) {
    z-index: 1;
    animation-name: macos-page-old-forward;
    animation-timing-function: cubic-bezier(.4, 0, .8, .2);
  }

  html.motion-platform-macos.motion-forward::view-transition-new(page-content) {
    z-index: 2;
    animation-name: macos-page-new-forward;
    animation-timing-function: var(--motion-spring-out);
  }

  html.motion-platform-macos.motion-backward::view-transition-old(page-content) {
    z-index: 2;
    animation-name: macos-page-old-backward;
    animation-timing-function: cubic-bezier(.4, 0, .8, .2);
  }

  html.motion-platform-macos.motion-backward::view-transition-new(page-content) {
    z-index: 1;
    animation-name: macos-page-new-backward;
    animation-timing-function: var(--motion-spring-out);
  }
}

@keyframes macos-page-old-forward {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  34% { opacity: .18; transform: translate3d(-4px, -1px, 0) scale(.997); }
  40%, 100% { opacity: 0; transform: translate3d(-5px, -1px, 0) scale(.996); }
}

@keyframes macos-page-new-forward {
  0%, 44% { opacity: 0; transform: translate3d(7px, 3px, 0) scale(.995); }
  78% { opacity: 1; transform: translate3d(-1px, 0, 0) scale(1.001); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes macos-page-old-backward {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  34% { opacity: .18; transform: translate3d(4px, 1px, 0) scale(.997); }
  40%, 100% { opacity: 0; transform: translate3d(5px, 1px, 0) scale(.996); }
}

@keyframes macos-page-new-backward {
  0%, 44% { opacity: 0; transform: translate3d(-7px, 3px, 0) scale(.995); }
  78% { opacity: 1; transform: translate3d(1px, 0, 0) scale(1.001); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Scroll-driven content entrances. JS adds the class only to eligible items. */
html.motion-enabled .motion-reveal {
  animation: none !important;
  opacity: 0;
  transform-origin: center top;
  will-change: auto;
}

html.motion-enabled.motion-platform-macos .motion-reveal {
  transform: translate3d(0, 12px, 0) scale(.995);
  transition:
    opacity 300ms ease-out var(--motion-stagger, 0ms),
    transform 460ms var(--motion-spring-out) var(--motion-stagger, 0ms);
}

html.motion-enabled.motion-platform-ios .motion-reveal {
  transform: translate3d(0, 17px, 0) scale(.991);
  transition:
    opacity 340ms ease-out var(--motion-stagger, 0ms),
    transform 520ms var(--motion-spring-out) var(--motion-stagger, 0ms);
}

html.motion-enabled .motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity;
}

html.motion-enabled .motion-reveal.motion-settled {
  will-change: auto;
}

/* macOS: shallow depth keeps the desktop canvas stable under a precise pointer. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine) {
  html.motion-enabled .social-hero .hero-visual {
    transform:
      perspective(1100px)
      translate3d(var(--motion-hero-x, 0px), var(--motion-hero-y, 0px), 0)
      rotateX(var(--motion-hero-rx, 0deg))
      rotateY(var(--motion-hero-ry, 0deg))
      scale(.9);
    transition: transform 520ms var(--motion-spring-out);
  }

  html.motion-enabled .social-hero.is-pointer-active .hero-visual {
    transition-duration: 150ms;
    transition-timing-function: ease-out;
    will-change: transform;
  }
}

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

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

/* Platform-specific direct manipulation. */
html.motion-enabled :where(
  button,
  .topbar nav a,
  .post-item,
  .thread-card,
  .message-friend-item,
  .message-group-item,
  .notification-item,
  .friend-grid > a,
  .project-grid article
) {
  -webkit-tap-highlight-color: transparent;
}

html.motion-enabled .logo-mark {
  transition: transform 420ms var(--motion-spring-out), box-shadow 240ms ease;
}

html.motion-enabled .logo:active .logo-mark {
  transform: rotate(-8deg) scale(.9);
}

@keyframes ios-notification-in {
  0% { opacity: 0; transform: translate3d(0, 24px, 0) scale(.88); }
  64% { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.018); }
  82% { transform: translate3d(0, 2px, 0) scale(.996); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.macos-sidebar-selection { display: none; }

/* macOS workspace motion: window hierarchy, low displacement and pointer precision. */
@media (min-width:1024px) {
  html.motion-enabled.motion-platform-macos dialog[open]:not(.platform-dialog-closing) {
    animation: macos-panel-open var(--motion-duration-sheet) var(--motion-spring-out) both !important;
    transform-origin: center 46%;
    will-change: transform, opacity;
  }

  html.motion-enabled.motion-platform-macos dialog[open].motion-dialog-settled:not(.platform-dialog-closing) {
    animation: none !important;
    will-change: auto;
  }

  html.motion-enabled.motion-platform-macos dialog[open]:not(.platform-dialog-closing)::backdrop {
    animation: platform-backdrop-open 190ms ease-out both !important;
  }

  html.motion-enabled.motion-platform-macos dialog[open].macos-panel-closing {
    animation: macos-panel-close 190ms cubic-bezier(.4, 0, .8, .2) both !important;
    pointer-events: none;
  }

  html.motion-enabled.motion-platform-macos dialog[open].macos-panel-closing::backdrop {
    animation: platform-backdrop-close 180ms ease-in both !important;
  }

  html.motion-enabled.motion-platform-macos :where(
    button:not(:disabled),
    .topbar nav a,
    .post-item,
    .thread-card,
    .message-friend-item,
    .message-group-item,
    .notification-item,
    .friend-grid > a
  ):active {
    transform: scale(.985);
    transition-duration: 70ms !important;
  }

  html.motion-enabled.motion-platform-macos :where(
    .topbar nav a,
    .actions button,
    .desktop-context-search,
    .desktop-context-trends > button,
    .primary-btn,
    .secondary-btn,
    .follow-button,
    .chat-button
  ).mac-pointer-active {
    transform: translate3d(var(--mac-pointer-x), var(--mac-pointer-y), 0) scale(1.012) !important;
    transition-duration: 110ms !important;
    transition-timing-function: ease-out !important;
  }

  html.motion-enabled.motion-platform-macos :where(
    .topbar nav a,
    .actions button,
    .desktop-context-search,
    .desktop-context-trends > button,
    .primary-btn,
    .secondary-btn,
    .follow-button,
    .chat-button
  ).mac-pointer-pressing {
    transform: translate3d(var(--mac-pointer-x), var(--mac-pointer-y), 0) scale(.982) !important;
    transition-duration: 70ms !important;
  }

  html.motion-enabled.motion-platform-macos :where(
    .post-list,
    .thread-list,
    .messages-shell,
    .desktop-context-card
  ):focus-within {
    border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
    box-shadow: 0 12px 34px rgba(15, 20, 25, .08), 0 0 0 1px color-mix(in srgb, var(--blue) 9%, transparent);
    transition: border-color 180ms ease, box-shadow 260ms ease;
  }

  html.motion-enabled.motion-platform-macos #toast.show {
    animation: macos-toast-in 310ms var(--motion-spring-out) both;
  }

  html.motion-enabled.motion-platform-macos .incoming-message-bubble.show {
    animation: macos-notification-in 340ms var(--motion-spring-out) both;
  }

  .topbar nav {
    position: relative;
    isolation: isolate;
  }

  .topbar nav > a {
    z-index: 1;
  }

  .macos-sidebar-selection {
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: var(--mac-sidebar-width, 0px);
    height: var(--mac-sidebar-height, 0px);
    border: 1px solid color-mix(in srgb, var(--blue) 13%, var(--line));
    border-radius: 15px;
    background:
      linear-gradient(112deg, color-mix(in srgb, var(--blue) 11%, var(--surface)), color-mix(in srgb, #9b7af2 6%, var(--surface)));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 55%, transparent), 0 4px 14px rgba(15, 20, 25, .045);
    opacity: 0;
    transform: translate3d(var(--mac-sidebar-x, 0px), var(--mac-sidebar-y, 0px), 0);
    transition:
      transform 380ms var(--motion-spring-out),
      opacity 150ms ease;
    pointer-events: none;
  }

  .topbar nav.macos-selection-ready .macos-sidebar-selection { opacity: 1; }
  .topbar nav.macos-selection-ready > a.active {
    border-color: transparent !important;
    background: transparent !important;
  }
}

@keyframes macos-panel-open {
  0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.974); }
  74% { opacity: 1; transform: translate3d(0, -1px, 0) scale(1.002); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes macos-panel-close {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 7px, 0) scale(.985); }
}

@keyframes macos-toast-in {
  0% { opacity: 0; transform: translate3d(-50%, 9px, 0) scale(.965); }
  100% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
}

@keyframes macos-notification-in {
  0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.975); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width:1023px) {
  :root {
    --motion-duration-page: 230ms;
    --motion-duration-sheet: 620ms;
  }

  html.motion-enabled .page.active { view-transition-name: none; }

  html.motion-platform-ios .topbar nav {
    transition: transform 520ms var(--motion-spring-out) !important;
  }

  body.nav-open .topbar nav { will-change: transform; }

  #navBackdrop {
    transition: opacity 340ms ease, visibility 340ms step-end !important;
  }

  body.nav-open #navBackdrop {
    transition: opacity 340ms ease, visibility 0s step-start !important;
  }

  html.motion-enabled.motion-platform-ios dialog[open]:not(.platform-dialog-closing) {
    animation: ios-sheet-open var(--motion-duration-sheet) var(--motion-spring-out) both !important;
    transform-origin: center bottom;
    will-change: transform, opacity;
  }

  html.motion-enabled.motion-platform-ios dialog[open].motion-dialog-settled:not(.platform-dialog-closing) {
    animation: none !important;
    will-change: auto;
  }

  html.motion-enabled.motion-platform-ios dialog[open]:not(.platform-dialog-closing)::backdrop {
    animation: platform-backdrop-open 300ms ease-out both !important;
  }

  html.motion-enabled.motion-platform-ios dialog[open].ios-sheet-closing {
    animation: ios-sheet-close 330ms var(--motion-accelerate) both !important;
    pointer-events: none;
  }

  html.motion-enabled.motion-platform-ios dialog[open].ios-sheet-closing::backdrop {
    animation: platform-backdrop-close 250ms ease-in both !important;
  }

  html.motion-enabled.motion-platform-ios :where(
    button:not(:disabled),
    .topbar nav a,
    .post-item,
    .thread-card,
    .message-friend-item,
    .message-group-item,
    .notification-item,
    .friend-grid > a
  ):active {
    transform: scale(.965);
    transition-duration: 70ms !important;
  }

  html.motion-enabled.motion-platform-ios #toast.show {
    animation: ios-toast-in 460ms var(--motion-spring-out) both;
  }

  html.motion-enabled.motion-platform-ios .incoming-message-bubble.show {
    animation: ios-notification-in 560ms var(--motion-spring-out) both;
  }

  @keyframes ios-sheet-open {
    0% { opacity: .7; transform: translate3d(0, 102%, 0) scale(.985); }
    66% { opacity: 1; transform: translate3d(0, -10px, 0) scale(1.002); }
    82% { transform: translate3d(0, 3px, 0) scale(.999); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }

  @keyframes ios-sheet-close {
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to { opacity: .35; transform: translate3d(0, 102%, 0) scale(.985); }
  }

  @keyframes ios-toast-in {
    0% { opacity: 0; transform: translate3d(-50%, 18px, 0) scale(.9); }
    70% { opacity: 1; transform: translate3d(-50%, -2px, 0) scale(1.018); }
    100% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  }

  /* iOS 26-style Liquid Glass navigation layer. */
  #mobileDock {
    --liquid-light-x: 50%;
    --liquid-light-y: 0%;
    isolation: isolate;
    right: 9px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 9px;
    width: auto;
    height: 70px;
    padding: 5px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 25px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .56), rgba(244, 250, 255, .28) 48%, rgba(220, 233, 247, .38)),
      color-mix(in srgb, var(--surface) 52%, transparent) !important;
    box-shadow:
      0 18px 44px rgba(12, 28, 45, .19),
      0 2px 8px rgba(24, 55, 78, .08),
      inset 0 1px 0 rgba(255, 255, 255, .86),
      inset 0 -1px 0 rgba(116, 143, 168, .13) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.48) brightness(1.05);
    backdrop-filter: blur(28px) saturate(1.48) brightness(1.05);
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center bottom;
    transition:
      transform 560ms var(--motion-spring-out),
      opacity 240ms ease,
      box-shadow 300ms ease !important;
    contain: layout style;
  }

  .dark #mobileDock {
    border-color: rgba(255, 255, 255, .16);
    background:
      linear-gradient(145deg, rgba(48, 61, 73, .62), rgba(17, 24, 31, .42) 52%, rgba(24, 31, 39, .58)),
      rgba(9, 14, 19, .52) !important;
    box-shadow:
      0 20px 50px rgba(0, 0, 0, .42),
      inset 0 1px 0 rgba(255, 255, 255, .18),
      inset 0 -1px 0 rgba(0, 0, 0, .22) !important;
  }

  #mobileDock::before,
  #mobileDock::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  #mobileDock::before {
    background:
      radial-gradient(120px 72px at var(--liquid-light-x) var(--liquid-light-y), rgba(255, 255, 255, .72), transparent 68%),
      linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, .2) 42%, transparent 66%);
    opacity: .72;
    transition: opacity 240ms ease;
  }

  #mobileDock::after {
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: inset 0 0 0 .5px rgba(93, 129, 157, .09);
  }

  #mobileDock .liquid-glass-indicator {
    position: absolute;
    z-index: 1;
    top: 5px;
    left: 0;
    width: var(--liquid-width, 64px);
    height: 60px;
    border: 1px solid rgba(255, 255, 255, .66);
    border-radius: 20px;
    background:
      radial-gradient(70px 48px at 35% 5%, rgba(255, 255, 255, .88), transparent 72%),
      linear-gradient(145deg, rgba(255, 255, 255, .58), color-mix(in srgb, var(--blue) 13%, rgba(226, 241, 255, .44)));
    box-shadow:
      0 8px 20px color-mix(in srgb, var(--blue) 15%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, .9),
      inset 0 -1px 0 rgba(74, 116, 151, .1);
    transform: translate3d(var(--liquid-x, 5px), 0, 0);
    transform-origin: center;
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
  }

  #mobileDock.has-active .liquid-glass-indicator { opacity: 1; }

  .dark #mobileDock .liquid-glass-indicator {
    border-color: rgba(255, 255, 255, .2);
    background:
      radial-gradient(70px 48px at 35% 5%, rgba(255, 255, 255, .24), transparent 70%),
      linear-gradient(145deg, color-mix(in srgb, var(--blue) 25%, rgba(61, 74, 87, .62)), rgba(26, 35, 45, .52));
    box-shadow:
      0 9px 24px rgba(0, 0, 0, .28),
      inset 0 1px 0 rgba(255, 255, 255, .23);
  }

  #mobileDock button {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 60px;
    height: 60px !important;
    gap: 1px;
    border-radius: 19px !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--muted) 91%, transparent);
    transform: translate3d(0, 0, 0);
    transition: color 220ms ease, transform 360ms var(--motion-spring-out) !important;
  }

  #mobileDock button span {
    display: grid;
    width: 32px;
    height: 31px;
    place-items: center;
    border-radius: 12px;
    background: transparent !important;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center;
    transition: transform 480ms var(--motion-spring-out), color 220ms ease !important;
  }

  #mobileDock button span .ui-icon { width: 20px; height: 20px; stroke-width: 1.85; }
  #mobileDock button small {
    max-height: 14px;
    overflow: hidden;
    font-size: 9px;
    font-weight: 670;
    letter-spacing: -.01em;
    opacity: .76;
    transform: translate3d(0, 0, 0);
    transition: opacity 220ms ease, transform 480ms var(--motion-spring-out), max-height 420ms var(--motion-spring-out) !important;
  }

  #mobileDock button.active { color: var(--blue) !important; }
  #mobileDock button.active span { color: var(--blue); transform: translate3d(0, -1px, 0) scale(1.1); }
  #mobileDock button.active small { opacity: 1; transform: translate3d(0, 1px, 0); }
  #mobileDock button.active::before { display: none !important; }

  #mobileDock.is-pressing .liquid-glass-indicator {
    filter: brightness(1.035);
  }

  #mobileDock.is-pressing button.active span { transform: translate3d(0, 1px, 0) scale(.91); }

  #mobileDock.is-minimized {
    opacity: .96;
    transform: translate3d(0, 9px, 0) scale(.88, .84);
    box-shadow:
      0 11px 29px rgba(12, 28, 45, .17),
      inset 0 1px 0 rgba(255, 255, 255, .78) !important;
  }

  #mobileDock.is-minimized button small {
    max-height: 0;
    opacity: 0;
    transform: translate3d(0, 5px, 0);
  }

  #mobileDock.is-minimized button span { transform: translate3d(0, 5px, 0) scale(1.04); }
  #mobileDock.is-minimized button.active span { transform: translate3d(0, 4px, 0) scale(1.14); }

  body.liquid-dock-minimized #mobileComposeFab {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(.76);
    pointer-events: none;
  }

  @supports (content-visibility:auto) {
    #forum .thread-card,
    #home .post-item,
    .standalone-list .notification-item {
      content-visibility: auto;
      contain-intrinsic-size: auto 132px;
    }
  }

  #mobileComposeFab {
    transition: transform 480ms var(--motion-spring-out), opacity 240ms ease, box-shadow 240ms ease !important;
  }
}

@media (max-width:1023px) and (prefers-contrast:more) {
  #mobileDock { background: color-mix(in srgb, var(--surface) 91%, transparent) !important; border-color: color-mix(in srgb, var(--text) 35%, transparent); }
}

@media (max-width:1023px) and (prefers-reduced-transparency:reduce) {
  #mobileDock { background: var(--surface) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* The system preference wins: state changes are immediate and motion-free. */
@media (prefers-reduced-motion:reduce) {
  :root {
    --motion-duration-page: 1ms;
    --motion-duration-sheet: 1ms;
  }

  html.motion-enabled .motion-reveal,
  html.motion-enabled .motion-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.motion-enabled .social-hero .hero-visual,
  dialog[open],
  dialog[open]::backdrop,
  #toast,
  .incoming-message-bubble,
  #navBackdrop,
  .topbar nav {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  html { scroll-behavior: auto; }
  .page.active { will-change: auto !important; }

  #mobileDock,
  #mobileDock .liquid-glass-indicator,
  #mobileDock button span,
  #mobileDock button small {
    animation: none !important;
    transition-duration: .01ms !important;
  }

  ::view-transition-old(page-content),
  ::view-transition-new(page-content) { animation: none !important; }
}