/* The workspace sign-in: caspmedia.com's warm gradient, deepened with a black veil, and a clean centred column
   (logo, an underlined email field, one button) in the same layout as the client sites' editor sign-in. */
:root {
  --amber: #f0a03c;
  --peach: #f2b483;
  --coral: #e0705a;
  --crimson: #c42f5c;
  --plum: #6e2160;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
  font-family: Poppins, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; min-height: 100dvh; color: #fff; background: var(--crimson); -webkit-font-smoothing: antialiased; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Backdrop: soft colour fields that drift slowly, a black veil to deepen them, and film grain. */
.backdrop { position: fixed; inset: 0; overflow: hidden; background:
  radial-gradient(70% 80% at 100% 0%, var(--plum), transparent 70%),
  radial-gradient(60% 70% at 0% 100%, var(--amber), transparent 70%),
  radial-gradient(50% 60% at 55% 55%, var(--coral), transparent 75%),
  var(--crimson); }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .7; will-change: transform; }
.blob--a { width: 60vmax; height: 60vmax; left: -18vmax; bottom: -22vmax; background: radial-gradient(circle, var(--amber), transparent 65%); animation: drift-a 26s ease-in-out infinite alternate; }
.blob--b { width: 55vmax; height: 55vmax; right: -20vmax; top: -24vmax; background: radial-gradient(circle, var(--plum), transparent 65%); animation: drift-b 30s ease-in-out infinite alternate; }
.blob--c { width: 40vmax; height: 40vmax; left: 40%; top: 35%; background: radial-gradient(circle, var(--peach), transparent 65%); opacity: .4; animation: drift-c 22s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(10vmax, -6vmax) scale(1.08); } }
@keyframes drift-b { to { transform: translate(-8vmax, 8vmax) scale(1.1); } }
@keyframes drift-c { to { transform: translate(-14vmax, -8vmax) scale(.9); } }
.veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
.grain { position: absolute; inset: -50%; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* The column */
.signin { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; padding: 24px; text-align: center; text-shadow: 0 1px 12px rgba(110, 33, 96, .18); }
.signin > * { width: min(400px, calc(100vw - 48px)); margin-left: auto; margin-right: auto; }
#email-form, #code-form, .brand, .kicker, .note { animation: rise .8s var(--ease) both; }
.kicker { animation-delay: .05s; }
form, .note { animation-delay: .1s !important; }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }
form[hidden] { display: none; }

.brand { margin: 0; line-height: 0; }
.logo { display: inline-block; width: min(300px, 78vw); height: auto; filter: drop-shadow(0 2px 14px rgba(110, 33, 96, .2)); }
.kicker { margin: 18px auto 56px; font-size: 11px; font-weight: 500; letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; opacity: .85; }

.field { display: flex; align-items: center; gap: 14px; padding: 0 2px 12px; border-bottom: 1px solid rgba(255, 255, 255, .6); transition: border-color .25s; text-align: left; }
.field:focus-within { border-bottom-color: #fff; }
.icon { display: inline-flex; width: 18px; height: 18px; flex: none; opacity: .85; }
.icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.field input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 16px; letter-spacing: .01em; outline: none; text-shadow: inherit; }
.field input::placeholder { color: inherit; opacity: .7; }
.field input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; }
.field--code input { text-align: center; font-size: 32px; font-weight: 400; letter-spacing: .4em; padding-left: .4em; font-variant-numeric: tabular-nums; }
.sent { margin: -28px 0 30px; font-size: 13.5px; line-height: 1.6; opacity: .92; }

.go { width: 100%; height: 52px; margin-top: 36px; border: 0; border-radius: 999px; background: #fff; color: var(--plum);
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-shadow: none; cursor: pointer;
  box-shadow: 0 14px 34px -16px rgba(110, 33, 96, .55); transition: transform .25s var(--ease), box-shadow .25s, opacity .2s; }
.go:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 38px -16px rgba(110, 33, 96, .65); }
.go:disabled { opacity: .7; cursor: progress; }
.go:disabled span::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 10px; vertical-align: -1px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; }
.links button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 12.5px; opacity: .85; text-decoration: underline; text-underline-offset: 4px; text-shadow: inherit; cursor: pointer; }
.links button:hover { opacity: 1; }
.links button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }

.note { min-height: 1.4em; margin-top: 22px; font-size: 13px; line-height: 1.5; }
.note.is-error { font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .blob, #email-form, #code-form, .brand, .kicker { animation: none; }
  .go { transition: none; }
}