/*!
 * Perfect Communication — logo animation: page loader + inline looping logo.
 * Shared by the website and the portal. Everything is namespaced "pcl-" so it
 * can never clash with page styles. Built from perfect-communication-logo.html.
 *
 * Every reveal animation is scaled by --pcl-k (speed) and can start part-way
 * through via --pcl-off (elapsed time), so the loader's animation carries on
 * from page to page instead of restarting.
 */
@property --pcl-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --pcl-p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* ── Page loader: same look as the portal's original loader (blurred white), logo instead of a spinner ── */
#pcl-overlay {
  position: fixed; inset: 0; z-index: 99990;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 1; visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
  cursor: progress;
}
#pcl-overlay.pcl-hide { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }
#pcl-overlay .pcl-logo { width: 132px; }

.pcl-logo { display: block; position: relative; }
.pcl-stage {
  --pcl-k: 1; --pcl-off: 0s;
  position: relative; width: 100%;
  aspect-ratio: 800 / 945;
  overflow: hidden;
}
.pcl-stage img { position: absolute; display: block; opacity: 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.pcl-stage .pcl-gA, .pcl-stage .pcl-gB { position: absolute; }
.pcl-stage .pcl-gA img, .pcl-stage .pcl-gB img { position: static; width: 100%; height: 100%; opacity: 1; }

/* all text together */
.pcl-play .pcl-ltr, .pcl-play .pcl-tg {
  animation: pcl-txt calc(.9s / var(--pcl-k)) cubic-bezier(.25,.7,.25,1) calc(var(--d) / var(--pcl-k) - var(--pcl-off)) both; }
@keyframes pcl-txt { from { opacity: 0; transform: scale(1.08); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* left ring arc draws top → bottom */
.pcl-arc { -webkit-mask-image: linear-gradient(to bottom, #000 var(--pcl-p), transparent var(--pcl-p));
                   mask-image: linear-gradient(to bottom, #000 var(--pcl-p), transparent var(--pcl-p)); }
.pcl-play .pcl-arc { animation: pcl-arc calc(.8s / var(--pcl-k)) ease-in-out calc(.3s / var(--pcl-k) - var(--pcl-off)) both; }
@keyframes pcl-arc { from { --pcl-p: 0%; opacity: 1; } to { --pcl-p: 101%; opacity: 1; } }

/* globe, step 1: only the ring draws, starting at the gap where the swoosh crosses it */
.pcl-gA { opacity: 0;
  -webkit-mask-image: conic-gradient(from 262deg at var(--cx) var(--cy), #000 var(--pcl-a), transparent var(--pcl-a));
          mask-image: conic-gradient(from 262deg at var(--cx) var(--cy), #000 var(--pcl-a), transparent var(--pcl-a)); }
.pcl-gA img {
  -webkit-mask-image: radial-gradient(ellipse var(--rxi) var(--ryi) at var(--cx) var(--cy), transparent 99.6%, #000 99.8%);
          mask-image: radial-gradient(ellipse var(--rxi) var(--ryi) at var(--cx) var(--cy), transparent 99.6%, #000 99.8%); }
.pcl-play .pcl-gA { animation: pcl-ring calc(1.05s / var(--pcl-k)) cubic-bezier(.45,.05,.3,1) calc(1s / var(--pcl-k) - var(--pcl-off)) both; }
@keyframes pcl-ring { from { --pcl-a: 0deg; opacity: 1; } to { --pcl-a: 361deg; opacity: 1; } }

/* globe, step 2: continents grow in inside the finished ring */
.pcl-gB { opacity: 0; transform-origin: var(--cx) var(--cy);
  -webkit-mask-image: radial-gradient(ellipse var(--rxo) var(--ryo) at var(--cx) var(--cy), #000 99.6%, transparent 99.8%);
          mask-image: radial-gradient(ellipse var(--rxo) var(--ryo) at var(--cx) var(--cy), #000 99.6%, transparent 99.8%); }
.pcl-play .pcl-gB { animation: pcl-land calc(.9s / var(--pcl-k)) cubic-bezier(.25,.7,.25,1) calc(1.85s / var(--pcl-k) - var(--pcl-off)) both; }
@keyframes pcl-land { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

/* pristine globe swaps in once the reveal is over, so the final frame is the original artwork */
.pcl-gC { opacity: 0; }
.pcl-stage.pcl-done .pcl-gC { opacity: 1; }
.pcl-stage.pcl-done .pcl-gA, .pcl-stage.pcl-done .pcl-gB { display: none; }

.pcl-swoosh { opacity: 0;
  -webkit-mask-image: linear-gradient(to top right, #000 var(--pcl-p), transparent var(--pcl-p));
          mask-image: linear-gradient(to top right, #000 var(--pcl-p), transparent var(--pcl-p)); }

/* Finished logo (reduced motion, or holding between loops) */
.pcl-stage.pcl-static img { opacity: 1; }
.pcl-stage.pcl-static .pcl-gA, .pcl-stage.pcl-static .pcl-gB { display: none; }
.pcl-stage.pcl-static .pcl-arc, .pcl-stage.pcl-static .pcl-swoosh { --pcl-p: 103%; }

@media (prefers-reduced-motion: reduce) {
  .pcl-play .pcl-ltr, .pcl-play .pcl-tg, .pcl-play .pcl-arc, .pcl-play .pcl-gA, .pcl-play .pcl-gB { animation-duration: .01s; animation-delay: 0s; }
}
@media print { #pcl-overlay { display: none !important; } }