/* door.css - the pieces of log in and reset that are not plain Tailwind utilities: the
   room behind the page, the panel, the code boxes, the busy spinner, the toast. Plain CSS,
   so it is there on the first paint before Tailwind's browser build has run. */

html, body { background: #000; color: #fff; }
[hidden] { display: none !important; }
:where(a, button, input):focus-visible { outline: 1.5px solid #fff; outline-offset: 3px; }
body[data-ready="no"] .door__switch, body[data-ready="no"] #login { display: none !important; }
body[data-ready="shut"] #register { display: none !important; }

/* a field the form (or the server) says is wrong */
.field.is-wrong input { border-color: rgb(255 140 140 / 65%) !important; box-shadow: 0 0 0 4px rgb(255 120 120 / 9%) !important; }
.field.is-wrong .label { color: #ff9a9a; }

/* the password meter: four bars, filled by data-step 1-4 */
.meter { display: inline-flex; align-items: center; gap: 8px; }
.meter__bars { display: inline-flex; gap: 3px; }
.meter__bars i { width: 16px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / 12%); transition: background 0.3s ease; }
.meter__word { font: 500 12.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: rgb(255 255 255 / 50%); }
.meter[data-step="1"] .meter__bars i:nth-child(-n+1) { background: #ff9a9a; }
.meter[data-step="1"] .meter__word { color: #ff9a9a; }
.meter[data-step="2"] .meter__bars i:nth-child(-n+2) { background: rgb(255 255 255 / 55%); }
.meter[data-step="3"] .meter__bars i:nth-child(-n+3) { background: rgb(255 255 255 / 80%); }
.meter[data-step="4"] .meter__bars i { background: #fff; }
.meter[data-step="4"] .meter__word, .meter[data-step="3"] .meter__word { color: #fff; }

/* ------------------------------------------------------------------ the room */
/* no pattern: a soft light from above, two slow glows low down, and the edges falling away
   to black - the panel is the brightest thing on the page */
.room { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #000; }
.room__bloom {
  position: absolute; top: -38vh; left: 50%; width: 110vw; height: 76vh; margin-left: -55vw;
  background: radial-gradient(50% 50% at 50% 50%, rgb(255 255 255 / 12%), transparent 72%);
  animation: door-bloom 24s ease-in-out infinite;
}
.room__glow {
  position: absolute; inset: -10%;
  background:
    radial-gradient(30% 26% at 18% 82%, rgb(255 255 255 / 5.5%), transparent 72%),
    radial-gradient(28% 24% at 84% 68%, rgb(255 255 255 / 4%), transparent 72%);
  animation: door-drift 34s ease-in-out infinite alternate;
}
.room__veil { position: absolute; inset: 0; background: radial-gradient(110% 90% at 50% 10%, transparent 40%, rgb(0 0 0 / 80%) 100%); }
@keyframes door-bloom { 50% { transform: translateY(3vh) scale(1.05); opacity: 0.85; } }
@keyframes door-drift { to { transform: translate3d(3%, -4%, 0) scale(1.06); } }

/* ------------------------------------------------------------- type & chips */
.sheen {
  background: linear-gradient(100deg, #6f6f6f 0%, #ffffff 35%, #ffffff 55%, #6f6f6f 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: door-sheen 7s ease-in-out infinite;
}
@keyframes door-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* the same chip as the front page's: plain words, the first one set off by a line */
.chip {
  display: inline-flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 16px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 11px;
  background: #000; font: 400 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: rgb(255 255 255 / 80%); white-space: nowrap;
}
.chip__tag {
  padding-right: 12px; border-right: 1px solid rgb(255 255 255 / 26%);
  font: 600 14px/16px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff;
}

/* ------------------------------------------------------------------- panel */
.panel {
  position: relative; padding: 28px;
  border: 1px solid rgb(255 255 255 / 9%); border-radius: 22px;
  background: rgb(13 13 15 / 88%);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 6%) inset, 0 30px 70px -30px #000, 0 0 0 1px rgb(0 0 0 / 60%);
}
@media (max-width: 480px) { .panel { padding: 20px; border-radius: 18px; } }

.captcha { min-height: 65px; }
.captcha:empty, .captcha .cf-turnstile:empty { min-height: 0; }

/* -------------------------------------------------------------------- button */
.btn__spin { display: none; }
.btn__spin svg { width: 17px; height: 17px; animation: door-spin 0.8s linear infinite; }
.btn__spin circle { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 40 60; }
.btn[data-busy="yes"] .btn__spin { display: inline-flex; }
.btn[data-busy="yes"] .btn__arrow { display: none; }
.btn .btn__arrow { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn__ripple {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px;
  background: rgb(0 0 0 / 22%); pointer-events: none;
  animation: door-ripple 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes door-spin { to { transform: rotate(360deg); } }
@keyframes door-ripple { to { transform: scale(60); opacity: 0; } }

#peek .peek__off, #peek[aria-pressed="true"] .peek__on { display: none; }
#peek[aria-pressed="true"] .peek__off { display: block; }

/* ---------------------------------------------------------------------- hint */
.hint { min-height: 20px; margin: -4px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: rgb(255 255 255 / 60%); }
.hint:empty { min-height: 0; margin: 0; }
.hint.is-wrong { color: #ff9a9a; animation: door-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes door-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ---------------------------------------------------------------- code boxes */
/* one real input, laid invisibly over six drawn boxes - so paste, autofill from the
   email and the phone's "from Messages" chip all just work */
.otp { position: relative; }
.otp__input {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  border: 0; background: transparent; color: transparent; caret-color: transparent;
  font-size: 16px; letter-spacing: 2em; opacity: 0; outline: none; cursor: text;
}
.otp__cells { display: flex; align-items: center; gap: 8px; }
.otp__gap { flex: 0 0 10px; height: 2px; border-radius: 2px; background: rgb(255 255 255 / 22%); }
.otp__cell {
  position: relative; flex: 1 1 0; min-width: 0; height: 62px;
  display: grid; place-items: center;
  border: 1px solid rgb(255 255 255 / 16%); border-radius: 14px; background: rgb(0 0 0 / 60%);
  font: 600 26px/1 "JetBrains Mono", ui-monospace, monospace; color: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.otp__cell.is-filled { border-color: rgb(255 255 255 / 34%); background: rgb(255 255 255 / 5%); }
.otp__cell.is-filled { animation: door-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.otp.is-focused .otp__cell.is-active { border-color: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / 9%); }
.otp.is-focused .otp__cell.is-active::after {
  content: ""; width: 2px; height: 26px; border-radius: 2px; background: #fff;
  animation: door-caret 1s steps(1) infinite;
}
.otp.is-wrong .otp__cell { border-color: rgb(255 140 140 / 60%); }
.otp.is-wrong .otp__cells { animation: door-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.otp.is-good .otp__cell { border-color: #fff; background: #fff; color: #000; }
@keyframes door-pop { from { transform: scale(0.9); } }
@keyframes door-caret { 50% { opacity: 0; } }
@media (max-width: 400px) { .otp__cells { gap: 6px; } .otp__cell { height: 54px; font-size: 22px; } }

/* --------------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 60; transform: translate(-50%, 14px);
  padding: 10px 16px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 999px;
  background: rgb(14 14 16 / 92%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 13px/1.2 system-ui, sans-serif; color: #fff; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.toast:empty { display: none; }
.toast.is-open { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- entrance */
.rise { animation: door-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.swap { animation: door-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes door-rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }

@media (prefers-reduced-motion: reduce) {
  .room__bloom, .room__glow, .sheen, .rise, .swap, .otp__cell, .hint.is-wrong, .otp.is-wrong .otp__cells { animation: none !important; }
}

/* our own scrollbar: a thin pale bar on black, on the page and on anything in it that scrolls */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 24%) transparent; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 3px solid transparent; border-radius: 999px;
  background: rgb(255 255 255 / 20%); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgb(255 255 255 / 42%); }