/*
 * Login screens — glass card over an animated blob backdrop.
 *
 * Built on "Glassmorphism Login Card with Blob Animation" by Prasanna Amale:
 *   https://codepen.io/PrasannaAmale11/pen/PodrKpB
 * (navy stage, translucent blurred card, glass inputs, gradient pill button,
 * and the two drifting blobs with their keyframes). Class names are prefixed
 * bm- and scoped to .bm-stage so none of it can leak into the rest of the
 * site; the "Project adaptations" notes at the end of each block say where
 * this deliberately differs from the pen.
 *
 * The MIT License (MIT)
 *
 * Copyright (c) 2026 Prasanna Amale (https://codepen.io/PrasannaAmale11/pen/PodrKpB)
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

/* Pages that are nothing but a login screen: same navy as the stage, so
   there's no pale flash or overscroll strip around it. */
body.bm-page {
  margin: 0;
  background: #1f1f47;
}

/* ── Stage (the pen's .container) ───────────────────────────────────── */
.bm-stage {
  --bm-blob-from: rgba(47, 184, 255, 0.42);
  --bm-blob-to: #5c9df1;
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: #1f1f47;
  color: whitesmoke;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Project adaptation: top padding leaves room for the half of the logo
     badge that sits above the card; the side padding is a phone gutter. */
  padding: 72px 16px 32px;
}
/* The pen zeroes margin/padding on everything; :where() keeps that reset
   at zero specificity so it never fights the rules below. */
:where(.bm-stage, .bm-stage *, .bm-stage *::before, .bm-stage *::after) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Card ───────────────────────────────────────────────────────────── */
.bm-card {
  position: relative;
  z-index: 10;
  width: 400px;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  /* Project adaptation: extra top padding clears the logo badge. */
  padding: 4rem 1.5rem 1.5rem;
  color: whitesmoke;
}

/* The logo sits on a light badge straddling the card's top edge. The mark
   is a transparent PNG — dark frame lines and gold lettering — so on the
   navy stage the dark frame would simply disappear without a light
   backing. */
.bm-logo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  background: #fbfaf8;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.bm-logo img {
  display: block;
  width: 76px;
  height: auto;
}

.bm-title {
  font-size: clamp(1.6rem, 6.5vw, 2.2rem);
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
  color: #fff;
  margin-bottom: 1.25rem;
}

/* ── Inputs ─────────────────────────────────────────────────────────── */
.bm-card input {
  display: block;
  width: 80%;
  max-width: none;
  margin: 0 auto 12px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: none;
  border-radius: 0.5rem;
  /* Project adaptations: 44px tall (the pen's 30px is too small a touch
     target) and 16px type (below that, iOS zooms the page on focus);
     the pen's black placeholder/text is unreadable on this dark glass, so
     both are light. */
  height: 44px;
  padding: 0 15px;
  font-family: inherit;
  font-size: 1rem;
  color: #fff;
}
.bm-card input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
/* The pen removes the focus outline outright, which leaves keyboard users
   with no indication of where they are — this replaces it with a ring. */
.bm-card input:focus {
  outline: none;
  border: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
/* Browser autofill would otherwise repaint the field pale with dark text. */
.bm-card input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 5000s ease-in-out 0s;
}
/* Visually hidden but still read by screen readers — the pen uses
   placeholders alone, which vanish as soon as someone types. */
.bm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.bm-stage .hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.bm-btn {
  display: block;
  width: 80%;
  margin: 6px auto 0;
  background: linear-gradient(180deg, rgba(47, 184, 255, 0.2) 20.77%, #065fd1 100%);
  /* transparent (not none) so the hover border can't nudge the layout */
  border: 1px solid transparent;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  color: whitesmoke;
  padding: 0.8rem 1.8rem;
  border-radius: 2rem;
  cursor: pointer;
}
.bm-btn:hover,
.bm-btn:focus-visible {
  /* Project adaptation: the pen turns the label black on hover, which is
     unreadable on this dark glass — it stays white here. */
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, 0.18);
  outline: none;
}
.bm-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
}
.bm-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
/* A second, quieter choice next to a primary button (the login chooser):
   starts as the glass state and takes the gradient on hover. */
