/* BriefDrop – Sign in (Figma node 251:5310, 402 × 874 mobile).
   Mobile-first; ≥640px the form becomes a centred card on a soft glow. */

:root {
  --bg: #0a0a0a; --white: #fff; --soft: #e8e8e8; --muted: #a0a0a0;
  --primary: #185adb; --ink: #2a2a2a; --surface: #141414; --line: #1f1f1f; --cream: #f9e8c3; --error: #ff6b5b;
  --f-display: "Unbounded", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, sans-serif;
  --f-btn: "Fredoka", "Nunito", system-ui, sans-serif;
  --f-logo: "Orcish", "Unbounded", system-ui, sans-serif;   /* Orcish isn't bundled → Unbounded stands in */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--white); font-family: var(--f-body); -webkit-tap-highlight-color: transparent; }
h1, p { margin: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

/* ------------------------------------------------------------- layout */
.signin { position: relative; z-index: 1; min-height: 100dvh; display: flex; justify-content: center; overflow-x: clip; }
.panel { width: 100%; max-width: 402px; padding: max(26px, env(safe-area-inset-top)) 24px max(40px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.top { text-align: center; }
.logo { display: inline-block; font-family: var(--f-logo); font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: .88px; text-decoration: none; color: var(--white);
        transition: letter-spacing .3s cubic-bezier(.2,.8,.2,1), color .2s; }
.logo:hover { letter-spacing: 2.4px; color: var(--cream); }

.head { margin-top: 42px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.title { font-family: var(--f-display); font-weight: 700; font-size: 28px; line-height: 52px; }
.sub { font-size: 16px; line-height: 24px; color: var(--soft); }

.form { margin-top: 53px; display: flex; flex-direction: column; }

/* ------------------------------------------------------------- fields */
.field { position: relative; margin-bottom: 17px; }
.field:nth-child(2) { margin-bottom: 0; }
.field input {
  display: block; width: 100%; height: 55px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  background: transparent; font-family: var(--f-body); font-size: 14px; color: var(--white); caret-color: var(--primary);
  transition: padding-top .25s cubic-bezier(.2,.8,.2,1), border-color .25s;
}
.field input::placeholder { color: var(--muted); opacity: 1; transition: opacity .2s; }
.field input:focus { outline: none; }
.field:focus-within input, .field.has-value input { padding-top: 15px; }
.field input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 100px var(--bg) inset; transition: background-color 9999s; }

.field__label {
  position: absolute; left: 16px; top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted);
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1), color .2s;
}
.field:focus-within .field__label, .field.has-value .field__label { opacity: 1; transform: none; }
.field:focus-within .field__label { color: var(--primary); }

.field__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.8,.2,1), background-color .2s; }
.field:focus-within .field__bar { transform: scaleX(1); }

.field__err { position: absolute; left: 16px; top: calc(100% + 3px); font-size: 12px; line-height: 14px; color: var(--error); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s, transform .25s; }
.field.is-invalid .field__err { opacity: 1; transform: none; }
.field.is-invalid input { border-bottom-color: var(--error); }
.field.is-invalid .field__bar { background: var(--error); transform: scaleX(1); }
.field.is-invalid .field__label { color: var(--error); }

.field__toggle { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); transition: color .2s, background-color .2s, transform .2s; }
.field__toggle:hover { color: var(--white); background: rgba(255,255,255,.06); }
.field__toggle:active { transform: scale(.9); }
.field__toggle .eye-off { display: none; }
.field__toggle[aria-pressed="true"] .eye { display: none; }
.field__toggle[aria-pressed="true"] .eye-off { display: block; }
.field:has(.field__toggle) input { padding-right: 52px; }

.forgot { align-self: flex-end; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--primary); text-decoration: none; position: relative; }
.forgot::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.forgot:hover::after { transform: scaleX(1); transform-origin: left; }

