/* Soul Annexed — green auth threshold. Scoped to #screen-auth. */

#screen-auth {
  --auth-soul: oklch(0.84 0.18 155);
  --auth-cyan: oklch(0.78 0.1 205);
  --auth-paper: oklch(0.91 0.018 250);
  --auth-mute: oklch(0.68 0.03 240);
  --auth-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --auth-panel-w: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(ellipse 80% 55% at 22% 16%, oklch(0.42 0.12 155 / 0.18), transparent 58%),
    radial-gradient(ellipse 50% 46% at 88% 84%, oklch(0.36 0.08 210 / 0.1), transparent 52%),
    linear-gradient(165deg, oklch(0.16 0.032 250) 0%, oklch(0.1 0.022 250) 100%);
}

#screen-auth.is-register {
  --auth-panel-w: 428px;
}

#screen-auth .auth-soul-canvas,
#screen-auth .auth-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#screen-auth .auth-soul-canvas {
  z-index: 0;
}

#screen-auth .auth-atmosphere {
  z-index: 1;
  overflow: hidden;
}

#screen-auth .auth-atmosphere__bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
}

#screen-auth .auth-atmosphere__bloom--a {
  width: min(52vw, 620px);
  height: min(38vw, 420px);
  top: 4%;
  left: 6%;
  background: radial-gradient(ellipse, oklch(0.72 0.16 155 / 0.22), transparent 70%);
}

#screen-auth .auth-atmosphere__bloom--b {
  width: min(40vw, 480px);
  height: min(40vw, 480px);
  right: -6%;
  bottom: 4%;
  background: radial-gradient(circle, oklch(0.7 0.1 205 / 0.14), transparent 68%);
}

#screen-auth .auth-atmosphere__filament {
  position: absolute;
  left: clamp(18px, 7vw, 72px);
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, oklch(0.84 0.18 155 / 0.4) 22%, oklch(0.78 0.1 205 / 0.16) 58%, transparent);
}

#screen-auth .auth-soul-smoke {
  position: absolute;
  width: min(78vw, 920px);
  height: min(42vh, 420px);
  left: -30%;
  top: 18%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 70% 55% at 40% 50%, oklch(0.8 0.14 165 / 0.38), transparent 62%),
    radial-gradient(ellipse 50% 70% at 62% 42%, oklch(0.72 0.1 220 / 0.2), transparent 58%);
  filter: blur(38px);
  mix-blend-mode: screen;
}

#screen-auth .auth-soul-smoke.is-passing {
  animation: authSoulPass 2s ease-in-out both;
}

#screen-auth .auth-cursor-well {
  position: absolute;
  z-index: 4;
  width: 320px;
  height: 320px;
  left: 0;
  top: 0;
  margin: -160px 0 0 -160px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle, oklch(0.92 0.2 155 / 0.4) 0%, oklch(0.84 0.16 155 / 0.16) 30%, oklch(0.78 0.1 205 / 0.07) 54%, transparent 74%);
  mix-blend-mode: screen;
  transition: opacity 0.35s var(--auth-ease);
  will-change: transform;
}

#screen-auth.is-tracking .auth-cursor-well {
  opacity: 1;
}

#screen-auth .auth-world {
  position: relative;
  z-index: 3;
  width: min(960px, 100%);
  flex: 0 1 960px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
}

#screen-auth .auth-herald {
  justify-self: start;
  min-width: max-content;
  overflow: visible;
  position: relative;
  z-index: 5;
}

#screen-auth .auth-logo {
  text-align: left;
  margin-bottom: 0;
}

#screen-auth .auth-logo-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  max-width: none;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 0.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: visible;
  background: none;
  -webkit-text-fill-color: unset;
  color: oklch(0.84 0.17 155);
  filter: drop-shadow(0 0 18px oklch(0.78 0.16 155 / 0.32));
}

#screen-auth .auth-logo-title span {
  display: block;
  width: max-content;
  padding-right: 0.18em;
  background: linear-gradient(135deg, oklch(0.92 0.16 150) 0%, oklch(0.84 0.17 155) 42%, oklch(0.8 0.12 195) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: oklch(0.84 0.17 155);
}

#screen-auth .auth-logo-sub {
  margin-top: 16px;
  color: oklch(0.78 0.1 155 / 0.62);
  letter-spacing: 0.2em;
  font-size: 0.62rem;
}

#screen-auth .auth-logo::after {
  content: '';
  display: block;
  margin-top: 22px;
  width: min(160px, 70%);
  height: 1px;
  background: linear-gradient(to right, var(--auth-soul), transparent);
}

#screen-auth .auth-panel {
  width: var(--auth-panel-w);
  max-width: 100%;
  justify-self: end;
  position: relative;
  z-index: 2;
  padding: 28px 26px 22px;
  border-radius: 4px 24px 4px 24px;
  border: 1px solid oklch(0.84 0.16 155 / 0.22);
  background: linear-gradient(165deg, oklch(0.2 0.04 250 / 0.94), oklch(0.13 0.03 250 / 0.97));
  box-shadow:
    0 22px 56px oklch(0.08 0.03 250 / 0.5),
    0 1px 0 oklch(0.92 0.05 155 / 0.1) inset;
  overflow: hidden;
  transition: width 0.52s var(--auth-ease);
}

