/*
 * Cinematic concept navigation
 *
 * The active project preview and the destination hero share one transition
 * identity. Browsers without cross-document View Transitions ignore this file
 * and keep the links' normal navigation behaviour.
 */
@view-transition {
  navigation: auto;
}

.buehne-panel.an .mock-window,
.td-project-source,
body.td-concept-page .hero {
  view-transition-name: td-project-stage;
}

::view-transition-group(root) {
  animation-duration: 680ms;
  animation-timing-function: cubic-bezier(.76, 0, .24, 1);
}

::view-transition-old(root) {
  animation: td-page-out 460ms cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: td-page-in 680ms 70ms cubic-bezier(.16, 1, .3, 1) both;
}

::view-transition-group(td-project-stage) {
  z-index: 10;
  overflow: clip;
  animation-duration: 860ms;
  animation-timing-function: cubic-bezier(.76, 0, .24, 1);
}

::view-transition-image-pair(td-project-stage) {
  isolation: auto;
}

::view-transition-old(td-project-stage),
::view-transition-new(td-project-stage) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}

::view-transition-old(td-project-stage) {
  animation: td-stage-out 650ms cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(td-project-stage) {
  animation: td-stage-in 860ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes td-page-out {
  to {
    opacity: 0;
    transform: scale(.985);
  }
}

@keyframes td-page-in {
  from {
    opacity: 0;
    transform: scale(1.012);
  }
}

@keyframes td-stage-out {
  0%, 42% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes td-stage-in {
  0%, 24% { opacity: 0; }
  100% { opacity: 1; }
}

/*
 * Fallback for browsers and preview environments without cross-document View
 * Transitions. JavaScript clones the live browser frame into this layer and
 * expands it with a FLIP transform before following the ordinary link.
 */
body.td-project-fallback-running {
  overflow: hidden;
}

body.td-project-fallback-running .cursor,
body.td-project-fallback-running .cursor-f {
  opacity: 0 !important;
}

.project-transition-fallback {
  position: fixed;
  z-index: 900;
  overflow: hidden;
  background: #EFECE6;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
  contain: layout paint;
}

.project-transition-fallback > .mock-window {
  width: 100%;
  height: 100%;
  border: 0;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.project-transition-fallback .mock-viewport {
  height: calc(100% - 32px);
}

.project-transition-fallback .mock-scroll {
  animation: none !important;
}

.project-transition-fallback__veil {
  position: absolute;
  z-index: 5;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-group(td-project-stage),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(td-project-stage),
  ::view-transition-new(td-project-stage) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }

  .project-transition-fallback { display: none; }
}