@view-transition {
  navigation: auto;
}

::view-transition {
  background: #050505;
  pointer-events: none;
}

::view-transition-group(root) {
  animation-duration: 1ms;
}

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  backface-visibility: hidden;
  mix-blend-mode: normal;
  transform-origin: center;
  will-change: transform, opacity, filter, clip-path;
}

/* REEL: a restrained dolly-back through black. */
html:active-view-transition-type(reel)::view-transition-old(root) {
  animation: v88-reel-old 430ms cubic-bezier(.42, 0, .28, 1) both;
}

html:active-view-transition-type(reel)::view-transition-new(root) {
  animation: v88-reel-new 390ms cubic-bezier(.18, .8, .22, 1) 95ms both;
}

@keyframes v88-reel-old {
  from { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); }
  to { opacity: 0; transform: scale(.9); filter: brightness(.2) saturate(.72); }
}

@keyframes v88-reel-new {
  from { opacity: 0; transform: scale(1.055); filter: brightness(.45) blur(8px); }
  to { opacity: 1; transform: scale(1); filter: brightness(1) blur(0); }
}

/* CAI: a vertical film-gate transport with a clean black interval. */
html:active-view-transition-type(cai)::view-transition-old(root) {
  animation: v88-cai-old 320ms cubic-bezier(.62, 0, .84, .36) both;
}

html:active-view-transition-type(cai)::view-transition-new(root) {
  animation: v88-cai-new 350ms cubic-bezier(.16, .82, .22, 1) 205ms both;
}

@keyframes v88-cai-old {
  from { clip-path: inset(0 0 0 0); transform: translateY(0) scale(1); }
  to { clip-path: inset(100% 0 0 0); transform: translateY(-5vh) scale(1.02); }
}

@keyframes v88-cai-new {
  from { clip-path: inset(0 0 100% 0); transform: translateY(5vh) scale(1.02); }
  to { clip-path: inset(0 0 0 0); transform: translateY(0) scale(1); }
}

/* JESUS: a true optical iris, closing before opening the next page. */
html:active-view-transition-type(jesus)::view-transition-old(root) {
  animation: v88-jesus-old 300ms cubic-bezier(.58, 0, .88, .36) both;
}

html:active-view-transition-type(jesus)::view-transition-new(root) {
  animation: v88-jesus-new 350ms cubic-bezier(.2, .78, .2, 1) 245ms both;
}

@keyframes v88-jesus-old {
  from { clip-path: circle(150% at 50% 50%); }
  to { clip-path: circle(0 at 50% 50%); }
}

@keyframes v88-jesus-new {
  from { clip-path: circle(0 at 50% 50%); }
  to { clip-path: circle(150% at 50% 50%); }
}

/* ME SALVE: a fast photochemical luma bloom, not a flare overlay. */
html:active-view-transition-type(mesalve)::view-transition {
  background: #f4f1e9;
}

html:active-view-transition-type(mesalve)::view-transition-old(root) {
  animation: v88-mesalve-old 245ms cubic-bezier(.5, 0, .8, .28) both;
}

html:active-view-transition-type(mesalve)::view-transition-new(root) {
  animation: v88-mesalve-new 310ms cubic-bezier(.2, .72, .2, 1) 165ms both;
}

@keyframes v88-mesalve-old {
  from { opacity: 1; filter: brightness(1) contrast(1) blur(0); transform: scale(1); }
  to { opacity: 0; filter: brightness(6) contrast(.55) blur(10px); transform: scale(1.035); }
}

@keyframes v88-mesalve-new {
  from { opacity: 0; filter: brightness(5) contrast(.6) blur(12px); transform: scale(1.025); }
  to { opacity: 1; filter: brightness(1) contrast(1) blur(0); transform: scale(1); }
}

/* CANTAO: the frame collapses into a diagonal blade and cuts open again. */
html:active-view-transition-type(cantao)::view-transition-old(root) {
  animation: v88-cantao-old 315ms cubic-bezier(.64, 0, .86, .32) both;
}

html:active-view-transition-type(cantao)::view-transition-new(root) {
  animation: v88-cantao-new 345ms cubic-bezier(.16, .82, .2, 1) 235ms both;
}

@keyframes v88-cantao-old {
  from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); filter: brightness(1); }
  to { clip-path: polygon(0 0, 0 0, 100% 100%, 100% 100%); filter: brightness(.35); }
}

@keyframes v88-cantao-new {
  from { clip-path: polygon(0 0, 0 0, 100% 100%, 100% 100%); filter: brightness(.35); }
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); filter: brightness(1); }
}

/* SOL: a full-screen whip-pan with opposing momentum. */
html:active-view-transition-type(sol)::view-transition-old(root) {
  animation: v88-sol-old 410ms cubic-bezier(.62, .02, .3, 1) both;
}

html:active-view-transition-type(sol)::view-transition-new(root) {
  animation: v88-sol-new 410ms cubic-bezier(.18, .8, .22, 1) both;
}

