/* =========================================================
   ConnectAdyah — Login (FULL SCREEN SPLIT)
   File: static/css/login.css
   ========================================================= */

/* Palette */
:root{
  --indigo-300:#a5b4fc;
  --indigo-400:#818cf8;
  --indigo-500:#6366f1;
  --indigo-600:#4f46e5;
  --violet-500:#7c3aed;
  --fuchsia-500:#a855f7;
  --magenta-500:#ec4899;

  --ink:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --white:#ffffff;
}

/* =========================================
   PAGE BACKDROP (soft lilac with edge pattern)
   ========================================= */
.layout-bg{
  min-height:100vh;
  background:
    radial-gradient(55rem 40rem at 88% 8%, rgba(255,182,239,.42), transparent 60%),
    radial-gradient(60rem 45rem at 10% 95%, rgba(129,140,248,.38), transparent 60%),
    linear-gradient(#f7f4ff, #efe9ff);
  overflow-x:hidden;
  position:relative;
}
/* subtle cube/hex pattern hugging the edges */
.layout-bg::before,
.layout-bg::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg stroke='%23d8d6fb' stroke-width='1' fill='none' opacity='.45'%3E%3Cpath d='M60 10 L90 27.5 L90 62.5 L60 80 L30 62.5 L30 27.5 Z'/%3E%3Cpath d='M60 10 V45 L90 62.5'/%3E%3Cpath d='M60 45 L30 62.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
  background-repeat:repeat;
  /* fade center, show at edges */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 45%, black 80%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 45%, black 80%);
  opacity:.45;
}
.layout-bg::after{
  opacity:.25;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 55%, black 92%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 55%, black 92%);
}

/* =========================================
   FULL SCREEN SPLIT
   ========================================= */
.screen-split{
  height:100vh;          /* lock to viewport */
  min-height:100svh;     /* handle iOS dynamic bars */
}

/* =========================================
   LEFT PANEL (FULL HEIGHT FORM)
   ========================================= */
.left-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(18px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.96));
  backdrop-filter: blur(2px);
}

.left-inner{
  width:min(560px, 92%);
  margin-inline:auto;
}

.brand{
  color:var(--indigo-600);
  font-weight:700;
}

.title{
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
}
.subtitle{
  margin-top:.25rem;
  color: var(--muted);
}

/* Role chips */
.role-links{ display:flex; flex-wrap:wrap; gap:.5rem; }
.role-link{
  border:1px solid var(--line);
  background:#fff;
  color:#334155;
  font-size:.75rem;
  padding:.38rem .65rem;
  border-radius:9999px;
  transition: all .18s ease;
}
.role-link:hover{ border-color:var(--indigo-500); color: var(--indigo-600); }
.role-link.active{
  border-color: var(--indigo-500);
  background: linear-gradient(135deg, var(--indigo-500), var(--indigo-600));
  color:#fff;
  box-shadow: 0 6px 16px rgba(99,102,241,.25);
}

