/* Shared site-wide page-load / page-transition effect: three crosses that
   fill with "blood" on entry, and drain-and-refill as a transition before
   navigating to another page on the site. Self-contained (own colors, not
   dependent on any page's local theme variables) so it looks the same on
   every page regardless of that page's own styling.

   Each page picks red (default) or blue via data-pfx-theme="blue" on the
   script tag -- see .pfx-theme-blue overrides at the bottom of this file. */

#pfx-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background:
    radial-gradient(circle at 50% 32%, rgba(196, 30, 58, .16), transparent 60%),
    #060606;
  transition: opacity .5s ease, visibility .5s ease;
}

#pfx-overlay.pfx-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pfx-scene {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.pfx-cross {
  position: relative;
  width: 40px;
  height: 112px;
  clip-path: polygon(35% 0%, 65% 0%, 65% 25%, 100% 25%, 100% 45%, 65% 45%, 65% 100%, 35% 100%, 35% 45%, 0% 45%, 0% 25%, 35% 25%);
  background: linear-gradient(180deg, #2c2c2c, #131313);
  box-shadow: 0 0 22px rgba(0, 0, 0, .5);
}

.pfx-cross--center {
  width: 50px;
  height: 150px;
}

.pfx-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pfx-fill, 0%);
  background: linear-gradient(180deg, #ff3347 0%, #a3081f 55%, #55040f 100%);
  box-shadow: inset 0 6px 12px rgba(255, 255, 255, .15);
}

.pfx-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 130, 140, .65);
  filter: blur(1px);
}

.pfx-label {
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: .75rem;
  color: rgba(255, 255, 255, .55);
}

.pfx-percent {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 130, 140, .9);
  text-shadow: 0 0 10px rgba(196, 30, 58, .6);
}

/* Fragmented, oversized headline shown mid-transition -- the OFF+BRAND-
   style broken/stacked type treatment, using the clicked link's own text. */
.pfx-shatter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.pfx-shatter.pfx-visible {
  opacity: 1;
}

.pfx-shatter span {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.6rem, 6vw, 3.4rem);
  letter-spacing: .02em;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 0 26px rgba(196, 30, 58, .55);
}

@media (prefers-reduced-motion: reduce) {
  #pfx-overlay { transition: none; }
  .pfx-shatter { transition: none; }
}

/* Blue variant -- same shapes/motion, "coolant" instead of "blood". */
#pfx-overlay.pfx-theme-blue {
  background:
    radial-gradient(circle at 50% 32%, rgba(51, 110, 227, .16), transparent 60%),
    #060606;
}

.pfx-theme-blue .pfx-fill {
  background: linear-gradient(180deg, #3d8bff 0%, #0d3aa3 55%, #051c55 100%);
}

.pfx-theme-blue .pfx-fill::after {
  background: rgba(140, 180, 255, .65);
}

.pfx-theme-blue .pfx-percent {
  color: rgba(140, 180, 255, .9);
  text-shadow: 0 0 10px rgba(51, 110, 227, .6);
}

.pfx-theme-blue .pfx-shatter span {
  text-shadow: 0 0 26px rgba(51, 110, 227, .55);
}