/* Hidden by default */
#ph-static-nav-loader { display: none; }

/* When active: visual-only layer */
.ph-navw-active #ph-static-nav-loader{
  display:block;
  position:fixed;
  inset:0;
  z-index:999999;
  pointer-events:none; /* CRITICAL: never blocks any click */
}

/* White stage ONLY below header/admin-bar */
.ph-navw__stage{
  position:fixed;
  left:0; right:0;
  top: var(--ph-navw-top, 0px);
  bottom:0;
  background:#fff;
  pointer-events:none; /* CRITICAL */
}

/* Center loader within the stage */
.ph-navw__center{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

/* Scroll lock fallback */
html.ph-navw-active {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.ph-navw-active body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* iOS momentum scroll kill (safe-ish) */
html.ph-navw-active,
html.ph-navw-active body {
  -webkit-overflow-scrolling: auto;
}

/* =========================
   ICON TRAIN LOADER
   ========================= */

.ph-navw__trainWrap{
  --icon: 90px;
  --trackW: 520px;
  --trackH: 105px;
  --run: 190px;
  --dur: 900ms;

  --scale: min(0.88, calc((100vw - 32px) / var(--trackW)));

  width: var(--trackW);
  height: var(--trackH);
  position: relative;
  transform: scale(var(--scale)) translateZ(0);
  transform-origin: center;
  pointer-events: none;
}

.ph-navw__trainTrack{
  position: relative;
  width: var(--trackW);
  height: var(--trackH);
  overflow: visible;
  pointer-events: none;
}

.ph-navw__trainTrack::before,
.ph-navw__trainTrack::after{
  content: none !important;
  display: none !important;
}

.ph-navw__spark{
  position:absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%) translateX(calc(-1 * var(--run)));
  opacity: 0;
  background: radial-gradient(circle,
    rgba(231,202,245,0.35) 0%,
    rgba(245,172,229,0.18) 35%,
    rgba(249,213,207,0.00) 70%
  );
  border-radius: 999px;
  animation: phNavSpark var(--dur) linear infinite;
  will-change: transform, opacity;
  pointer-events: none;
}

.ph-navw__trainIcon{
  position:absolute;
  top: 50%;
  left: 50%;
  width: var(--icon);
  height: var(--icon);

  transform: translate(-50%, -50%) translateX(calc(-1 * var(--run)));
  opacity: 0;

  animation: phNavTrain var(--dur) cubic-bezier(.2,.85,.2,1) infinite;
  animation-delay: var(--delay);
  will-change: transform, opacity;
  pointer-events: none;
}

.ph-navw__trainIcon img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: contain;
}

.ph-navw__trainIcon--lead { opacity: 1; }
.ph-navw__trainIcon--mid  { opacity: 0.9; }
.ph-navw__trainIcon--tail { opacity: 0.8; }

@keyframes phNavTrain{
  0%{
    transform: translate(-50%, -50%) translateX(calc(-1 * var(--run)));
    opacity: 0;
  }
  10%{ opacity: 1; }
  85%{
    transform: translate(-50%, -50%) translateX(var(--run));
    opacity: 1;
  }
  100%{
    transform: translate(-50%, -50%) translateX(var(--run));
    opacity: 0;
  }
}

@keyframes phNavSpark{
  0%{
    transform: translate(-50%, -50%) translateX(calc(-1 * var(--run)));
    opacity: 0;
  }
  12%{ opacity: 0.55; }
  70%{
    transform: translate(-50%, -50%) translateX(var(--run));
    opacity: 0.35;
  }
  100%{
    transform: translate(-50%, -50%) translateX(var(--run));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .ph-navw__trainIcon,
  .ph-navw__spark{
    animation: none !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
  .ph-navw__spark{
    display:none !important;
  }
}