/* Single page-transition system. The lace mark is the active nav indicator.
   Card expansion uses #tx-cover. Home ↔ About uses one incoming fade.
   Durations live here so the script and the CSS stay on the same clock. */

:root {
  --tx-project-duration: 550ms;
  --tx-reveal: 160ms;
  --tx-nav-duration: 460ms;
  --tx-fade-out: 180ms;
  --tx-fade-in: 280ms;
}

.site-header {
  view-transition-name: tx-header;
}

.site-header__marklet {
  view-transition-name: tx-nav-mark;
}

::view-transition-group(tx-header),
::view-transition-old(tx-header),
::view-transition-new(tx-header) {
  animation: none;
}

::view-transition-group(tx-nav-mark) {
  animation-duration: var(--tx-nav-duration);
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 10;
}

::view-transition-old(root) {
  animation: tx-out var(--tx-fade-out) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

::view-transition-new(root) {
  animation: tx-in var(--tx-fade-in) 140ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes tx-out {
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

@keyframes tx-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

/* Home and About use the gallery entrance on the page itself.
   A second fade on main played on top of that and read as a reload. */

html.tx-leaving main {
  opacity: 0;
  transform: translateY(-20px);
  transition:
    opacity var(--tx-fade-out) cubic-bezier(0.2, 0.8, 0.2, 1),
    transform var(--tx-fade-out) cubic-bezier(0.2, 0.8, 0.2, 1);
}

#tx-cover {
  position: fixed;
  z-index: 4000;
  margin: 0;
  pointer-events: none;
  display: none;
  overflow: hidden;
  background: linear-gradient(180deg, #f1f4f7 0%, #e9edf1 100%);
  box-shadow: inset 0 0 0 1px rgba(43, 46, 54, 0.05);
}

html.tx-in .site-header,
html.tx-in .bf-layout,
html.tx-in .site-footer {
  opacity: 0;
}

/* #tx-cover stays hidden until a script has placed the project image on it.
   Showing it from CSS alone paints the pale panel with nothing inside. */

#my-work {
  scroll-margin-top: 100px;
}

@media (prefers-reduced-motion: reduce) {
  #tx-cover {
    display: none !important;
  }

  html.tx-fade main,
  html.tx-leaving main,
  html.tx-in .site-header,
  html.tx-in .bf-layout,
  html.tx-in .site-footer {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}