/* Directional page slides. Nav stays; content leaves and the next page enters. */

:root {
  --aktuell-page-slide-duration: 0.5s;
  --aktuell-page-slide-ease: var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1));
  --aktuell-page-nav-ease: var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1));
}

html.aktuell-sliding,
html.aktuell-enter-left,
html.aktuell-enter-right,
html:active-view-transition {
  overflow-x: hidden;
}

html.aktuell-sliding body,
html.aktuell-enter-left body,
html.aktuell-enter-right body,
html:active-view-transition body {
  overflow-x: hidden;
}

.page-content {
  transition-property: transform;
  transition-duration: var(--aktuell-page-slide-duration, 0.5s);
  transition-timing-function: var(--aktuell-page-nav-ease, var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1)));
}

html.aktuell-enter-left .page-content:not(.slide-active):not(.slide-out-left):not(.slide-out-right),
.page-content.slide-in-left {
  transform: translate3d(-100%, 0, 0) !important;
  opacity: 1;
  transition: none !important;
}

html.aktuell-enter-right .page-content:not(.slide-active):not(.slide-out-left):not(.slide-out-right),
.page-content.slide-in-right {
  transform: translate3d(100%, 0, 0) !important;
  opacity: 1;
  transition: none !important;
}

.page-content.slide-active {
  transform: none;
  opacity: 1;
  transition-property: transform !important;
  transition-duration: var(--aktuell-page-slide-duration, 0.5s) !important;
  transition-timing-function: var(--aktuell-page-nav-ease, var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1))) !important;
}

.page-content.slide-out-left,
.page-content.slide-out-right {
  opacity: 1;
  will-change: transform;
  transition-property: transform !important;
  transition-duration: var(--aktuell-page-slide-duration, 0.5s) !important;
  transition-timing-function: var(--aktuell-page-nav-ease, var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1))) !important;
}

html:active-view-transition .page-content {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

html.aktuell-slide-settled .page-content,
html.aktuell-slide-settled .page-content.slide-active {
  will-change: auto;
}

html.aktuell-slide-settled .page-content,
html.aktuell-slide-settled .page-content.slide-in-left,
html.aktuell-slide-settled .page-content.slide-in-right,
html.aktuell-slide-settled .page-content.slide-out-left,
html.aktuell-slide-settled .page-content.slide-out-right {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html.aktuell-sliding.aktuell-slide-settled .page-content.slide-out-left {
  transform: translate3d(-100%, 0, 0) !important;
}

html.aktuell-sliding.aktuell-slide-settled .page-content.slide-out-right {
  transform: translate3d(100%, 0, 0) !important;
}

.page-content.slide-out-left {
  transform: translate3d(-100%, 0, 0) !important;
}

.page-content.slide-out-right {
  transform: translate3d(100%, 0, 0) !important;
}

html.aktuell-enter-left .page-content > *,
html.aktuell-enter-right .page-content > *,
html.aktuell-sliding .page-content > *,
.page-content.slide-in-left > *,
.page-content.slide-in-right > *,
.page-content.slide-out-left > *,
.page-content.slide-out-right > * {
  animation: none !important;
}

/* Enter: pieces may start off-canvas (split). Leave: clip so location cannot paint on the next page. */
html.aktuell-enter-left .page-content.page-connect,
html.aktuell-enter-right .page-content.page-connect,
.page-content.page-connect.slide-in-left,
.page-content.page-connect.slide-in-right {
  overflow: visible !important;
}
html.aktuell-sliding .page-content.page-connect.slide-out-left,
html.aktuell-sliding .page-content.page-connect.slide-out-right,
html:active-view-transition .page-content.page-connect {
  overflow: hidden !important;
}
.page-connect .contact-centered,
.page-connect .contact-title,
.page-connect .contact-links,
.page-connect .contact-location,
.page-connect .contact-location-label,
.page-connect .contact-clock,
.page-connect .mobile-contact-bottom-left {
  transition-property: transform;
  transition-duration: var(--aktuell-page-slide-duration, 0.5s);
  transition-timing-function: var(--aktuell-page-nav-ease, var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1)));
}

/* Enter only: parent offsets so title/links vs location can split. Never on slide-out. */
html.aktuell-enter-right .page-content.page-connect:not(.slide-active) .contact-centered,
.page-content.page-connect.slide-in-right .contact-centered {
  transform: translate3d(-100vw, 0, 0);
}

