@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
@property --r0{syntax:'<length>';inherits:false;initial-value:0px}
@property --r1{syntax:'<length>';inherits:false;initial-value:0px}
@property --r2{syntax:'<length>';inherits:false;initial-value:0px}
@property --r3{syntax:'<length>';inherits:false;initial-value:0px}
@property --r4{syntax:'<length>';inherits:false;initial-value:0px}
:root{
  --rmax:calc(var(--passo-pontos) * .72);       
  --grow:calc(var(--dur-cut) * .28);            
  --band:calc(var(--dur-cut) * .05);            
  --half:calc(var(--band) * 4 + var(--grow));   
  --fade:calc(var(--dur-max) * .4);             
}
::view-transition-group(root){animation-duration:var(--fade)}
::view-transition-old(root){animation:cut-fade-out var(--fade) linear both}
::view-transition-new(root){animation:cut-fade-in var(--fade) linear both}
@keyframes cut-fade-out{to{opacity:0}}
@keyframes cut-fade-in{from{opacity:0}}
html:active-view-transition-type(cut)::view-transition-group(root){animation-duration:calc(var(--half) * 2);background:var(--tinta)}
html:active-view-transition-type(cut)::view-transition-old(root),
html:active-view-transition-type(cut)::view-transition-new(root){
  mix-blend-mode:normal;
  --full:linear-gradient(var(--tinta) 0 0);
  --s:var(--passo-pontos) var(--passo-pontos);
  mask-size:100% 100%,var(--s),100% 100%,var(--s),100% 100%,var(--s),100% 100%,var(--s),100% 100%,var(--s);
  mask-repeat:no-repeat,repeat,no-repeat,repeat,no-repeat,repeat,no-repeat,repeat,no-repeat,repeat;
  mask-position:0 0,var(--margem) 0,0 0,var(--margem) 0,0 0,var(--margem) 0,0 0,var(--margem) 0,0 0,var(--margem) 0;
  
  mask-composite:subtract,intersect,add,intersect,add,intersect,add,intersect,add,add;
}
html:active-view-transition-type(cut)::view-transition-old(root){
  mask-image:var(--full),
    radial-gradient(circle,var(--tinta) var(--r0),transparent 0),linear-gradient(to bottom right,var(--tinta) 20%,transparent 0),
    radial-gradient(circle,var(--tinta) var(--r1),transparent 0),linear-gradient(to bottom right,var(--tinta) 40%,transparent 0),
    radial-gradient(circle,var(--tinta) var(--r2),transparent 0),linear-gradient(to bottom right,var(--tinta) 60%,transparent 0),
    radial-gradient(circle,var(--tinta) var(--r3),transparent 0),linear-gradient(to bottom right,var(--tinta) 80%,transparent 0),
    radial-gradient(circle,var(--tinta) var(--r4),transparent 0);
  animation:grow0 var(--grow) ease-in 0s both,grow1 var(--grow) ease-in var(--band) both,grow2 var(--grow) ease-in calc(var(--band) * 2) both,
            grow3 var(--grow) ease-in calc(var(--band) * 3) both,grow4 var(--grow) ease-in calc(var(--band) * 4) both;
}
html:active-view-transition-type(cut)::view-transition-new(root){
  mask-image:var(--full),
    radial-gradient(circle,var(--tinta) var(--r4),transparent 0),linear-gradient(to bottom right,transparent 80%,var(--tinta) 0),
    radial-gradient(circle,var(--tinta) var(--r3),transparent 0),linear-gradient(to bottom right,transparent 60%,var(--tinta) 0),
    radial-gradient(circle,var(--tinta) var(--r2),transparent 0),linear-gradient(to bottom right,transparent 40%,var(--tinta) 0),
    radial-gradient(circle,var(--tinta) var(--r1),transparent 0),linear-gradient(to bottom right,transparent 20%,var(--tinta) 0),
    radial-gradient(circle,var(--tinta) var(--r0),transparent 0);
  animation:shrink0 var(--grow) ease-out var(--half) both,shrink1 var(--grow) ease-out calc(var(--half) + var(--band)) both,
            shrink2 var(--grow) ease-out calc(var(--half) + var(--band) * 2) both,shrink3 var(--grow) ease-out calc(var(--half) + var(--band) * 3) both,
            shrink4 var(--grow) ease-out calc(var(--half) + var(--band) * 4) both;
}
@keyframes grow0{from{--r0:0px} to{--r0:var(--rmax)}}
@keyframes grow1{from{--r1:0px} to{--r1:var(--rmax)}}
@keyframes grow2{from{--r2:0px} to{--r2:var(--rmax)}}
@keyframes grow3{from{--r3:0px} to{--r3:var(--rmax)}}
@keyframes grow4{from{--r4:0px} to{--r4:var(--rmax)}}
@keyframes shrink0{from{--r0:var(--rmax)} to{--r0:0px}}
@keyframes shrink1{from{--r1:var(--rmax)} to{--r1:0px}}
@keyframes shrink2{from{--r2:var(--rmax)} to{--r2:0px}}
@keyframes shrink3{from{--r3:var(--rmax)} to{--r3:0px}}
@keyframes shrink4{from{--r4:var(--rmax)} to{--r4:0px}}
html:active-view-transition-type(p-reformer-social-club) .pm-reformer{view-transition-name:vt-pm-reformer}
html:active-view-transition-type(p-agent-lab) .pm-agentLab{view-transition-name:vt-pm-agentlab}
html:active-view-transition-type(p-reformer-social-club) :is(.vt-title-reformer,.nx-name:has(>.nx-a[href$="/reformer-social-club/"])){view-transition-name:vt-title-reformer;width:fit-content}
html:active-view-transition-type(p-agent-lab) :is(.vt-title-agentlab,.nx-name:has(>.nx-a[href$="/agent-lab/"])){view-transition-name:vt-title-agentlab;width:fit-content}
html:active-view-transition-type(case) .nx-a::after{display:none}
html:active-view-transition-type(case)::view-transition-group(*){animation-duration:var(--dur-max);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
html:active-view-transition-type(case)::view-transition-group(root){animation-duration:var(--fade)}
::view-transition-old(vt-title-reformer),::view-transition-old(vt-title-agentlab){display:none}
::view-transition-new(vt-title-reformer),::view-transition-new(vt-title-agentlab){animation:none}
::view-transition-group(vt-pm-reformer),::view-transition-group(vt-pm-agentlab){overflow:clip;border-radius:var(--r-screen)}
::view-transition-old(vt-pm-reformer),::view-transition-new(vt-pm-reformer),
::view-transition-old(vt-pm-agentlab),::view-transition-new(vt-pm-agentlab){block-size:100%;object-fit:cover;object-position:50% 0}