/* ===================== Base & Tokens ===================== */
:root{
  --radius: 14px;
  --shadow-sm: 0 6px 15px rgba(0,0,0,.14);
  --shadow-md: 0 14px 36px rgba(0,0,0,.28);
  --text: #111;
  --muted: #6b7280;
  --bg: #0b0b0b;

  --grad-hero: linear-gradient(135deg,#7F00FF 0%, #E100FF 100%); /* same family as homepage */
  --grad-cta: linear-gradient(135deg,#ff416c 0%, #ff4b2b 100%); /* button gradient */
}



*{ box-sizing:border-box; }
html,body{ height:100%; }
body.auth-body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color:#fff;
}



/* ===================== Navbar ===================== */
.nav{
  position: fixed; inset:0 0 auto 0; height:64px; z-index:20;
  display:flex; align-items:center; padding:0 clamp(18px, 5vw, 48px);
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
  backdrop-filter: blur(4px);
}

nav img{
    height: 200px;
    padding: 20px;
}
.logo{
  font-weight:700; letter-spacing:.5px; color:#fff; font-size: clamp(1.1rem, 1.2vw + .6rem, 1.5rem);
}
.logo span{ color:#ff4b2b; }

/* ===================== Hero + Carousel ===================== */
.auth-hero{
  min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden;
  padding: clamp(80px, 10vh, 120px) clamp(18px, 5vw, 48px) 48px; /* leave room for fixed nav */
  isolation:isolate;
}

/* Background slideshow */
.carousel{
  position:absolute; inset:0; z-index:-2; overflow:hidden;
  background: #0b0b0b; /* fallback */
}
.carousel img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transform: scale(1.06);
  animation: slideShow 18s infinite;
  filter: brightness(.78) contrast(1.05) saturate(1.05);
  will-change: opacity, transform;
}
.carousel img:nth-child(1){ animation-delay:0s; }
.carousel img:nth-child(2){ animation-delay:6s; }
.carousel img:nth-child(3){ animation-delay:12s; }

@keyframes slideShow{
  0%   { opacity:0; transform: scale(1.06); }
  8%   { opacity:1; transform: scale(1.03); }
  30%  { opacity:1; transform: scale(1.01); }
  38%  { opacity:0; transform: scale(1.04); }
  100% { opacity:0; transform: scale(1.06); }
}

/* Soft gradient & glass layer (keeps text legible) */
.hero-overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 400px at 70% 10%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(800px 300px at 20% 90%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.6) 100%);
  pointer-events:none;
}

/* ===================== Auth Card ===================== */
.auth-card{
  width: min(440px, 100%);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow-md);
  border-radius: clamp(10px, 1.5vw, 18px);
  padding: clamp(18px, 2vw + 8px, 28px);
  backdrop-filter: blur(10px);
}
.auth-header h1{
  margin:0 0 .25rem; font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem); color:#fff; letter-spacing:.2px;
}
.muted{ margin:0 0 1.25rem; color:#d9d9d9; font-size:.95rem; }

/* Form */
.form{ display:flex; flex-direction:column; gap:.9rem; }
.label{ font-weight:600; font-size:.9rem; color:#f1f1f1; }
.input{
  appearance:none; width:100%; padding: .9rem 1rem;
  border-radius: 12px; border:1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.25); color:#fff; font-size: .98rem;
  outline:none; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.input::placeholder{ color:#bfbfbf; }
.input:focus{
  border-color: rgba(255,255,255,.45);
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

/* Actions */
.actions{ display:flex; align-items:center; gap:.9rem; justify-content:space-between; margin-top:.35rem; }
.btn{
  border:0; cursor:pointer; padding:.9rem 1.2rem; border-radius:999px; font-weight:700;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; color:#fff;
}
.btn-grad{
  background: var(--grad-cta);
  box-shadow: var(--shadow-sm);
}
.btn:hover{ transform: translateY(-2px); }
.link{
  color:#fff; opacity:.9; text-decoration:none; font-weight:600;
}
.link:hover{ opacity:1; text-decoration: underline; text-underline-offset: 3px; }

/* ===================== Responsive ===================== */
@media (max-width: 520px){
  .actions{ flex-direction:column; align-items: stretch; gap:.75rem; }
  .link{ text-align:center; display:block; }
}

/* ===================== Reduced Motion ===================== */
@media (prefers-reduced-motion: reduce){
  .carousel img{ animation: none; opacity:.28; transform:none; }
  .btn, .input{ transition: none !important; }
}