html.aktuell-enter-left .page-content.page-connect:not(.slide-active) .contact-centered,
.page-content.page-connect.slide-in-left .contact-centered {
  transform: translate3d(100vw, 0, 0);
}

html.aktuell-enter-left .page-content.page-connect:not(.slide-active) .contact-centered,
html.aktuell-enter-right .page-content.page-connect:not(.slide-active) .contact-centered,
.page-content.page-connect.slide-in-left .contact-centered,
.page-content.page-connect.slide-in-right .contact-centered {
  transition: none;
}

html.aktuell-enter-left .page-content.page-connect:not(.slide-active) .contact-title,
html.aktuell-enter-left .page-content.page-connect:not(.slide-active) .contact-links,
html.aktuell-enter-right .page-content.page-connect:not(.slide-active) .contact-title,
html.aktuell-enter-right .page-content.page-connect:not(.slide-active) .contact-links,
.page-content.page-connect.slide-in-left .contact-title,
.page-content.page-connect.slide-in-left .contact-links,
.page-content.page-connect.slide-in-right .contact-title,
.page-content.page-connect.slide-in-right .contact-links {
  transform: translate3d(-100vw, 0, 0);
}

html.aktuell-enter-left .page-content.page-connect:not(.slide-active) .contact-location,
html.aktuell-enter-right .page-content.page-connect:not(.slide-active) .contact-location,
.page-content.page-connect.slide-in-left .contact-location,
.page-content.page-connect.slide-in-right .contact-location {
  transform: translate3d(100vw, 0, 0);
}

/* Leave: parent stays put so children are not cancelled back to ~0. All pieces follow the page. */
.page-content.page-connect.slide-out-left .contact-centered,
.page-content.page-connect.slide-out-right .contact-centered {
  transform: none;
}

.page-content.page-connect.slide-out-left .contact-title,
.page-content.page-connect.slide-out-left .contact-links,
.page-content.page-connect.slide-out-left .contact-location,
.page-content.page-connect.slide-out-left .contact-location-label,
.page-content.page-connect.slide-out-left .contact-clock,
.page-content.page-connect.slide-out-left .mobile-contact-bottom-left {
  transform: translate3d(-100vw, 0, 0);
}

.page-content.page-connect.slide-out-right .contact-title,
.page-content.page-connect.slide-out-right .contact-links,
.page-content.page-connect.slide-out-right .contact-location,
.page-content.page-connect.slide-out-right .contact-location-label,
.page-content.page-connect.slide-out-right .contact-clock,
.page-content.page-connect.slide-out-right .mobile-contact-bottom-left {
  transform: translate3d(100vw, 0, 0);
}

html.aktuell-enter-left .page-content.page-connect:not(.slide-active) .contact-title,
html.aktuell-enter-left .page-content.page-connect:not(.slide-active) .contact-links,
html.aktuell-enter-left .page-content.page-connect:not(.slide-active) .contact-location,
html.aktuell-enter-right .page-content.page-connect:not(.slide-active) .contact-title,
html.aktuell-enter-right .page-content.page-connect:not(.slide-active) .contact-links,
html.aktuell-enter-right .page-content.page-connect:not(.slide-active) .contact-location,
.page-content.page-connect.slide-in-left .contact-title,
.page-content.page-connect.slide-in-left .contact-links,
.page-content.page-connect.slide-in-left .contact-location,
.page-content.page-connect.slide-in-right .contact-title,
.page-content.page-connect.slide-in-right .contact-links,
.page-content.page-connect.slide-in-right .contact-location {
  transition: none;
}

.page-content.page-connect.slide-active:not(.slide-out-left):not(.slide-out-right) .contact-centered,
.page-content.page-connect.slide-active:not(.slide-out-left):not(.slide-out-right) .contact-title,
.page-content.page-connect.slide-active:not(.slide-out-left):not(.slide-out-right) .contact-links,
.page-content.page-connect.slide-active:not(.slide-out-left):not(.slide-out-right) .contact-location,
.page-content.page-connect.slide-active:not(.slide-out-left):not(.slide-out-right) .contact-location-label,
.page-content.page-connect.slide-active:not(.slide-out-left):not(.slide-out-right) .contact-clock {
  transform: none;
}