/* Form controls */
.form{ margin-top:.25rem; display:grid; gap:1rem; }
.form-row{ display:grid; gap:.35rem; }
.label{ font-size:.92rem; color:#374151; }
.input{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:.65rem;
  padding:.68rem .78rem;
  font-size:.95rem;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.input:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(99,102,241,.22);
  border-color: var(--indigo-500);
}

.forgot{ font-size:.8rem; color:var(--indigo-600); text-decoration:underline; }
.show-btn{
  position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  padding:.25rem .5rem; font-size:.8rem; color:#64748b;
}
.remember{ display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; color:#334155; }
.check{ width:1rem; height:1rem; border:1px solid var(--line); }

/* Primary button + shine */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; font-weight:700; border-radius:.95rem; position:relative; overflow:hidden;
}
.btn-primary{
  width:100%; padding:.95rem 1rem; color:#fff;
  background: linear-gradient(135deg, var(--indigo-600), var(--indigo-500));
  box-shadow: 0 16px 38px rgba(99,102,241,.30);
}
.btn-primary:hover{ box-shadow: 0 18px 42px rgba(99,102,241,.36); }
.btn-shine .shine{
  content:""; position:absolute; inset:0;
  transform: skewX(-18deg) translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transition: transform .85s ease; pointer-events:none;
}
.btn-shine:hover .shine{ transform: skewX(-18deg) translateX(120%); }
.spinner{ width:20px; height:20px; }
.spinner .track{ stroke: rgba(255,255,255,.35); } .spinner .arc{ fill:#fff; }

/* =========================================
   RIGHT HERO (IMPROVED COLORS + MOTION)
   ========================================= */
.right-hero{
  position:relative;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(18px, 4vw, 48px);
  overflow:hidden;

  /* base gradient */
  background:
    radial-gradient(1100px 820px at 20% 15%, rgba(99,102,241,.42), transparent 65%),
    radial-gradient(900px 700px  at 90% 85%, rgba(168,85,247,.40), transparent 65%),
    linear-gradient(135deg, #5f7aff 0%, #5d4ff2 100%);
}

/* animated aurora layers */
.right-hero::before,
.right-hero::after{
  content:"";
  position:absolute; inset:-40% -40%;
  pointer-events:none;
  filter: blur(64px);
  mix-blend-mode: screen;
}
.right-hero::before{
  background:
    radial-gradient(45% 55% at 30% 40%, rgba(236,72,153,.36), transparent 60%),
    radial-gradient(40% 50% at 70% 60%, rgba(129,140,248,.36), transparent 60%);
  animation: auroraA 18s ease-in-out infinite;
}
.right-hero::after{
  background:
    radial-gradient(40% 50% at 70% 30%, rgba(168,85,247,.34), transparent 60%),
    radial-gradient(45% 55% at 30% 70%, rgba(59,130,246,.30), transparent 60%);
  animation: auroraB 22s ease-in-out infinite reverse;
}
@keyframes auroraA{
  0%{ transform: translate3d(-2%,0,0) }
  50%{ transform: translate3d(2%,3%,0) }
  100%{ transform: translate3d(-2%,0,0) }
}
@keyframes auroraB{
  0%{ transform: translate3d(2%,0,0) }
  50%{ transform: translate3d(-2%,-3%,0) }
  100%{ transform: translate3d(2%,0,0) }
}

/* subtle dotted mesh on top for depth */
.right-hero .hero-wrap::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='1' cy='1' r='.7' fill='rgba(255,255,255,.06)'/%3E%3C/svg%3E");
  opacity:.7;
}

/* hero content */
.hero-wrap{
  position:relative;
  text-align:center;
  max-width: 820px;
  z-index:1;
}
.welcome{ font-size:.95rem; opacity:.95; color:#f2f6ff; }
.hero-title{
  font-weight:900; line-height:1.1;
  font-size: clamp(2.6rem, 2rem + 3vw, 4.1rem);
  color:#fff; margin-top:.4rem;
}
.hero-title-static{ color:#fff; }

.gradient-word{
  background: linear-gradient(90deg, var(--magenta-500), var(--fuchsia-500), var(--indigo-400), #60a5fa);
  background-size: 220% 220%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation: grad-pan 6s linear infinite;
}
@keyframes grad-pan{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.word-slide{ display:inline-block; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease; }

.hero-sub{
  margin-top: 1rem;
  color: rgba(244,247,255,.96);
  font-size: clamp(.95rem, .8rem + .5vw, 1rem);
}

/* cursor + ring + swoosh (for click effect) */
.cursor-hero{
  position:absolute; left:0; top:0;
  transform: translate(-140px,0) scale(1);
  transition: transform .45s cubic-bezier(.22,1,.36,1);
  z-index:5;
}
.cursor-hero.pressed{ transform: scale(.92); }

.click-ring{
  position:absolute; left:0; top:0; width:46px; height:46px;
  border-radius:9999px; border:2px solid rgba(217,70,239,.65);
  opacity:0; transform:translate(-50%,-50%) scale(.6); pointer-events:none; z-index:4;
}
.click-ring.show{ animation: ring-pop .7s ease-out forwards; }
@keyframes ring-pop{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.6)}
  35%{opacity:1}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.9)}
}

.swoosh{
  position:absolute; top:-40px; left:-120px; width:420px; height:180px;
  background: radial-gradient(60% 120% at 60% 40%, rgba(255,0,128,.28) 0%, rgba(255,0,170,.18) 25%, rgba(255,0,200,.10) 45%, transparent 70%);
  filter: blur(26px); opacity:.10; transition:left 1.2s ease-out, opacity 1.2s ease-out; pointer-events:none; z-index:3;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 767px){
  .screen-split{ height:auto; min-height:100vh; }
  .left-panel{ padding-block: 28px; }
  .right-hero{ min-height: 48vh; }
}

/* Top-left floating brand */
.site-brand{
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  z-index: 50;

  display: inline-flex;
  align-items: center;
  gap: .55rem;

  padding: 6px 10px 6px 6px;
  border-radius: 9999px;

  background: rgba(13,18,34,.72);               /* dark glass */
  border: 1px solid rgba(99,102,241,.28);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
}
.site-brand .name{
  font-weight: 700;
  letter-spacing: .2px;
  color: #8ea2ff;                                /* indigo on dark */
}
.site-brand:hover{
  border-color: rgba(129,140,248,.5);
  box-shadow: 0 10px 28px rgba(99,102,241,.28);
}
@media (max-width: 480px){
  .site-brand .name{ display:none; }             /* keep icon only on tiny screens */
}