#screen-auth .auth-panel::before {
  display: none;
}

#screen-auth .auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 20px;
  padding: 4px;
  border-radius: 12px;
  overflow: visible;
  border: 1px solid oklch(0.84 0.14 155 / 0.16);
  background: oklch(0.12 0.03 250 / 0.55);
}

#screen-auth .auth-tab-glider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 9px;
  background: oklch(0.78 0.16 155 / 0.14);
  border: 1px solid oklch(0.84 0.18 155 / 0.32);
  pointer-events: none;
  transition: transform 0.48s var(--auth-ease);
}

#screen-auth .auth-tabs:has(#auth-tab-register.auth-tab--active) .auth-tab-glider {
  transform: translateX(100%);
}

#screen-auth .auth-tab {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 10px 8px;
  border-radius: 9px;
  color: var(--auth-mute);
  background: transparent;
  transition: color 0.28s var(--auth-ease);
}

#screen-auth .auth-tab:hover:not(.auth-tab--active) {
  color: var(--auth-paper);
  background: transparent;
}

#screen-auth .auth-tab--active {
  background: transparent;
  color: var(--auth-soul);
  text-shadow: 0 0 12px oklch(0.84 0.18 155 / 0.4);
}

#screen-auth .auth-tab:focus-visible,
#screen-auth .auth-input:focus-visible,
#screen-auth .btn-auth-submit:focus-visible,
#screen-auth .auth-forgot-link:focus-visible {
  outline: 2px solid var(--auth-soul);
  outline-offset: 3px;
}

#screen-auth .auth-form {
  gap: 14px;
}

#screen-auth .auth-field {
  position: relative;
  gap: 6px;
}

#screen-auth .auth-email-slot {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 1;
  transition: grid-template-rows 0.52s var(--auth-ease);
}

#screen-auth .auth-email-slot.is-opening {
  grid-template-rows: 1fr;
}

#screen-auth .auth-email-slot.is-closing {
  grid-template-rows: 0fr;
  transition-delay: 0.18s;
}

#screen-auth .auth-email-slot__inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  filter: blur(6px);
  transition:
    opacity 0.4s var(--auth-ease),
    transform 0.4s var(--auth-ease),
    filter 0.4s var(--auth-ease);
}

#screen-auth .auth-email-slot.is-opening .auth-email-slot__inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
  transition-delay: 0.34s, 0.34s, 0.34s;
}

#screen-auth .auth-email-slot.is-closing .auth-email-slot__inner {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  filter: blur(5px);
  transition-delay: 0s, 0s, 0s;
}

#screen-auth .auth-label,
#screen-auth .btn-auth-submit {
  transition: opacity 0.22s var(--auth-ease), transform 0.22s var(--auth-ease), filter 0.22s var(--auth-ease), background 0.2s var(--auth-ease), box-shadow 0.2s var(--auth-ease), color 0.2s var(--auth-ease);
}

#screen-auth .is-morphing-out {
  opacity: 0;
  transform: translate3d(0, -5px, 0);
  filter: blur(4px);
}

#screen-auth .is-morphing-in {
  animation: authTextIn 0.36s var(--auth-ease) both;
}

#screen-auth .auth-input.is-morphing-out {
  opacity: 0.35;
}

#screen-auth .auth-label {
  color: oklch(0.7 0.03 155);
  letter-spacing: 0.14em;
}

#screen-auth .auth-input {
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 3px 14px 14px 3px;
  color: var(--auth-paper);
  background: oklch(0.18 0.03 250 / 0.7);
  border: 1px solid oklch(0.84 0.08 155 / 0.16);
  box-shadow: none;
  transition: border-color 0.22s var(--auth-ease), box-shadow 0.22s var(--auth-ease), opacity 0.22s var(--auth-ease);
  user-select: text;
  -webkit-user-select: text;
}

#screen-auth .auth-input::placeholder {
  color: oklch(0.62 0.03 240 / 0.65);
}

#screen-auth .auth-input:hover {
  border-color: oklch(0.84 0.12 155 / 0.3);
}

#screen-auth .auth-input:focus {
  border-color: oklch(0.84 0.18 155 / 0.5);
  background: oklch(0.19 0.035 250 / 0.88);
  box-shadow: 0 0 0 3px oklch(0.84 0.18 155 / 0.08);
  transform: none;
}

#screen-auth .auth-field::after {
  content: none;
}

#screen-auth .auth-error {
  border-radius: 4px 12px 4px 12px;
  color: oklch(0.76 0.14 25);
  background: oklch(0.32 0.08 25 / 0.16);
  border: 1px solid oklch(0.7 0.12 25 / 0.24);
}

#screen-auth .auth-error.visible {
  animation: authErrorIn 0.36s var(--auth-ease) both;
}