/* View Transitions capture the page as one snapshot — do not pre-shift children. */
html:active-view-transition .page-connect .contact-centered,
html:active-view-transition .page-connect .contact-title,
html:active-view-transition .page-connect .contact-links,
html:active-view-transition .page-connect .contact-location,
html:active-view-transition .page-connect .contact-location-label,
html:active-view-transition .page-connect .contact-clock,
html:active-view-transition .page-connect .mobile-contact-bottom-left {
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .page-content,
  .page-content.slide-active,
  .page-content.slide-out-left,
  .page-content.slide-out-right {
    transition-duration: 0.01ms !important;
  }

  .page-connect .contact-centered,
  .page-connect .contact-title,
  .page-connect .contact-links,
  .page-connect .contact-location,
  .page-connect .contact-location-label,
  .page-connect .contact-clock,
  .page-connect .mobile-contact-bottom-left {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }
}

@view-transition {
  navigation: auto;
}

.page-content {
  view-transition-name: aktuell-page;
}

#mainNav.main-nav {
  view-transition-name: aktuell-nav;
}

#inspirationStrip,
.inspiration-nav-strip,
#fnStrip {
  view-transition-name: aktuell-strip;
}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-group(root) {
  animation: none !important;
  mix-blend-mode: normal;
}

::view-transition-old(aktuell-nav),
::view-transition-new(aktuell-nav),
::view-transition-old(aktuell-strip),
::view-transition-new(aktuell-strip) {
  animation: none !important;
  mix-blend-mode: normal;
}

/* Default VT group interpolates width/height/transform — that reads as a scale jump. */
::view-transition-group(aktuell-nav) {
  animation: none !important;
}

::view-transition-old(aktuell-page),
::view-transition-new(aktuell-page) {
  animation-duration: var(--aktuell-page-slide-duration, 0.5s);
  animation-timing-function: var(--aktuell-page-nav-ease, var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1)));
  animation-fill-mode: both;
  mix-blend-mode: normal;
}

::view-transition-group(aktuell-page) {
  animation: none;
}

/* Forward is the default if a type never lands — better than a root crossfade. */
::view-transition-old(aktuell-page) {
  animation-name: aktuell-vt-out-left;
}

::view-transition-new(aktuell-page) {
  animation-name: aktuell-vt-in-right;
}

html:active-view-transition-type(aktuell-to-right)::view-transition-old(aktuell-page) {
  animation-name: aktuell-vt-out-left;
}

html:active-view-transition-type(aktuell-to-right)::view-transition-new(aktuell-page) {
  animation-name: aktuell-vt-in-right;
}

html:active-view-transition-type(aktuell-to-left)::view-transition-old(aktuell-page) {
  animation-name: aktuell-vt-out-right;
}

html:active-view-transition-type(aktuell-to-left)::view-transition-new(aktuell-page) {
  animation-name: aktuell-vt-in-left;
}

/* Writings list ↔ entry: scale the thumb/hero, do not slide the page. */
html:active-view-transition-type(aktuell-fn-open)::view-transition-old(aktuell-page),
html:active-view-transition-type(aktuell-fn-close)::view-transition-old(aktuell-page) {
  animation-name: aktuell-fn-fade-out;
  animation-duration: 0.28s;
  animation-timing-function: var(--aktuell-open-ease, var(--aktuell-ease, cubic-bezier(0.05, 0.7, 0.1, 1)));
}

html:active-view-transition-type(aktuell-fn-open)::view-transition-new(aktuell-page),
html:active-view-transition-type(aktuell-fn-close)::view-transition-new(aktuell-page) {
  animation-name: aktuell-fn-fade-in;
  animation-duration: 0.36s;
  animation-delay: 80ms;
  animation-timing-function: var(--aktuell-open-ease, var(--aktuell-ease, cubic-bezier(0.05, 0.7, 0.1, 1)));
}

::view-transition-group(fn-open-media),
::view-transition-group(aktuell-hero-fn) {
  animation-duration: var(--aktuell-open-ms, var(--flip-dur, 0.85s));
  animation-timing-function: var(--aktuell-open-ease, var(--aktuell-ease, cubic-bezier(0.05, 0.7, 0.1, 1)));
}

html:active-view-transition-type(aktuell-fn-close)::view-transition-group(fn-open-media),
html:active-view-transition-type(aktuell-fn-close)::view-transition-group(aktuell-hero-fn) {
  animation-duration: var(--aktuell-close-ms, 0.7s);
}

