@view-transition { navigation: auto; }

/* Capture the source photograph without its separate hover-effect clones. */
html[data-project-transition-family] .landscape-effect { visibility: hidden; }

/* Change pages only while the photograph covers the viewport (40–57%). */
html[data-project-transition-family]::view-transition-old(root),
html[data-project-transition-family]::view-transition-new(root) {
  animation-duration: 1.4s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  mix-blend-mode: normal;
}

html[data-project-transition-family]::view-transition-old(root) { animation-name: project-page-release; }
html[data-project-transition-family]::view-transition-new(root) { animation-name: project-page-arrive; }

@keyframes project-page-release {
  0%, 40% { opacity: 1; }
  57%, 100% { opacity: 0; }
}

@keyframes project-page-arrive {
  0%, 40% { opacity: 0; }
  57%, 100% { opacity: 1; }
}

::view-transition-group(project-hero) {
  z-index: 20;
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* Cover crops must stay inside the moving frame as its aspect ratio changes. */
::view-transition-image-pair(project-hero) { overflow: clip; }

::view-transition-old(project-hero),
::view-transition-new(project-hero) {
  height: 100%;
  object-fit: cover;
  animation-duration: 1.4s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  mix-blend-mode: normal;
}

/* Keep an opaque photograph behind every incoming aperture until settlement. */
::view-transition-old(project-hero) { animation: none; }
::view-transition-new(project-hero) { animation-name: project-photo-settle; }

html[data-project-transition-family="water"]::view-transition-new(project-hero) {
  animation-name: project-water-settle;
}

html[data-project-transition-family="paving"]::view-transition-new(project-hero) {
  animation-name: project-paving-settle;
}

html[data-project-transition-family="planting"]::view-transition-new(project-hero) {
  animation: none;
  mask: url(#project-vine-mask);
}

html[data-project-transition-family="drafting"]::view-transition-new(project-hero) {
  animation-name: project-drafting-settle;
}

html[data-project-transition-family="lighting"]::view-transition-new(project-hero) {
  animation-name: project-lighting-settle;
}

html[data-project-transition-family="fire"]::view-transition-new(project-hero) {
  animation-name: project-fire-settle;
}

@keyframes project-photo-settle {
  0%, 18% { clip-path: inset(50%); }
  78% { clip-path: inset(0); }
  100% { clip-path: none; }
}

@keyframes project-water-settle {
  0%, 14% { clip-path: polygon(0 72%, 12% 72%, 25% 72%, 38% 72%, 52% 72%, 66% 72%, 80% 72%, 100% 72%, 100% 72%, 0 72%); filter: saturate(1.3) contrast(1.08); }
  52% { clip-path: polygon(0 36%, 12% 29%, 25% 40%, 38% 25%, 52% 35%, 66% 21%, 80% 31%, 100% 18%, 100% 89%, 0 94%); filter: saturate(1.15) contrast(1.04); }
  88%, 100% { clip-path: polygon(0 0, 14% 0, 28% 0, 42% 0, 56% 0, 70% 0, 84% 0, 100% 0, 100% 100%, 0 100%); filter: none; }
}

@keyframes project-paving-settle {
  0%, 14% { clip-path: polygon(0 100%, 0 100%, 0 75%, 0 75%, 0 50%, 0 50%, 0 25%, 0 25%, 0 0, 0 0); }
  48% { clip-path: polygon(0 100%, 68% 100%, 68% 75%, 56% 75%, 56% 50%, 74% 50%, 74% 25%, 48% 25%, 48% 0, 0 0); }
  88%, 100% { clip-path: polygon(0 100%, 100% 100%, 100% 75%, 100% 75%, 100% 50%, 100% 50%, 100% 25%, 100% 25%, 100% 0, 0 0); }
}

@keyframes project-drafting-settle {
  0%, 16% { clip-path: inset(50% 0); filter: grayscale(1) contrast(1.55); }
  57% { clip-path: inset(20% 0); filter: grayscale(.65) contrast(1.3); }
  90%, 100% { clip-path: inset(0); filter: none; }
}

@keyframes project-lighting-settle {
  0%, 14% { clip-path: circle(0% at var(--project-origin-x, 55%) var(--project-origin-y, 58%)); filter: brightness(1.18); }
  58% { clip-path: circle(62% at var(--project-origin-x, 55%) var(--project-origin-y, 58%)); filter: brightness(1.08); }
  90%, 100% { clip-path: circle(125% at var(--project-origin-x, 55%) var(--project-origin-y, 58%)); filter: none; }
}

@keyframes project-fire-settle {
  0%, 16% { clip-path: polygon(52% 76%, 52% 76%, 52% 76%, 52% 76%, 52% 76%, 52% 76%, 52% 76%, 52% 76%, 52% 76%, 52% 76%, 52% 76%); filter: saturate(1.25) brightness(1.08); }
  56% { clip-path: polygon(0 100%, 4% 70%, 18% 84%, 22% 35%, 39% 68%, 52% 8%, 64% 65%, 78% 28%, 84% 76%, 100% 48%, 100% 100%); filter: saturate(1.12); }
  90%, 100% { clip-path: polygon(0 100%, 0 0, 18% 0, 22% 0, 39% 0, 52% 0, 64% 0, 78% 0, 84% 0, 100% 0, 100% 100%); filter: none; }
}

[data-project-hero-media] { position: relative; }

/* The SVG holds only mask geometry; it never paints a vine over the photo. */
[data-project-vine] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#project-vine-mask { mask-type: alpha; }

.project-vine-leader,
.project-vine-branch,
.project-vine-tendril {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-dasharray: 1;
}
.project-vine-leaf { fill: white; }

/* Subdue the backing photograph so the photo-filled growth stays legible. */
html[data-project-transition-family="planting"]::view-transition-old(project-hero),
html:has([data-project-vine].is-reversing)::view-transition-new(project-hero) {
  animation: project-vine-underlay 1.4s linear both;
}
@keyframes project-vine-underlay {
  0%, 100% { filter: none; }
  20%, 72% { filter: brightness(.5) saturate(.4); }
}

html:has([data-project-vine].is-reversing)::view-transition-new(project-hero) { mask: none; }
html:has([data-project-vine].is-reversing)::view-transition-old(project-hero) {
  animation: none;
  z-index: 1;
  mask: url(#project-vine-mask);
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  @view-transition { navigation: none; }
  [data-project-vine] { display: none; }
}