/* ---------- login modal ----------
   Logging in never leaves the site: the pane opens over the page, and only once the
   session is set does the browser go to the dashboard. Same liquid-glass language as
   the mobile drawer — a frosted card floating over a lightly blurred page. */

/* The container deliberately does NOT animate its own opacity any more.
   .lgm-scrim carries a backdrop-filter, and a backdrop-filter inside an ancestor
   whose opacity is mid-transition forms a group the compositor cannot blend — so
   Chrome held the blur back until the fade finished and then snapped it on. That
   was the "pops up, and a second later the background goes blurry".

   Visibility flips instantly instead (it is not interpolated), and each child
   animates itself. visibility:hidden still keeps the element in the render tree,
   so the transitions below do start on the frame .open lands. */
.lgm{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:24px;
  visibility:hidden;transition:visibility 0s linear .5s}
.lgm.open{visibility:visible;transition:visibility 0s}

/* the "slightly blurred background": a soft dim + a light blur so the hero still
   reads through the glass instead of being blacked out.

   NOTHING here animates backdrop-filter any more, and that is the whole fix for
   "first it blurs, then it blurs again". Two things were wrong with ramping the
   radius from 0 to 9:

     · Chrome does not interpolate a blur radius continuously. It renders the
       backdrop at a handful of discrete scales and picks the nearest, so a radius
       animation arrives in visible jumps rather than as a smooth ramp.
     · It finished at .52s while the card's own glass appeared at .2s, so there were
       genuinely two blur events to see, at two different moments.

   Instead the radius is fixed at its final value and the element's own OPACITY is
   what animates. On an element carrying a backdrop-filter, opacity cross-fades the
   blurred backdrop against the untouched one — the same visual ramp, but as a
   compositor-only property, which is continuous by construction and free. The card
   below fades on exactly the same curve over exactly the same time, so the two
   pieces of glass arrive as one movement instead of two. */
.lgm-scrim{position:absolute;inset:0;background:rgba(6,6,9,.5);
  backdrop-filter:blur(9px) saturate(1.15);-webkit-backdrop-filter:blur(9px) saturate(1.15);
  opacity:0;transition:opacity .46s cubic-bezier(.33,1,.68,1);
  -webkit-tap-highlight-color:transparent}
.lgm.open .lgm-scrim{opacity:1}

/* Opacity and transform only — both compositor properties, both on the same curve
   and the same duration as the scrim above. The card's own 30px blur is fixed and
   never animates; its opacity fading in is what brings that glass up, on the same
   ramp as the scrim's, so the eye is given one arrival to watch rather than a
   sequence of them. */
.lgm-card{position:relative;width:min(100%,394px);padding:36px 32px 30px;border-radius:22px;
  background:rgba(14,14,18,.62);
  backdrop-filter:blur(30px) saturate(1.7) brightness(1.03);-webkit-backdrop-filter:blur(30px) saturate(1.7) brightness(1.03);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 32px 80px rgba(0,0,0,.55);
  opacity:0;transform:translate3d(0,14px,0) scale(.985);will-change:transform,opacity;
  transition:opacity .46s cubic-bezier(.33,1,.68,1),transform .46s cubic-bezier(.33,1,.68,1)}
.lgm.open .lgm-card{opacity:1;transform:translate3d(0,0,0) scale(1)}

.lgm-close{position:absolute;top:14px;right:14px;width:32px;height:32px;display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;
  transition:background .3s,color .3s;-webkit-tap-highlight-color:transparent}
.lgm-close:hover{background:rgba(255,255,255,.07);color:var(--ink)}
.lgm-close svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}

.lgm-card > img{width:44px;height:44px;border-radius:50%;margin-bottom:26px}

/* ---------------- type ----------------
   The heading is set exactly as the site sets its own section headings (.about h2):
   Inter Tight 600, line-height 1.0, negative tracking, two short lines. It was
   Fraunces before, which made a 394px login card sound like a chapter opening.

   Everything else here is sentence case at ordinary tracking. The gold
   letter-spaced-out micro-caps that used to sit above the heading and under the
   form ("MEMBERS AREA", "STUDENT WELFARE OFFICE · CHRIST KENGERI") are the single
   most recognisable tell of a generated layout — three sizes of tracked-out
   uppercase stacked on a card nobody reads. One typeface, two sizes, one weight
   change is enough for a box with two fields in it. */
.lgm-card h2{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:2.1rem;line-height:1;
  letter-spacing:-.02em;color:var(--ink)}
.lgm-card > p{color:var(--muted);font-size:13.5px;font-weight:300;line-height:1.55;margin-top:12px}

.lgm-form{display:flex;flex-direction:column;gap:15px;margin-top:30px}
.lgm-f{display:flex;flex-direction:column;gap:7px}
.lgm-f label{font-family:'Inter Tight',sans-serif;font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted)}
.lgm-form input{width:100%;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;color:var(--ink);font:inherit;font-family:'Inter Tight',sans-serif;font-size:13.5px;
  transition:border-color .25s,background .25s}
.lgm-form input:focus{outline:0;border-color:var(--gold);background:rgba(210,147,80,.08)}
.lgm-form input::placeholder{color:#6a6a70}

.lgm-go{margin-top:5px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border:1px solid var(--gold);border-radius:40px;background:var(--gold);color:#17110a;
  font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;transition:background .3s,border-color .3s,gap .3s,opacity .3s}
.lgm-go:hover{background:var(--gold-2);border-color:var(--gold-2);gap:14px}
.lgm-go:disabled{opacity:.55;cursor:default;gap:9px}
.lgm-go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.lgm-err{min-height:17px;font-size:12.5px;letter-spacing:0;color:#e06a5a}
.lgm-note{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);
  font-family:'Inter Tight',sans-serif;font-size:12px;font-weight:300;letter-spacing:0;
  color:#7a7a80;line-height:1.55}

body.lgm-open{overflow:hidden}

/* The liquid-glass cursor is an SVG displacement filter — running it on top of the pane's
   backdrop-filter is what made the arrival stutter, and a lens over a login form is noise
   anyway. Hand the pointer back to the OS while the pane is up. */
body.lgm-open .cur{opacity:0;visibility:hidden;transition:opacity .2s}

@media(max-width:520px){
  .lgm-card{padding:30px 22px 26px;border-radius:20px}
  .lgm-card h2{font-size:1.8rem}
}
@media(prefers-reduced-motion:reduce){
  .lgm-card,.lgm.open .lgm-card{transform:none;transition:opacity .2s ease}
}