/* gsk-login.css — aurora bg, sparkly title, shiny button, gooey cursor, spacing, shake & ripple */
:root{
  --bg: #0b0f19;
  --panel: rgba(255,255,255,0.06);
  --panel-b: rgba(255,255,255,0.12);
  --text: #e6e9f5;
  --muted: #a6b0d6;
  --border: #1e2440;
  --brand1: #06b6d4;
  --brand2: #8b5cf6;

  /* spacing scale */
  --space-2xs: 6px;
  --space-xs: 10px;
  --space-sm: 14px;
  --space-md: 18px;
  --space-lg: 24px;
  --space-xl: 36px;
  --space-2xl: 56px;
}
html,body{height:100%}
body.login-body{
  margin:0;
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--text);
 
  -webkit-font-smoothing:antialiased;
}

.login-container{
  padding-top: 10vh;              /* more top breathing room */
  padding-bottom: var(--space-2xl);
}
.brand{ margin-bottom: var(--space-lg); }
.brand-title{ margin: var(--space-xs) 0 var(--space-2xs); font-weight:800; letter-spacing:-.02em; }
.brand-logo{ filter: drop-shadow(0 6px 24px rgba(139,92,246,.25)); }

/* Sparkly gradient title */
.sparkles{ font-size: clamp(26px, 6vw, 46px); line-height:1.05; display:inline-block; }
.sparkles__inner{
  background: conic-gradient(from 0deg, var(--brand2), var(--brand1), #22d3ee, var(--brand2));
  background-size:200% 200%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: sparkleMove 8s linear infinite;
  filter: drop-shadow(0 6px 24px rgba(110,231,255,.15));
}
@keyframes sparkleMove{
  0%{ background-position: 0% 50% } 50%{ background-position: 100% 50% } 100%{ background-position: 0% 50% }
}

/* Tagline typewriter */
.tagline{
  color:var(--muted);
  min-height: 24px;
  margin: 0 0 var(--space-lg);
  font-weight:600;
  border-right:2px solid #9ae6ff;
  white-space:nowrap; overflow:hidden;
}

/* Glassy panel */
.glass-panel{
  background: var(--panel);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  box-shadow: 0 10px 55px rgba(0,0,0,.38);
  overflow:hidden;
  backdrop-filter: blur(6px);
}
.panel-heading{ padding: var(--space-sm) var(--space-md); }
.panel-title{ color:#e9f0ff; font-weight:700; margin:0 }
.panel-body--spaced{ padding: var(--space-lg) var(--space-lg) var(--space-md); }

.form-group--spaced{ margin-bottom: var(--space-md); }
#user, #pass{ height: 46px; font-size: 18px; }

/* Inline alert */
.login-alert{
  margin: var(--space-xs) 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius:12px;
  background: rgba(255, 80, 80, .10);
  color:#ffd0d0; border:1px solid rgba(255, 80, 80, .25);
}

/* Shiny button + loading + success pulse */
.btn.shiny{
  position:relative; overflow:hidden;
  background: linear-gradient(120deg, #1e293b, #22284b);
  border-radius:12px; border:none;
  box-shadow: 0 12px 44px rgba(6,182,212,.25);
  transition: transform .15s ease, box-shadow .25s ease;
}
.btn.shiny:hover{ transform: translateY(-1px); }
.btn.shiny::before{
  content:""; position:absolute; inset:-100% 0; width:60%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); animation:shine 3.5s infinite;
}
@keyframes shine{ 0%{left:-100%} 100%{left:160%} }
.is-loading{ opacity:.8; cursor:wait }
.success-pulse{ animation: success 0.6s ease }
@keyframes success{
  0%{ box-shadow:0 0 0 0 rgba(0,255,170,.35) }
  100%{ box-shadow:0 0 0 18px rgba(0,255,170,0) }
}

/* Ripple on click */
.ripple{ position:relative; overflow:hidden }
.ripple .ripple-circle{
  position:absolute; border-radius:50%; transform:translate(-50%,-50%);
  width:12px; height:12px; pointer-events:none; opacity:.65;
  background: radial-gradient(circle at 30% 30%, #bfe8ff, #06b6d4);
  animation: ripple 650ms ease-out;
}
@keyframes ripple{
  from{ transform: translate(-50%,-50%) scale(1); opacity:.65 }
  to{   transform: translate(-50%,-50%) scale(18); opacity:0 }
}

/* Error shake */
.shake{ animation: shakeX 0.55s cubic-bezier(.36,.07,.19,.97) both }
@keyframes shakeX{
  10%, 90% { transform: translateX(-1px) }
  20%, 80% { transform: translateX(2px) }
  30%, 50%, 70% { transform: translateX(-4px) }
  40%, 60% { transform: translateX(4px) }
}

/* Links & copy */
.ghost-link{ color:#a6b0d6; text-decoration:none }
.ghost-link:hover{ color:#fff; text-decoration:underline }
.copy{ color:#a6b0d6; margin-top: var(--space-xl) }

/* Aurora background */
.aurora{ position:fixed; inset:0; overflow:hidden; z-index:-1; filter: blur(40px) saturate(130%) }
.aurora__layer{ position:absolute; width:60vw; height:60vw; border-radius:50%; opacity:.35; mix-blend-mode: screen; }
.a1{ left:-20vw; top:-10vw; background: radial-gradient(circle, #2563eb, transparent 60%); animation: float1 16s ease-in-out infinite }
.a2{ right:-10vw; top:-10vw; background: radial-gradient(circle, #22d3ee, transparent 60%); animation: float2 18s ease-in-out infinite }
.a3{ left:10vw; bottom:-20vw; background: radial-gradient(circle, #8b5cf6, transparent 60%); animation: float3 22s ease-in-out infinite }
.a4{ right:-20vw; bottom:-25vw; background: radial-gradient(circle, #0ea5e9, transparent 60%); animation: float1 26s ease-in-out infinite reverse }
@keyframes float1{ 50%{ transform: translate3d(10vw, 6vh, 0) } }
@keyframes float2{ 50%{ transform: translate3d(-8vw, 4vh, 0) } }
@keyframes float3{ 50%{ transform: translate3d(8vw, -6vh, 0) } }

/* Gooey cursor (desktop only) */
#gooey-cursor{ position:fixed; inset:0; pointer-events:none; z-index:30 }
#gooey-cursor .dot{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #bfe8ff, #06b6d4);
  transform: translate(-50%, -50%);
  filter: blur(.2px);
}
#gooey-cursor .tail{ width:10px; height:10px; opacity:.75 }
@media (max-width: 992px){
  #gooey-cursor{ display:none } /* hide on tablets/phones */
}

/* Small screens spacing */
@media (max-width: 480px){
  .brand{ margin-bottom: var(--space-md) }
  .panel-body--spaced{ padding: var(--space-md) }
  .copy{ margin-top: var(--space-lg) }
}