::view-transition-old(fn-open-media),
::view-transition-new(fn-open-media),
::view-transition-old(aktuell-hero-fn),
::view-transition-new(aktuell-hero-fn) {
  animation-duration: var(--aktuell-open-ms, var(--flip-dur, 0.85s));
  animation-timing-function: var(--aktuell-open-ease, var(--aktuell-ease, cubic-bezier(0.05, 0.7, 0.1, 1)));
  mix-blend-mode: normal;
  object-fit: cover;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

html:active-view-transition-type(aktuell-fn-close)::view-transition-old(fn-open-media),
html:active-view-transition-type(aktuell-fn-close)::view-transition-new(fn-open-media),
html:active-view-transition-type(aktuell-fn-close)::view-transition-old(aktuell-hero-fn),
html:active-view-transition-type(aktuell-fn-close)::view-transition-new(aktuell-hero-fn) {
  animation-duration: var(--aktuell-close-ms, 0.7s);
}

@keyframes aktuell-fn-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes aktuell-fn-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes aktuell-vt-out-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}

@keyframes aktuell-vt-in-right {
  from { transform: translate3d(100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes aktuell-vt-out-right {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(100%, 0, 0); }
}

@keyframes aktuell-vt-in-left {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* Active nav sweep — letter opacity, not a sliding pill. */
.nav-active-sweep {
  display: none !important;
}

.nav-links a {
  position: relative;
  z-index: 1;
}

.nav-label-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-word {
  display: inline-block;
  vertical-align: baseline;
  white-space: nowrap;
}

.nav-inner {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transform-origin: 50% 50%;
  transition-property: transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.nav-letter {
  display: inline;
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.56s;
  transition-timing-function: var(--aktuell-headline-ease, cubic-bezier(0.05, 0.7, 0.1, 1));
  transition-delay: calc(var(--nav-letter-i, 0) * 32ms);
}

/* Press scale on the inner wrapper only — the flex <a> / <li> slot stays put. */
#mainNav.main-nav .nav-links,
#mainNav.main-nav ul.nav-links {
  gap: 8px;
}

#mainNav.main-nav .nav-links li {
  flex: 0 0 auto;
}

#mainNav.main-nav .nav-links a,
#mainNav.main-nav .nav-links a:hover,
#mainNav.main-nav .nav-links a:active,
#mainNav.main-nav .nav-links a.active,
#mainNav.main-nav .nav-links a[aria-current="page"] {
  display: inline-flex;
  align-items: center;
  transform: none !important;
}

#mainNav.main-nav .nav-links a:active .nav-inner {
  transform: scale(0.96);
}

/* Press scale must not ride into the page hop (captured VT / incoming split). */
html.aktuell-sliding #mainNav.main-nav .nav-inner,
html.aktuell-enter-left #mainNav.main-nav .nav-inner,
html.aktuell-enter-right #mainNav.main-nav .nav-inner,
html:active-view-transition #mainNav.main-nav .nav-inner,
#mainNav.main-nav.nav-hop-lock .nav-inner,
#mainNav.main-nav.nav-hop-lock .nav-links a:active .nav-inner {
  transform: none !important;
  transition-duration: 0.01ms !important;
}

html.aktuell-sliding #mainNav.main-nav:not(.first-visit):not(.fade-in):not(.is-scroll-hidden),
html.aktuell-enter-left #mainNav.main-nav:not(.first-visit):not(.fade-in):not(.is-scroll-hidden),
html.aktuell-enter-right #mainNav.main-nav:not(.first-visit):not(.fade-in):not(.is-scroll-hidden),
html:active-view-transition #mainNav.main-nav:not(.first-visit):not(.fade-in):not(.is-scroll-hidden) {
  transform: translate(-50%, 0) !important;
  will-change: auto;
}

/* After take land, chrome swap owns the slot — do not pin the menu over the strip. */
html.fn-take-chrome:not(:active-view-transition) #mainNav.main-nav.is-scroll-hidden {
  transform: translate(-50%, var(--aktuell-chrome-hide, calc(-100% - 52px))) !important;
}

#mainNav.main-nav.nav-measure-idle .nav-letter {
  opacity: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
}

#mainNav.main-nav.nav-width-frozen .nav-links,
#mainNav.main-nav.nav-width-frozen ul.nav-links {
  width: var(--nav-bar-w, max-content) !important;
  min-width: var(--nav-bar-w, max-content) !important;
  flex-wrap: nowrap !important;
}

