/* Page transition: the blue (chung) and red (hong) corners of a taekwondo bout sweep across with a gold seam,
   the club crest at the centre. Pure CSS on html::before/::after; driven by /assets/pt.js. */
html::before,html::after{content:"";position:fixed;inset:0;z-index:2147483646;pointer-events:none;visibility:hidden}
html::before{background:
 radial-gradient(120% 90% at 50% 50%,rgba(255,255,255,.10),rgba(0,0,0,0) 55%),
 linear-gradient(105deg,#1F5FBF 0,#1F5FBF calc(50% - 3px),#E9B949 calc(50% - 3px),#E9B949 calc(50% + 3px),#D7263D calc(50% + 3px),#D7263D 100%);
 -webkit-clip-path:polygon(-20% 0,0% 0,-20% 100%,-20% 100%);clip-path:polygon(-20% 0,0% 0,-20% 100%,-20% 100%)}
html::after{background:url(/img/logo-kingston.webp) center/min(30vmin,190px) no-repeat;filter:drop-shadow(0 10px 30px rgba(0,0,0,.45));opacity:0;transform:scale(.82) rotate(-6deg)}
html.pt-out::before{visibility:visible;animation:ptIn .46s cubic-bezier(.76,0,.24,1) both}
html.pt-out::after{visibility:visible;animation:ptCrestIn .36s .2s cubic-bezier(.2,.8,.2,1) both}
html.pt-cover::before{visibility:visible;-webkit-clip-path:polygon(-20% 0,140% 0,120% 100%,-20% 100%);clip-path:polygon(-20% 0,140% 0,120% 100%,-20% 100%)}
html.pt-cover::after{visibility:visible;opacity:1;transform:none}
html.pt-reveal::before{visibility:visible;animation:ptOut .72s .14s cubic-bezier(.76,0,.24,1) both}
html.pt-reveal::after{visibility:visible;animation:ptCrestOut .34s cubic-bezier(.4,0,1,1) both}
@keyframes ptIn{from{-webkit-clip-path:polygon(-20% 0,0% 0,-20% 100%,-20% 100%);clip-path:polygon(-20% 0,0% 0,-20% 100%,-20% 100%)}to{-webkit-clip-path:polygon(-20% 0,140% 0,120% 100%,-20% 100%);clip-path:polygon(-20% 0,140% 0,120% 100%,-20% 100%)}}
@keyframes ptOut{from{-webkit-clip-path:polygon(-20% 0,140% 0,120% 100%,-20% 100%);clip-path:polygon(-20% 0,140% 0,120% 100%,-20% 100%)}to{-webkit-clip-path:polygon(140% 0,140% 0,120% 100%,120% 100%);clip-path:polygon(140% 0,140% 0,120% 100%,120% 100%)}}
@keyframes ptCrestIn{from{opacity:0;transform:scale(.82) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes ptCrestOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(1.12)}}
/* Phones with battery saver / "remove animations" on report reduced motion: show a gentle cross-fade instead of the sweep, so it is still visible */
@media (prefers-reduced-motion:reduce){
html.pt-out::before,html.pt-cover::before,html.pt-reveal::before{-webkit-clip-path:polygon(-20% 0,140% 0,120% 100%,-20% 100%);clip-path:polygon(-20% 0,140% 0,120% 100%,-20% 100%)}
html.pt-out::before,html.pt-out::after{opacity:0;transform:none;animation:ptFadeIn .24s ease both}
html.pt-reveal::before,html.pt-reveal::after{transform:none;animation:ptFadeOut .45s .05s ease both}}
@keyframes ptFadeIn{from{opacity:0}to{opacity:1}}
@keyframes ptFadeOut{from{opacity:1}to{opacity:0}}
@media print{html::before,html::after{display:none!important}}
