/*
  Main column: Zyro uses opacity:0 on .transition until Vue sets data-animation-state.
  Without this, failed hydration leaves a blank page. These rules intentionally match
  the *end* state of entry animations (opacity 1, no offset), so layout matches the
  live site after motion finishes — but micro-motion and some JS-driven tweaks differ.

  Append ?anim=1 to the URL to skip this block and try full Zyro/Vue behavior (closer
  motion; if scripts fail, content may stay invisible until refresh without ?anim=1).
*/
html:not(.respect-zyro-animations) .page__blocks .transition.transition--slide:not(.transition--root-hidden),
html:not(.respect-zyro-animations) .page__blocks .transition.transition--fade:not(.transition--root-hidden),
html:not(.respect-zyro-animations) .page__blocks .transition.transition--scale:not(.transition--root-hidden) {
  opacity: 1 !important;
  transform: none !important;
}

html:not(.respect-zyro-animations) .page__blocks .transition.transition--slide.transition--root-hidden [data-animation-role="block-element"],
html:not(.respect-zyro-animations) .page__blocks .transition.transition--slide.transition--root-hidden [data-animation-role="image"],
html:not(.respect-zyro-animations) .page__blocks .transition.transition--fade.transition--root-hidden [data-animation-role="block-element"],
html:not(.respect-zyro-animations) .page__blocks .transition.transition--fade.transition--root-hidden [data-animation-role="image"],
html:not(.respect-zyro-animations) .page__blocks .transition.transition--scale.transition--root-hidden [data-animation-role="block-element"],
html:not(.respect-zyro-animations) .page__blocks .transition.transition--scale.transition--root-hidden [data-animation-role="image"] {
  opacity: 1 !important;
  transform: none !important;
}

/* file:// / preview: same treatment site-wide when html gets this class (see inline script). */
html.no-entry-anim .transition.transition--slide:not(.transition--root-hidden),
html.no-entry-anim .transition.transition--fade:not(.transition--root-hidden),
html.no-entry-anim .transition.transition--scale:not(.transition--root-hidden) {
  opacity: 1 !important;
  transform: none !important;
}

html.no-entry-anim .transition.transition--slide.transition--root-hidden [data-animation-role="block-element"],
html.no-entry-anim .transition.transition--slide.transition--root-hidden [data-animation-role="image"],
html.no-entry-anim .transition.transition--fade.transition--root-hidden [data-animation-role="block-element"],
html.no-entry-anim .transition.transition--fade.transition--root-hidden [data-animation-role="image"],
html.no-entry-anim .transition.transition--scale.transition--root-hidden [data-animation-role="block-element"],
html.no-entry-anim .transition.transition--scale.transition--root-hidden [data-animation-role="image"] {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .transition.transition--slide:not(.transition--root-hidden),
  .transition.transition--fade:not(.transition--root-hidden),
  .transition.transition--scale:not(.transition--root-hidden) {
    opacity: 1 !important;
    transform: none !important;
  }
  .transition.transition--slide.transition--root-hidden [data-animation-role="block-element"],
  .transition.transition--slide.transition--root-hidden [data-animation-role="image"],
  .transition.transition--fade.transition--root-hidden [data-animation-role="block-element"],
  .transition.transition--fade.transition--root-hidden [data-animation-role="image"],
  .transition.transition--scale.transition--root-hidden [data-animation-role="block-element"],
  .transition.transition--scale.transition--root-hidden [data-animation-role="image"] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Sticky nav after scroll: Zyro uses .sticky-trigger + Vue (isWithShadow, opaque background).
   header-scroll-polyfill.js sets html[data-header-scrolled] when the sentinel leaves the viewport.
   :not(.block-header--with-shadow) avoids duplicating box-shadow when Vue already applied it. */
html[data-header-scrolled] .top-blocks .block-header .background,
html[data-header-scrolled] header.block-header .background {
  --background-color: rgb(33, 30, 27) !important;
  background-color: rgb(33, 30, 27) !important;
  background: rgb(33, 30, 27) !important;
}

html[data-header-scrolled] .top-blocks .block-header:not(.block-header--with-shadow),
html[data-header-scrolled] header.block-header:not(.block-header--with-shadow) {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.102) !important;
}

/* Mobile nav: keep dropdown above page blocks; avoid clipping (see mobile-nav-polyfill.js) */
@media screen and (max-width: 920px) {
  button.block-header__hamburger-menu {
    touch-action: manipulation;
  }

  .block-header-layout-mobile {
    position: relative;
    z-index: 2000 !important;
  }

  .block-header-layout-mobile__dropdown--open {
    z-index: 2001 !important;
  }

  body.zyro-mobile-nav-open .top-blocks--sticky,
  body.zyro-mobile-nav-open header.block-header,
  html.zyro-mobile-nav-open .top-blocks--sticky,
  html.zyro-mobile-nav-open header.block-header {
    overflow: visible !important;
  }

  html.zyro-mobile-nav-open,
  body.zyro-mobile-nav-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .block-header-layout-mobile__dropdown--open {
    -webkit-overflow-scrolling: touch;
  }
}