@keyframes v88-sol-old {
  from { opacity: 1; transform: translateX(0) skewX(0) scale(1); filter: blur(0); }
  to { opacity: .18; transform: translateX(-112%) skewX(-2.5deg) scale(1.055); filter: blur(12px); }
}

@keyframes v88-sol-new {
  from { opacity: .2; transform: translateX(112%) skewX(2.5deg) scale(1.055); filter: blur(12px); }
  to { opacity: 1; transform: translateX(0) skewX(0) scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

html.palmapost-v88-gallery-open,
html.palmapost-v88-gallery-open body {
  overflow: hidden !important;
}

#palmapost-v88-gallery-shell {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
  opacity: 1;
  pointer-events: auto;
  contain: strict;
}

.palmapost-v88-gallery-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #050505;
  opacity: 0;
  transform: translateZ(0);
  transform-origin: center;
  backface-visibility: hidden;
  transition: opacity 140ms ease;
}

#palmapost-v88-gallery-shell.is-ready .palmapost-v88-gallery-frame {
  opacity: 1;
}

#palmapost-v88-gallery-shell.is-returning {
  background: transparent;
  pointer-events: none;
}

#palmapost-v88-gallery-shell.is-returning .palmapost-v88-gallery-frame {
  transition: none;
  will-change: transform, opacity, filter, clip-path;
}

#palmapost-v88-gallery-shell.is-returning[data-transition="reel"] .palmapost-v88-gallery-frame {
  animation: v88-shell-reel 520ms cubic-bezier(.55, 0, .22, 1) both;
}

@keyframes v88-shell-reel {
  0% { opacity: 1; transform: perspective(1200px) translateZ(0) scale(1); filter: brightness(1) blur(0); }
  55% { opacity: .72; transform: perspective(1200px) translateZ(-90px) scale(.92); filter: brightness(.62) blur(1px); }
  100% { opacity: 0; transform: perspective(1200px) translateZ(-250px) scale(.78); filter: brightness(.12) blur(10px); }
}

#palmapost-v88-gallery-shell.is-returning[data-transition="cai"] .palmapost-v88-gallery-frame {
  animation: v88-shell-gate 480ms cubic-bezier(.68, 0, .32, 1) both;
}

@keyframes v88-shell-gate {
  0% { clip-path: inset(0 0 0 0); transform: scale(1); filter: brightness(1); }
  70% { clip-path: inset(44% 0 44% 0); transform: scaleX(1.015); filter: brightness(.7); }
  100% { clip-path: inset(50% 0 50% 0); transform: scaleX(1.04); filter: brightness(2); }
}

#palmapost-v88-gallery-shell.is-returning[data-transition="jesus"] .palmapost-v88-gallery-frame {
  animation: v88-shell-iris 540ms cubic-bezier(.7, 0, .3, 1) both;
}

@keyframes v88-shell-iris {
  0% { clip-path: circle(150% at 50% 50%); filter: brightness(1); }
  72% { clip-path: circle(16% at 50% 50%); filter: brightness(.72); }
  100% { clip-path: circle(0 at 50% 50%); filter: brightness(.2); }
}

#palmapost-v88-gallery-shell.is-returning[data-transition="mesalve"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fffdf7;
  pointer-events: none;
  animation: v88-shell-exposure-flash 390ms cubic-bezier(.4, 0, .25, 1) both;
}

#palmapost-v88-gallery-shell.is-returning[data-transition="mesalve"] .palmapost-v88-gallery-frame {
  animation: v88-shell-exposure 390ms cubic-bezier(.4, 0, .25, 1) both;
}

@keyframes v88-shell-exposure {
  0% { opacity: 1; transform: scale(1); }
  52% { opacity: .9; transform: scale(1.018); }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes v88-shell-exposure-flash {
  0% { opacity: 0; }
  48% { opacity: .86; }
  100% { opacity: 0; }
}

#palmapost-v88-gallery-shell.is-returning[data-transition="cantao"] .palmapost-v88-gallery-frame {
  animation: v88-shell-blade 510ms cubic-bezier(.7, 0, .25, 1) both;
}

@keyframes v88-shell-blade {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: scale(1); }
  62% { clip-path: polygon(0 0, 72% 0, 28% 100%, 0 100%); transform: scale(1.01); }
  100% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transform: scale(1.025); }
}

#palmapost-v88-gallery-shell.is-returning[data-transition="sol"] .palmapost-v88-gallery-frame {
  animation: v88-shell-whip 430ms cubic-bezier(.62, .02, .24, 1) both;
}

@keyframes v88-shell-whip {
  0% { opacity: 1; transform: translateX(0) skewX(0) scale(1); filter: blur(0); }
  45% { opacity: .82; transform: translateX(-18%) skewX(-1.5deg) scale(1.025); filter: blur(3px); }
  100% { opacity: 0; transform: translateX(-112%) skewX(-3deg) scale(1.07); filter: blur(14px); }
}

@media (prefers-reduced-motion: reduce) {
  #palmapost-v88-gallery-shell.is-returning .palmapost-v88-gallery-frame,
  #palmapost-v88-gallery-shell.is-returning::after {
    animation-duration: 1ms !important;
  }
}