/* Login screen ("הקמפוס המקוון"). Shares tokens, fonts, top bar and frame with style.css. */

/* the document scrolls, the body doesn't — style.css's overscroll-behavior:none on a body that is itself a
   scroll box kept the wheel and touch from reaching the page (a short phone couldn't get to the button) */
html{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:auto;touch-action:auto;user-select:auto}
body.login{height:auto;overflow:visible;overscroll-behavior:auto;touch-action:auto;user-select:auto}
body.login{min-height:100dvh;background:#000}

/* the page opens like the shutter that closed on the previous screen */
.reveal{min-height:100dvh;
  clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%);
  animation:aperture 1.05s cubic-bezier(.76,0,.24,1) .1s forwards}
@keyframes aperture{to{clip-path:polygon(96% -61%,161% 4%,161% 96%,96% 161%,4% 161%,-61% 96%,-61% 4%,4% -61%)}}

/* background: the desk, slowly settling */
.lg-bg{position:fixed;inset:0;overflow:hidden;background:#000}
.lg-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.09);animation:settle 16s cubic-bezier(.16,1,.3,1) forwards}
@keyframes settle{to{transform:scale(1)}}
.lg-bg::after{content:"";position:absolute;inset:0;
  background-color:rgba(0,0,0,.45);
  background-image:radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.65) 100%)}

.back{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 0;font-size:15px;
  text-shadow:0 1px 18px rgba(0,0,0,.55)}
.back .ico{font-size:17px;transition:transform .4s var(--ease-out)}
.back:hover .ico{transform:translateX(5px)}
.back::after{content:"";position:absolute;inset-inline:0;bottom:3px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.back:not(:hover)::after{transform-origin:left}
.back:hover::after{transform:scaleX(1)}

/* card */
.lg-wrap{position:relative;z-index:4;min-height:100dvh;display:grid;place-items:center;
  padding:calc(var(--pad) + 76px) calc(var(--frame) + 16px) calc(var(--pad) + 24px)}
.lg-card{width:min(440px,100%);padding:clamp(28px,4vw,44px);border-radius:22px;
  background:rgba(10,10,11,.74);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:stretch;text-align:center}
.lg-card > *{opacity:0;transform:translateY(16px)}
body.ready .lg-card > *{opacity:1;transform:none;
  transition:opacity .8s ease calc(var(--i) * 70ms), transform 1s var(--ease-out) calc(var(--i) * 70ms)}

.lg-logo{display:block;width:132px;height:auto;margin:0 auto 18px;overflow:visible}
.lg-logo [pathLength]{stroke-width:2.2}
body.ready .lg-logo [pathLength]{stroke-dashoffset:0}

.lg-card h1{font-size:clamp(28px,3vw,34px);font-weight:700;letter-spacing:-.01em;line-height:1.1}
.lg-sub{margin-top:8px;font-weight:300;font-size:16px;color:var(--ink-soft)}

/* fields with floating labels */
.lg-form{margin-top:28px;display:flex;flex-direction:column;gap:14px;text-align:start}
.field{position:relative}
.field input{width:100%;height:58px;padding:22px 16px 8px;border-radius:14px;
  font:inherit;font-size:16px;color:var(--ink);direction:ltr;text-align:right;
  background:rgba(244,241,234,.04);border:1px solid var(--line);outline:none;
  transition:border-color .3s, background .3s, box-shadow .3s}
.field.has-eye input{padding-left:52px}
.field input:hover{border-color:rgba(244,241,234,.38)}
.field input:focus{border-color:var(--accent);background:rgba(244,241,234,.06);box-shadow:0 0 0 4px rgba(210,173,107,.14)}
.field label{position:absolute;inset-inline-start:16px;top:19px;font-size:16px;color:var(--ink-dim);pointer-events:none;
  transform-origin:right top;transition:transform .35s var(--ease-out), color .3s}
.field input:focus + label,.field input:not(:placeholder-shown) + label{transform:translateY(-11px) scale(.76);color:var(--accent)}
.field.invalid input{border-color:#e07a6a}
.field .hint{display:block;min-height:0;margin-top:6px;font-size:13px;color:#ef9a8c;opacity:0;transform:translateY(-4px);
  transition:opacity .3s, transform .3s}
.field.invalid .hint{opacity:1;transform:none}
.eye{position:absolute;left:8px;top:7px;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  color:var(--ink-dim);font-size:19px;transition:color .3s, background .3s}
.eye:hover{color:var(--ink);background:rgba(244,241,234,.06)}
.eye .i-hide,.eye[aria-pressed="true"] .i-show{display:none}
.eye[aria-pressed="true"] .i-hide{display:block}

.lg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;margin-top:2px}
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:var(--ink-soft)}
.check input{appearance:none;width:18px;height:18px;border-radius:5px;border:1px solid rgba(244,241,234,.45);
  display:grid;place-items:center;transition:background .25s, border-color .25s;cursor:pointer}
.check input::after{content:"";width:9px;height:5px;border:solid #141210;border-width:0 0 2px 2px;
  transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .25s var(--ease-out)}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{transform:rotate(-45deg) scale(1)}
.link{position:relative;color:var(--ink-soft);transition:color .3s}
button.link{padding:0;border:0;background:none;font:inherit;cursor:pointer}
button.link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.lg-form [hidden],.lg-row [hidden]{display:none !important}
.link:hover{color:var(--accent)}

.lg-submit{position:relative;isolation:isolate;overflow:hidden;margin-top:10px;height:56px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:17px;font-weight:600;letter-spacing:.04em;color:#141210;background:var(--accent);
  transition:transform .3s var(--ease-out), box-shadow .4s, opacity .3s}
.lg-submit::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);
  transform:translateX(120%);transition:transform .9s var(--ease-out)}
.lg-submit:hover{box-shadow:0 14px 34px rgba(210,173,107,.28);transform:translateY(-1px)}
.lg-submit:hover::before{transform:translateX(-120%)}
.lg-submit:active{transform:translateY(0) scale(.99)}
.lg-submit .spin{display:none;font-size:20px;animation:spin .8s linear infinite}
.lg-submit[aria-busy="true"]{pointer-events:none;opacity:.85}
.lg-submit[aria-busy="true"] .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.lg-status{min-height:20px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.lg-status.err{color:#ef9a8c}

.lg-alt{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-dim)}
.lg-alt a{color:var(--ink);margin-inline-start:4px;border-bottom:1px solid rgba(210,173,107,.6);transition:color .3s, border-color .3s}
.lg-alt a:hover{color:var(--accent);border-color:var(--accent)}

@media (max-width:680px){
  .back span{display:none}
  .lg-card{border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;clip-path:none}
  .lg-bg img{animation:none;transform:none}
}

/* demo mode only (js/login.js adds it): one tap fills a demo account for each role */
.lg-demo{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink-dim)}
.lg-demo p{margin-bottom:10px}
.lg-demo bdi{color:var(--ink-soft);letter-spacing:.04em}
.lg-demo-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.lg-demo-row button{font:inherit;font-size:13px;color:var(--ink);background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;cursor:pointer;transition:border-color .3s,color .3s}
.lg-demo-row button:hover{border-color:var(--accent);color:var(--accent)}
.lg-demo-row button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}