/* ============================================================================
   login.css — sign-in gate
   ----------------------------------------------------------------------------
   Vendored from the v4 demo (netkandy-web/demos/netkandy-portal-artist-v4/
   login.css): the marketing-site HERO AURORA (five drifting brand-spectrum
   blobs + film grain, Unicorn Studio WebGL on top) behind a glassy auth card.
   Adapted for the real app: saved-logins demo dropdown removed (auth is
   password-only for now), error + disabled states added.
   ============================================================================ */

:root{
  --cream:#FFFFFF;
  --cream-soft:#F6F6F6;
  --ink:#1C1A18;
  --ink-soft:rgba(28,26,24,0.7);
  --ink-faded:rgba(28,26,24,0.5);
  --line:#E8E1D5;
  --grad-blue:#2D3FE9;
  --grad-purple:#8B5CF6;
  --grad-magenta:#EC4899;
  --grad-orange:#F97316;
  --grad-yellow:#F59E0B;
}
.auth-body{ margin:0; padding:0; box-sizing:border-box; }
html:has(.auth-body), html:has(.auth-body) body{
  height:100%; background:var(--cream); color:var(--ink); overflow:hidden;
}
.auth-body{
  font-family:'Geist','Inter',system-ui,sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased; letter-spacing:-0.005em; isolation:isolate;
}
.auth-body *{ margin:0; padding:0; box-sizing:border-box; }

/* Film-grain overlay (verbatim from the marketing site) */
.auth-body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:0.18; mix-blend-mode:multiply;
}

/* ---- AURORA (marketing hero gradient) ---- */
.aurora-wrap{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.aurora-fallback{ position:absolute; inset:0; }
/* The Unicorn Studio canvas sits above the blob fallback and covers it once loaded. */
.aurora-unicorn{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.blob{ position:absolute; border-radius:50%; filter:blur(110px); will-change:transform; }
.blob-1{ top:-15%; left:-10%; width:60vw; height:60vw; background:var(--grad-blue);    opacity:0.55; animation:drift1 28s ease-in-out infinite alternate; }
.blob-2{ top:5%;   left:28%;  width:55vw; height:55vw; background:var(--grad-purple);  opacity:0.50; animation:drift2 24s ease-in-out infinite alternate; }
.blob-3{ top:-8%;  left:50%;  width:50vw; height:50vw; background:var(--grad-magenta); opacity:0.55; animation:drift3 22s ease-in-out infinite alternate; }
.blob-4{ top:-10%; right:-8%; width:55vw; height:55vw; background:var(--grad-orange);  opacity:0.60; animation:drift4 26s ease-in-out infinite alternate; }
.blob-5{ top:18%;  right:8%;  width:35vw; height:35vw; background:var(--grad-yellow);  opacity:0.45; animation:drift5 30s ease-in-out infinite alternate; }
@keyframes drift1{ 0%{ transform:translate(0,0) scale(1);} 100%{ transform:translate(8vw,4vh) scale(1.1);} }
@keyframes drift2{ 0%{ transform:translate(0,0) scale(1);} 100%{ transform:translate(-6vw,6vh) scale(1.05);} }
@keyframes drift3{ 0%{ transform:translate(0,0) scale(1);} 100%{ transform:translate(5vw,-3vh) scale(1.1);} }
@keyframes drift4{ 0%{ transform:translate(0,0) scale(1);} 100%{ transform:translate(-7vw,5vh) scale(1.08);} }
@keyframes drift5{ 0%{ transform:translate(0,0) scale(1);} 100%{ transform:translate(-5vw,-4vh) scale(1.12);} }

@media (prefers-reduced-motion: reduce){ .blob{ animation:none !important; } }

/* ---- Layout ---- */
.auth{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; padding:32px;
}

.auth__card{
  width:100%; max-width:404px;
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:22px;
  box-shadow:0 24px 70px -30px rgba(28,26,24,0.4), 0 2px 8px rgba(28,26,24,0.04);
  padding:34px 34px 28px;
}

/* Lockup matches the marketing-site header ratio exactly:
   logo 65px · wordmark 18px / weight 350 · gap 6px (netkandy-web .brand). */
.auth__brand{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--ink);
  margin-bottom:20px;
}
.auth__brand img{ width:65px; height:65px; object-fit:contain; display:block; }
.auth__brand span{ font-size:18px; font-weight:350; letter-spacing:-0.018em; color:var(--ink); }

.auth__eyebrow{
  display:block; font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-faded); margin-bottom:10px;
}
.auth__title{
  font-size:34px; font-weight:500; letter-spacing:-0.03em; line-height:1.02; margin-bottom:10px;
}
.auth__title .accent{
  background:linear-gradient(135deg, var(--grad-blue) 0%, var(--grad-magenta) 50%, var(--grad-orange) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:500;
}
.auth__lede{ font-size:14.5px; color:var(--ink-soft); margin-bottom:22px; max-width:34ch; }

/* ---- Form ---- */
.auth__form{ display:flex; flex-direction:column; gap:14px; }
.auth__field{ display:flex; flex-direction:column; gap:6px; }
.auth__field label{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--ink-faded);
}
.auth__field input{
  width:100%; padding:12px 14px; font:inherit; font-size:14.5px; color:var(--ink);
  background:rgba(255,255,255,0.65); border:1px solid var(--line); border-radius:11px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.auth__field input::placeholder{ color:var(--ink-faded); }
.auth__field input:focus{
  outline:none; border-color:var(--grad-blue);
  box-shadow:0 0 0 3px rgba(45,63,233,0.12);
}

.auth__error{ font-size:12.5px; color:#B45309; margin-top:-4px; }

.auth__submit{
  margin-top:6px; width:100%; padding:13px 18px; border:none; border-radius:11px; cursor:pointer;
  font:inherit; font-size:15px; font-weight:500; color:#fff;
  background:linear-gradient(135deg, var(--grad-blue) 0%, var(--grad-magenta) 50%, var(--grad-orange) 100%);
  background-size:160% 160%; background-position:0% 50%;
  transition:background-position .5s ease, transform .12s ease, box-shadow .2s ease;
  box-shadow:0 10px 26px -12px rgba(236,72,153,0.6);
}
.auth__submit:hover{ background-position:100% 50%; box-shadow:0 14px 32px -12px rgba(236,72,153,0.7); }
.auth__submit:active{ transform:translateY(1px); }
.auth__submit:disabled{ opacity:0.5; cursor:default; }

.auth__demo{
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(28,26,24,0.08);
  font-size:12px; color:var(--ink-faded); text-align:center; line-height:1.45;
}
.auth__demo strong{ color:var(--ink-soft); font-weight:500; }

.auth__foot{ font-size:13px; color:var(--ink-soft); text-align:center; }
.auth__foot a{ color:var(--ink); }

@media (max-width:480px){
  .auth__card{ padding:28px 22px 24px; border-radius:18px; }
  .auth__title{ font-size:29px; }
}