/* The sign-in page (task13-slice 2, the owner's design of 8 Oct): the landing's night sea, alone and in every theme.
   One photograph (two mantas seen from below, static/login/sea.jpg) drifts very slowly; its light follows the visitor's
   clock (static/login.js sets --night: 0 at 13:00, 1 at 01:00). No specks (the owner, 8 Oct: the glowing dots removed). The form
   sits on a dark panel. Public before sign-in with its font, photo, marks and script (auth.PUBLIC_ASSETS); it uses no
   other stylesheet. */
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap;
  src: url("../fonts/mona-sans-latin.woff2") format("woff2"); }
:root {
  --abyss: #04080A; --moonlight: #E3E8E6; --tide: #8E9EA2; --silt: #1C272B; --noctiluca: #45D6C4;
  --error: #F2B3A6;
  --sans: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --night: 0;
  color-scheme: dark;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: var(--abyss); }
body { margin: 0; color: var(--moonlight); background: var(--abyss); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }

/* the water */
.sea { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: var(--abyss); }
.sea .photo { position: absolute; inset: -4%; background: url("../login/sea.jpg") 50% 42% / cover no-repeat;
  animation: drift 140s ease-in-out infinite alternate; will-change: transform; }
/* the moving sea (task13-slice 2, the owner's pick 8 Oct): a 10 s loop of two mantas crossing, which starts and ends on
   the empty water of sea-loop.jpg; login.js marks <html class="motion"> before the first paint when motion is welcome, so
   the plate is the still under the video and the cross-fade is invisible; otherwise sea.jpg stays, drifting */
.sea .loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: 0; transition: opacity 1.2s ease; }
.sea .loop.on { opacity: 1; }
.motion .sea .photo { inset: 0; background-image: url("../login/sea-loop.jpg"); background-position: 50% 42%; animation: none; }
:root:not(.motion) .sea .loop { display: none; }
@keyframes drift { from { transform: translate3d(-1.2%, -.8%, 0) scale(1.04); } to { transform: translate3d(1.2%, .8%, 0) scale(1.07); } }
/* by day the water lifts toward blue-green; at night a dark veil closes over it */
.sea .tint { position: absolute; inset: 0; background: radial-gradient(90% 70% at 28% 18%, #3B7C86 0%, rgba(59, 124, 134, .25) 55%, rgba(59, 124, 134, 0) 90%);
  mix-blend-mode: screen; opacity: calc(.42 * (1 - var(--night))); transition: opacity 40s linear; }
.sea .night { position: absolute; inset: 0; background: var(--abyss); opacity: calc(.5 * var(--night)); transition: opacity 40s linear; }
.sea .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 8, 10, .1) 0%, rgba(4, 8, 10, .55) 100%); }
.sea .grain { position: absolute; inset: 0; background: var(--grain); opacity: .07; mix-blend-mode: overlay; }

/* the panel */
.login { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 48px 16px; }
.login-card { width: 100%; max-width: 420px; padding: 34px 34px 28px; border-radius: 18px; background: rgba(8, 15, 18, .8); border: 1px solid var(--silt);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8); }
.login-brand { display: flex; align-items: center; gap: 12px; color: var(--moonlight); }
.login-brand .word { display: block; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
/* the mark as in the app bar (base.css .brand-mark): the vector layers, the manta gliding in its ring, wings flexing */
.login-brand .mark { position: relative; display: block; width: 34px; height: 26px; }
.login-brand .mark i, .login-brand .mark .bm-g { position: absolute; inset: 0; display: block; }
.login-brand .mark i { background: currentColor; -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat; }
.login-brand .bm-arcs { --src: url("../brand/mark-arcs.svg"); }
.login-brand .bm-body { --src: url("../brand/mark-body.svg"); }
.login-brand .bm-wl { --src: url("../brand/mark-wl.svg"); transform-origin: 38.3% 39.1%; animation: brand-wing-l 5.2s ease-in-out infinite; }
.login-brand .bm-wr { --src: url("../brand/mark-wr.svg"); transform-origin: 61.4% 39.1%; animation: brand-wing-r 5.2s ease-in-out infinite; }
.login-brand .bm-g { transform-origin: 50% 60%; animation: brand-glide 9s ease-in-out infinite alternate; }
@keyframes brand-glide { from { transform: translate(-6%, 4%) rotate(4deg); } to { transform: translate(6%, -4%) rotate(-4deg); } }
@keyframes brand-wing-l { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(6deg) scaleX(.96); } }
@keyframes brand-wing-r { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-6deg) scaleX(.96); } }
@media (prefers-reduced-motion: reduce) { .login-brand .mark i, .login-brand .mark .bm-g { animation: none; } }
.login-brand .word { --src: url("../brand/mantaray-wordmark.png"); width: 118px; height: 11px; opacity: .92; }
.login-card h1 { margin: 30px 0 26px; font: 300 44px/1.04 var(--sans); font-stretch: 125%; letter-spacing: -.03em; }
.login-card .message { margin: -8px 0 20px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(242, 179, 166, .35);
  background: rgba(242, 120, 100, .08); color: var(--error); font-size: 15px; line-height: 1.45; }
.login-form { display: grid; gap: 18px; }
.login-form label { display: grid; gap: 7px; color: var(--tide); font: 500 14px/1.3 var(--sans); }
.login-form input { height: 50px; padding: 0 14px; border-radius: 10px; border: 1px solid #2A383D; background: #060C0F; color: var(--moonlight); font: 400 17px/1 var(--sans); }
.login-form input:hover { border-color: #3C4D53; }
.login-form input:focus-visible { outline: 2px solid var(--noctiluca); outline-offset: 2px; border-color: #3C4D53; }
.login-form button { margin-top: 6px; min-height: 50px; border: 0; border-radius: 10px; background: var(--moonlight); color: var(--abyss); font: 600 16px/1 var(--sans);
  cursor: pointer; transition: box-shadow .4s ease; }
.login-form button:hover { box-shadow: 0 0 0 1px var(--noctiluca), 0 0 26px -6px color-mix(in srgb, var(--noctiluca) 70%, transparent); }
.login-form button:focus-visible { outline: 2px solid var(--noctiluca); outline-offset: 3px; }
.login-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--silt);
  font-size: 14px; color: var(--tide); }
.login-foot span { white-space: nowrap; }
@media (max-width: 700px) { .sea .photo, .motion .sea .photo { background-position: 24% 40%; } .sea .loop { object-position: 24% 40%; } }
@media (max-width: 480px) { .login-card { padding: 28px 22px 24px; } .login-card h1 { font-size: 38px; } }
@media (prefers-reduced-motion: reduce) {
  .sea .photo { animation: none !important; }
  .sea .loop { display: none; }
  .sea .tint, .sea .night, .login-form button { transition: none; }
}