/* Iris — login page (page-specific CSS, layered on top of iris.css tokens).
   See /brandbook.md "Login page" for rationale. This is the one page in the
   app where a full decorative moment (the "iris" bloom) is intentional and
   allowed — everywhere else in the product, decoration stays minimal per
   brandbook "calm studio" mood. A signed-out visitor's very first impression
   of the product is this screen, so it's the one deliberate exception. */

.login-body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.login-scene {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Same near-black base as the rest of the app — this page must still read
     as unmistakably "Iris", not a bespoke marketing page. */
  background: var(--bg);
}

/* ------------------------------------------------------------------ */
/* Iris bloom — a large, slow-breathing iridescent aperture built from  */
/* layered radial/conic gradients only. No images, no SVG filters.      */
/* Centered behind the login card, intentionally oversized so it bleeds */
/* off all edges of the viewport (reads as ambient scene, not a logo).  */
/* ------------------------------------------------------------------ */

.iris-bloom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1100px, 150vw);
  height: min(1100px, 150vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.iris-bloom__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: iris-breathe 9s ease-in-out infinite;
}

.iris-bloom__ring--outer {
  background: radial-gradient(
    circle at 50% 50%,
    transparent 30%,
    rgba(167, 139, 250, 0.16) 42%,
    rgba(129, 140, 248, 0.1) 58%,
    transparent 72%
  );
  filter: blur(2px);
  animation-duration: 11s;
}

.iris-bloom__ring--mid {
  inset: 12%;
  background: conic-gradient(
    from 0deg,
    rgba(167, 139, 250, 0.22),
    rgba(129, 140, 248, 0.14) 25%,
    rgba(94, 234, 212, 0.18) 50%,
    rgba(129, 140, 248, 0.14) 75%,
    rgba(167, 139, 250, 0.22)
  );
  mask-image: radial-gradient(circle, transparent 48%, #000 60%, #000 78%, transparent 88%);
  -webkit-mask-image: radial-gradient(circle, transparent 48%, #000 60%, #000 78%, transparent 88%);
  animation-name: iris-rotate-breathe;
  animation-duration: 22s;
  animation-timing-function: linear;
}

.iris-bloom__ring--inner {
  inset: 30%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(94, 234, 212, 0.28) 0%,
    rgba(167, 139, 250, 0.22) 45%,
    transparent 75%
  );
  animation-duration: 7s;
}

.iris-bloom__pupil {
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #05050a 0%, #0a0a0f 70%, transparent 100%);
  box-shadow: 0 0 60px 20px rgba(10, 10, 15, 0.6);
  animation: iris-breathe 8s ease-in-out infinite;
}

.iris-bloom__glint {
  position: absolute;
  top: 40%;
  left: 42%;
  width: 6%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 238, 244, 0.55), transparent 70%);
  animation: iris-breathe 8s ease-in-out infinite;
  animation-delay: 0.3s;
}

@keyframes iris-breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.045); opacity: 1; }
}

@keyframes iris-rotate-breathe {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .iris-bloom__ring,
  .iris-bloom__pupil,
  .iris-bloom__glint {
    animation: none;
  }
}

/* ------------------------------------------------------------------ */
/* Foreground content                                                   */
/* ------------------------------------------------------------------ */

.login-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4);
  width: 100%;
  max-width: 420px;
}

.login-wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-size: clamp(2.5rem, 8vw, 3.5rem);
  letter-spacing: var(--tracking-tight);
  text-align: center;
  /* Same gradient wordmark treatment as the app header brand
     (.app-header__brand in iris.css) — this is a login page, not a separate
     marketing brand, so the type treatment must match exactly. */
  background: var(--gradient-iris);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-tagline {
  margin: calc(var(--space-4) * -1) 0 0;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-base);
  max-width: 32ch;
}

/* Glass panel card */

.login-card {
  width: 100%;
  background: rgba(18, 19, 25, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.login-card--shake {
  animation: login-card-shake 0.4s var(--ease-standard);
}

@keyframes login-card-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .login-card--shake {
    animation: none;
  }
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.login-field__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 500;
}

.login-field__input {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.login-field__input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}

.login-field__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-field__input::placeholder {
  color: var(--text-faint);
}

.login-error {
  margin: calc(var(--space-2) * -1) 0 0;
  color: var(--danger);
  font-size: var(--text-sm);
}

.login-error[hidden] {
  display: none;
}

.login-submit {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 479px) {
  .login-card {
    padding: var(--space-6) var(--space-4);
  }
}