/* ══════════════════════════════════════════════════════════════════════════
   LOGIN - brain cast + card
   ══════════════════════════════════════════════════════════════════════════
   The /login-preview design, moved onto the real /login.html. The URL is
   unchanged because eighteen places link to it, and auth.js still owns the
   sign-in itself - this file is presentation only.
   ═══════════════════════════════════════════════════════════════════════ */

body.login-page {
  background: var(--color-bg, #0A0A0F);
  color: var(--color-text, #F0F4FF);
  -webkit-font-smoothing: antialiased;
}

.lg-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(24px, 6vw, 64px) 0;
}

.lg {
  display: grid;
  /* width:100% matters: this is a flex item, and a flex item with no width
     shrinks to its content - which starves the stage column to 0px. */
  width: 100%;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 420px);
  gap: clamp(24px, 5vw, 48px);
  align-items: center;
  max-width: 1000px;
  margin-inline: auto;
  padding: var(--sp-8, 2rem) var(--sp-6, 1.5rem);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
}

/* ══ STAGE ═════════════════════════════════════════════════════════════ */

.lg-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 260px;
}
.lg-glow {
  position: absolute; inset: 12% 8% 6%;
  background: radial-gradient(closest-side, var(--color-primary-glow, rgba(124,58,237,.28)), transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}
.lg-cast { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1 / 1; }

.lg-floor {
  position: absolute; left: 50%; bottom: 8%;
  transform: translateX(-50%);
  width: 62%; pointer-events: none;
}
.lg-shadow {
  display: block; width: 100%; height: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.62), transparent 72%);
  opacity: .5;
}

/* Held off-stage until the entrance runs, so there is no flash of the brain
   already sitting there before it drops. */
.lg-cast:not(.is-ready) .lg-act,
.lg-cast:not(.is-ready) .lg-shadow { opacity: 0; }

/* Pivot on the floor so leaning tips the brain without lifting it. */
.lg-act { position: absolute; inset: 0; transform-origin: 50% 88%; }
.lg-body { position: absolute; inset: 0; animation: lg-breathe 4.6s ease-in-out infinite; }
@keyframes lg-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.015); }
}

/* Gaze layer: a single rAF loop writes --ex/--ey here. */
.lg-look {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform: translate3d(var(--ex, 0px), var(--ey, 0px), 0);
  will-change: transform;
}

.lg-brain {
  position: relative; z-index: 1;
  width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  transition: filter .45s ease, opacity .45s ease;
}

/* The halo carries every mood, so a state read never depends on tinting the
   artwork - which would just look muddy. */
.lg-halo {
  position: absolute; left: 50%; top: 50%;
  width: 78%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .42), transparent 70%);
  filter: blur(10px);
  transition: background .5s ease, opacity .5s ease, transform .5s ease;
  animation: lg-pulse 3.4s ease-in-out infinite;
}
@keyframes lg-pulse {
  0%, 100% { opacity: .8; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;  transform: translate(-50%, -50%) scale(1.06); }
}