.bm-btn--glass {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.18);
}
.bm-btn--glass:hover,
.bm-btn--glass:focus-visible {
  background: linear-gradient(180deg, rgba(47, 184, 255, 0.2) 20.77%, #065fd1 100%);
}
.bm-btn + .bm-btn {
  margin-top: 12px;
}

/* The pen's small underlined "Or SignUp" link, here the forgot-PIN /
   help link — light instead of black so it can be read. */
.bm-link {
  display: block;
  margin-top: 1rem;
  text-align: right;
  font-size: 0.8rem;
}
.bm-link a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}
.bm-link a:hover {
  color: #fff;
}

/* ── Messages (login errors, and the status line the PIN scripts fill in) ── */
.bm-card .form-status {
  width: 80%;
  margin: 12px auto 0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}
.bm-card .form-status:empty {
  display: none;
}
/* A server-rendered error sits between the title and the form (a status
   line the scripts fill in sits below the button). */
.bm-title + .form-status {
  margin: 0 auto 12px;
}
.bm-card .form-status.error,
.bm-card .form-status.success {
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: #fff;
}
.bm-card .form-status.error {
  background: rgba(255, 90, 90, 0.22);
  border: 1px solid rgba(255, 150, 150, 0.5);
}
.bm-card .form-status.success {
  background: rgba(60, 200, 120, 0.22);
  border: 1px solid rgba(140, 230, 180, 0.5);
}

/* ── Blobs (from the pen) ───────────────────────────────────────────────
   Absolutely positioned with no offsets, so inside the flex-centred stage
   each one starts at the middle and its keyframes drift it outward. */
.bm-blob {
  position: absolute;
  z-index: 0;
  width: 500px;
  height: 500px;
  background: linear-gradient(180deg, var(--bm-blob-from) 31.77%, var(--bm-blob-to) 100%);
  mix-blend-mode: color-dodge;
  animation: bm-blob-move 25s infinite alternate;
  transition: 1s cubic-bezier(0.07, 0.8, 0.16, 1);
}
.bm-blob--two {
  animation-name: bm-blob-move-two;
}

/* The pen's hover flourish — only where there's a real pointer; on a
   touch screen a tap would leave the "hover" state stuck on. */
@media (hover: hover) {
  .bm-blob:hover {
    width: 520px;
    height: 520px;
    filter: blur(30px);
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.6),
      inset 100px 100px 0 0 #fa709a, inset 200px 200px 0 0 #784ba8,
      inset 300px 300px 0 0 #2b86c5;
  }
  .bm-blob--two:hover {
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.6),
      inset 100px 100px 0 0 #fa709a, inset 200px 200px 0 0 #091c66,
      inset 300px 300px 0 0 #2b86c5;
  }
}

@keyframes bm-blob-move {
  from {
    transform: translate(-100px, -50px) rotate(-90deg);
    border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
  }
  to {
    transform: translate(500px, 100px) rotate(-10deg);
    border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
  }
}
@keyframes bm-blob-move-two {
  from {
    transform: translate(-100px, -50px) rotate(-90deg);
    border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
  }
  to {
    transform: translate(-50px, 100px) rotate(100deg);
    border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
  }
}

/* Project adaptation: the pen's 500px blob and ±500px drift assume a wide
   desktop window — on a phone the blob would spend most of its 25s cycle
   sliding entirely off-screen. Smaller shapes, shorter drift. */
@media (max-width: 640px) {
  .bm-blob {
    width: 320px;
    height: 320px;
    animation-name: bm-blob-move-sm;
  }
  .bm-blob--two {
    animation-name: bm-blob-move-two-sm;
  }
}
@keyframes bm-blob-move-sm {
  from {
    transform: translate(-70px, -90px) rotate(-90deg);
    border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
  }
  to {
    transform: translate(90px, 90px) rotate(-10deg);
    border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
  }
}
@keyframes bm-blob-move-two-sm {
  from {
    transform: translate(70px, 90px) rotate(-90deg);
    border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
  }
  to {
    transform: translate(-90px, -60px) rotate(100deg);
    border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
  }
}

/* Project adaptation: anyone whose OS asks for reduced motion gets still
   blobs. Switching the animation off naively would leave each blob at its
   un-animated default — a hard-edged square — so each is parked on a frame
   from its own keyframes instead. */
@media (prefers-reduced-motion: reduce) {
  .bm-blob {
    animation: none;
    transition: none;
    transform: translate(-100px, -50px) rotate(-90deg);
    border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
  }
  .bm-blob--two {
    transform: translate(-50px, 100px) rotate(100deg);
    border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
  }
}