/* The real outgoing and incoming pages share a persistent navigation frame. */
@view-transition { navigation: auto; }
html { scrollbar-gutter: stable; --route-ease: cubic-bezier(.22, 1, .36, 1); --route-direction: 1; }
.site-header { view-transition-name: site-header; }
.page-shell .reveal.transition-revealed { opacity: 1; transform: none; transition: none; }
::view-transition { pointer-events: none; }
::view-transition-group(*) { animation-duration: 640ms; animation-timing-function: var(--route-ease); }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 600ms;
  animation-timing-function: var(--route-ease);
  animation-fill-mode: both;
  mix-blend-mode: plus-lighter;
  transform-origin: var(--route-origin-x, 50%) var(--route-origin-y, 40%);
}
::view-transition-old(root) { animation-name: grw-page-recede; }
::view-transition-new(root) { animation-name: grw-page-arrive; }
::view-transition-group(site-header) { z-index: 20; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation-duration: 160ms; }
::view-transition-group(page-title) { z-index: 5; overflow: visible; }
::view-transition-old(page-title), ::view-transition-new(page-title) {
  width: auto; height: auto; max-width: none;
  animation-duration: 560ms;
  animation-timing-function: var(--route-ease);
  animation-fill-mode: both;
  mix-blend-mode: plus-lighter;
}
::view-transition-old(page-title) { animation-name: grw-title-out; animation-duration: 360ms; }
::view-transition-new(page-title) { animation-name: grw-title-in; }
::view-transition-group(page-visual), ::view-transition-group(project-focus) { overflow: clip; z-index: 3; }
::view-transition-old(page-visual), ::view-transition-new(page-visual) {
  width: 100%; height: 100%; object-fit: cover;
  animation-duration: 620ms; animation-timing-function: var(--route-ease);
}

/* Projecten: the existing image opens into the portfolio composition. */
[data-transition-to="projecten"]::view-transition-old(root) { animation-name: grw-gallery-out; }
[data-transition-to="projecten"]::view-transition-new(root) { animation-name: grw-gallery-in; }
[data-transition-to="projecten"]::view-transition-group(page-visual) { animation-duration: 720ms; }
[data-transition-to="projecten"]::view-transition-new(page-visual) { animation-name: grw-image-open; animation-duration: 720ms; }

/* Diensten: title first, then the actual service cells settle into their grid. */
[data-transition-to="diensten"]::view-transition-old(root) { animation-name: grw-services-out; }
[data-transition-to="diensten"]::view-transition-new(root) { animation-name: grw-services-in; }
::view-transition-group(service-1), ::view-transition-group(service-2) { z-index: 3; }
::view-transition-new(service-1), ::view-transition-new(service-2) {
  animation: grw-service-in 660ms var(--route-ease) both;
}
::view-transition-new(service-2) { animation-delay: 35ms; }

/* Werkwijze: a continuous vertical progression into the process illustration. */
[data-transition-to="werkwijze"]::view-transition-old(root) { animation-name: grw-process-out; }
[data-transition-to="werkwijze"]::view-transition-new(root) { animation-name: grw-process-in; }
[data-transition-to="werkwijze"]::view-transition-new(page-visual) { animation-name: grw-process-visual; }

/* Over GRW: the heading passes through while the story comes closer. */
[data-transition-to="over"]::view-transition-old(root) { animation-name: grw-story-out; }
[data-transition-to="over"]::view-transition-new(root) { animation-name: grw-story-in; }
::view-transition-new(page-story) { animation: grw-story-copy 680ms var(--route-ease) both; }

/* Contact: the chosen CTA expands into the form, using its real screen position. */
[data-transition-to="contact"]::view-transition-old(root) { animation-name: grw-contact-out; }
[data-transition-to="contact"]::view-transition-new(root) { animation-name: grw-contact-in; }
::view-transition-group(contact-panel) {
  z-index: 8; overflow: clip; border-radius: 0;
  animation-duration: 680ms; background: #eeece7;
}
::view-transition-old(contact-panel), ::view-transition-new(contact-panel) {
  width: 100%; height: auto; object-fit: contain;
  animation-duration: 680ms; animation-timing-function: var(--route-ease); animation-fill-mode: both;
}
::view-transition-old(contact-panel) { animation-name: grw-contact-button; animation-duration: 180ms; }
::view-transition-new(contact-panel) { animation-name: grw-contact-form; }

/* The chosen project image grows into the case's first product composition. */
::view-transition-group(project-focus) { animation-duration: 660ms; background: #f8f7f3; }
::view-transition-old(project-focus), ::view-transition-new(project-focus) { width: 100%; height: 100%; object-fit: cover; animation-duration: 660ms; }
::view-transition-old(project-focus) { animation-name: grw-project-image-out; }
::view-transition-new(project-focus) { animation-name: grw-project-canvas-in; }

@keyframes grw-page-recede { to { opacity: 0; transform: translateY(-18px) scale(.99); } }
@keyframes grw-page-arrive { from { opacity: 0; transform: translateY(24px); } }
@keyframes grw-title-out { from { clip-path: inset(0); } to { clip-path: inset(0 0 100%); transform: translateY(-18px); } }
@keyframes grw-title-in { 0% { clip-path: inset(100% 0 0); transform: translateY(24px); } 14% { clip-path: inset(100% 0 0); } 100% { clip-path: inset(0); transform: none; } }
@keyframes grw-gallery-out { to { opacity: 0; transform: translateX(calc(-5vw * var(--route-direction))) scale(.975); } }
@keyframes grw-gallery-in { from { opacity: 0; transform: translateX(calc(7vw * var(--route-direction))) scale(1.025); } }
@keyframes grw-image-open { from { opacity: 0; clip-path: inset(0 0 18% 0); transform: scale(1.055); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes grw-services-out { to { opacity: 0; transform: translateY(-32px) scale(.985); } }
@keyframes grw-services-in { from { opacity: 0; transform: translateY(32px); } }
@keyframes grw-service-in { from { opacity: 0; transform: translateY(50px); clip-path: inset(0 0 12%); } to { opacity: 1; transform: none; clip-path: inset(0); } }
@keyframes grw-process-out { to { opacity: 0; transform: translateY(calc(-7vh * var(--route-direction))); } }
@keyframes grw-process-in { from { opacity: 0; transform: translateY(calc(9vh * var(--route-direction))); } }
@keyframes grw-process-visual { from { opacity: 0; transform: translateY(34px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes grw-story-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes grw-story-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes grw-story-copy { from { opacity: 0; transform: translateY(30px); } }
@keyframes grw-contact-out { to { opacity: 0; transform: scale(.97); } }
@keyframes grw-contact-in { from { opacity: 0; transform: translateX(-16px); } }
@keyframes grw-contact-button { from { opacity: 1; } to { opacity: 0; } }
@keyframes grw-contact-form { 0%, 12% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: none; } }
@keyframes grw-project-image-out { to { opacity: 0; transform: scale(1.08); } }
@keyframes grw-project-canvas-in { from { opacity: 0; } }

@media (max-width: 700px) {
  ::view-transition-group(*) { animation-duration: 560ms; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 520ms; }
  ::view-transition-new(page-title) { animation-duration: 500ms; }
  ::view-transition-group(contact-panel) { animation-duration: 580ms; }
  ::view-transition-new(contact-panel) { animation-duration: 580ms; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0s !important; animation-delay: 0s !important; }
}