/* Prospect Orbit: page-to-page transition. See transition.js.
   Leaving: a dark-blue cover, the mark grows from small in the centre and an
   "O" ring pulses outwards. Arriving: the new page starts covered, the mark
   draws back inwards, the ring closes in after it, and the cover lifts.
   The arrival layer is in place before the first paint (no flash of the
   page), and its animations end by themselves even if nothing removes it. */
:root{--pt-ground:radial-gradient(120% 90% at 50% 45%,#0F2350 0%,#0B1120 55%,#070C18 100%);
  --pt-mark:url("img/po-mark-lg.webp");--pt-size:min(52vw,260px)}

/* ---- leaving (elements added by transition.js) ---- */
.pt-cover{position:fixed;inset:0;z-index:10000;background:var(--pt-ground);opacity:0;
  display:grid;place-items:center;pointer-events:auto;animation:pt-cover-in .2s ease-out forwards}
.pt-cover .pt-mark{width:var(--pt-size);aspect-ratio:410/290;background:var(--pt-mark) center/contain no-repeat;
  transform:scale(.12);opacity:0;animation:pt-grow .46s cubic-bezier(.2,.9,.3,1.12) .05s forwards}
.pt-cover .pt-ring{position:absolute;left:50%;top:50%;width:calc(var(--pt-size) * .9);aspect-ratio:1;margin:calc(var(--pt-size) * -.45) 0 0 calc(var(--pt-size) * -.45);
  border-radius:50%;border:2px solid #4D8EFF;box-shadow:0 0 24px rgba(77,142,255,.55),inset 0 0 18px rgba(88,217,232,.35);
  opacity:0;transform:scale(.4);animation:pt-ring-out .62s cubic-bezier(.2,.7,.3,1) .2s forwards}
/* the page's name, under the mark (the mark stays dead centre, so the ring
   stays round it) */
.pt-cover .pt-name,.pt-arrive .pt-name{position:absolute;left:0;right:0;top:calc(50% + var(--pt-size) * .36 + 26px);
  text-align:center;font:700 clamp(1rem,.86rem + .5vw,1.3rem)/1.2 var(--font,"Manrope",system-ui,sans-serif);
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:#F7F9FC;padding:0 16px;
  text-shadow:0 0 18px rgba(77,142,255,.45)}
.pt-cover .pt-name{opacity:0;translate:0 8px;animation:pt-name-in .32s ease-out .24s forwards}
.pt-arrive .pt-name{animation:pt-name-out .3s ease-in .1s forwards}
@keyframes pt-name-in{to{opacity:1;translate:0 0}}
@keyframes pt-name-out{to{opacity:0;translate:0 -6px}}
@keyframes pt-cover-in{to{opacity:1}}
@keyframes pt-grow{60%{opacity:1}to{transform:scale(1);opacity:1}}
@keyframes pt-ring-out{15%{opacity:.95}to{transform:scale(3.2);opacity:0}}

/* ---- arriving (.pt-arrive, put in place by transition.js before the body is
   even parsed, so it is on screen at the very first paint) ---- */
.pt-arrive{position:fixed;inset:0;z-index:10000;background:var(--pt-ground);display:grid;place-items:center;pointer-events:none;
  animation:pt-lift .34s ease-in .4s forwards}
.pt-arrive .pt-mark{display:block;width:var(--pt-size);height:auto;aspect-ratio:410/290;
  animation:pt-shrink .44s cubic-bezier(.55,0,.75,.2) .06s forwards}
.pt-arrive .pt-ring{position:absolute;left:50%;top:50%;width:calc(var(--pt-size) * .9);aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;border:2px solid #4D8EFF;box-shadow:0 0 24px rgba(77,142,255,.55),inset 0 0 18px rgba(88,217,232,.35);
  opacity:0;transform:scale(3.2);animation:pt-ring-in .46s cubic-bezier(.55,0,.75,.3) forwards}
/* held until the mark is decoded (transition.js adds pt-go): the logo is there
   from the first frame rather than popping in mid-shrink */
html:not(.pt-go) .pt-arrive,html:not(.pt-go) .pt-arrive *{animation-play-state:paused}
@keyframes pt-shrink{to{transform:scale(.06);opacity:0}}
@keyframes pt-ring-in{20%{opacity:.9}to{transform:scale(.12);opacity:0}}
@keyframes pt-lift{to{opacity:0;visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  .pt-cover,.pt-arrive{display:none!important}
}
@media print{.pt-cover{display:none}}