/* ============================================================
   PSRN → PSRN SC BPKIHS  |  cinematic page transition
   Load on BOTH the root page and the /bpkihs homepage.
   Part 1 (root page): ~2.7s portal  — circle opens from the click,
   emblem spins in, title assembles letter by letter, progress fills.
   Part 2 (both pages): the new page grows out of the centre of the
   portal using cross-document View Transitions (Chrome/Edge 126+,
   Safari 18.2+). Other browsers simply load the page after Part 1.
============================================================ */

/* ---------- Part 1: portal overlay ---------- */
body.psrn-leaving{overflow:hidden}
.psrn-portal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;pointer-events:all;
  background:radial-gradient(60% 60% at 50% 45%,#14806a 0%,#0b4a3e 55%,#072f28 100%);
  clip-path:circle(0px at var(--cx,50%) var(--cy,50%));
  animation:pt-open .95s cubic-bezier(.7,0,.2,1) forwards}
@keyframes pt-open{to{clip-path:circle(150vmax at var(--cx,50%) var(--cy,50%))}}
.psrn-portal::before{content:'';position:absolute;inset:-30%;
  background:radial-gradient(35% 35% at 70% 25%,rgba(53,181,146,.35),transparent 70%),radial-gradient(30% 30% at 20% 80%,rgba(217,180,90,.22),transparent 70%);
  animation:pt-drift 6s ease-in-out infinite alternate}
@keyframes pt-drift{to{transform:translate3d(4%,-5%,0) scale(1.1) rotate(3deg)}}

.pt-core{position:relative;display:grid;justify-items:center;gap:22px;padding:0 20px;text-align:center;color:#fff}

.pt-emblem{position:relative;display:grid;place-items:center;width:clamp(104px,15vw,140px);aspect-ratio:1;border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 10px rgba(255,255,255,.1),0 0 0 30px rgba(255,255,255,.045),0 24px 60px rgba(0,0,0,.35);
  opacity:0;scale:.5;rotate:-90deg;
  animation:pt-emblem 1s cubic-bezier(.2,.9,.25,1.15) .55s forwards}
@keyframes pt-emblem{to{opacity:1;scale:1;rotate:0deg}}
.pt-emblem img{width:80%;height:80%;object-fit:contain;border-radius:50%}
/* Fallback if the logo file fails to load: show the green "+" instead */
.pt-emblem.no-logo{background:linear-gradient(#fff,#fff) center/13% 46% no-repeat,linear-gradient(#fff,#fff) center/46% 13% no-repeat,linear-gradient(145deg,#3fcaa3,#17806a)}
.pt-emblem::before,.pt-emblem::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);opacity:0;animation:pt-ring 1.6s ease-out 1.2s infinite}
.pt-emblem::after{animation-delay:1.9s}
@keyframes pt-ring{from{opacity:.7;scale:1}to{opacity:0;scale:2.6}}

.pt-title{display:flex;flex-wrap:wrap;justify-content:center;font:700 clamp(30px,6vw,56px)/1.1 'Playfair Display',Georgia,'Times New Roman',serif;letter-spacing:.02em}
.pt-title span{display:inline-block;white-space:pre;opacity:0;translate:0 .6em;animation:pt-letter .7s cubic-bezier(.22,.8,.24,1) forwards;animation-delay:calc(1.05s + var(--i) * .045s)}
@keyframes pt-letter{to{opacity:1;translate:0 0}}

.pt-tag{font:italic 500 clamp(16px,2.6vw,22px)/1.3 'Playfair Display',Georgia,serif;color:#bfe9dc;opacity:0;letter-spacing:.3em;animation:pt-tag 1s ease 1.6s forwards}
@keyframes pt-tag{to{opacity:1;letter-spacing:.1em}}

.pt-bar{width:min(180px,50vw);height:2px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden;opacity:0;animation:pt-fade .4s ease 1.1s forwards}
.pt-bar i{display:block;height:100%;background:linear-gradient(90deg,#35b592,#d9b45a);transform:scaleX(0);transform-origin:left;animation:pt-fill 1.35s cubic-bezier(.5,0,.2,1) 1.15s forwards}
@keyframes pt-fade{to{opacity:1}}
@keyframes pt-fill{to{transform:scaleX(1)}}

/* ---------- Part 2: arrival (new page blooms out of the portal centre) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){mix-blend-mode:normal;animation:pt-bloom 1.15s cubic-bezier(.65,0,.2,1) both}
@keyframes pt-bloom{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(150% at 50% 50%)}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .psrn-portal,.psrn-portal *{animation:none!important}
}