/* auth pages (signup / signin) — same composition language as the landing:
   dark canvas -> dashed stage -> rounded panel, form left, product shots right */

:root { --frame-gap: clamp(8px, 1vw, 12px); }

.auth-body {
  min-height: 100vh;
  background: #020202;
  padding: var(--frame-gap);
  display: flex;
}

.auth-stage {
  flex: 1;
  border: 2px dashed rgba(253, 251, 248, 0.16);
  border-radius: clamp(24px, 3vw, 44px);
  padding: var(--frame-gap);
  display: flex;
}

.auth-panel {
  flex: 1;
  border-radius: clamp(18px, 2.4vw, 34px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  background: var(--surface);
}

.auth-form-side {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
}

/* right: the ripple gradient Lime loves, popup shots floating over it */
.auth-visual {
  position: relative;
  overflow: hidden;
  background: #241d33;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: clamp(28px, 4vw, 56px);
  user-select: none;
  -webkit-user-select: none;
}

/* concentric gradient ripples radiating from lower right */
.auth-art {
  position: absolute;
  inset: -12%;
  background: radial-gradient(circle at 72% 88%,
    #f8ead0 0%,
    #f3bd8e 7%,
    #e98a5e 14%,
    #efa3b4 21%,
    #b78de2 28%,
    #8f7cdc 35%,
    #7088e8 42%,
    #a0bbee 49%,
    #f0dab8 56%,
    #e8966c 63%,
    #b06fc9 70%,
    #5d6bd1 80%,
    #2c2542 94%);
  filter: blur(22px) saturate(1.12);
}

/* dark falloff toward the top-right corner */
.auth-art-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(11, 10, 9, 0.55) 0%, transparent 45%),
    linear-gradient(rgba(11, 10, 9, 0.12), transparent 30%);
}

.auth-visual img {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  height: auto;
  display: block;
}

/* entrance motion, same feel as the landing */
.js .auth-reveal {
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition-property: opacity, transform;
  transition-duration: 0.85s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}
.js .auth-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .auth-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .auth-panel { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-form-side { padding: 40px 24px 72px; }
}

/* Ownership and legal signals under the form. These exist for humans, but they
   also matter to Safe Browsing: a credential form on a young domain with no
   named owner, no privacy policy and no terms is the exact shape of a phishing
   page, which is what got notifi.online flagged. */
.auth-legal {
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(253, 251, 248, 0.45);
  max-width: 42ch;
}
.auth-legal a {
  color: rgba(253, 251, 248, 0.62);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.auth-legal a:hover { color: var(--ink, #fdfbf8); }