/* A short growing tree bridges pages. Links retain normal browser behaviour. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-away .28s ease both; }
::view-transition-new(root) { animation: page-arrive .85s cubic-bezier(.22,1,.36,1) both; }
::view-transition-group(site-header) { animation-duration: .42s; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
@keyframes page-away { to { opacity: 0; } }
@keyframes page-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.branch-transition { position: fixed; inset: 0; z-index: 110; pointer-events: none; }
.branch-transition[hidden] { display: none; }
.branch-transition-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, #2d4431, #17231b 70%); view-transition-name: tree-veil; }
.branch-transition-art { position: absolute; width: clamp(210px, 34svh, 320px); height: auto; aspect-ratio: 400/520; left: 50%; top: 49%; transform: translate(-50%, -50%); view-transition-name: navigation-tree; }
.branch-transition-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bt-lines { stroke: #d0b477; stroke-width: 3.5; }
.bt-ground { stroke: #b6ca92; stroke-width: 1; opacity: .35; }
.bt-trunk { stroke-width: 4.5; }
.branch-transition-caption { position: absolute; left: 50%; top: calc(49% + clamp(210px, 34svh, 320px) * .72); transform: translateX(-50%); display: flex; align-items: center; gap: 16px; font: 500 13px var(--display); letter-spacing: .17em; color: #d5dfc9; white-space: nowrap; view-transition-name: tree-caption; }
.bt-caption-rule { width: 24px; height: 1px; background: #a5ba88; }
.is-growing .bt-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bt-draw .36s cubic-bezier(.2,.65,.3,1) both; }
.is-growing .bt-ground { animation-duration: .23s; }
.is-growing .bt-trunk { animation-delay: .03s; }
.is-growing .bt-b1 { animation-delay: .10s; }
.is-growing .bt-b2 { animation-delay: .13s; }
.is-growing .bt-b3 { animation-delay: .16s; }
.is-growing .bt-b4 { animation-delay: .18s; }
.is-growing .bt-leaf { transform-box: fill-box; transform-origin: center; animation: bt-leaf-open .49s cubic-bezier(.22,.8,.32,1) both; }
.is-growing .bt-l1 { animation-delay: .15s; }
.is-growing .bt-l2 { animation-delay: .18s; }
.is-growing .bt-l3 { animation-delay: .21s; }
.is-growing .bt-l4 { animation-delay: .24s; }
.is-growing .bt-l5 { animation-delay: .28s; }
.is-growing .bt-l6 { animation-delay: .30s; }
.is-growing .bt-seed { transform-box: fill-box; transform-origin: center; animation: bt-seed .25s ease both; }
@keyframes bt-draw { to { stroke-dashoffset: 0; } }
@keyframes bt-leaf-open { from { opacity: 0; transform: translateY(12px) scale(.04) rotate(-24deg); } 65% { opacity: 1; transform: scale(1.04) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes bt-seed { from { opacity: 0; transform: translateY(12px) scale(.3); } 60% { opacity: 1; transform: scale(1.4); } to { opacity: 0; transform: scale(.3); } }

::view-transition-group(tree-veil) { z-index: 2; animation-duration: .85s; }
::view-transition-group(navigation-tree) { z-index: 3; animation-duration: .85s; }
::view-transition-group(tree-caption) { z-index: 4; animation-duration: .85s; }
::view-transition-group(site-header) { z-index: 1; }
::view-transition-new(tree-veil) { animation: bt-veil-away .85s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(navigation-tree) { animation: bt-lift-away .85s cubic-bezier(.22,1,.36,1) both; }
::view-transition-new(tree-caption) { animation: bt-caption-away .85s ease both; }
@keyframes bt-veil-away { 0%, 32% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bt-lift-away { 0%, 52% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-55px) scale(1.06); } }
@keyframes bt-caption-away { 0% { opacity: 0; transform: translateY(8px); } 30%, 58% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-16px); } }

.header { view-transition-name: site-header; }
.nav a[aria-current="page"]:not(.nav-contact) { color: var(--lime); opacity: 1; }
.nav a[aria-current="page"]:not(.nav-contact)::before { transform: rotate(45deg) scale(1); }
.skip-content { position: fixed; z-index: 120; top: 10px; left: var(--gutter); padding: 10px 18px; color: var(--ink); background: var(--lime); transform: translateY(-180%); }
.skip-content:focus { transform: none; }
main:focus { outline: none; }
/* Entry fallback for browsers without cross-document transitions. Never animate
   the hero ancestor: that would trap the opening's fixed-position tree. */
@supports not (view-transition-name: root) {
  .page-hero > .wrap { animation: page-arrive .4s ease both; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .page-hero > .wrap { animation: none !important; }
  .branch-transition { display: none !important; }
}