/* Drop 745: preloader — twelve designs built from the emblem, chosen in Settings → Website → Preloader.
   Scoped under .plx so nothing leaks into pages. Brand colors are the variables at the top. */
.plx { --plx-gold: #D4A03A; --plx-navy: #0F294C; --s: 1.9;
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: var(--plx-bg);
  font-family: inherit; animation: plx-show 1ms linear var(--plx-delay, 0ms) both; }
.plx.is-light { --plx-bg: #FFFFFF; --plx-ink: #0F294C; --plx-soft: #5B6780; --plx-line: #DDE3EC; --plx-mist: #EEF2F8; --plx-paper: #FFFFFF; --plx-navy2: #0F294C; }
.plx.is-dark  { --plx-bg: #071528; --plx-ink: #E7ECF5; --plx-soft: #9AA7BF; --plx-line: #1E3150; --plx-mist: #0E1D33; --plx-paper: #0A1627; --plx-navy2: #4F77B5; }
@keyframes plx-show { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@keyframes plx-hide { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
.plx.plx-out { animation: plx-hide .45s ease forwards; pointer-events: none; }
@media (max-width: 600px) { .plx { --s: 1.4; } }

.plx .pl { position: relative; display: grid; place-items: center; gap: calc(14px * var(--s)); color: var(--plx-ink); }
.plx .plx-cap { font-size: calc(12px * var(--s)); letter-spacing: .02em; color: var(--plx-soft); font-variant-numeric: tabular-nums; }
.plx .plx-cap:empty { display: none; }
.plx .plx-emb { width: calc(64px * var(--s)); height: auto; display: block; }
.plx.is-dark .pl img:not(.ghost) { filter: drop-shadow(0 0 1px rgba(231,236,245,.6)) drop-shadow(0 0 14px rgba(79,119,181,.35)); }

/* 1 trace */
.plx .pl-trace svg { width: calc(84px * var(--s)); height: auto; overflow: visible; direction: ltr; }
.plx .pl-trace .h { fill: transparent; stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: plx-trace 2.6s cubic-bezier(.65,0,.35,1) infinite; }
.plx .pl-trace .h.l { stroke: var(--plx-gold); color: var(--plx-gold); } .plx .pl-trace .h.r { stroke: var(--plx-navy2); color: var(--plx-navy2); animation-delay: .15s; }
.plx .pl-trace .px.g { fill: var(--plx-gold); } .plx .pl-trace .px.n { fill: var(--plx-navy2); }
.plx .pl-trace .px { animation: plx-blink 2.6s steps(1) infinite; } .plx .pl-trace .px:nth-of-type(2) { animation-delay: .2s; } .plx .pl-trace .px:nth-of-type(3) { animation-delay: .4s; } .plx .pl-trace .px:nth-of-type(4) { animation-delay: .6s; }
@keyframes plx-trace { 0% { stroke-dashoffset: 300; fill: transparent; } 45% { stroke-dashoffset: 0; fill: transparent; } 60%, 82% { stroke-dashoffset: 0; fill: currentColor; } 100% { stroke-dashoffset: -300; fill: transparent; } }
@keyframes plx-blink { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

/* 2 pixels */
.plx .pl-pixels .grid-s { display: grid; grid-template-columns: repeat(9, calc(9px * var(--s))); gap: calc(2px * var(--s)); direction: ltr; }
.plx .pl-pixels .grid-s i { width: calc(9px * var(--s)); height: calc(9px * var(--s)); border-radius: 1.5px; opacity: 0; animation: plx-settle 2.8s cubic-bezier(.2,.8,.2,1) infinite; }
.plx .pl-pixels .grid-s i.off { visibility: hidden; animation: none; }
.plx .pl-pixels .grid-s i.g { background: var(--plx-gold); } .plx .pl-pixels .grid-s i.n { background: var(--plx-navy2); }
@keyframes plx-settle { 0% { opacity: 0; transform: translateY(calc(-26px * var(--s))); } 18%, 72% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(calc(8px * var(--s))); } }

/* 3 scan */
.plx .pl-scan .wrap { position: relative; width: calc(88px * var(--s)); } .plx .pl-scan .wrap img { width: 100%; display: block; }
.plx .pl-scan .ghost { filter: grayscale(1); opacity: .18; } .plx.is-dark .pl-scan .ghost { filter: grayscale(1) brightness(2.2); opacity: .16; }
.plx .pl-scan .lit { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); animation: plx-reveal 2.4s cubic-bezier(.6,0,.3,1) infinite; }
.plx .pl-scan .beam { position: absolute; left: -18%; right: -18%; height: 2px; top: 0; background: linear-gradient(90deg, transparent, var(--plx-gold), transparent); box-shadow: 0 0 14px var(--plx-gold); animation: plx-beam 2.4s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes plx-reveal { 0% { clip-path: inset(0 0 100% 0); } 55%, 80% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(100% 0 0 0); } }
@keyframes plx-beam { 0% { top: 0; opacity: 1; } 55% { top: 100%; opacity: 1; } 62%, 100% { top: 100%; opacity: 0; } }

/* 4 orbit */
.plx .pl-orbit .ring { position: relative; width: calc(130px * var(--s)); height: calc(130px * var(--s)); display: grid; place-items: center; }
.plx .pl-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.plx .pl-orbit .t { stroke: var(--plx-line); stroke-width: 1.5; }
.plx .pl-orbit .a1 { stroke: var(--plx-gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 70 220; transform-origin: 50% 50%; animation: plx-spin 1.8s linear infinite; }
.plx .pl-orbit .a2 { stroke: var(--plx-navy2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 40 200; transform-origin: 50% 50%; animation: plx-spin 2.6s linear infinite reverse; }
.plx .pl-orbit .plx-emb { width: calc(46px * var(--s)); }
@keyframes plx-spin { to { transform: rotate(360deg); } }

/* 5 rise */
.plx .pl-rise .col { position: relative; width: calc(72px * var(--s)); } .plx .pl-rise .col img { width: 100%; display: block; position: relative; }
.plx .pl-rise .col i { position: absolute; width: calc(6px * var(--s)); height: calc(6px * var(--s)); border-radius: 1px; bottom: 78%; opacity: 0; animation: plx-rise 1.9s ease-out infinite; }
.plx .pl-rise .col i.g { background: var(--plx-gold); } .plx .pl-rise .col i.n { background: var(--plx-navy2); }
@keyframes plx-rise { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-60px * var(--s))); } }
.plx .pl-rise .track { width: calc(150px * var(--s)); height: calc(3px * var(--s)); border-radius: 3px; background: var(--plx-line); overflow: hidden; }
.plx .pl-rise .track b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--plx-gold), var(--plx-navy2)); transition: width .25s ease; }

