/* ============================================================
   SIGN-IN · EXPLODED PAVER  (dark-blue tech look)
   Left: brand + headline. Centre: the paver in 9 numbered parts
   (_login_paver_svg.php) that assemble 1 -> 9 and then drive
   forward. Right: the sign-in card, shown once the paver is whole.
   Timeline in assets/login_paver.js.
   ============================================================ */
:root{--blue:#1677ff;--blue2:#3da5ff;--deep:#030c1f;--ink:#0b1b33;--ink2:#4a5b75;--ink3:#8592a6;--gold:#f3b708}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#fff;overflow:hidden;
  background:radial-gradient(900px 620px at 52% 55%,#0d3b85 0%,rgba(13,59,133,.35) 45%,transparent 70%),
             radial-gradient(1400px 900px at 20% 0%,#0a2350 0%,transparent 60%),
             linear-gradient(180deg,#041330,#020916)}

/* ---- background: a slow tech grid, drifting particles, light beams ---- */
.lp-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.lp-bg .grid{position:absolute;left:-10%;right:-10%;bottom:-20%;height:70%;
  background-image:linear-gradient(rgba(61,165,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(61,165,255,.16) 1px,transparent 1px);
  background-size:60px 60px;transform:perspective(600px) rotateX(62deg);transform-origin:bottom;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%);
  animation:lpGrid 6s linear infinite}
@keyframes lpGrid{to{background-position:0 60px,0 0}}
.lp-bg .beam{position:absolute;top:-20%;width:2px;height:80%;background:linear-gradient(180deg,transparent,rgba(61,165,255,.55),transparent);
  filter:blur(1px);opacity:.5;animation:lpBeam 9s ease-in-out infinite}
@keyframes lpBeam{0%,100%{transform:translateY(-10%);opacity:0}40%{opacity:.6}70%{transform:translateY(40%);opacity:0}}
.lp-bg i{position:absolute;width:3px;height:3px;border-radius:50%;background:#7cc4ff;box-shadow:0 0 8px #3da5ff;opacity:0;animation:lpDot 10s linear infinite}
@keyframes lpDot{0%{opacity:0;transform:translateY(0)}20%{opacity:.8}100%{opacity:0;transform:translateY(-40vh)}}

/* ---- layout ---- */
.lp-top{position:fixed;z-index:4;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:20px 4vw}
.lp-top .brand{display:flex;align-items:center;gap:12px}
.lp-top .brand img{height:96px;border-radius:14px;box-shadow:0 10px 26px -12px #000}
.lp-top nav{font:500 13.5px system-ui;color:rgba(255,255,255,.8);display:flex;gap:14px}
.lp-top nav span+span::before{content:"·";margin-right:14px;color:rgba(255,255,255,.4)}
.lp-wrap{position:relative;z-index:2;height:100vh;display:grid;padding-top:130px!important;grid-template-columns:minmax(230px,.62fr) minmax(440px,2.2fr) minmax(340px,390px);
  align-items:center;gap:2vw;padding:96px 4vw 90px}
.lp-hero h2{margin:0;font:800 clamp(30px,3.4vw,52px)/1.08 system-ui,sans-serif;letter-spacing:-.02em}
.lp-hero h2 b{color:var(--blue2);font-weight:800}
.lp-hero p{margin:18px 0 0;max-width:330px;color:rgba(255,255,255,.78);font-size:15px;line-height:1.55}
.lp-hero .ar{margin-top:10px;font-size:14px;color:rgba(255,255,255,.6)}
.lp-stage{position:relative;height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.lp-mach-svg{width:100%;max-height:100%;display:block;overflow:visible}

/* caption bottom-left with the live count */
.lp-cap{position:fixed;z-index:4;left:4vw;bottom:22px;display:flex;align-items:center;gap:14px}
.lp-cap .ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--blue2);box-shadow:0 0 16px rgba(61,165,255,.5);color:#bfe3ff}
.lp-cap b{font-size:15px}
.lp-cap b span{color:rgba(255,255,255,.4);margin:0 6px}
.lp-cap small{display:block;color:rgba(255,255,255,.62);font-size:12.5px;margin-top:2px}
.lp-cap .bar{margin-top:6px;width:220px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.lp-cap .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--gold));transition:width .5s ease}

/* ---- the parts ---- */
.pp{transform:var(--ex);opacity:0;transform-box:fill-box;transform-origin:center;
  transition:transform 1.25s cubic-bezier(.3,.8,.2,1),opacity .6s ease}
.pp.show{opacity:1;animation:lpFloat 2.6s ease-in-out infinite}
.pp.show:nth-of-type(2n){animation-duration:3.2s;animation-direction:reverse}
.pp.in{transform:none;animation:none}
@keyframes lpFloat{50%{translate:0 -7px}}
.no-motion .pp{transition:none}
.tag{transition:opacity .5s ease}
.tag circle{fill:#0b1b33;stroke:var(--blue2);stroke-width:2.5}
.tag .no{fill:#fff;font:800 16px system-ui,sans-serif;text-anchor:middle}
.tag .nm{fill:#cfe6ff;font:600 15px system-ui,sans-serif;paint-order:stroke;stroke:#030c1f;stroke-width:4px;stroke-linejoin:round}
.pp.in .tag{opacity:0}
.lp-brand{font:900 17px "Arial Black",Arial,sans-serif;fill:#f3b708;letter-spacing:1.6px}
.lp-snap{fill:none;stroke:var(--blue2);stroke-width:3;opacity:0}
.lp-snap.go{animation:lpSnap .7s ease-out forwards}
@keyframes lpSnap{0%{opacity:.95;r:4}100%{opacity:0;r:50}}
.lp-floor{transition:opacity 1s}

/* ---- once it is whole ---- */
.lp-mach{transition:transform 4s cubic-bezier(.45,0,.25,1)}
.driving .lp-mach{transform:translateX(var(--drive,-90px))}
.lp-spin{transform-box:fill-box;transform-origin:center}
.driving .lp-spin{animation:lpSpin 1.6s linear infinite}
@keyframes lpSpin{to{transform:rotate(-360deg)}}
.driving .lp-belt{animation:lpBelt .6s linear infinite}
@keyframes lpBelt{to{stroke-dashoffset:15}}
.running .lp-auger{stroke-dasharray:6 4;animation:lpBelt .5s linear infinite}
.running .pp:not([data-n="1"]):not([data-n="4"]){animation:lpVib .16s linear infinite}
@keyframes lpVib{50%{translate:0 .7px}}
.lp-smoke circle{opacity:0;transform-box:fill-box;transform-origin:center}
.running .lp-smoke circle{animation:lpSmoke 2.4s ease-out infinite}
.running .lp-smoke circle:nth-child(2){animation-delay:.8s}
.running .lp-smoke circle:nth-child(3){animation-delay:1.6s}
@keyframes lpSmoke{0%{opacity:.5;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(26px,-90px) scale(3)}}
.running .lp-beacon-glow{animation:lpBeacon 1s ease-in-out infinite}
@keyframes lpBeacon{50%{opacity:.85}}
.lp-heat{animation:lpHeat 3s ease-in-out infinite}
@keyframes lpHeat{50%{opacity:.3}}

/* ---- the sign-in card ---- */
.lp-card{position:relative;z-index:5;width:100%;padding:28px 28px 22px;border-radius:18px;color:var(--ink);background:#fff;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.8),0 0 0 1px rgba(61,165,255,.25);
  opacity:0;transform:translateX(40px);pointer-events:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.9,.25,1)}
.ready .lp-card{opacity:1;transform:none;pointer-events:auto}
.lp-card h1{margin:0;font-size:24px;color:var(--ink);letter-spacing:-.01em}
.lp-card .sub{margin:4px 0 18px;color:var(--ink2);font-size:14px}
.lp-card label{display:block;font:600 12.5px system-ui;color:var(--ink2);margin:12px 0 6px}
.lp-card .fi{position:relative}
.lp-card .fi>svg{position:absolute;left:13px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--ink3)}
.lp-card input{width:100%;padding:12px 42px 12px 42px;border:1.5px solid #dde3ec;border-radius:10px;font:15px system-ui;outline:none;background:#fff;color:var(--ink)}
.lp-card input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,119,255,.18)}
.lp-card .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;padding:6px;cursor:pointer;color:var(--ink3);display:flex}
.lp-card .eye svg{width:19px;height:19px}
.lp-card .eye:hover{color:var(--blue)}
.lp-card .go{margin-top:20px;width:100%;padding:13px;border:0;border-radius:10px;font:700 15px system-ui;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#2b8bff,#1268e6);box-shadow:0 12px 22px -12px rgba(22,119,255,.9)}
.lp-card .go:hover{filter:brightness(1.07)}
.lp-card .go svg{width:18px;height:18px}
.lp-card .err{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:#fdecec;color:#b42318;font-size:13.5px;border:1px solid #f5c2c0}
.lp-card .flash{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:#eef6ff;color:#1e4b8f;font-size:13.5px}
.lp-card .foot{margin:16px 0 0;color:var(--ink2);font-size:13px;text-align:center;line-height:1.55}
.lp-card .foot a{color:var(--blue);font-weight:600;text-decoration:none}
.lp-card .foot small{display:block;color:var(--ink3);font-size:12px}

.lp-skip{position:fixed;z-index:6;right:4vw;bottom:22px;border:1px solid rgba(61,165,255,.5);background:rgba(3,12,31,.6);color:#cfe6ff;
  font:600 13px system-ui;padding:8px 14px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);transition:opacity .4s}
.ready .lp-skip{opacity:0;pointer-events:none}

/* ---- narrower screens ---- */
@media (max-width:1180px){
  .lp-wrap{grid-template-columns:minmax(380px,1.6fr) minmax(320px,380px)}
  .lp-hero{position:fixed;left:4vw;top:84px;z-index:3}
  .lp-hero h2{font-size:26px}.lp-hero p{display:none}
  .lp-stage{padding-top:60px}
}
@media (max-width:820px){
  body{overflow:auto}
  .lp-top nav{display:none}
  .lp-wrap{height:auto;display:block;padding:84px 16px 90px}
  .lp-hero{position:static;margin:0 0 6px}
  .lp-stage{padding:0;height:auto}
  .lp-card{margin:4px auto 0;max-width:420px;transform:translateY(30px)}
  .ready .lp-card{transform:none}
  .tag .nm{display:none}
  .lp-cap{position:static;margin:22px 16px 0}
  .lp-skip{right:16px;bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .pp,.lp-mach,.lp-card{transition:none!important}
  *{animation:none!important}
}

/* ===== the paver from its real parts (assets/login_paver.webp, see login_paver.js) ===== */
.lp-photo{position:relative;height:min(74vh,660px);aspect-ratio:819/930;max-width:100%;perspective:1400px;margin:auto;cursor:pointer}
.ph-glow{position:absolute;left:10%;right:10%;bottom:2%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(47,140,255,.55),transparent);filter:blur(8px);opacity:.7}
.ph-stage{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .35s ease-out;--travel:1200ms}
.ph-part{position:absolute;background:url(login_paver.webp) no-repeat;opacity:0;will-change:left,top,transform;
  transition:left var(--travel) cubic-bezier(.22,.9,.25,1.04),top var(--travel) cubic-bezier(.22,.9,.25,1.04),transform var(--travel) ease,opacity .7s ease,filter .6s ease;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}
.show .ph-part,.whole .ph-part{opacity:1}
.ph-part.apart{filter:drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 12px var(--c)) brightness(1.08)}
.ph-part.apart{animation:phHover 2.6s ease-in-out infinite}
.ph-part:nth-child(2n).apart{animation-duration:3.2s;animation-direction:reverse}
@keyframes phHover{50%{translate:0 -6px}}
.ph-part.in{animation:none}
.instant .ph-part{transition:none!important}
.whole .lp-photo{animation:phFloat 7s ease-in-out infinite}
@keyframes phFloat{0%,100%{translate:0 0}50%{translate:-12px -8px}}
.whole .ph-glow{animation:phGlow 3.5s ease-in-out infinite}
@keyframes phGlow{50%{opacity:1;transform:scaleX(1.08)}}
.whole .ph-part.in{animation:phSettle .5s ease-out}
@keyframes phSettle{0%{filter:drop-shadow(0 0 16px #8fd0ff) brightness(1.35)}100%{filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}}
.lp-photo::after{content:"Click to take it apart";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font:600 12px system-ui;color:rgba(207,230,255,.55);
  opacity:0;transition:opacity .4s;white-space:nowrap;pointer-events:none}
.ready .lp-photo:hover::after{opacity:1}
@media (max-width:820px){.lp-photo{height:auto;width:min(86vw,420px)}}
@media (max-width:820px){.lp-top .brand img{height:64px}.lp-wrap{padding-top:96px!important}}

/* ===== the logo: a turning drum + the emblem falling like rain (logo_drum.js) ===== */
.lp-top{align-items:flex-start}
.lp-top .brand{position:relative;width:calc(var(--d,505px) * var(--ls,.78));height:calc(150px * var(--ls,.78))}
.logo3d{position:absolute;left:0;top:0;width:var(--d,505px);height:150px;transform:scale(var(--ls,.78));transform-origin:0 0}
.logo3d .drum-wrap{position:absolute;inset:0;perspective:1800px;z-index:2}
.logo3d .drum{position:absolute;inset:0;transform-style:preserve-3d;animation:lgSpin 34s linear infinite}
.logo3d .drum i{position:absolute;left:50%;top:0;height:150px;background:url(logo_drum.jpg) 0 0/528.333px 150px repeat-x;backface-visibility:hidden}
.logo3d .shade{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,rgba(2,9,22,.9),rgba(2,9,22,.3) 9%,rgba(2,9,22,0) 22%,rgba(255,255,255,.1) 48%,rgba(2,9,22,0) 74%,rgba(2,9,22,.3) 91%,rgba(2,9,22,.9))}
.logo3d .cap{position:absolute;left:-3px;right:-3px;height:16px;border-radius:50%;z-index:4}
.logo3d .cap.t{top:-8px;background:linear-gradient(180deg,#dfe7f3,#6b7890);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.logo3d .cap.b{bottom:-8px;background:linear-gradient(180deg,#4b5870,#141b28)}
.logo3d .rain{position:absolute;left:0;top:100%;width:100%;height:230px;z-index:1;pointer-events:none}
@keyframes lgSpin{to{transform:rotateY(-360deg)}}
.lp-wrap{padding-top:150px!important}
@media (max-width:1180px){.lp-top .brand{--ls:.62}}
@media (max-width:820px){.lp-top .brand{--ls:.6}.lp-wrap{padding-top:120px!important}.logo3d .rain{display:none}}

/* ===== sign-in card: Steel Industrial ===== */
.lp-card{background:linear-gradient(180deg,#232a33,#161a20);color:#fff;border:1px solid #39424e;
  box-shadow:0 30px 70px -26px #000,inset 0 1px 0 rgba(255,255,255,.06)}
.lp-card h1{color:#fff}
.lp-card .sub,.lp-card .foot{color:#9aa6b4}
.lp-card .foot small{color:#7d8897}
.lp-card label{color:#f3b708;text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.lp-card .fi .ic{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;border-radius:6px;background:#f3b708;color:#111}
.lp-card .fi .ic svg{width:17px;height:17px}
.lp-card input{padding:13px 44px 13px 50px;border-radius:12px;background:#0f1318;border:1.5px solid #353d48;color:#f1f4f8}
.lp-card input::placeholder{color:#6b7684}
.lp-card input:focus{border-color:#f3b708;box-shadow:0 0 0 3px rgba(243,183,8,.18)}
.lp-card input:-webkit-autofill{-webkit-text-fill-color:#f1f4f8;-webkit-box-shadow:0 0 0 40px #0f1318 inset}
.lp-card .eye{color:#9aa6b4}
.lp-card .eye:hover{color:#f3b708}
.lp-card .go{border-radius:12px;background:repeating-linear-gradient(135deg,#f3b708 0 14px,#e5aa00 14px 28px);color:#111;box-shadow:0 12px 22px -12px rgba(243,183,8,.8)}
.lp-card .foot a{color:#f3b708}
.lp-card .err{background:rgba(220,38,38,.15);color:#fca5a5;border-color:rgba(248,113,113,.4)}
.lp-card .flash{background:rgba(243,183,8,.12);color:#f3dc8a}

/* ===== card: Blue Glass with a moving light ===== */
.lp-card{overflow:hidden;background:linear-gradient(160deg,rgba(40,92,170,.42),rgba(10,26,56,.62));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(140,200,255,.45);box-shadow:0 30px 70px -26px #000,0 0 40px -8px rgba(61,165,255,.5),inset 0 1px 0 rgba(200,230,255,.45)}
.lp-card>*{position:relative;z-index:1}
.lp-card::before{content:"";position:absolute;top:-40%;left:-30%;width:70%;height:180%;transform:rotate(25deg);z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.lp-card::after{content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;transform:skewX(-20deg);z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(120,190,255,.24),rgba(255,255,255,.14),transparent);animation:cardSweep 5s ease-in-out infinite}
@keyframes cardSweep{0%,55%{left:-60%}100%{left:130%}}
.lp-card .sub,.lp-card .foot{color:#bcd3ef}
.lp-card .foot small{color:#9fb6d6}
.lp-card input{background:rgba(5,14,32,.55);border-color:rgba(120,180,255,.35)}
.lp-card input::placeholder{color:#89a3c6}
.lp-card input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #0a1a36 inset}

/* ===== canvas version of the paver (landscape picture, login_paver.js) ===== */
.lp-photo{height:auto;width:116%;max-width:none;margin-left:-4%;aspect-ratio:1344/752}
.ph-stage{width:100%;height:100%;display:block}
.ph-glow{left:12%;right:12%;bottom:6%;height:14%}
@media (max-width:1180px){.lp-photo{width:112%;margin-left:-6%}}
@media (max-width:820px){.lp-photo{width:min(96vw,560px);margin:0 auto}}