/* Native document navigation; there is no SPA router or delayed link handler. */
@supports selector(:active-view-transition-type(peel)) {
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
  }
}

::view-transition { pointer-events: none; }
::view-transition-group(root) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-image-pair(root) { isolation: isolate; }

.page-transition-scenery { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 2147483000; contain: strict; }
.page-transition-scenery, .page-transition-scenery * { pointer-events: none !important; }

/* Vinyl: a diagonal corner reveal, accompanied by a curled sheet edge. */
html:active-view-transition-type(peel)::view-transition-old(root) { z-index: 1; animation: finuf-vinyl-away 620ms ease-out both; transform-origin: right top; }
html:active-view-transition-type(peel)::view-transition-new(root) { z-index: 2; animation: finuf-vinyl-reveal 620ms cubic-bezier(.25,.7,.25,1) both; }
.page-transition-curl { position: absolute; top: -3vmin; right: -3vmin; width: 48vmin; height: 48vmin; view-transition-name: finuf-peel-curl; clip-path: polygon(0 0,100% 100%,100% 0); background: linear-gradient(135deg,#faf7e9 3%,#ede7d4 38%,#c8c9b9 46%,#174b38 49%,#0d3023 54%,#e1e2cc 58%,#f3f0e7 74%); filter: drop-shadow(-12px 14px 14px #071f1a55); }
html[data-lights=off] .page-transition-curl { background: linear-gradient(135deg,#d2dec1 3%,#7d9d80 38%,#416a4e 46%,#0c251b 49%,#06180f 54%,#355e40 60%,#acd392 80%); }
::view-transition-group(finuf-peel-curl) { z-index: 5; animation: none; }
::view-transition-old(finuf-peel-curl) { animation: none; opacity: 0; }
::view-transition-new(finuf-peel-curl) { animation: finuf-vinyl-curl 640ms cubic-bezier(.25,.7,.25,1) both; transform-origin: right top; }
@keyframes finuf-vinyl-reveal {
  0% { clip-path: polygon(100% 0,100% 0,100% 0,100% 0); }
  42% { clip-path: polygon(45% 0,100% 0,100% 72%,45% 0); }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
}
@keyframes finuf-vinyl-away { to { opacity: .78; transform: scale(.997) rotate(-.25deg); } }
@keyframes finuf-vinyl-curl {
  0% { opacity: 0; transform: translate(4vw,-4vh) perspective(900px) rotateY(-18deg) rotate(-8deg) scale(.25); }
  12% { opacity: 1; }
  55% { opacity: .95; transform: translate(-38vw,29vh) perspective(900px) rotateY(-32deg) rotate(-12deg) scale(1); }
  100% { opacity: 0; transform: translate(-115vw,110vh) perspective(900px) rotateY(-48deg) rotate(-18deg) scale(1.1); }
}

/* CNC / laser: an expanding eight-sided aperture with a fine cutting trace. */
html:active-view-transition-type(cut)::view-transition-old(root) { z-index: 1; }
html:active-view-transition-type(cut)::view-transition-new(root) { z-index: 2; animation: finuf-cut-reveal 580ms cubic-bezier(.28,.72,.24,1) both; }
.page-transition-cut { position: absolute; left: calc(50% - 20vmin); top: calc(50% - 20vmin); width: 40vmin; height: 40vmin; view-transition-name: finuf-cut-trace; }
.page-transition-cut svg { display: block; width: 100%; height: 100%; overflow: visible; }
.page-transition-cut polygon { fill: none; stroke: #ca542f; stroke-width: 1.1; stroke-linejoin: bevel; filter: drop-shadow(0 0 2px #e39b5e); }
html[data-lights=off] .page-transition-cut polygon { stroke: #dbed79; filter: drop-shadow(0 0 3px #a9d793); }
::view-transition-group(finuf-cut-trace) { z-index: 5; animation: none; }
::view-transition-old(finuf-cut-trace) { animation: none; opacity: 0; }
::view-transition-new(finuf-cut-trace) { animation: finuf-cut-trace 600ms cubic-bezier(.28,.72,.24,1) both; }
@keyframes finuf-cut-reveal {
  from { clip-path: polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%); }
  to { clip-path: polygon(0 -65%,100% -65%,165% 0,165% 100%,100% 165%,0 165%,-65% 100%,-65% 0); }
}
@keyframes finuf-cut-trace { 0% { opacity: 0; transform: scale(.05); } 12% { opacity: .8; } 70% { opacity: .55; } 100% { opacity: 0; transform: scale(7); } }

/* Acrylic: four overlapping translucent sheets, each on its own native layer. */
html:active-view-transition-type(acrylic)::view-transition-old(root) { animation: finuf-acrylic-old 520ms ease both; }
html:active-view-transition-type(acrylic)::view-transition-new(root) { animation: finuf-acrylic-new 520ms ease both; }
.page-transition-panel { position: absolute; top: -8vh; width: 34vw; height: 116vh; border-inline: 1px solid #fffefaa6; box-shadow: -12px 0 28px #102b231c, inset 2px 0 1px #fffefaaa; background: linear-gradient(100deg,#f3f0e72e,#f3f0e77d 70%,#fffefaa6); backdrop-filter:blur(9px) saturate(1.15); }
.page-transition-panel--1 { left: -2vw; view-transition-name: finuf-acrylic-one; }
.page-transition-panel--2 { left: 22vw; view-transition-name: finuf-acrylic-two; background: linear-gradient(100deg,#719e8459,#b6d2ba6e 70%,#eaf1dd94); }
.page-transition-panel--3 { left: 46vw; view-transition-name: finuf-acrylic-three; background: linear-gradient(100deg,#dbed7938,#e6f2b459 70%,#fffefaa6); }
.page-transition-panel--4 { left: 70vw; view-transition-name: finuf-acrylic-four; }
html[data-lights=off] .page-transition-panel { border-color: #c3e6a99c; box-shadow: -12px 0 28px #0003,inset 2px 0 1px #d8ffb677; background: linear-gradient(100deg,#174b3840,#4e775b83 70%,#a4d28a80); }
::view-transition-group(finuf-acrylic-one), ::view-transition-group(finuf-acrylic-two), ::view-transition-group(finuf-acrylic-three), ::view-transition-group(finuf-acrylic-four) { z-index: 5; animation: none; }
::view-transition-old(finuf-acrylic-one), ::view-transition-old(finuf-acrylic-two), ::view-transition-old(finuf-acrylic-three), ::view-transition-old(finuf-acrylic-four) { animation: none; opacity: 0; }
::view-transition-new(finuf-acrylic-one), ::view-transition-new(finuf-acrylic-two), ::view-transition-new(finuf-acrylic-three), ::view-transition-new(finuf-acrylic-four) { animation: finuf-acrylic-slide 510ms cubic-bezier(.25,.7,.25,1) both; }
::view-transition-new(finuf-acrylic-two) { animation-delay: 35ms; }
::view-transition-new(finuf-acrylic-three) { animation-delay: 70ms; }
::view-transition-new(finuf-acrylic-four) { animation-delay: 105ms; }
@keyframes finuf-acrylic-old { to { opacity: 0; transform: translateX(-1.5%); } }
@keyframes finuf-acrylic-new { from { opacity: 0; transform: translateX(1.5%); } to { opacity: 1; transform: none; } }
@keyframes finuf-acrylic-slide { from { opacity: 0; transform: translateX(-120vw) skewX(-8deg); } 18%,65% { opacity: 1; } to { opacity: 0; transform: translateX(120vw) skewX(-8deg); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .page-transition-scenery { display: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print { .page-transition-scenery { display: none !important; } }