/* 6 bar — only a strip at the top; the page shows through */
.plx.plx-bar { background: transparent; pointer-events: none; }
.plx .pl-bar { position: fixed; inset: 0 0 auto; height: 0; display: block; }
.plx .pl-bar .edge { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; }
.plx .pl-bar .edge b { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 0; background: linear-gradient(90deg, var(--plx-gold), var(--plx-navy2)); box-shadow: 0 0 10px rgba(212,160,58,.6); transition: width .3s ease; }
.plx .pl-bar .mini { position: absolute; inset-inline-end: 16px; top: 12px; width: 22px; animation: plx-breathe 1.6s ease-in-out infinite; }
.plx .pl-bar .sk { display: none; }
@keyframes plx-breathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }

/* 7 particles */
.plx .pl-particles canvas { display: block; width: calc(170px * var(--s)); height: calc(170px * var(--s)); }

/* 8 decrypt */
.plx .pl-decrypt { gap: calc(8px * var(--s)); }
.plx .pl-decrypt .word { direction: ltr; display: flex; gap: calc(10px * var(--s)); font-size: calc(46px * var(--s)); font-weight: 600; letter-spacing: .04em; line-height: 1; }
.plx .pl-decrypt .word span { display: inline-block; width: .78em; text-align: center; color: var(--plx-ink); }
.plx .pl-decrypt .word span.o { color: var(--plx-gold); } .plx .pl-decrypt .word span.x { color: var(--plx-soft); opacity: .7; }
.plx .pl-decrypt .hash { direction: ltr; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: calc(10.5px * var(--s)); color: var(--plx-soft); letter-spacing: .08em; }
.plx .pl-decrypt .hash b { color: var(--plx-gold); font-weight: 500; }