#mainNav.main-nav.nav-width-frozen .nav-links li,
#mainNav.main-nav.nav-width-frozen .nav-links a,
#mainNav.main-nav.nav-width-frozen .nav-links a.active,
#mainNav.main-nav.nav-width-frozen .nav-links a[aria-current="page"] {
  width: var(--nav-freeze-w, auto) !important;
  min-width: var(--nav-freeze-w, auto) !important;
  max-width: var(--nav-freeze-w, none) !important;
  flex: 0 0 var(--nav-freeze-w, auto) !important;
  box-sizing: border-box !important;
}

#mainNav.main-nav.nav-width-frozen {
  min-width: var(--nav-shell-w, max-content);
}

.nav-letter--space {
  white-space: pre;
}

.main-nav.nav-letters-static .nav-letter,
.main-nav.first-visit .nav-letter {
  transition-duration: 0.01ms;
  transition-delay: 0ms;
}

.main-nav:not(.first-visit) .nav-links a.active,
.main-nav:not(.first-visit) .nav-links a[aria-current="page"],
body.dark-background .main-nav:not(.first-visit) .nav-links a.active,
body.dark-background .main-nav:not(.first-visit) .nav-links a[aria-current="page"],
body.nav-on-dark .main-nav:not(.first-visit) .nav-links a.active,
body.nav-on-dark .main-nav:not(.first-visit) .nav-links a[aria-current="page"],
body.fn-nav-on-dark .main-nav:not(.first-visit) .nav-links a.active,
body.fn-nav-on-dark .main-nav:not(.first-visit) .nav-links a[aria-current="page"] {
  opacity: 1 !important;
}

.main-nav:not(.first-visit) .nav-links a.active .nav-letter,
.main-nav:not(.first-visit) .nav-links a[aria-current="page"] .nav-letter {
  opacity: 0.4;
}

body.fn-nav-on-dark .main-nav:not(.first-visit) .nav-links a.active .nav-letter,
body.fn-nav-on-dark .main-nav:not(.first-visit) .nav-links a[aria-current="page"] .nav-letter {
  opacity: 0.55;
}

.main-nav:not(.first-visit) .nav-links a.active:hover .nav-letter,
.main-nav:not(.first-visit) .nav-links a[aria-current="page"]:hover .nav-letter {
  opacity: 1;
  transition-delay: 0ms;
}

.main-nav:not(.first-visit) .nav-links a,
.main-nav:not(.first-visit) .nav-links a.active,
.main-nav:not(.first-visit) .nav-links a[aria-current="page"] {
  transition-property: color, opacity;
  transition-duration: var(--aktuell-page-slide-duration, 0.5s);
  transition-timing-function: var(--aktuell-page-nav-ease, var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1)));
}

.main-nav:not(.first-visit) #projectCount,
.main-nav:not(.first-visit) #imageCount,
.main-nav:not(.first-visit) #fieldNotesCount,
.main-nav:not(.first-visit) .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount),
.main-nav:not(.first-visit) .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount) {
  background: #000;
  background-color: #000;
  color: #fff;
  border: 0 solid transparent;
  outline: none;
  box-shadow: none;
  padding: 2px 6px;
  min-width: 12px;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: inline-block;
}

.main-nav:not(.first-visit) #projectCount,
.main-nav:not(.first-visit) #imageCount,
.main-nav:not(.first-visit) #fieldNotesCount {
  opacity: 1;
  transition-property: background-color, color, opacity;
  transition-duration: var(--aktuell-page-slide-duration, 0.5s);
  transition-timing-function: var(--aktuell-page-nav-ease, var(--aktuell-ease, cubic-bezier(0.55, 0, 0.15, 1)));
}

.main-nav:not(.first-visit) .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount),
.main-nav:not(.first-visit) .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount) {
  opacity: 0.5;
}

@media (max-width: 768px) {
  #mainNav.main-nav {
    padding: 4px 14px !important;
  }

  #mainNav.main-nav .nav-links,
  #mainNav.main-nav ul.nav-links {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-old(aktuell-page),
  ::view-transition-new(aktuell-page) {
    animation-duration: 0.01ms !important;
  }

  .nav-letter,
  .nav-word,
  .nav-inner,
  .main-nav:not(.first-visit) .nav-links a,
  .main-nav:not(.first-visit) #projectCount,
  .main-nav:not(.first-visit) #imageCount,
  .main-nav:not(.first-visit) #fieldNotesCount {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}