.lg-spark { position: absolute; left: 50%; top: 50%; z-index: 2; width: 66%; transform: translate(-50%, -50%); pointer-events: none; }
.lg-spark .sp { fill: #DDD6FE; opacity: 0; animation: lg-fire 2.8s ease-in-out infinite; }
.lg-spark .sp:nth-child(2) { animation-duration: 3.4s; animation-delay: -.7s; }
.lg-spark .sp:nth-child(3) { animation-duration: 3.1s; animation-delay: -1.4s; }
.lg-spark .sp:nth-child(4) { animation-duration: 3.8s; animation-delay: -2.1s; }
.lg-spark .sp:nth-child(5) { animation-duration: 2.6s; animation-delay: -.4s; }
.lg-spark .sp:nth-child(6) { animation-duration: 4.2s; animation-delay: -1.8s; }
@keyframes lg-fire {
  0%, 72%, 100% { opacity: 0; r: 1.6px; }
  80%           { opacity: .95; r: 3.2px; }
}

/* Mood states, set from real form events. */
.lg-cast[data-eyes="shut"] .lg-brain { filter: saturate(.5) brightness(.62); }
.lg-cast[data-eyes="shut"] .lg-halo  { opacity: .35; }
.lg-cast[data-eyes="shut"] .lg-spark { opacity: .3; }
.lg-cast[data-mood="surprise"] .lg-halo {
  background: radial-gradient(closest-side, rgba(196,181,253,.62), transparent 70%);
  transform: translate(-50%, -50%) scale(1.14);
}
.lg-cast[data-mood="happy"] .lg-halo {
  background: radial-gradient(closest-side, rgba(52,211,153,.5), transparent 70%);
  transform: translate(-50%, -50%) scale(1.18);
}
.lg-cast[data-mood="worry"] .lg-halo {
  background: radial-gradient(closest-side, rgba(244,63,94,.45), transparent 70%);
}
.lg-cast[data-mood="worry"] .lg-brain { filter: saturate(.7) brightness(.8); }

/* ══ CARD ══════════════════════════════════════════════════════════════ */

.lg-panel {
  padding: var(--sp-8, 2rem);
  border: 1px solid var(--color-border, rgba(255,255,255,.08));
  border-radius: var(--r-lg, 16px);
  background: var(--color-bg-2, #0F0F1A);
  box-shadow: var(--shadow-lg, 0 12px 48px rgba(0,0,0,.6));
}
.lg-mark {
  width: 38px; height: 38px; margin-bottom: var(--sp-5, 1.25rem);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(157,92,246,.3); border-radius: var(--r-md, 10px);
  background: rgba(124,58,237,.12); color: var(--color-primary-ll, #C4B5FD);
  box-shadow: var(--shadow-gs, 0 0 24px rgba(124,58,237,.28));
}
.lg-mark svg { width: 19px; height: 19px; }
.lg-title { font-size: var(--text-2xl, 1.5rem); font-weight: 600; letter-spacing: -.028em; }
.lg-sub { margin-top: var(--sp-2, .5rem); font-size: var(--text-sm, .875rem); color: var(--color-text-muted, #94A3B8); }
.lg-sub a { color: var(--color-primary-ll, #C4B5FD); text-decoration: none; }
.lg-sub a:hover { text-decoration: underline; }

.lg-form { display: flex; flex-direction: column; gap: var(--sp-5, 1.25rem); margin-top: var(--sp-6, 1.5rem); }
.lg-field { display: flex; flex-direction: column; }
.lg-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3, .75rem); }
.lg-label {
  margin-bottom: var(--sp-2, .5rem);
  font-size: var(--text-xs, .75rem); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-dim, #475569);
}
.lg-link { font-size: var(--text-xs, .75rem); color: var(--color-primary-ll, #C4B5FD); text-decoration: none; }
.lg-link:hover { text-decoration: underline; }

.lg-input-wrap { position: relative; display: flex; align-items: center; }
.lg-input {
  width: 100%; padding: .75rem 2.75rem .75rem .875rem;
  border: 1px solid var(--color-border, rgba(255,255,255,.08));
  border-radius: var(--r-md, 10px);
  background: var(--color-bg, #0A0A0F);
  color: var(--color-text, #F0F4FF);
  font: inherit; font-size: var(--text-sm, .875rem);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lg-input::placeholder { color: var(--color-text-dim, #475569); }
.lg-input:focus { border-color: var(--color-primary-l, #9D5CF6); box-shadow: 0 0 0 3px rgba(124,58,237,.22); }
.lg-input:not(:placeholder-shown):invalid { border-color: rgba(239,68,68,.55); }

.lg-reveal {
  position: absolute; right: .375rem;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-sm, 6px); background: none;
  color: var(--color-text-dim, #475569); cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.lg-reveal:hover { color: var(--color-text, #F0F4FF); background: rgba(255,255,255,.05); }
.lg-reveal svg { width: 17px; height: 17px; position: absolute; transition: opacity .2s ease, transform .2s ease; }
.lg-reveal-shut { opacity: 0; transform: scale(.85); }
.lg-reveal[aria-pressed="true"] .lg-reveal-open { opacity: 0; transform: scale(.85); }
.lg-reveal[aria-pressed="true"] .lg-reveal-shut { opacity: 1; transform: scale(1); }

.lg-check { display: flex; align-items: center; gap: .625rem; font-size: var(--text-sm, .875rem); color: var(--color-text-muted, #94A3B8); cursor: pointer; }
.lg-check input { width: 16px; height: 16px; accent-color: var(--color-primary, #7C3AED); cursor: pointer; }

.lg-submit {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 1.25rem;
  border: 0; border-radius: var(--r-md, 10px);
  background: var(--color-primary, #7C3AED);
  color: #fff; font: inherit; font-size: var(--text-sm, .875rem); font-weight: 600;
  cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.lg-submit:hover { background: var(--color-primary-l, #9D5CF6); transform: translateY(-1px); }
.lg-submit:disabled { opacity: .7; cursor: default; transform: none; }
.lg-submit::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform: translateX(-100%); pointer-events: none;
}
.lg-submit:hover::after, .lg-submit:focus-visible::after { animation: lg-sweep .85s ease-out; }
@keyframes lg-sweep { to { transform: translateX(100%); } }

.lg-divider {
  display: flex; align-items: center; gap: 14px; margin: var(--sp-5, 1.25rem) 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-text-dim, #475569);
}
.lg-divider::before, .lg-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border, rgba(255,255,255,.08)); }

.lg-ghost {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; border: 1px solid var(--color-border, rgba(255,255,255,.08));
  border-radius: var(--r-md, 10px); background: transparent;
  color: var(--color-text, #F0F4FF); font-size: var(--text-sm, .875rem); font-weight: 500;
  text-decoration: none; transition: border-color .2s ease, background .2s ease;
}
.lg-ghost:hover { border-color: rgba(157,92,246,.4); background: rgba(124,58,237,.08); }

.lg-foot { margin-top: var(--sp-6, 1.5rem); padding-top: var(--sp-5, 1.25rem); border-top: 1px solid var(--color-border, rgba(255,255,255,.08)); text-align: center; font-size: var(--text-xs, .75rem); color: var(--color-text-dim, #475569); }
.lg-foot a { color: var(--color-text-muted, #94A3B8); text-decoration: none; }
.lg-foot a:hover { color: var(--color-text, #F0F4FF); }

.lg :focus-visible { outline: 2px solid var(--color-primary-l, #9D5CF6); outline-offset: 2px; border-radius: var(--r-sm, 6px); }

/* auth.js writes into #login-alert; these are its two states. */
#login-alert {
  margin-top: var(--sp-5, 1.25rem); padding: var(--sp-3, .75rem) var(--sp-4, 1rem);
  border-radius: var(--r-md, 10px);
  font-size: var(--text-sm, .875rem); line-height: 1.55;
  border: 1px solid rgba(239,68,68,.32); background: rgba(239,68,68,.09); color: #FCA5A5;
}
#login-alert.alert-success { border-color: rgba(16,185,129,.32); background: rgba(16,185,129,.09); color: #6EE7B7; }

/* ══ RESPONSIVE ════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .lg { grid-template-columns: 1fr; gap: var(--sp-6, 1.5rem); max-width: 480px; }
  .lg-stage { order: -1; min-height: 200px; }
  .lg-cast { max-width: 240px; }
  .lg-panel { padding: var(--sp-6, 1.5rem); }
}
@media (max-width: 420px) {
  .lg { padding: var(--sp-4, 1rem); }
  .lg-cast { max-width: 190px; }
  .lg-input { font-size: 16px; }   /* stops iOS zooming on focus */
}

@media (prefers-reduced-motion: reduce) {
  .lg-body, .lg-halo, .lg-spark .sp { animation: none !important; }
  .lg *, .lg *::before, .lg *::after { transition-duration: .01ms !important; }
}