/* 9 radar */
.plx .pl-radar .scope { position: relative; width: calc(150px * var(--s)); height: calc(150px * var(--s)); border-radius: 50%; border: 1px solid var(--plx-line); overflow: hidden;
  background: radial-gradient(circle, transparent 32%, var(--plx-line) 32.5%, transparent 33.5%, transparent 65%, var(--plx-line) 65.5%, transparent 66.5%); }
.plx .pl-radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(212,160,58,.55), rgba(212,160,58,0) 70deg, transparent 360deg); animation: plx-spin 2.4s linear infinite; }
.plx .pl-radar .scope img { position: absolute; left: 50%; top: 50%; width: calc(38px * var(--s)); transform: translate(-50%, -50%); }
.plx .pl-radar .blip { position: absolute; width: calc(7px * var(--s)); height: calc(7px * var(--s)); margin: calc(-3.5px * var(--s)); border-radius: 50%; background: #C0392B; animation: plx-blip 2.4s linear infinite; }
@keyframes plx-blip { 0%, 4% { opacity: 0; transform: scale(.4); background: #C0392B; } 8% { opacity: 1; transform: scale(1.2); } 40% { background: #C0392B; } 46%, 86% { opacity: 1; transform: scale(1); background: var(--plx-gold); box-shadow: 0 0 calc(8px * var(--s)) var(--plx-gold); } 100% { opacity: 0; } }

/* 10 split — the halves are the curtain; the page itself is revealed */
.plx.plx-split { background: transparent; --s: 1.6; }
.plx .pl-split { position: fixed; inset: 0; display: block; overflow: hidden; }
.plx .pl-split .page { display: none; }
.plx .pl-split .half { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; transition: transform .8s cubic-bezier(.77,0,.18,1); }
.plx .pl-split .half.l { left: 0; background: var(--plx-paper); border-right: 1px solid var(--plx-gold); }
.plx .pl-split .half.r { right: 0; background: var(--plx-mist); border-left: 1px solid var(--plx-navy2); }
.plx .pl-split .half img { width: calc(78px * var(--s)); position: absolute; top: 50%; }
.plx .pl-split .half.l img { right: 0; transform: translate(50%, -50%); clip-path: inset(0 50% 0 0); }
.plx .pl-split .half.r img { left: 0; transform: translate(-50%, -50%); clip-path: inset(0 0 0 50%); }
.plx .pl-split .glow { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(transparent, var(--plx-gold), transparent); opacity: 0; animation: plx-seam 1.6s ease-in-out infinite; }
@keyframes plx-seam { 50% { opacity: .9; } }
.plx .pl-split.open .half.l { transform: translateX(-101%); } .plx .pl-split.open .half.r { transform: translateX(101%); } .plx .pl-split.open .glow { display: none; }
.plx.plx-split.plx-out { animation: plx-hide .2s linear .75s forwards; }

/* 11 blueprint */
.plx .pl-blue .sheet { position: relative; width: calc(170px * var(--s)); height: calc(170px * var(--s)); border: 1px solid var(--plx-line); border-radius: 6px;
  background-image: linear-gradient(var(--plx-line) 1px, transparent 1px), linear-gradient(90deg, var(--plx-line) 1px, transparent 1px); background-size: calc(17px * var(--s)) calc(17px * var(--s)); }
.plx .pl-blue svg { position: absolute; inset: 0; width: 100%; height: 100%; direction: ltr; }
.plx .pl-blue .guide { stroke: var(--plx-soft); stroke-width: .5; stroke-dasharray: 2 2; fill: none; opacity: 0; animation: plx-guide 3.2s ease infinite; }
.plx .pl-blue .ink { fill: transparent; stroke-width: 1.4; stroke-dasharray: 260; stroke-dashoffset: 260; animation: plx-ink 3.2s cubic-bezier(.65,0,.35,1) infinite; }
.plx .pl-blue .ink.l { stroke: var(--plx-gold); color: var(--plx-gold); } .plx .pl-blue .ink.r { stroke: var(--plx-navy2); color: var(--plx-navy2); animation-delay: .2s; }
.plx .pl-blue .dim { font: 500 4.2px ui-monospace, monospace; fill: var(--plx-soft); opacity: 0; animation: plx-guide 3.2s ease infinite; }
@keyframes plx-guide { 0% { opacity: 0; } 12%, 80% { opacity: .9; } 100% { opacity: 0; } }
@keyframes plx-ink { 0%, 15% { stroke-dashoffset: 260; fill: transparent; } 55% { stroke-dashoffset: 0; fill: transparent; } 68%, 86% { stroke-dashoffset: 0; fill: currentColor; } 100% { stroke-dashoffset: 0; fill: transparent; opacity: 0; } }

/* 12 circuit */
.plx .pl-circuit .board { position: relative; width: calc(200px * var(--s)); height: calc(150px * var(--s)); }
.plx .pl-circuit svg { position: absolute; inset: 0; width: 100%; height: 100%; direction: ltr; }
.plx .pl-circuit .trace { fill: none; stroke: var(--plx-line); stroke-width: 1.2; }
.plx .pl-circuit .flow { fill: none; stroke: var(--plx-gold); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 14 300; stroke-dashoffset: 314; animation: plx-flow 2.6s linear infinite; }
.plx .pl-circuit .flow.n { stroke: #4F77B5; }
.plx .pl-circuit .pad { fill: var(--plx-paper); stroke: var(--plx-soft); stroke-width: 1; }
.plx .pl-circuit .core { position: absolute; left: 50%; top: 50%; width: calc(44px * var(--s)); transform: translate(-50%, -50%); animation: plx-power 2.6s ease infinite; }
@keyframes plx-flow { to { stroke-dashoffset: 0; } }
@keyframes plx-power { 0%, 55% { filter: grayscale(1); opacity: .45; } 65%, 90% { filter: none; opacity: 1; } 100% { filter: grayscale(1); opacity: .45; } }

/* ── A live sample inside the admin (not fixed, not full screen) ── */
.plx.plx-demo { position: relative; inset: auto; z-index: auto; animation: none; height: 100%; min-height: 200px; --s: 1; }
.plx.plx-demo.plx-bar, .plx.plx-demo.plx-split { background: var(--plx-bg); }
.plx.plx-demo .pl-bar, .plx.plx-demo .pl-split { position: absolute; inset: 0; height: auto; }
.plx.plx-demo .pl-bar .sk { display: grid; position: absolute; inset: 40px 22px auto; gap: 9px; }
.plx.plx-demo .pl-bar .sk i { display: block; height: 9px; border-radius: 5px; background: var(--plx-mist); } .plx.plx-demo .pl-bar .sk i:first-child { width: 55%; height: 14px; }
.plx.plx-demo .pl-split .page { display: grid; position: absolute; inset: 34px 26px auto; gap: 9px; } .plx.plx-demo .pl-split .page i { height: 9px; border-radius: 5px; background: var(--plx-line); }

@media (prefers-reduced-motion: reduce) {
  .plx .pl, .plx .pl * { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .plx .pl-trace .h, .plx .pl-blue .ink { stroke-dashoffset: 0; fill: currentColor; }
  .plx .pl-pixels .grid-s i { opacity: 1; transform: none; }
  .plx .pl-scan .lit { clip-path: none; } .plx .pl-scan .beam, .plx .pl-rise .col i, .plx .pl-radar .sweep { display: none; }
  .plx .pl-circuit .core { filter: none; opacity: 1; } .plx .pl-split .half { transition: none; }
}
.plx .plx-skip { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 24px; z-index: 2; border: 1px solid var(--plx-line); background: var(--plx-bg); color: var(--plx-soft); padding: .4rem .8rem; border-radius: 8px; font: inherit; font-size: .82rem; cursor: pointer; pointer-events: auto; }