/* ============================================================
   Polylink Global — motion layer
   Drop-in. Does not touch your existing CSS. All classes are
   prefixed .pl- so nothing can collide.

   Palette is a weighbridge readout: amber LED on graphite.
   Change the two vars below if you want it to match a rebrand.
   ============================================================ */

:root {
  --pl-ink:      #0B0F12;   /* loader background — graphite */
  --pl-amber:    #FFB000;   /* readout amber */
  --pl-paper:    #E8EBED;
  --pl-dim:      rgba(232, 235, 237, 0.42);
  --pl-hairline: rgba(232, 235, 237, 0.16);
  --pl-ease:     cubic-bezier(0.16, 1, 0.30, 1);
  --pl-mono:     ui-monospace, "SF Mono", "Roboto Mono", "IBM Plex Mono",
                 Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------
   1. LOADER — container doors over a manifest readout
   ------------------------------------------------------------ */

.pl-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* the two doors */
.pl-loader__door {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 50.5vw;
  background: var(--pl-ink);
  transition: transform 780ms var(--pl-ease);
  will-change: transform;
}
.pl-loader__door--l { left: 0; }
.pl-loader__door--r { right: 0; }

/* faint vertical ribbing — corrugated container door */
.pl-loader__door::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.022) 0 2px,
    transparent 2px 34px
  );
}

.pl-loader.is-open .pl-loader__door--l { transform: translateX(-101%); }
.pl-loader.is-open .pl-loader__door--r { transform: translateX(101%); }

/* the readout itself */
.pl-loader__panel {
  position: relative;
  z-index: 2;
  width: min(440px, 78vw);
  font-family: var(--pl-mono);
  color: var(--pl-paper);
  text-align: left;
  transition: opacity 260ms ease, transform 260ms ease;
}
.pl-loader.is-open .pl-loader__panel {
  opacity: 0;
  transform: translateY(-6px);
}

.pl-loader__mark {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pl-dim);
  margin: 0 0 22px;
}

.pl-loader__lane {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pl-paper);
  margin: 0 0 30px;
  min-height: 1.2em;
}
.pl-loader__lane b {
  font-weight: 400;
  color: var(--pl-amber);
}

.pl-loader__count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--pl-amber);
  font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 9vw, 58px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 26px rgba(255, 176, 0, 0.24);
}
.pl-loader__count span {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--pl-dim);
  text-transform: uppercase;
  text-shadow: none;
}

.pl-loader__rule {
  margin-top: 26px;
  height: 1px;
  background: var(--pl-hairline);
  position: relative;
  overflow: hidden;
}
.pl-loader__rule i {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--pl-amber);
  transition: right 120ms linear;
}

/* lock scroll while the doors are shut */
html.pl-loading,
html.pl-loading body { overflow: hidden; }

/* ------------------------------------------------------------
   2. SCROLL REVEALS
   Only ever hidden when JS is alive (html.pl-js). If the script
   fails to run, every element stays visible. Fails safe.
   ------------------------------------------------------------ */

html.pl-js [data-pl-reveal] {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
html.pl-js [data-pl-reveal].pl-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 760ms var(--pl-ease) var(--pl-delay, 0ms),
    transform 760ms var(--pl-ease) var(--pl-delay, 0ms);
}

/* images: fade up from a hair of scale, no jump */
html.pl-js img[data-pl-reveal] { transform: translateY(20px) scale(1.012); }
html.pl-js img[data-pl-reveal].pl-in { transform: none; }

/* ------------------------------------------------------------
   3. HEADER CONDENSE
   ------------------------------------------------------------ */

.pl-nav-scrolled header,
header.pl-nav-scrolled {
  backdrop-filter: saturate(150%) blur(9px);
  -webkit-backdrop-filter: saturate(150%) blur(9px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.09);
  transition: box-shadow 260ms ease, backdrop-filter 260ms ease;
}

/* ------------------------------------------------------------
   4. ACCESSIBILITY FLOOR
   Reduced motion: everything is instant and visible. Non-negotiable.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html.pl-js [data-pl-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pl-loader,
  .pl-loader__door,
  .pl-loader__panel { transition: none !important; }
}

/* keyboard focus must stay visible even mid-animation */
.pl-loader :focus-visible { outline: 2px solid var(--pl-amber); }