/* ------------------------------------------------------------- buttons */
.cta {
  position: relative; overflow: hidden; isolation: isolate; width: 100%; height: 56px; margin-top: 36px; border-radius: 16px; background: var(--primary); color: var(--white);
  font-family: var(--f-btn); font-weight: 600; font-size: 16px; line-height: normal;
  transition: transform .2s, box-shadow .25s, translate .25s cubic-bezier(.2,.8,.2,1), filter .2s;
}
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%); transform: translateX(-120%); }
.cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(24,90,219,.8); filter: brightness(1.08); }
.cta:hover::after { transform: translateX(120%); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.cta:active { transform: translateY(1px) scale(.985); }
.cta[disabled] { cursor: progress; }
.cta.is-loading .cta__label::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }

.or { margin-top: 43px; display: flex; align-items: center; gap: 6px; }
.or span { flex: 1; height: 1px; background: var(--muted); transform: scaleX(1); }
.or p { font-size: 12px; line-height: 16px; color: var(--muted); }

.social { margin-top: clamp(36px, 7vh, 69px); display: flex; flex-direction: column; gap: 16px; }
.social__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 20px; border: 1.5px solid var(--white); border-radius: 16px;
  font-family: var(--f-btn); font-weight: 600; font-size: 16px; color: var(--white);
  transition: transform .2s, background-color .2s, border-color .2s, box-shadow .25s;
}
.social__btn .brand { flex: none; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.social__btn:hover { background: rgba(255,255,255,.07); border-color: var(--cream); transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(249,232,195,.5); }
.social__btn:hover .brand { transform: rotate(-12deg) scale(1.15); }
.social__btn:active { transform: scale(.98); }

.create { margin-top: 19px; text-align: center; font-size: 14px; line-height: 19px; color: var(--muted); }
.create a { position: relative; z-index: 0; display: inline-block; padding: 0 1px; font-weight: 700; color: var(--white); text-decoration: none; }
/* highlighter bar behind "Create account" (Figma: blue, rotated −4°) */
.create a::before { content: ""; position: absolute; inset: -4px -3px -3px; z-index: -1; border-radius: 1px; background: var(--primary); transform: rotate(-4deg); transform-origin: left center; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.create a:hover::before, .create a:focus-visible::before { transform: rotate(-6deg) scale(1.08, 1.18); }

/* ------------------------------------------------------------- toast */
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 100; max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 14px;
  background: var(--surface); border: 1px solid rgba(249,232,195,.25); font-size: 14px; line-height: 1.4; color: var(--soft); box-shadow: 0 16px 40px -12px rgba(0,0,0,.8);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.3,1.4,.5,1); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------- motion */
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(.55em) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes swipe { from { transform: rotate(-4deg) scaleX(0); } to { transform: rotate(-4deg) scaleX(1); } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.js [data-in] { animation: fade-up .75s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
.js .title .w { display: inline-block; animation: rise .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
.js .or span { animation: draw .9s cubic-bezier(.2,.8,.2,1) 1.1s both; }
.js .or span:first-child { transform-origin: right; }
.js .or span:last-child { transform-origin: left; }
.js .create a::before { animation: swipe .55s cubic-bezier(.3,1.2,.5,1) 1.6s both; }

/* ------------------------------------------------------------- card on larger screens */
.glow { display: none; }
@media (min-width: 640px) {
  .glow { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(640px circle at var(--gx, 50%) var(--gy, 35%), rgba(24,90,219,.22), transparent 62%),
                radial-gradient(500px circle at 85% 90%, rgba(87,57,216,.12), transparent 60%);
    transition: background-position .3s; }
  .signin { align-items: center; padding: 40px 24px; }
  .panel { max-width: 460px; padding: 44px 44px 40px; background: rgba(20,20,20,.72); border: 1px solid var(--line); border-radius: 28px;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04); }
  .head { margin-top: 34px; }
  .form { margin-top: 36px; }
  .social { margin-top: 36px; }
}

/* short laptop screens: tighten the card so it fits without scrolling */
@media (min-width: 640px) and (max-height: 860px) {
  .signin { padding-block: 20px; }
  .panel { padding-block: 32px 28px; }
  .head { margin-top: 22px; }
  .form { margin-top: 26px; }
  .cta { margin-top: 26px; }
  .or { margin-top: 28px; }
  .social { margin-top: 26px; gap: 12px; }
  .create { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}