/* ================================================================
   UniqTrix - PAGE TRANSITIONS
   A curtain wipes down over the page you are leaving and keeps going, off the bottom of the screen, when the next page has arrived.
   The curtain is html::before and the logo on it is html::after, so nothing is added to any page; js/transitions.js only switches classes on <html>:
     uq-pt-go    leaving  - the curtain slides down over the page
     uq-pt-in    arriving - the new page starts covered (set before the first paint)
     uq-pt-out   arriving - the curtain slides on down and away
     uq-pt-fast  a page restored by the Back button: the same, a little quicker
     uq-pt-day   the light colours (set when the visitor uses the day theme)
   ================================================================ */
html::before,
html::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  visibility: hidden;
  transform: translate3d(0, -101%, 0);
}
/* the curtain itself */
html::before {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(123,108,246,0.34), transparent 60%),
    radial-gradient(ellipse at 92% 100%, rgba(56,189,248,0.2), transparent 55%),
    linear-gradient(135deg, #070818, #0E0C2E 55%, #06182E);
}
html.uq-pt-day::before {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(84,72,200,0.16), transparent 60%),
    radial-gradient(ellipse at 92% 100%, rgba(3,105,161,0.12), transparent 55%),
    linear-gradient(135deg, #F4F5FF, #E9ECFF 55%, #E4F1FB);
}
/* the logo in the middle of it: the real logo from Admin > Settings (js/brand.js hands it over as --uq-pt-logo / --uq-pt-size, the night or the day picture);
   the cube symbol only when no logo has been uploaded */
html::after {
  z-index: 2147483001;
  background: var(--uq-pt-logo, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237B6CF6'/%3E%3Cstop offset='1' stop-color='%2338BDF8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='8' y='8' width='80' height='80' rx='22' fill='url(%23g)'/%3E%3Cpath d='M48 23.5 70.5 36.2v23.6L48 72.5 25.5 59.8V36.2z' fill='none' stroke='%23fff' stroke-width='4.2' stroke-linejoin='round'/%3E%3Cpath d='M25.5 36.2 48 48.9l22.5-12.7M48 48.9v23.6' fill='none' stroke='%23fff' stroke-width='4.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E")) center / var(--uq-pt-size, 92px 92px) no-repeat;
}
html.uq-pt-go::before,  html.uq-pt-go::after  { visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0);    transition: transform 0.44s cubic-bezier(0.76, 0, 0.24, 1); }
html.uq-pt-in::before,  html.uq-pt-in::after  { visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0);    transition: none; }
html.uq-pt-out::before, html.uq-pt-out::after { visibility: visible; pointer-events: none; transform: translate3d(0, 101%, 0); transition: transform 0.62s cubic-bezier(0.76, 0, 0.24, 1); }
html.uq-pt-out.uq-pt-fast::before, html.uq-pt-out.uq-pt-fast::after { transition-duration: 0.4s; }          /* a page coming back through the Back button: the curtain leaves a little quicker */

@media (prefers-reduced-motion: reduce) {
  html::before, html::after { display: none !important; }
}
@media print {
  html::before, html::after { display: none !important; }
}
