/*! page-transitions.css (COMPASS: from ~/Downloads/COMPASS_page_transitions, method A) — smooth page-to-page transition for multi-page sites (cross-document View Transitions).
 *
 * Same choreography as the web-motion-system kit (Barba "mk-iris"): the old page shrinks to .75 and fades,
 * the new page closes in from the screen edges through a rectangular iris; 1.2 s, quartic in-out.
 * Optional brand variant: <html data-vt="compass"> — the new page opens through an 8-point compass star.
 *
 * No JavaScript and no change to how the site loads its own scripts: every navigation is still a normal
 * page load. Works in Chrome/Edge 126+ and Safari 18.2+; other browsers (Firefox) simply open the page.
 * Include this file on EVERY page (both pages of a navigation must opt in).
 */

@view-transition { navigation: auto; }

:root {
  --vt-dur: 1.2s;                          /* L duration of the motion system */
  --vt-ease: cubic-bezier(.76, 0, .24, 1); /* quartic in-out (GSAP power3.inOut) */
  --vt-bg: #0a0a0a;                        /* COMPASS: the site's own near-black (--ink), not the navy of the kit */
}

/* backdrop behind both pages while they move */
::view-transition { background-color: var(--vt-bg); }

/* named elements (e.g. a persistent header) morph with the same timing */
::view-transition-group(*) { animation-duration: var(--vt-dur); animation-timing-function: var(--vt-ease); }

/* old page: shrink and fade towards the centre of the screen */
::view-transition-old(root) { animation: vt-shrink var(--vt-dur) var(--vt-ease) both; }

/* new page: rectangular iris closing in from the edges (10-point polygon with a zero-width cut) */
::view-transition-new(root) { animation: vt-iris var(--vt-dur) var(--vt-ease) both; }

@keyframes vt-shrink {
  to { transform: scale(.75); opacity: 0; }
}
@keyframes vt-iris {
  from { clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%); }
  to   { clip-path: polygon(0% 0%, 0% 100%, 45% 100%, 45% 50%, 55% 50%, 55% 50%, 45% 50%, 45% 100%, 100% 100%, 100% 0%); }
}

/* brand variant: the new page opens through a compass star growing from the centre */
:root[data-vt="compass"]::view-transition-new(root) { animation-name: vt-compass; }
@keyframes vt-compass {
  from { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); }
  to   { clip-path: polygon(50% calc(50% - 180vmax), calc(50% + 27.55vmax) calc(50% - 66.52vmax), calc(50% + 91.64vmax) calc(50% - 91.64vmax), calc(50% + 66.52vmax) calc(50% - 27.55vmax),
                            calc(50% + 180vmax) 50%, calc(50% + 66.52vmax) calc(50% + 27.55vmax), calc(50% + 91.64vmax) calc(50% + 91.64vmax), calc(50% + 27.55vmax) calc(50% + 66.52vmax),
                            50% calc(50% + 180vmax), calc(50% - 27.55vmax) calc(50% + 66.52vmax), calc(50% - 91.64vmax) calc(50% + 91.64vmax), calc(50% - 66.52vmax) calc(50% + 27.55vmax),
                            calc(50% - 180vmax) 50%, calc(50% - 66.52vmax) calc(50% - 27.55vmax), calc(50% - 91.64vmax) calc(50% - 91.64vmax), calc(50% - 27.55vmax) calc(50% - 66.52vmax)); }
}

/* reduced motion: switch pages instantly */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}