/* ── PAGE TRANSITION — vertical blinds via cross-document View Transitions ──
   Replicates the Verto/Framer "blinds" page effect (values extracted from
   verto.framer.website). The incoming page is masked into 10 vertical
   strips (10% period) that grow from 0 to full width; the outgoing page
   holds beneath for 200ms. Browsers without @view-transition support
   (Firefox) fall back to a normal navigation — no breakage. */

@view-transition {
  navigation: auto;
}

/* Registered so the mask stop positions can interpolate in keyframes */
@property --vt-blinds-width {
  syntax: '<length-percentage>';
  initial-value: 0px;
  inherits: false;
}

/* Outgoing page: hold fully visible under the incoming blinds —
   overrides the UA default fade-out */
@keyframes vt-hold {
  from { opacity: 1; }
  to   { opacity: 1; }
}

/* Incoming page: blinds open — each 10%-wide strip grows from 0 to full */
@keyframes vt-blinds-enter {
  from { --vt-blinds-width: 0%; opacity: 1; }
  to   { --vt-blinds-width: 10%; opacity: 1; }
}

::view-transition-old(root) {
  animation: vt-hold 200ms cubic-bezier(0.27, 0, 0.51, 1) both;
}

::view-transition-new(root) {
  animation: vt-blinds-enter 1000ms cubic-bezier(0.65, 0.01, 0.3, 1) both;
  -webkit-mask-image: repeating-linear-gradient(90deg,
    black 0px, black var(--vt-blinds-width),
    transparent var(--vt-blinds-width), transparent 10%);
  mask-image: repeating-linear-gradient(90deg,
    black 0px, black var(--vt-blinds-width),
    transparent var(--vt-blinds-width), transparent 10%);
}

/* Reduced motion: no transition at all — instant swap */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* The nav bar is persistent chrome, not page content — pull it out of the
   root snapshot into its own transition group so the blinds mask (and the
   200ms "hold" on the outgoing root) never touches it. Without a name it's
   captured as part of ::view-transition-*(root) and visibly shutters along
   with the page on every navigation, which reads as broken chrome. */
.nav {
  view-transition-name: site-nav;
}
::view-transition-group(site-nav) {
  animation: none;
}
::view-transition-old(site-nav),
::view-transition-new(site-nav) {
  animation: none;
  mix-blend-mode: normal;
}