/* Login: sky backdrop, white card, Nova the companion on the left. */
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 1000; font-style: normal; font-display: swap;
}

:root {
  --indigo: #3D35E0;
  --lime: #D8F36A;
  --ink: #1F1D27;
  --text-sub: #5B5868;
  --field: #F3F4F8;
  --field-line: #E3E4EC;
  --sky-1: #A9CFF0;
  --sky-2: #D8EBF8;
  --display: 'Montserrat', 'Avenir Next', system-ui, sans-serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.sky {
  margin: 0;
  min-height: 100%;
  display: flex;
  padding: 32px 16px;
  font-family: var(--sans);
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 70%, #EEF6FC 100%);
  overflow-x: hidden;
  position: relative;
}

/* Drifting clouds behind the card */
.clouds { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.cloud { position: absolute; background: #fff; border-radius: 50%; filter: blur(18px); opacity: .85; animation: drift 60s linear infinite alternate; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud.c1 { width: 420px; height: 160px; top: -40px; right: 6%; }
.cloud.c1::before { width: 240px; height: 200px; left: 60px; top: -80px; }
.cloud.c2 { width: 520px; height: 170px; bottom: -60px; left: -80px; animation-duration: 80s; }
.cloud.c2::before { width: 260px; height: 220px; left: 140px; top: -100px; }
.cloud.c3 { width: 300px; height: 110px; top: 18%; left: 4%; opacity: .6; animation-duration: 70s; }
.cloud.c4 { width: 380px; height: 140px; bottom: 6%; right: -60px; opacity: .7; animation-duration: 90s; }
.cloud.c4::after { width: 200px; height: 170px; left: 90px; top: -70px; }
@keyframes drift { from { transform: translateX(-30px); } to { transform: translateX(40px); } }

/* Card */
.login-card {
  position: relative; z-index: 1;
  width: min(1060px, 100%);
  min-height: 600px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  background: #fff;
  border-radius: 28px;
  padding: 10px;
  box-shadow: 0 30px 80px -30px rgba(40, 70, 120, .45), 0 2px 0 rgba(255,255,255,.6) inset;
}

/* Left: the companion */
.companion-panel {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #7FB2E3;
  min-height: 580px;
  isolation: isolate;
}
.companion-panel { perspective: 900px; }
.nova {
  position: absolute; inset: -14px;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), scale .35s cubic-bezier(.3, 1.6, .5, 1);
  will-change: transform;
}
.companion-panel.tracking .nova { transition: transform .18s ease-out, scale .35s cubic-bezier(.3, 1.6, .5, 1); }
/* Hovering Nova: it perks up; pressing squishes it like a plush toy. */
.nova.perk { scale: 1.045; }
.nova.squish { scale: 1.06 .94; transition-duration: .12s; }
/* A soft light that follows the cursor over the panel. */
.nova-sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: soft-light;
}
.companion-panel.tracking .nova-sheen { opacity: 1; }
.nova-clip {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.nova-clip.on { opacity: 1; }
.companion-panel { background: #9CC6EE; }
.nova-hit {
  position: absolute; left: 22%; right: 22%; top: 22%; bottom: 14%;
  padding: 0; margin: 0; border: 0; background: none; cursor: grab; border-radius: 40%;
  -webkit-tap-highlight-color: transparent;
}
.nova-hit:active { cursor: grabbing; }
.nova-hit:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.nova.hop { animation: hop .55s ease-in-out 2; }
@keyframes hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.nova.shake { animation: shake .5s ease-in-out 1; }
@keyframes shake { 0%, 100% { translate: 0 0; } 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }

.bubble {
  position: absolute; top: 24px; left: 24px; max-width: min(300px, 56%);
  margin: 0; padding: 14px 18px;
  background: #fff; color: var(--ink);
  border-radius: 18px 18px 18px 6px;
  font-size: 15px; line-height: 1.45; font-weight: 500;
  box-shadow: 0 10px 30px -12px rgba(30, 50, 100, .35);
  transition: transform .25s ease, opacity .25s ease;
}
.bubble.pop { animation: pop .35s ease; }
@keyframes pop { 0% { transform: scale(.94); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }

.panel-title {
  position: absolute; left: 28px; bottom: 24px; margin: 0;
  font: 800 clamp(30px, 4vw, 44px)/0.98 var(--display);
  text-transform: uppercase; letter-spacing: -0.01em;
  color: #fff; text-shadow: 0 3px 16px rgba(20, 40, 20, .35);
}

/* Right: the form */
.form-side { padding: 56px clamp(24px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 800 18px var(--display); align-self: center; margin-bottom: 28px; }
.logo-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--indigo); display: grid; place-items: center; }
.logo-mark span { width: 14px; height: 14px; border: 3px solid #fff; border-radius: 3px; }
h1 { margin: 0; text-align: center; font: 800 30px/1.1 var(--display); text-transform: uppercase; letter-spacing: -0.01em; }
.sub { margin: 8px 0 28px; text-align: center; color: var(--text-sub); font-size: 15px; }

form { display: flex; flex-direction: column; }
label { font-size: 13px; font-weight: 700; margin: 0 0 7px; }
input[type=text], input[type=password] {
  width: 100%; padding: 13px 14px; margin-bottom: 18px;
  font: 500 15px var(--sans); color: var(--ink);
  background: var(--field); border: 1.5px solid var(--field-line); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder { color: #9A98A6; }
input:focus { outline: none; background: #fff; border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(61, 53, 224, .14); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 70px; }
.pw-toggle {
  position: absolute; right: 8px; top: 7px; height: 32px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--indigo);
  font: 700 13px var(--sans); cursor: pointer;
}
.pw-toggle:hover, .pw-toggle:focus-visible { background: rgba(61, 53, 224, .1); outline: none; }

.btn-login {
  margin-top: 6px; padding: 14px; border: 0; border-radius: 12px;
  background: var(--ink); color: #fff; font: 700 15px var(--sans); cursor: pointer;
  transition: transform .12s ease, background .15s;
}
.btn-login:hover { background: #000; }
.btn-login:active { transform: translateY(1px); }
.btn-login:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }

.error-box { margin: -10px 0 18px; padding: 11px 14px; border-radius: 12px; background: #FFF0F2; border: 1px solid #FFC2CC; color: #B0193A; font-size: 14px; }
.alt { margin: 22px 0 6px; text-align: center; font-size: 14px; color: var(--text-sub); }
.alt a, .fine a { color: var(--indigo); font-weight: 700; text-decoration: none; }
.alt a:hover, .fine a:hover { text-decoration: underline; }
.fine { margin: 0; text-align: center; font-size: 12px; color: #8A8796; }

/* Mobile: panel on top, shorter */
@media (max-width: 860px) {
  .login-card { grid-template-columns: 1fr; min-height: 0; }
  .companion-panel { min-height: 0; aspect-ratio: 1 / 1; max-height: 440px; }
  .bubble { font-size: 13px; top: 14px; left: 14px; max-width: 60%; padding: 10px 14px; }
  .panel-title { left: 18px; bottom: 16px; font-size: 26px; }
  .form-side { padding: 32px 18px 28px; }
  .logo { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none !important; }
  .nova { transition: none; }
  .nova.perk, .nova.squish { scale: none; }
  .nova-sheen { display: none; }
  .nova-clip { transition: none; }
  .nova.hop, .nova.shake { animation: none; }
}