#screen-auth .btn-auth-submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 46px;
  margin-top: 2px;
  padding: 12px 16px;
  border-radius: 4px 16px 4px 16px;
  color: oklch(0.16 0.045 155);
  background: var(--auth-soul);
  border: 1px solid oklch(0.9 0.1 155 / 0.38);
  box-shadow: 0 8px 22px oklch(0.72 0.16 155 / 0.2);
  text-shadow: none;
  will-change: transform;
}

#screen-auth .btn-auth-submit::before {
  display: none;
}

#screen-auth .btn-auth-submit:hover {
  background: oklch(0.88 0.16 155);
  border-color: oklch(0.92 0.1 155);
  box-shadow: 0 10px 26px oklch(0.72 0.16 155 / 0.28);
  filter: none;
}

#screen-auth .btn-auth-submit:active {
  transform: scale(0.985);
}

#screen-auth .btn-auth-submit:disabled {
  cursor: wait;
  opacity: 0.78;
}

#screen-auth .btn-auth-submit.is-busy::after {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 7px;
  height: 2px;
  background: oklch(0.16 0.05 155 / 0.4);
  animation: authBusy 1.1s ease-in-out infinite;
}

#screen-auth .auth-forgot-row {
  margin-top: 4px;
}

#screen-auth .auth-forgot-link {
  min-height: 40px;
  color: oklch(0.76 0.04 180);
  text-decoration-color: oklch(0.76 0.04 180 / 0.28);
  letter-spacing: 0.06em;
  transition: color 0.2s var(--auth-ease);
}

#screen-auth .auth-forgot-link:hover {
  color: var(--auth-cyan);
  text-decoration-color: oklch(0.78 0.1 205 / 0.5);
  transform: none;
}

@keyframes authTextIn {
  from { opacity: 0; transform: translate3d(0, 7px, 0); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes authSoulPass {
  0% { opacity: 0; transform: translate3d(0, 8%, 0) scale(0.82); }
  28% { opacity: 0.7; }
  100% { opacity: 0; transform: translate3d(86vw, 22%, 0) scale(1.18); }
}

@keyframes authErrorIn {
  0% { opacity: 0; transform: translateX(0); }
  30% { transform: translateX(-4px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes authBusy {
  0% { transform: scaleX(0.2); opacity: 0.25; }
  50% { transform: scaleX(1); opacity: 0.8; }
  100% { transform: scaleX(0.2); opacity: 0.25; }
}

@media (max-width: 860px) {
  #screen-auth,
  #screen-auth.is-register {
    --auth-panel-w: min(420px, 100%);
  }

  #screen-auth .auth-world {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    width: min(420px, 100%);
  }

  #screen-auth .auth-herald {
    justify-self: center;
    text-align: center;
  }

  #screen-auth .auth-logo {
    text-align: center;
  }

  #screen-auth .auth-logo::after {
    margin-inline: auto;
  }

  #screen-auth .auth-logo-title {
    align-items: center;
    max-width: none;
    font-size: clamp(1.9rem, 7vw, 2.5rem);
  }

  #screen-auth .auth-panel {
    justify-self: center;
    width: 100%;
  }

  #screen-auth .auth-atmosphere__filament {
    opacity: 0.4;
  }
}

@media (max-width: 600px) {
  #screen-auth .auth-panel {
    width: min(92vw, 420px) !important;
    padding: 22px 18px 16px !important;
  }

  #screen-auth .auth-input,
  #screen-auth .btn-auth-submit {
    font-size: 16px !important;
  }
}

@media (pointer: coarse) {
  #screen-auth .auth-cursor-well {
    display: none;
  }
}

@media (max-height: 680px) {
  #screen-auth .auth-world {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #screen-auth .auth-logo-title {
    font-size: 1.6rem;
    max-width: none;
  }

  #screen-auth .auth-logo-sub {
    margin-top: 6px;
  }

  #screen-auth .auth-logo::after {
    display: none;
  }

  #screen-auth .auth-panel {
    padding: 16px 18px 12px;
  }
}

html[data-perf-particles="off"] #screen-auth .auth-soul-canvas,
html[data-perf-particles="off"] #screen-auth .auth-soul-smoke,
html[data-perf-particles="off"] #screen-auth .auth-cursor-well {
  display: none !important;
}

html[data-perf-motion="off"] #screen-auth .auth-soul-smoke,
html[data-perf-motion="off"] #screen-auth .is-morphing-in,
html[data-perf-motion="off"] #screen-auth .auth-email-slot,
html[data-perf-motion="off"] #screen-auth .auth-email-slot__inner,
html[data-perf-motion="off"] #screen-auth .auth-panel {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #screen-auth .auth-soul-canvas,
  #screen-auth .auth-soul-smoke,
  #screen-auth .auth-cursor-well {
    display: none !important;
  }

  #screen-auth .auth-panel,
  #screen-auth .auth-email-slot,
  #screen-auth .auth-email-slot__inner,
  #screen-auth .auth-tab-glider,
  #screen-auth .auth-label,
  #screen-auth .btn-auth-submit,
  #screen-auth .auth-input {
    transition: none !important;
  }

  #screen-auth .is-morphing-in,
  #screen-auth .auth-error.visible,
  #screen-auth .btn-auth-submit.is-busy::after {
    animation: none !important;
  }
}