/*
 * By Tijs cross-document page transition.
 *
 * The browser keeps doing a real WordPress navigation. Elementor, forms,
 * analytics and page-specific scripts therefore boot normally on every page.
 */
@view-transition {
  navigation: auto;
}

:root {
  --bytijs-transition-duration: 1200ms;
  --bytijs-transition-ease: cubic-bezier(0.7, 0.05, 0.13, 1);
  --bytijs-transition-background: #0d0d0b;
}

html.bytijs-vt-internal .by-tijs-loader {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Elementor assigns Paralucent directly to h2 elements. Target the Cases
 * heading itself so Animo wins on desktop, tablet and mobile, while project
 * names and metadata keep their own Inter typography.
 */
.byt-work .byt-work__title,
.byt-work .byt-work__title > span {
  font-family: "Animo", Arial, sans-serif !important;
  font-style: normal;
  font-weight: 400;
}

/*
 * Hello Elementor's reset adds a #c36 background to hovered buttons. The
 * Cases view controls are icon-only, so keep their canvas transparent while
 * preserving their existing active/inactive opacity and focus outline.
 */
.byt-work .byt-work__view-button,
.byt-work .byt-work__view-button:hover,
.byt-work .byt-work__view-button:focus,
.byt-work .byt-work__view-button:active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--byt-cream) !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
}

.byt-work .byt-work__view-button::before,
.byt-work .byt-work__view-button::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.byt-work .byt-work__view-button svg,
.byt-work .byt-work__view-button path {
  filter: none !important;
  -webkit-filter: none !important;
}

/*
 * The header owns a separate snapshot. Controlled clicks hide that snapshot;
 * history navigation gets the short fallback animation defined below.
 */
header.elementor-location-header[data-elementor-type="header"] {
  view-transition-name: bytijs-header;
}

html.bytijs-header-exit header.elementor-location-header,
html.bytijs-header-exit .by-tijs-dock,
html.bytijs-header-exit .by-tijs-dock * {
  pointer-events: none !important;
}

/*
 * An expanded menu is closed by its own toggle/controller. Do not override
 * its panel, tile, label, hamburger or width transitions here: this preserves
 * the exact same stagger and clipping as a normal manual menu close.
 *
 * JavaScript waits for those real native animations to finish. Only then it
 * adds the top-exit class and lets the compact top row leave.
 */
html.bytijs-header-exit--expanded.bytijs-header-top-exit
  .by-tijs-dock__top {
  animation: bytijs-header-top-out 240ms var(--by-tijs-nav-ease) both;
}

html.bytijs-header-exit--compact.bytijs-header-top-exit
  .by-tijs-dock__top {
  animation: bytijs-header-top-out 220ms var(--by-tijs-nav-ease) both;
}

html.bytijs-header-snapshot-hidden
  header.elementor-location-header[data-elementor-type="header"],
html.bytijs-header-enter-pending
  header.elementor-location-header[data-elementor-type="header"] {
  visibility: hidden !important;
}

html.bytijs-header-entering
  header.elementor-location-header[data-elementor-type="header"] {
  visibility: visible !important;
}

html.bytijs-header-entering .by-tijs-dock__top {
  animation: bytijs-header-top-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition {
  background: var(--bytijs-transition-background);
}

::view-transition-group(root),
::view-transition-image-pair(root) {
  animation-duration: var(--bytijs-transition-duration);
  animation-timing-function: var(--bytijs-transition-ease);
  animation-fill-mode: both;
}

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root) {
  z-index: 1;
  mix-blend-mode: normal;
  animation: bytijs-page-out var(--bytijs-transition-duration)
    var(--bytijs-transition-ease) both;
}

::view-transition-new(root) {
  z-index: 2;
  mix-blend-mode: normal;
  animation: bytijs-page-in var(--bytijs-transition-duration)
    var(--bytijs-transition-ease) both;
}

::view-transition-group(bytijs-header) {
  z-index: 2147482000;
  animation: none;
}

::view-transition-old(bytijs-header) {
  opacity: 1;
  mix-blend-mode: normal;
  animation: bytijs-header-snapshot-out 260ms
    cubic-bezier(0.625, 0.05, 0, 1) both;
}

::view-transition-new(bytijs-header) {
  opacity: 0;
  mix-blend-mode: normal;
  animation: none;
}

@keyframes bytijs-page-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0.2;
    transform: translate3d(0, -25vh, 0);
  }
}

@keyframes bytijs-page-in {
  from {
    opacity: 1;
    transform: translate3d(0, 100vh, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bytijs-header-top-out {
  from {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, -0.65rem, 0) scale(0.97);
  }
}

@keyframes bytijs-header-top-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, -0.65rem, 0) scale(0.97);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bytijs-header-snapshot-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -0.65rem, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bytijs-transition-duration: 1ms;
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(bytijs-header),
  ::view-transition-new(bytijs-header) {
    animation-duration: 1ms;
  }

  html.bytijs-header-exit .by-tijs-dock,
  html.bytijs-header-exit .by-tijs-dock__panel,
  html.bytijs-header-exit .by-tijs-dock__tile,
  html.bytijs-header-exit .by-tijs-dock__tile-label,
  html.bytijs-header-exit .by-tijs-dock__social-icon,
  html.bytijs-header-exit .by-tijs-dock__top,
  html.bytijs-header-entering .by-tijs-dock__top {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}