/* Positioning stays in CSS: no width/top writes or forced layout on scroll. */
header#masthead {
  position: sticky;
  top: 0;
  z-index: 980;
}

#masthead .top_bar {
  width: 100%;
  position: relative;
  transition: background-color 220ms ease, box-shadow 220ms ease;
}

#masthead .uk-sticky-placeholder {
  display: none;
}

#masthead .top_bar.uk-active {
  box-shadow: 0 1px 0 var(--border-color, rgba(128, 128, 128, 0.12));
}

.pix-sticky-aside {
  position: sticky;
  flex-shrink: 0;
  top: min(var(--pix-sticky-offset, 0px), calc(100vh - var(--pix-aside-height, 0px) - 16px));
}

.sidebar_right_inner {
  flex: 1;
  --pix-sticky-offset: 72px;
}

.sidebar_right .right_admin_tool {
  position: sticky;
  top: 0;
  z-index: 980;
  flex-shrink: 0;
}

:root {
  --pix-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* No perpetual effects and no document-sized GPU layers. */
.pix-scene {
  display: none;
}

/* List templates used to animate every card immediately, including offscreen cards. */
.p_item.uk-animation-slide-bottom-small {
  animation: none;
}

.left_menu_box ul li a,
.left_menu_box ul li a:hover,
.link_group .item,
.link_group .item:hover,
:is(.moment_cat_nav, .posts_cat_nav, .photos_cat_nav) a,
:is(#pagination, #t_pagination, #p_pagination, .arc_pagenav) a,
.top_tool > a,
.post_footer_meta a.up_like,
.post_footer_meta .show_comment {
  transition: transform 320ms var(--pix-ease-out), background-color 200ms ease, color 200ms ease;
}

/* Clip only image thumbnails, never entire cards containing popovers/modals. */
.mo_img,
.normal_card_content .feature,
.normal_grid_content .feature {
  overflow: hidden;
}

.mo_img img,
.normal_card_content .feature img,
.normal_grid_content .feature img {
  transition: transform 650ms var(--pix-ease-out), opacity 400ms ease;
}

img.lazy.loaded {
  transition: transform 650ms var(--pix-ease-out), opacity 400ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .left_menu_box ul li a:hover {
    transform: translateX(4px);
    box-shadow: none;
  }

  .link_group .item:hover,
  :is(.moment_cat_nav, .posts_cat_nav, .photos_cat_nav) a:hover,
  :is(#pagination, #t_pagination, #p_pagination, .arc_pagenav) a:hover,
  .top_tool > a:hover {
    transform: translateY(-2px);
  }

  .mo_img:hover img,
  .normal_card_content .feature:hover img,
  .normal_grid_content .feature:hover img {
    transform: scale(1.035);
  }
}

.left_menu_box ul li a:active,
:is(.moment_cat_nav, .posts_cat_nav, .photos_cat_nav) a:active,
:is(#pagination, #t_pagination, #p_pagination, .arc_pagenav) a:active,
.top_tool > a:active,
.post_footer_meta a.up_like:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

/* The legacy reset removes keyboard focus outlines; restore an accessible cue. */
body :is(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pix-theme);
  outline-offset: 4px;
}

.listree-list {
  scroll-margin-top: 88px;
}

/* Keep the mobile drawer outside sticky/filtered/transformed page ancestors. */
#m_offcanvas {
  z-index: 20000;
}

#m_offcanvas .uk-offcanvas-bar {
  box-sizing: border-box;
  width: min(300px, calc(100vw - 48px));
  padding-top: calc(58px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}

.mobile_nav_btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

#m_offcanvas .uk-offcanvas-close {
  top: calc(12px + env(safe-area-inset-top));
  min-width: 36px;
  min-height: 36px;
  color: var(--dark-color, #493745);
}

.dark #m_offcanvas .uk-offcanvas-close {
  color: var(--light-color, #eee);
}

/* Match UIkit's 960px desktop-sidebar breakpoint, including landscape phones. */
@media (max-width: 959px) {
  .m_top_nav.is_mobile { display: block; }
  .top_nav.not_mobile { display: none; }
}

@media (min-width: 960px) {
  .m_top_nav.is_mobile { display: none; }
  .top_nav.not_mobile { display: block; }
}

/* Keep scrolling surfaces inexpensive on phones/tablets. No device-model sniffing. */
@media (hover: none), (pointer: coarse) {
  body > .pix-scene {
    transform: none;
  }

  /* The site's custom head injects a fixed, full-screen grain overlay. */
  body.home.blog::before {
    display: none !important;
  }

  #masthead .top_bar,
  .footer_nav_box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #masthead .top_bar.mobile_active,
  .footer_nav_box {
    background: var(--light-bg-color, #fff) !important;
  }

  .dark #masthead .top_bar.mobile_active,
  .dark .footer_nav_box {
    background: var(--dark-medium-bg, #161829) !important;
  }

  .mo_img img.lazy.loaded {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .left_menu_box ul li a,
  .link_group .item,
  .mo_img img,
  .normal_card_content .feature img,
  .normal_grid_content .feature img,
  :is(.moment_cat_nav, .posts_cat_nav, .photos_cat_nav) a,
  :is(#pagination, #t_pagination, #p_pagination, .arc_pagenav) a,
  .top_tool > a,
  .post_footer_meta a.up_like {
    transform: none !important;
  }
}